mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Alem Tuzlak
8027595ac6
Integrates @json-render/{core,react} as an alternative BYOC generative-UI
rendering technology in langgraph-python, paired with Wave 4a's hashbrown
demo. Both demos share the same sales-dashboard catalog (MetricCard +
BarChart + PieChart) so the dashboard rows are directly comparable.
- Adds @json-render/{core,react} @ 0.18.0 pinned.
- New /demos/byoc-json-render page using CopilotChat's messageView.assistantMessage
slot to bridge CopilotKit output into @json-render/react Renderer.
- New /api/copilotkit-byoc-json-render route + byoc_json_render graph in
langgraph.json.
- Zod-validated catalog reusing @json-render/react/schema's prebuilt spec shape.
- System prompt with 3 worked examples inlined so the agent emits valid
{ root, elements } JSON deterministically.
- QA checklist + Playwright spec authored (E2E run deferred to post-deploy
stabilization).
- Adds shell-docs/shell-dojo demo-content.json to the check-binaries.sh
allowlist (same 1MB-allowed rationale as shell/demo-content.json).
2.3 KiB
2.3 KiB
QA: BYOC json-render — LangGraph (Python)
Prerequisites
- Demo deployed at
/demos/byoc-json-render. - Railway backend healthy (
showcase-langgraph-python-production.up.railway.app). OPENAI_API_KEYandLANGGRAPH_DEPLOYMENT_URLconfigured on the Next.js app.@json-render/core+@json-render/reactpresent inpackage.json(pinned to0.18.0).byoc_json_rendergraph registered inlanggraph.json.
Test Steps
1. Page load
- Navigate to
/demos/byoc-json-render. - Chat composer is visible.
- Three suggestion pills appear with titles: "Sales dashboard", "Revenue by category", "Expense trend".
- No console errors.
2. Sales dashboard suggestion
- Click the "Sales dashboard" suggestion.
- Within 60 seconds, a
data-testid="json-render-root"wrapper appears in the assistant bubble. - A
data-testid="metric-card"renders inside the wrapper. - A chart (
data-testid="bar-chart"ordata-testid="pie-chart") renders inside the wrapper. - No raw JSON text is shown once rendering finishes — the streaming JSON is replaced by components.
3. Revenue by category
- Click the "Revenue by category" suggestion.
- Within 60 seconds, a
data-testid="pie-chart"renders with multiple category slices + legend.
4. Expense trend
- Click the "Expense trend" suggestion.
- Within 60 seconds, a
data-testid="bar-chart"renders with month labels.
5. Free-form prompt
- Type "Show me a metric for quarterly revenue" and send.
- Verify at least one
metric-cardrenders; no console errors.
6. Multi-turn
- After a previous render is visible, send a follow-up prompt ("Now break that down by region").
- A new assistant message appears with a new json-render rendering — prior renders stay in the transcript.
7. Malformed output handling
- If the agent ever replies with non-JSON text (force it by asking "tell me a joke"), the chat falls back to rendering that raw text via the default assistant bubble. No crash, no stuck spinner.
Expected Results
- Suggestion renders land within 60 seconds. Budget is slightly higher than Wave 4a because a JSON
{ root, elements }spec is more verbose than hashbrown's token stream. - No uncaught errors in the console.
- Streaming falls back to plain text until the JSON parses, then swaps to rendered components.