Chapter 15 · CrewAI in Prod Multi-Agent Track Full-stack Project

From script to shippable product: the QA pipeline gets a web UI.

The Chapter 14 crew, productionized. A Starlette web app takes ticket IDs from a form, the crew emits Jira-importable CSV test cases and a real Playwright POM framework on disk, and every run is snapshotted to runs/<ticket>/ for browsing and download.

01 What students build

Same four agents, three production upgrades. Test cases become plain CSV with Jira's import columns (Summary, Issue Type, Priority, Labels, Components, Description), so QA leads bulk-import them in one click. The Playwright agent emits a multi-file framework using === FILE: path === markers that split_playwright_files() explodes into a real folder tree. And a lightweight Starlette + uvicorn UI wraps the whole thing at localhost:8000.

Jira-Importable CSV

No markdown fences, no prose: the Test Case Writer is prompted to emit a valid CSV body with h3-formatted descriptions, ready for Jira's bulk importer.

Framework, Not a Snippet

Post-processing splits the coder's raw output into advanced-playwright-framework/src/ with pages, modules, fixtures, tests, and testdata folders. Copy it into a repo and run.

Run Snapshots + UI

Each run is moved from output/ into runs/VWO-48/ so nothing gets clobbered. The Starlette UI lists runs, renders the file tree, and serves downloads.

02 Architecture

Web formticket IDs
──▶
Starlette UIlocalhost:8000
──▶
run_crew()4 agents · Jira MCP
──▶
output/plan · csv · raw code
playwright_raw.txtFILE markers
──▶
split_playwright_files()post-process
──▶
framework/src/pages · tests · fixtures
──▶
runs/<ticket>/snapshot · browse · download
one ticket per run: test_plan.md · test_cases.csv · advanced-playwright-framework/

03 Live demo (simulated with sample data)

This is a UI walkthrough with pre-baked sample data. In the course you run the real stack: uvicorn ui.app:app with CrewAI + mcp-atlassian behind it, and real artifacts landing in runs/. Edit the ticket list below: it knows VWO-24, VWO-48, VWO-105, and VWO-217.

qa-pipeline-ui · localhost:8000 demo · sample data

04 Inputs & outputs

What goes in

  • One or more Jira ticket IDs from the web form (or CLI)
  • Jira credentials passed to uvx mcp-atlassian via env
  • templates/testplan.md · the externalized plan template
  • Groq API key for llama-3.3-70b-versatile

What comes out

  • test_plan.md · 12-section plan per ticket
  • test_cases.csv · bulk-importable into Jira as Test issues
  • advanced-playwright-framework/src/ · POM framework tree
  • runs/<ticket>/ snapshot, browsable and downloadable in the UI

05 How it's built

Externalize the test plan structure into templates/testplan.md so the template evolves without touching agent code.
Rewrite Task 3's prompt to emit pure Jira-import CSV: quoted fields, h3 description blocks, no markdown fences, no prose.
Rewrite Task 4's prompt to emit multiple files delimited by === FILE: path === markers into playwright_raw.txt.
Post-process with split_playwright_files(): parse the markers and write each file under advanced-playwright-framework/src/.
Build the Starlette UI: a form posts ticket IDs, run_crew() executes, and _snapshot_output_for_ticket() moves artifacts to runs/<ticket>/.
Render each run's folder tree with Jinja2 templates and serve file downloads with FileResponse.

06 Tech stack

CrewAI · PythonStarlette + uvicornJinja2 templatesmcp-atlassian · uvxGroq llama-3.3-70bJira CSV importPlaywright POM frameworkruns/ snapshots