byoc-json-render.md

QA: BYOC json-render — Claude Agent SDK (Python)

Prerequisites

• Demo is deployed and accessible
• Agent backend is healthy (check /api/health)
• ANTHROPIC_API_KEY is set on the deployment

Test Steps

1. Basic Functionality

• Navigate to /demos/byoc-json-render
• Verify the chat surface loads inside the centered 4xl container
• Verify the three suggestion pills are visible: "Sales dashboard", "Revenue by category", "Expense trend"

2. Feature-Specific Checks

Sales dashboard (MetricCard + BarChart)

• Click the "Sales dashboard" suggestion pill
• Verify a data-testid="metric-card" element renders with a label and a dollar-formatted value
• Verify a data-testid="bar-chart" element renders inside the same data-testid="json-render-root" wrapper

Revenue by category (PieChart)

• Click "Revenue by category"
• Verify a data-testid="pie-chart" element renders with at least three legend rows

Expense trend (BarChart)

• Click "Expense trend"
• Verify data-testid="bar-chart" renders with three months of data

3. Streaming behaviour

• Observe the raw JSON streaming into the chat bubble briefly while the model emits the spec
• Verify the catalog components swap in cleanly once the JSON becomes valid — no flicker, no duplicate render

4. Error Handling

• Ask a free-form question that has nothing to do with dashboards (e.g. "What is 2+2?"). The agent should still reply with a JSON spec — it may emit a single MetricCard — and the page must NOT white-screen.
• No console errors during normal usage.

Expected Results

• Chat loads within 3 seconds
• Agent responds within 15 seconds (Claude opus)
• Components render from the json-render catalog wrapped in a single <JSONUIProvider> (no missing-provider crashes)