A demo app comparing three AI design patterns for customer support ticket handling, built with Claude's API. Originally created for a tech summit workshop on choosing the right level of AI autonomy for the job.
The core idea: not every problem needs an autonomous agent. This app demonstrates three patterns side by side so you can see the tradeoffs in action.
| Tier | Pattern | What It Does | When to Use It |
|---|---|---|---|
| 1 — Action Panel | Pre-decided actions, no AI | A human already made the decision — the UI just executes hardcoded API calls (issue refund, update status, send email). Zero tokens, zero cost. | The action is known and repeatable — you don't need AI at all |
| 2 — Workflow | Deterministic pipeline | Runs 4 steps in sequence: classify, extract order, check policy, draft response | The process is known but needs AI judgment at specific steps — you want consistency and auditability |
| 3 — Agent | Agentic loop with tools | Claude decides which tools to call (lookup orders, check policy, issue refunds, send emails) with extended thinking and human-in-the-loop approval | The problem is open-ended or requires judgment calls |
- Python 3.11+
- Node.js 18+
- An Anthropic API key
# Clone and enter the repo
git clone https://github.com/Packetz/tech-summit-ts.git
cd tech-summit-ts
# Create a .env file with your API key
echo "ANTHROPIC_API_KEY=your-key-here" > .env
# Set up the Python backend
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
# Set up the Next.js frontend
cd frontend
npm install
cd .../start.shThis starts the FastAPI backend on http://localhost:8000 and the Next.js frontend on http://localhost:3000. Open the frontend URL in your browser to try the demo.
Press Ctrl+C to stop both.
├── api/main.py # FastAPI routes, CORS, session management
├── tiers/
│ ├── classifier.py # Tier 1 — single classification call
│ ├── workflow.py # Tier 2 — 4-step deterministic pipeline
│ └── agent.py # Tier 3 — agentic loop with tools + HITL
├── tools/agent_tools.py # Tool definitions for Tier 3
├── db/ # SQLite schema, seed data, helpers
├── data/sample_tickets.py # Pre-built demo tickets per tier
├── frontend/src/
│ ├── app/page.tsx # Main page, all app state
│ ├── components/ # React components (TierSelector, AgentView, etc.)
│ └── lib/ # API helpers, SSE streaming, TypeScript types
├── start.sh # Starts both backend and frontend
└── tests/ # Python tests (mocked API calls)
pytestTests use unittest.mock to avoid real API calls. No API key needed.
- Backend: Python, FastAPI, SQLite
- Frontend: Next.js 14, React 18, Tailwind CSS
- AI: Claude API (
claude-sonnet-4-20250514) via the Anthropic Python SDK - Design: Neumorphic dark theme with Space Grotesk typography