Full custom chat surface built on `useAgent` — exercises the full rendering stack (text, per-tool renderers, frontend components) with backend get_weather / get_stock_price tools and a frontend highlight_note tool

/demos/headless-complete

Interactivity7

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

/demos/frontend-tools

Frontend Tools (Async)

useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result

/demos/frontend-tools-async

In-Chat HITL (useHumanInTheLoop — ergonomic API)

Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook

/demos/hitl-in-chat

In-App Human in the Loop (Frontend Tools + async HITL)

Agent requests approval via useFrontendTool with an async handler; the approval UI pops up as an app-level modal OUTSIDE the chat, and a completion callback resolves the pending tool Promise with the user's decision

/demos/hitl-in-app

Multimodal Attachments

Image and PDF attachments forwarded to Claude's vision-capable model

/demos/multimodal

Voice Input

Mic + sample audio transcription via a guarded OpenAI Whisper service

/demos/voice

Headless Interrupt (testing)

Resolve interrupts from a plain button grid — no chat, no useInterrupt render prop; the time-picker popup appears in the app surface outside the chat

/demos/interrupt-headless

Generative UI10

Declarative Generative UI (A2UI)

Canonical A2UI BYOC — custom catalog wired via a2ui.catalog on the provider; backend agent owns the generate_a2ui tool with injectA2UITool false

/demos/declarative-gen-ui

A2UI (Fixed Schema)

Fixed-schema A2UI — backend display_flight tool emits an a2ui_operations container that ships a JSON component tree plus per-call data; frontend catalog binds component names to React renderers

/demos/a2ui-fixed-schema

MCP Apps

MCP server-driven UI via activity renderers — runtime auto-applies the MCP Apps middleware and the built-in MCPAppsActivityRenderer paints sandboxed iframes inline in the chat

/demos/mcp-apps

Agentic Generative UI

Long-running agent tasks with generated UI

/demos/gen-ui-agent

Tool-Based Generative UI

Agent uses frontend tools to trigger UI generation — useFrontendTool with a render function paints structured haiku output as a styled card alongside the chat

/demos/gen-ui-tool-based

Declarative UI: Hashbrown

Declarative streaming UI via @hashbrownai/react useJsonParser — Claude emits a catalog-constrained UI envelope

/demos/declarative-hashbrown

Declarative UI: json-render

Declarative generative UI via @json-render/react — Claude emits a flat element-tree spec the renderer consumes

/demos/declarative-json-render

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library

/demos/open-gen-ui

Open-Ended Gen UI (Advanced: with frontend function calling)

Agent-authored UI that can invoke frontend sandbox functions from inside the iframe

/demos/open-gen-ui-advanced

In-Chat HITL (useInterrupt — low-level primitive)

Interactive time-picker component rendered inline in the chat via useFrontendTool with an async handler — the Promise resolves only when the user picks a slot or cancels

/demos/gen-ui-interrupt

Agent Capabilities9

Reasoning (Custom)

Custom reasoningMessage slot renders Claude extended-thinking deltas as a tagged amber banner

/demos/reasoning-custom

Reasoning (Default)

Built-in CopilotChatReasoningMessage card paints Claude extended-thinking output — zero custom slots

/demos/reasoning-default

Tool Rendering: Default Catch-all

Zero-config wildcard renderer via useDefaultRenderTool — built-in tool-call card paints every tool

/demos/tool-rendering-default-catchall

Tool Rendering: Custom Catch-all

Single branded wildcard renderer registered via useDefaultRenderTool({ render })

/demos/tool-rendering-custom-catchall

Tool Rendering

Backend agent tools rendered as UI components

/demos/tool-rendering

Tool Rendering: Reasoning Chain

Reasoning slot + per-tool renderers + wildcard catch-all in one cell

/demos/tool-rendering-reasoning-chain

Sub-Agents

Supervisor delegates to research / writing / critique sub-agents (each a single secondary Anthropic Messages call); every delegation appears in a live log via shared state

/demos/subagents

Authentication

Bearer-token gate via the V2 runtime onRequest hook with typed 401 surface

/demos/auth

Agent Config Object

forwardedProps route provider-configured tone/expertise/length into the Claude system prompt per turn

/demos/agent-config

Agent State4

Shared State (Read)

Agent reads frontend-provided state as context

/demos/shared-state-read

Shared State (Read + Write)

Bidirectional shared state — UI writes preferences via agent.setState, agent reads them every turn and writes notes back via a set_notes tool

/demos/shared-state-read-write

State Streaming

Per-token state delta streaming from agent to UI

/demos/shared-state-streaming

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

/demos/readonly-state-agent-context

Chat UI8

Beautiful Chat

Agentic Chat

Pre-Built: Sidebar

Pre-Built: Popup

Chat Customization (Slots)

Chat Customization (CSS)

Headless Chat (Simple)

Headless Chat (Complete)