Wave 4a. Port the starter's hashbrown renderer into a dedicated
single-mode langgraph-python demo at /demos/byoc-hashbrown so the
byoc-hashbrown row goes green on the dashboard.
- @hashbrownai/core + @hashbrownai/react + recharts deps added.
- Dedicated /api/copilotkit-byoc-hashbrown route with byoc_hashbrown
graph (ChatOpenAI + CopilotKitMiddleware) and a catalog-aware
system prompt coaching the LLM to emit a <ui>...</ui> envelope.
- Ported MetricCard + bar-chart + pie-chart + chart-config from
showcase/starters/template/frontend with data-testid hooks on
chart roots for E2E coverage.
- Ported hashbrown renderer with local RenderMessageProps /
AssistantMessage types so @copilotkit/react-ui and @ag-ui/core
do not become direct deps of this package.
- Updated hashbrown schema calls to @0.5.0-beta.4 surface:
enumeration for SalesStage; description-first streaming.array +
object; dropped the non-existent .optional() chain.
- v2 CopilotChat uses messageView.assistantMessage slot and
useConfigureSuggestions for 3 canned prompts (sales dashboard /
revenue by category / expense trend).
- QA checklist + Playwright E2E authored (not run pre-deploy).
- Manifest / constraints / docs-links updated and derived registry +
demo-content + docs-status bundles regenerated.
- Extend scripts/hooks/check-binaries.sh whitelist to include the
shell-docs and shell-dojo demo-content bundles so the pre-commit
hook does not reject the regenerated 1.5 MB files it produced.
Wire CopilotChat AttachmentsConfig (image + PDF, inline base64) into a
dedicated /demos/multimodal cell backed by a vision-capable LangGraph
agent (gpt-4o). Scoped to its own runtime route so the vision cost
stays on this demo.
- Dedicated /api/copilotkit-multimodal route registering the new
multimodal graph under the multimodal-demo slug
- src/agents/multimodal_agent.py with an AgentMiddleware that flattens
PDF content parts to text server-side via pypdf
- Try with sample image / PDF buttons that drive CopilotChats own
hidden file input via DataTransfer + change event, so the sample and
paperclip paths exercise the same useAttachments pipeline
- public/demo-files/ placeholder — sample.png / sample.pdf binaries
are produced by the user at the end of the Wave 2b rollout
- Manifest + registry + constraints + docs-links wired; normalized
multi-modal -> multimodal in constraints to match the feature
registry id
- QA checklist + Playwright E2E spec (not run yet — pending deploy)
- aimock fixtures for sample prompts so CI runs are deterministic
- Extend the check-binaries hook allowlist to cover the shell-docs and
shell-dojo demo-content.json mirrors (same size as shell/src/data,
already allowed) so regenerated derived data can be committed
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).
Introduces the "Frontend Tools (Async)" showcase cell — the async sibling
to the in-app-actions "Frontend Tools" cell. Demonstrates the canonical
async useFrontendTool pattern where the handler awaits a real client-side
async operation and RETURNS A RESULT the agent uses.
Concept: a simulated client-side "notes database" query. The frontend
registers a `query_notes` tool whose async handler sleeps 500ms (emulating
IndexedDB / localStorage / local-cache latency) then filters an in-browser
notes array by keyword and returns matching notes. The agent awaits the
result and summarizes matches for the user.
Files:
- src/agents/frontend_tools_async.py — helpful-assistant graph with no
backend tools; system prompt instructs the model to call `query_notes`
for note searches (schema is injected at runtime from the frontend via
CopilotKitMiddleware)
- src/app/demos/frontend-tools-async/page.tsx — CopilotKit provider +
CopilotChat, `useFrontendTool({ handler: async (...) => { await sleep;
return matches; } })` + per-tool render hook that shows a branded
NotesCard, `useConfigureSuggestions` with three prompts
- src/app/demos/frontend-tools-async/notes-card.tsx — emerald/teal
gradient card listing matched notes with tag chips
- langgraph.json — register `frontend_tools_async` graph
- manifest.yaml — features list + demos entry
- feature-registry.json — expanded description + docs URLs point to the
canonical /frontend-tools docs (shared with the sibling cell)
- constraints.yaml — added to all three generative_ui profiles
- docs-links.json — langgraph-python override pointing at /frontend-tools
Validated end-to-end: agent successfully calls `query_notes` with keywords
extracted from natural-language prompts, awaits the async handler, and
summarizes the returned notes for the user.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Introduces the "In-App Human in the Loop" cell, demonstrating the
canonical async useFrontendTool HITL pattern where the approval UI
lives OUTSIDE the chat surface.
Flow:
- Agent calls `request_user_approval` (frontend-registered)
- The async handler returns a Promise and stashes its `resolve` in
component state
- An app-level modal dialog (portal'd to <body>, grid-sibling of
CopilotChat — NOT inside the chat bubble tree) opens with the
agent's message + optional context
- User clicks Approve / Reject (with optional note) → completion
callback fires `resolve({ approved, reason })`
- Handler returns the value to the agent, which continues based on
approval outcome
Files:
- src/agents/hitl_in_app.py — support-ops agent with tools=[] and a
system prompt that requires calling `request_user_approval` before
any customer-affecting action
- src/app/demos/hitl-in-app/page.tsx — layout (support-inbox panel +
CopilotChat + app-level modal), frontend-tool registration,
resolve-capture pattern, suggestions
- src/app/demos/hitl-in-app/approval-dialog.tsx — modal (createPortal
to document.body) with Approve/Reject + optional reason textarea
- langgraph.json — register `hitl_in_app` graph
Starter mirror auto-generated.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The "Declarative Generative UI (A2UI — Custom Catalog)" single-file
prototype variant was a testing-only companion to the canonical
declarative-gen-ui 3-file BYOC pattern. Drop it everywhere:
- Delete src/app/demos/declarative-gen-ui-hardcoded/ cell directory
- Delete src/agents/a2ui_dynamic_hardcoded.py
- Remove from langgraph-python manifest.yaml (features + demos) and
langgraph.json graphs
- Remove from docs-links.json, route.ts (agent entry + a2ui agents
list), shared/feature-registry.json, shared/constraints.yaml
- Drop the Callout promoting it from a2ui/dynamic-schema.mdx
- Bump expected langgraph-python count 32 → 31 in generate-registry
test; regenerate all bundles
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Inlines the canonical starter's agent/main.py + agent/src/{todos,query,
a2ui_fixed_schema,a2ui_dynamic_schema}.py into a single `beautiful_chat.py`
graph (same shape as the 4084 clone), registers it in langgraph.json, and
colocates its data files (db.csv + flight schema JSON) under
`beautiful_chat_data/` so the shared `a2ui_schemas/` dir stays owned by
a2ui_fixed.py.
Adds a dedicated `/api/copilotkit-beautiful-chat` runtime endpoint that
mirrors the canonical's combined config (openGenerativeUI: true,
a2ui.injectA2UITool: false, mcpApps) — scoped to this one cell so the other
cells on `/api/copilotkit` keep their isolated per-demo `useFrontendTool` /
`useComponent` registrations. Removes `beautiful-chat` from the main route's
neutral-assistant fallthrough list now that it has a dedicated graph.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Before this commit, main.py carried the Tool-Based Generative UI chart
system prompt, and a long list of cells (agentic-chat, frontend-tools,
gen-ui-agent, tool-rendering-frontend-tools, gen-ui-tool-based) fell
through to that graph — so they all inherited the wrong "data
visualization assistant" prompt.
Split each cell into its own dedicated graph, mirroring 4084's per-cell
backends. main.py is now a neutral "helpful, concise assistant" used
only by UI/chrome demos (prebuilt-sidebar, chat-slots, headless-simple,
beautiful-chat, prebuilt-chat, etc.).
- agentic_chat, frontend_tools, gen_ui_agent: neutral variants with
minor system-prompt tweaks from 4084
- tool_rendering_frontend_tools: weather-assistant prompt; frontend owns
the tool via useFrontendTool
- gen_ui_tool_based: chart-viz system prompt (moved out of main.py)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Ports 4084 backend agents for shared-state-streaming, subagents, and
headless-complete into 4085's consolidated src/agents/ layout, registers
the new graphs in langgraph.json, wires them into the main and
copilotkit-mcp-apps routes.
- shared_state_streaming: StateStreamingMiddleware write_document tool
- subagents: supervisor + research/writing/critique sub-agents with
delegation log shared state
- headless-complete: get_weather + get_stock_price + MCP Apps routing;
routed through /api/copilotkit-mcp-apps to match 4084 pedagogy
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- manifest.yaml: add 12 new demo entries (chat-slots, headless-simple,
headless-complete, agentic-chat-reasoning, hitl-in-chat,
gen-ui-interrupt, declarative-gen-ui, a2ui-fixed-schema, mcp-apps,
open-gen-ui, prebuilt-chat/sidebar/popup).
- langgraph.json: register dedicated graphs for demos that need a
non-default backend (tool_rendering, interrupt_agent, reasoning_agent,
a2ui_dynamic, a2ui_fixed, mcp_apps, open_gen_ui).
- route.ts: register each new agent name; demos with dedicated graphs
are mapped explicitly outside the shared-graph loop. A2UI runtime
middleware scoped to `declarative-gen-ui` + `a2ui-fixed-schema` so
non-A2UI demos keep their `useComponent` renderers intact. MCP Apps
middleware wraps only the `mcp-apps` agent and synthesizes an
`ACTIVITY_SNAPSHOT` event when the backend `show_mcp_app` tool fires.
- New `/api/copilotkit-ogui/route.ts`: dedicated isolated runtime for
the `open-gen-ui` demo. `openGenerativeUI: {...}` advertises the
`openGenerativeUIEnabled` flag globally on the probe response, which
causes the CopilotKit provider's setTools effect to wipe per-demo
`useFrontendTool`/`useComponent` registrations; isolating to its own
endpoint keeps the default runtime clean.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Alem Tuzlak