Agent Frameworks

Google ADKGoogle AI Studio

CLI Start Command

Copy-paste command to clone the canonical starter

Google ADKGoogle AI Studio

Pre-Built: CopilotChat

Vanilla CopilotChat with three starter-prompt suggestions — the minimum-viable surface for free-form chat

Google ADKGoogle AI Studio

Chat Customization (CSS)

Default CopilotChat re-themed via CopilotKitCSSProperties

Google ADKGoogle AI Studio

Tool Rendering (Default Catch-all)

Out-of-the-box tool rendering — backend defines the tools; the frontend adds zero custom renderers and relies on CopilotKit's built-in default UI

Google ADKGoogle AI Studio

Tool Rendering (Custom Catch-all)

Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call

Google ADKGoogle AI Studio

Frontend Tools (In-App Actions)

Agent invokes client-side handlers registered with useFrontendTool

Google ADKGoogle AI Studio

Frontend Tools (Async)

useFrontendTool with an async handler — agent awaits a client-side async operation and uses the returned result

Google ADKGoogle AI Studio

Human In the Loop: In-chat

Time-slot picker rendered inline in the chat via `useHumanInTheLoop` — the agent requests user input, the frontend renders a TimePickerCard, and the user's choice resumes the agent.

Google ADKGoogle AI Studio

MCP Apps

Runtime mcpApps config wires an Excalidraw MCP server; the built-in MCPAppsActivityRenderer renders the sandboxed iframe inline in the chat with no app-side renderer

Google ADKGoogle AI Studio

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

Agent requests approval via a frontend tool 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

Google ADKGoogle AI Studio

Human in the Loop: Interrupts

Interactive time-picker rendered inline in the chat. ADK has no LangGraph interrupt() primitive, so this uses the Strategy-B adaptation — the agent calls a frontend schedule_meeting tool (useHumanInTheLoop) whose Promise resolves only once the user picks a slot, giving the same inline-card UX as the LangGraph reference.

Google ADKGoogle AI Studio

Tool Rendering

Custom per-tool renderers (WeatherCard, FlightListCard) plus a wildcard catch-all for every other tool

Google ADKGoogle AI Studio

Tool-Based Generative UI

Agent uses tools to trigger UI generation

Google ADKGoogle AI Studio

Agentic Generative UI

Canonical agent-state-driven Gen UI — the agent plans a live step list and emits it via state["steps"]; the frontend renders it via useAgent

Google ADKGoogle AI Studio

Shared State: Read-only

Recipe editor publishes form state via agent.setState; the agent reads the recipe context but does not mutate it (no backend tool — neutral default agent).

Google ADKGoogle AI Studio

Shared State: Read + Write

Bidirectional shared state — UI writes preferences via agent.setState; agent writes notes via a Command-returning tool

Google ADKGoogle AI Studio

State Streaming

Per-token state delta streaming from agent to UI via PredictStateMapping

Google ADKGoogle AI Studio

Sub-Agents

Multiple agents with visible task delegation

Google ADKGoogle AI Studio

Pre-Built: Sidebar

Docked sidebar chat via <CopilotSidebar />

Google ADKGoogle AI Studio

Pre-Built: Popup

Floating popup chat via <CopilotPopup />

Google ADKGoogle AI Studio

Chat Customization (Slots)

Customize CopilotChat via its slot system

Google ADKGoogle AI Studio

Headless Chat (Simple)

Minimal custom chat surface built on useAgent

Google ADKGoogle AI Studio

Headless Chat (Complete)

Full chat implementation built from scratch on useAgent

Google ADKGoogle AI Studio

Reasoning: Custom

Visible reasoning/thinking chain alongside the final answer (Gemini 3.1 thinking mode)

Google ADKGoogle AI Studio

Reasoning: Default

Built-in CopilotChatReasoningMessage rendering with no slot override.

Google ADKGoogle AI Studio

Declarative Generative UI (A2UI)

Canonical A2UI BYOC — custom catalog (Card/StatusBadge/Metric/InfoRow/PrimaryButton) wired via a2ui.catalog on the provider; the runtime injects the render_a2ui tool automatically (injectA2UITool=true) and the ag_ui_adk adapter auto-injects generate_a2ui

Google ADKGoogle AI Studio

Declarative Generative UI (A2UI — Fixed Schema)

A2UI rendering against a known client-side schema

Google ADKGoogle AI Studio

A2UI Error Recovery

Makes the A2UI validate->retry recovery loop visible — an invalid first render heals to a valid one, and an always-invalid render shows a graceful recovery-exhausted fallback. ADK-only (the recovery loop + hard-fail live in the ag_ui_adk middleware; the langgraph-python runtime path has no equivalent). Backend-owned via get_a2ui_tool (injectA2UITool=false); reuses the declarative-gen-ui catalog.

Google ADKGoogle AI Studio

Readonly State (Agent Context)

Frontend provides read-only context to the agent via useAgentContext

Google ADKGoogle AI Studio

Tool Rendering + Reasoning Chain (testing)

Sequential tool calls with reasoning tokens rendered side-by-side

Google ADKGoogle AI Studio

Declarative UI: json-render

Streaming hierarchical JSON UI spec rendered via @json-render/react, with a Zod-validated catalog (MetricCard + PieChart + BarChart)

Google ADKGoogle AI Studio

Beautiful Chat

Canonical polished starter chat — brand fonts, theme tokens, suggestion pills

Google ADKGoogle AI Studio

Multimodal Attachments

Image and PDF uploads via CopilotChat attachments, processed by a Gemini multimodal agent

Google ADKGoogle AI Studio

Authentication

Bearer-token gate via runtime onRequest hook with unauthenticated / authenticated states

Google ADKGoogle AI Studio

Declarative UI: Hashbrown

Streaming structured output via @hashbrownai/react, rendering a sales dashboard catalog (MetricCard + PieChart + BarChart)

Google ADKGoogle AI Studio

Fully Open-Ended Generative UI

Agent generates UI from an arbitrary component library

Google ADKGoogle AI Studio

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

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

Google ADKGoogle AI Studio

Voice Input

Speech-to-text via @copilotkit/voice with a bundled sample audio button

Google ADKGoogle AI Studio

Agent Config Object

Forward a typed config object (tone / expertise / response length) from the provider to the agent's dynamic system prompt