[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-copilotkit-copilotkit-develop":3,"mdc-8s2io2-key":53,"related-org-copilotkit-copilotkit-develop":3371,"related-repo-copilotkit-copilotkit-develop":3541},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":48,"sourceUrl":51,"mdContent":52},"copilotkit-develop","build AI features with CopilotKit","Use when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handling agent interrupts, and working with the CopilotKit runtime.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"copilotkit","CopilotKit","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fcopilotkit.png",[12,14,17,20],{"name":9,"slug":8,"type":13},"tag",{"name":15,"slug":16,"type":13},"AI Context","ai-context",{"name":18,"slug":19,"type":13},"Agents","agents",{"name":21,"slug":22,"type":13},"Frontend","frontend",35928,"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit","2026-07-12T08:06:28.856644",null,4434,[29,30,31,19,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"agent","agent-native","agentic-ai","ai","ai-agent","ai-assistant","assistant","assistant-chat-bots","copilot","copilot-chat","generative-ui","js","llm","nextjs","open-source","react","reactjs","ts","typescript",{"repoUrl":24,"stars":23,"forks":27,"topics":49,"description":50},[29,30,31,19,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"The Frontend Stack for Agents & Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol","https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit\u002Ftree\u002FHEAD\u002Fskills\u002Fcopilotkit-develop","---\nname: copilotkit-develop\ndescription: \"Use when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handling agent interrupts, and working with the CopilotKit runtime.\"\nversion: 1.0.0\n---\n\n# CopilotKit v2 Development Skill\n\n## Live Documentation (MCP)\n\nThis plugin includes an MCP server (`copilotkit-docs`) that provides `search-docs` and `search-code` tools for querying live CopilotKit documentation and source code.\n\n- **Claude Code:** Auto-configured by the plugin's `.mcp.json` -- no setup needed.\n- **Codex:** Requires manual configuration. See the [copilotkit-debug skill](..\u002Fcopilotkit-debug\u002FSKILL.md#mcp-setup) for setup instructions.\n\n## Architecture Overview\n\nCopilotKit v2 is built on the AG-UI protocol (`@ag-ui\u002Fclient` \u002F `@ag-ui\u002Fcore`). The stack has three layers:\n\n1. **Runtime** (`@copilotkit\u002Fruntime`, v2 symbols under `@copilotkit\u002Fruntime\u002Fv2`) -- Server-side. Hosts agents, handles SSE\u002FIntelligence transport, middleware, transcription.\n2. **Core** (`@copilotkit\u002Fcore`) -- Shared state management, tool registry, suggestion engine. Not imported directly by apps.\n3. **React** (`@copilotkit\u002Freact-core`, v2 symbols under `@copilotkit\u002Freact-core\u002Fv2`) -- Provider, chat components, hooks. Re-exports everything from `@ag-ui\u002Fclient` so apps need only one import.\n\n## Workflow\n\n### 1. Set Up the Runtime (Server)\n\nCreate a `CopilotRuntime` (or the explicit `CopilotSseRuntime` \u002F `CopilotIntelligenceRuntime`) and expose it via `createCopilotHonoHandler` (Hono) or `createCopilotExpressHandler` (Express).\n\n```ts\nimport {\n CopilotRuntime,\n createCopilotHonoHandler,\n} from \"@copilotkit\u002Fruntime\u002Fv2\";\nimport { LangGraphAgent } from \"@copilotkit\u002Fruntime\u002Flanggraph\";\nimport { handle } from \"hono\u002Fvercel\";\n\nconst runtime = new CopilotRuntime({\n agents: {\n myAgent: new LangGraphAgent({\n \u002F* ... *\u002F\n }),\n },\n});\n\nconst app = createCopilotHonoHandler({\n runtime,\n basePath: \"\u002Fapi\u002Fcopilotkit\",\n});\n\n\u002F\u002F Multi-route (the default): export every method the runtime serves.\n\u002F\u002F useThreads needs them all — rename via PATCH, delete via DELETE; archive\n\u002F\u002F uses the already-exported POST.\nexport const GET = handle(app);\nexport const POST = handle(app);\nexport const PATCH = handle(app);\nexport const DELETE = handle(app);\n```\n\n### 2. Wrap Your App with the Provider (Client)\n\nUse the `CopilotKit` provider (from `@copilotkit\u002Freact-core\u002Fv2`). It is the compatibility bridge across v1 and v2 and a strict superset of the legacy `CopilotKitProvider` -- all `CopilotKitProvider` props work on it.\n\n```tsx\nimport { CopilotKit } from \"@copilotkit\u002Freact-core\u002Fv2\";\n\nfunction App() {\n return (\n \u002F\u002F useSingleEndpoint={false} matches the multi-route backend above. The\n \u002F\u002F v1-compat CopilotKit bridge defaults it to true (single transport),\n \u002F\u002F which would 404 against a multi-route handler.\n \u003CCopilotKit runtimeUrl=\"\u002Fapi\u002Fcopilotkit\" useSingleEndpoint={false}>\n \u003CYourApp \u002F>\n \u003C\u002FCopilotKit>\n );\n}\n```\n\n### 3. Add a Chat UI\n\nUse `\u003CCopilotChat>`, `\u003CCopilotPopup>`, or `\u003CCopilotSidebar>`:\n\n```tsx\nimport { CopilotChat } from \"@copilotkit\u002Freact-core\u002Fv2\";\n\nfunction ChatPage() {\n return \u003CCopilotChat agentId=\"myAgent\" \u002F>;\n}\n```\n\n### 4. Register Frontend Tools\n\nLet the agent call functions in the browser:\n\n```tsx\nimport { useFrontendTool } from \"@copilotkit\u002Freact-core\u002Fv2\";\nimport { z } from \"zod\";\n\nuseFrontendTool({\n name: \"highlightCell\",\n description: \"Highlight a spreadsheet cell\",\n parameters: z.object({ row: z.number(), col: z.number() }),\n handler: async ({ row, col }) => {\n highlightCell(row, col);\n return \"done\";\n },\n});\n```\n\n### 5. Share Application Context\n\nProvide runtime data to the agent:\n\n```tsx\nimport { useAgentContext } from \"@copilotkit\u002Freact-core\u002Fv2\";\n\nuseAgentContext({\n description: \"The user's current shopping cart\",\n value: cart, \u002F\u002F any JSON-serializable value\n});\n```\n\n### 6. Handle Agent Interrupts\n\nWhen an agent pauses for human input:\n\n```tsx\nimport { useInterrupt } from \"@copilotkit\u002Freact-core\u002Fv2\";\n\nuseInterrupt({\n render: ({ event, resolve }) => (\n \u003Cdiv>\n \u003Cp>{event.value.question}\u003C\u002Fp>\n \u003Cbutton onClick={() => resolve({ approved: true })}>Approve\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n ),\n});\n```\n\n### 7. Render Tool Calls in Chat\n\nShow custom UI when tools execute:\n\n```tsx\nimport { useRenderTool } from \"@copilotkit\u002Freact-core\u002Fv2\";\nimport { z } from \"zod\";\n\nuseRenderTool(\n {\n name: \"searchDocs\",\n parameters: z.object({ query: z.string() }),\n render: ({ status, parameters, result }) => {\n if (status === \"executing\")\n return \u003CSpinner>Searching {parameters.query}...\u003C\u002FSpinner>;\n if (status === \"complete\") return \u003CResults data={result} \u002F>;\n return \u003Cdiv>Preparing...\u003C\u002Fdiv>;\n },\n },\n [],\n);\n```\n\n## Quick Reference: Hooks\n\n| Hook | Purpose |\n| -------------------------- | ------------------------------------------------------------------------------------------------- |\n| `useFrontendTool` | Register a tool the agent can call in the browser |\n| `useComponent` | Register a React component as a chat-rendered tool (convenience wrapper around `useFrontendTool`) |\n| `useAgentContext` | Share JSON-serializable application state with the agent |\n| `useAgent` | Get the `AbstractAgent` instance for an agent ID; subscribe to message\u002Fstate\u002Frun-status changes |\n| `useInterrupt` | Handle `on_interrupt` events from agents with render + optional handler\u002F`enabled` predicate |\n| `useHumanInTheLoop` | Register a tool that pauses execution until the user responds via a rendered UI |\n| `useRenderTool` | Register a renderer for tool calls (by name or wildcard `\"*\"`) |\n| `useDefaultRenderTool` | Register a wildcard `\"*\"` renderer using the built-in expandable card UI |\n| `useRenderToolCall` | Internal hook returning a function to resolve the correct renderer for a given tool call |\n| `useRenderActivityMessage` | Internal hook for rendering activity messages by type |\n| `useRenderCustomMessages` | Internal hook for rendering custom message decorators |\n| `useSuggestions` | Read the current suggestion list and control reload\u002Fclear |\n| `useConfigureSuggestions` | Register static or dynamic (LLM-generated) suggestion configs |\n| `useThreads` | List, rename, archive, and delete Intelligence platform threads |\n\n## Quick Reference: Components\n\n| Component | Purpose |\n| --------------------------- | ---------------------------------------------------------------------------------------------------------- |\n| `CopilotKit` | Root provider (from `@copilotkit\u002Freact-core\u002Fv2`) -- configures runtime URL, headers, agents, error handler |\n| `CopilotChat` | Full chat interface connected to an agent (inline layout) |\n| `CopilotPopup` | Chat in a floating popup with toggle button |\n| `CopilotSidebar` | Chat in a collapsible sidebar with toggle button |\n| `CopilotChatView` | Headless chat view with slots for message view, input, scroll, suggestions |\n| `CopilotChatInput` | Chat input textarea with send\u002Fstop\u002Ftranscribe controls |\n| `CopilotChatMessageView` | Renders the message list |\n| `CopilotChatSuggestionView` | Renders suggestion pills |\n\n## Quick Reference: Runtime\n\nAll v2 runtime symbols import from `@copilotkit\u002Fruntime\u002Fv2` (`createCopilotExpressHandler` from `@copilotkit\u002Fruntime\u002Fv2\u002Fexpress`).\n\n| Export | Purpose |\n| ----------------------------- | --------------------------------------------------------- |\n| `CopilotRuntime` | Auto-detecting runtime (delegates to SSE or Intelligence) |\n| `CopilotSseRuntime` | Explicit SSE-mode runtime |\n| `CopilotIntelligenceRuntime` | Intelligence-mode runtime with durable threads |\n| `createCopilotHonoHandler` | Create a Hono app with all CopilotKit routes |\n| `createCopilotExpressHandler` | Create an Express router with all CopilotKit routes |\n| `CopilotKitIntelligence` | Intelligence platform client configuration |\n",{"data":54,"body":56},{"name":4,"description":6,"version":55},"1.0.0",{"type":57,"children":58},"root",[59,68,75,106,149,155,176,254,260,267,311,906,912,946,1171,1177,1205,1330,1336,1341,1743,1749,1754,1893,1899,1904,2208,2214,2219,2735,2741,3047,3053,3215,3221,3247,3365],{"type":60,"tag":61,"props":62,"children":64},"element","h1",{"id":63},"copilotkit-v2-development-skill",[65],{"type":66,"value":67},"text","CopilotKit v2 Development Skill",{"type":60,"tag":69,"props":70,"children":72},"h2",{"id":71},"live-documentation-mcp",[73],{"type":66,"value":74},"Live Documentation (MCP)",{"type":60,"tag":76,"props":77,"children":78},"p",{},[79,81,88,90,96,98,104],{"type":66,"value":80},"This plugin includes an MCP server (",{"type":60,"tag":82,"props":83,"children":85},"code",{"className":84},[],[86],{"type":66,"value":87},"copilotkit-docs",{"type":66,"value":89},") that provides ",{"type":60,"tag":82,"props":91,"children":93},{"className":92},[],[94],{"type":66,"value":95},"search-docs",{"type":66,"value":97}," and ",{"type":60,"tag":82,"props":99,"children":101},{"className":100},[],[102],{"type":66,"value":103},"search-code",{"type":66,"value":105}," tools for querying live CopilotKit documentation and source code.",{"type":60,"tag":107,"props":108,"children":109},"ul",{},[110,130],{"type":60,"tag":111,"props":112,"children":113},"li",{},[114,120,122,128],{"type":60,"tag":115,"props":116,"children":117},"strong",{},[118],{"type":66,"value":119},"Claude Code:",{"type":66,"value":121}," Auto-configured by the plugin's ",{"type":60,"tag":82,"props":123,"children":125},{"className":124},[],[126],{"type":66,"value":127},".mcp.json",{"type":66,"value":129}," -- no setup needed.",{"type":60,"tag":111,"props":131,"children":132},{},[133,138,140,147],{"type":60,"tag":115,"props":134,"children":135},{},[136],{"type":66,"value":137},"Codex:",{"type":66,"value":139}," Requires manual configuration. See the ",{"type":60,"tag":141,"props":142,"children":144},"a",{"href":143},"..\u002Fcopilotkit-debug\u002FSKILL.md#mcp-setup",[145],{"type":66,"value":146},"copilotkit-debug skill",{"type":66,"value":148}," for setup instructions.",{"type":60,"tag":69,"props":150,"children":152},{"id":151},"architecture-overview",[153],{"type":66,"value":154},"Architecture Overview",{"type":60,"tag":76,"props":156,"children":157},{},[158,160,166,168,174],{"type":66,"value":159},"CopilotKit v2 is built on the AG-UI protocol (",{"type":60,"tag":82,"props":161,"children":163},{"className":162},[],[164],{"type":66,"value":165},"@ag-ui\u002Fclient",{"type":66,"value":167}," \u002F ",{"type":60,"tag":82,"props":169,"children":171},{"className":170},[],[172],{"type":66,"value":173},"@ag-ui\u002Fcore",{"type":66,"value":175},"). The stack has three layers:",{"type":60,"tag":177,"props":178,"children":179},"ol",{},[180,206,223],{"type":60,"tag":111,"props":181,"children":182},{},[183,188,190,196,198,204],{"type":60,"tag":115,"props":184,"children":185},{},[186],{"type":66,"value":187},"Runtime",{"type":66,"value":189}," (",{"type":60,"tag":82,"props":191,"children":193},{"className":192},[],[194],{"type":66,"value":195},"@copilotkit\u002Fruntime",{"type":66,"value":197},", v2 symbols under ",{"type":60,"tag":82,"props":199,"children":201},{"className":200},[],[202],{"type":66,"value":203},"@copilotkit\u002Fruntime\u002Fv2",{"type":66,"value":205},") -- Server-side. Hosts agents, handles SSE\u002FIntelligence transport, middleware, transcription.",{"type":60,"tag":111,"props":207,"children":208},{},[209,214,215,221],{"type":60,"tag":115,"props":210,"children":211},{},[212],{"type":66,"value":213},"Core",{"type":66,"value":189},{"type":60,"tag":82,"props":216,"children":218},{"className":217},[],[219],{"type":66,"value":220},"@copilotkit\u002Fcore",{"type":66,"value":222},") -- Shared state management, tool registry, suggestion engine. Not imported directly by apps.",{"type":60,"tag":111,"props":224,"children":225},{},[226,231,232,238,239,245,247,252],{"type":60,"tag":115,"props":227,"children":228},{},[229],{"type":66,"value":230},"React",{"type":66,"value":189},{"type":60,"tag":82,"props":233,"children":235},{"className":234},[],[236],{"type":66,"value":237},"@copilotkit\u002Freact-core",{"type":66,"value":197},{"type":60,"tag":82,"props":240,"children":242},{"className":241},[],[243],{"type":66,"value":244},"@copilotkit\u002Freact-core\u002Fv2",{"type":66,"value":246},") -- Provider, chat components, hooks. Re-exports everything from ",{"type":60,"tag":82,"props":248,"children":250},{"className":249},[],[251],{"type":66,"value":165},{"type":66,"value":253}," so apps need only one import.",{"type":60,"tag":69,"props":255,"children":257},{"id":256},"workflow",[258],{"type":66,"value":259},"Workflow",{"type":60,"tag":261,"props":262,"children":264},"h3",{"id":263},"_1-set-up-the-runtime-server",[265],{"type":66,"value":266},"1. Set Up the Runtime (Server)",{"type":60,"tag":76,"props":268,"children":269},{},[270,272,278,280,286,287,293,295,301,303,309],{"type":66,"value":271},"Create a ",{"type":60,"tag":82,"props":273,"children":275},{"className":274},[],[276],{"type":66,"value":277},"CopilotRuntime",{"type":66,"value":279}," (or the explicit ",{"type":60,"tag":82,"props":281,"children":283},{"className":282},[],[284],{"type":66,"value":285},"CopilotSseRuntime",{"type":66,"value":167},{"type":60,"tag":82,"props":288,"children":290},{"className":289},[],[291],{"type":66,"value":292},"CopilotIntelligenceRuntime",{"type":66,"value":294},") and expose it via ",{"type":60,"tag":82,"props":296,"children":298},{"className":297},[],[299],{"type":66,"value":300},"createCopilotHonoHandler",{"type":66,"value":302}," (Hono) or ",{"type":60,"tag":82,"props":304,"children":306},{"className":305},[],[307],{"type":66,"value":308},"createCopilotExpressHandler",{"type":66,"value":310}," (Express).",{"type":60,"tag":312,"props":313,"children":317},"pre",{"className":314,"code":315,"language":46,"meta":316,"style":316},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n CopilotRuntime,\n createCopilotHonoHandler,\n} from \"@copilotkit\u002Fruntime\u002Fv2\";\nimport { LangGraphAgent } from \"@copilotkit\u002Fruntime\u002Flanggraph\";\nimport { handle } from \"hono\u002Fvercel\";\n\nconst runtime = new CopilotRuntime({\n agents: {\n myAgent: new LangGraphAgent({\n \u002F* ... *\u002F\n }),\n },\n});\n\nconst app = createCopilotHonoHandler({\n runtime,\n basePath: \"\u002Fapi\u002Fcopilotkit\",\n});\n\n\u002F\u002F Multi-route (the default): export every method the runtime serves.\n\u002F\u002F useThreads needs them all — rename via PATCH, delete via DELETE; archive\n\u002F\u002F uses the already-exported POST.\nexport const GET = handle(app);\nexport const POST = handle(app);\nexport const PATCH = handle(app);\nexport const DELETE = handle(app);\n","",[318],{"type":60,"tag":82,"props":319,"children":320},{"__ignoreMap":316},[321,339,354,367,401,445,487,497,538,557,586,596,614,623,639,647,677,690,720,736,744,753,762,771,807,840,873],{"type":60,"tag":322,"props":323,"children":326},"span",{"class":324,"line":325},"line",1,[327,333],{"type":60,"tag":322,"props":328,"children":330},{"style":329},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[331],{"type":66,"value":332},"import",{"type":60,"tag":322,"props":334,"children":336},{"style":335},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[337],{"type":66,"value":338}," {\n",{"type":60,"tag":322,"props":340,"children":342},{"class":324,"line":341},2,[343,349],{"type":60,"tag":322,"props":344,"children":346},{"style":345},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[347],{"type":66,"value":348}," CopilotRuntime",{"type":60,"tag":322,"props":350,"children":351},{"style":335},[352],{"type":66,"value":353},",\n",{"type":60,"tag":322,"props":355,"children":357},{"class":324,"line":356},3,[358,363],{"type":60,"tag":322,"props":359,"children":360},{"style":345},[361],{"type":66,"value":362}," createCopilotHonoHandler",{"type":60,"tag":322,"props":364,"children":365},{"style":335},[366],{"type":66,"value":353},{"type":60,"tag":322,"props":368,"children":370},{"class":324,"line":369},4,[371,376,381,386,391,396],{"type":60,"tag":322,"props":372,"children":373},{"style":335},[374],{"type":66,"value":375},"}",{"type":60,"tag":322,"props":377,"children":378},{"style":329},[379],{"type":66,"value":380}," from",{"type":60,"tag":322,"props":382,"children":383},{"style":335},[384],{"type":66,"value":385}," \"",{"type":60,"tag":322,"props":387,"children":389},{"style":388},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[390],{"type":66,"value":203},{"type":60,"tag":322,"props":392,"children":393},{"style":335},[394],{"type":66,"value":395},"\"",{"type":60,"tag":322,"props":397,"children":398},{"style":335},[399],{"type":66,"value":400},";\n",{"type":60,"tag":322,"props":402,"children":404},{"class":324,"line":403},5,[405,409,414,419,424,428,432,437,441],{"type":60,"tag":322,"props":406,"children":407},{"style":329},[408],{"type":66,"value":332},{"type":60,"tag":322,"props":410,"children":411},{"style":335},[412],{"type":66,"value":413}," {",{"type":60,"tag":322,"props":415,"children":416},{"style":345},[417],{"type":66,"value":418}," LangGraphAgent",{"type":60,"tag":322,"props":420,"children":421},{"style":335},[422],{"type":66,"value":423}," }",{"type":60,"tag":322,"props":425,"children":426},{"style":329},[427],{"type":66,"value":380},{"type":60,"tag":322,"props":429,"children":430},{"style":335},[431],{"type":66,"value":385},{"type":60,"tag":322,"props":433,"children":434},{"style":388},[435],{"type":66,"value":436},"@copilotkit\u002Fruntime\u002Flanggraph",{"type":60,"tag":322,"props":438,"children":439},{"style":335},[440],{"type":66,"value":395},{"type":60,"tag":322,"props":442,"children":443},{"style":335},[444],{"type":66,"value":400},{"type":60,"tag":322,"props":446,"children":448},{"class":324,"line":447},6,[449,453,457,462,466,470,474,479,483],{"type":60,"tag":322,"props":450,"children":451},{"style":329},[452],{"type":66,"value":332},{"type":60,"tag":322,"props":454,"children":455},{"style":335},[456],{"type":66,"value":413},{"type":60,"tag":322,"props":458,"children":459},{"style":345},[460],{"type":66,"value":461}," handle",{"type":60,"tag":322,"props":463,"children":464},{"style":335},[465],{"type":66,"value":423},{"type":60,"tag":322,"props":467,"children":468},{"style":329},[469],{"type":66,"value":380},{"type":60,"tag":322,"props":471,"children":472},{"style":335},[473],{"type":66,"value":385},{"type":60,"tag":322,"props":475,"children":476},{"style":388},[477],{"type":66,"value":478},"hono\u002Fvercel",{"type":60,"tag":322,"props":480,"children":481},{"style":335},[482],{"type":66,"value":395},{"type":60,"tag":322,"props":484,"children":485},{"style":335},[486],{"type":66,"value":400},{"type":60,"tag":322,"props":488,"children":490},{"class":324,"line":489},7,[491],{"type":60,"tag":322,"props":492,"children":494},{"emptyLinePlaceholder":493},true,[495],{"type":66,"value":496},"\n",{"type":60,"tag":322,"props":498,"children":500},{"class":324,"line":499},8,[501,507,512,517,522,528,533],{"type":60,"tag":322,"props":502,"children":504},{"style":503},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[505],{"type":66,"value":506},"const",{"type":60,"tag":322,"props":508,"children":509},{"style":345},[510],{"type":66,"value":511}," runtime ",{"type":60,"tag":322,"props":513,"children":514},{"style":335},[515],{"type":66,"value":516},"=",{"type":60,"tag":322,"props":518,"children":519},{"style":335},[520],{"type":66,"value":521}," new",{"type":60,"tag":322,"props":523,"children":525},{"style":524},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[526],{"type":66,"value":527}," CopilotRuntime",{"type":60,"tag":322,"props":529,"children":530},{"style":345},[531],{"type":66,"value":532},"(",{"type":60,"tag":322,"props":534,"children":535},{"style":335},[536],{"type":66,"value":537},"{\n",{"type":60,"tag":322,"props":539,"children":541},{"class":324,"line":540},9,[542,548,553],{"type":60,"tag":322,"props":543,"children":545},{"style":544},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[546],{"type":66,"value":547}," agents",{"type":60,"tag":322,"props":549,"children":550},{"style":335},[551],{"type":66,"value":552},":",{"type":60,"tag":322,"props":554,"children":555},{"style":335},[556],{"type":66,"value":338},{"type":60,"tag":322,"props":558,"children":560},{"class":324,"line":559},10,[561,566,570,574,578,582],{"type":60,"tag":322,"props":562,"children":563},{"style":544},[564],{"type":66,"value":565}," myAgent",{"type":60,"tag":322,"props":567,"children":568},{"style":335},[569],{"type":66,"value":552},{"type":60,"tag":322,"props":571,"children":572},{"style":335},[573],{"type":66,"value":521},{"type":60,"tag":322,"props":575,"children":576},{"style":524},[577],{"type":66,"value":418},{"type":60,"tag":322,"props":579,"children":580},{"style":345},[581],{"type":66,"value":532},{"type":60,"tag":322,"props":583,"children":584},{"style":335},[585],{"type":66,"value":537},{"type":60,"tag":322,"props":587,"children":589},{"class":324,"line":588},11,[590],{"type":60,"tag":322,"props":591,"children":593},{"style":592},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[594],{"type":66,"value":595}," \u002F* ... *\u002F\n",{"type":60,"tag":322,"props":597,"children":599},{"class":324,"line":598},12,[600,605,610],{"type":60,"tag":322,"props":601,"children":602},{"style":335},[603],{"type":66,"value":604}," }",{"type":60,"tag":322,"props":606,"children":607},{"style":345},[608],{"type":66,"value":609},")",{"type":60,"tag":322,"props":611,"children":612},{"style":335},[613],{"type":66,"value":353},{"type":60,"tag":322,"props":615,"children":617},{"class":324,"line":616},13,[618],{"type":60,"tag":322,"props":619,"children":620},{"style":335},[621],{"type":66,"value":622}," },\n",{"type":60,"tag":322,"props":624,"children":626},{"class":324,"line":625},14,[627,631,635],{"type":60,"tag":322,"props":628,"children":629},{"style":335},[630],{"type":66,"value":375},{"type":60,"tag":322,"props":632,"children":633},{"style":345},[634],{"type":66,"value":609},{"type":60,"tag":322,"props":636,"children":637},{"style":335},[638],{"type":66,"value":400},{"type":60,"tag":322,"props":640,"children":642},{"class":324,"line":641},15,[643],{"type":60,"tag":322,"props":644,"children":645},{"emptyLinePlaceholder":493},[646],{"type":66,"value":496},{"type":60,"tag":322,"props":648,"children":650},{"class":324,"line":649},16,[651,655,660,664,669,673],{"type":60,"tag":322,"props":652,"children":653},{"style":503},[654],{"type":66,"value":506},{"type":60,"tag":322,"props":656,"children":657},{"style":345},[658],{"type":66,"value":659}," app ",{"type":60,"tag":322,"props":661,"children":662},{"style":335},[663],{"type":66,"value":516},{"type":60,"tag":322,"props":665,"children":666},{"style":524},[667],{"type":66,"value":668}," createCopilotHonoHandler",{"type":60,"tag":322,"props":670,"children":671},{"style":345},[672],{"type":66,"value":532},{"type":60,"tag":322,"props":674,"children":675},{"style":335},[676],{"type":66,"value":537},{"type":60,"tag":322,"props":678,"children":680},{"class":324,"line":679},17,[681,686],{"type":60,"tag":322,"props":682,"children":683},{"style":345},[684],{"type":66,"value":685}," runtime",{"type":60,"tag":322,"props":687,"children":688},{"style":335},[689],{"type":66,"value":353},{"type":60,"tag":322,"props":691,"children":693},{"class":324,"line":692},18,[694,699,703,707,712,716],{"type":60,"tag":322,"props":695,"children":696},{"style":544},[697],{"type":66,"value":698}," basePath",{"type":60,"tag":322,"props":700,"children":701},{"style":335},[702],{"type":66,"value":552},{"type":60,"tag":322,"props":704,"children":705},{"style":335},[706],{"type":66,"value":385},{"type":60,"tag":322,"props":708,"children":709},{"style":388},[710],{"type":66,"value":711},"\u002Fapi\u002Fcopilotkit",{"type":60,"tag":322,"props":713,"children":714},{"style":335},[715],{"type":66,"value":395},{"type":60,"tag":322,"props":717,"children":718},{"style":335},[719],{"type":66,"value":353},{"type":60,"tag":322,"props":721,"children":723},{"class":324,"line":722},19,[724,728,732],{"type":60,"tag":322,"props":725,"children":726},{"style":335},[727],{"type":66,"value":375},{"type":60,"tag":322,"props":729,"children":730},{"style":345},[731],{"type":66,"value":609},{"type":60,"tag":322,"props":733,"children":734},{"style":335},[735],{"type":66,"value":400},{"type":60,"tag":322,"props":737,"children":739},{"class":324,"line":738},20,[740],{"type":60,"tag":322,"props":741,"children":742},{"emptyLinePlaceholder":493},[743],{"type":66,"value":496},{"type":60,"tag":322,"props":745,"children":747},{"class":324,"line":746},21,[748],{"type":60,"tag":322,"props":749,"children":750},{"style":592},[751],{"type":66,"value":752},"\u002F\u002F Multi-route (the default): export every method the runtime serves.\n",{"type":60,"tag":322,"props":754,"children":756},{"class":324,"line":755},22,[757],{"type":60,"tag":322,"props":758,"children":759},{"style":592},[760],{"type":66,"value":761},"\u002F\u002F useThreads needs them all — rename via PATCH, delete via DELETE; archive\n",{"type":60,"tag":322,"props":763,"children":765},{"class":324,"line":764},23,[766],{"type":60,"tag":322,"props":767,"children":768},{"style":592},[769],{"type":66,"value":770},"\u002F\u002F uses the already-exported POST.\n",{"type":60,"tag":322,"props":772,"children":774},{"class":324,"line":773},24,[775,780,785,790,794,798,803],{"type":60,"tag":322,"props":776,"children":777},{"style":329},[778],{"type":66,"value":779},"export",{"type":60,"tag":322,"props":781,"children":782},{"style":503},[783],{"type":66,"value":784}," const",{"type":60,"tag":322,"props":786,"children":787},{"style":345},[788],{"type":66,"value":789}," GET ",{"type":60,"tag":322,"props":791,"children":792},{"style":335},[793],{"type":66,"value":516},{"type":60,"tag":322,"props":795,"children":796},{"style":524},[797],{"type":66,"value":461},{"type":60,"tag":322,"props":799,"children":800},{"style":345},[801],{"type":66,"value":802},"(app)",{"type":60,"tag":322,"props":804,"children":805},{"style":335},[806],{"type":66,"value":400},{"type":60,"tag":322,"props":808,"children":810},{"class":324,"line":809},25,[811,815,819,824,828,832,836],{"type":60,"tag":322,"props":812,"children":813},{"style":329},[814],{"type":66,"value":779},{"type":60,"tag":322,"props":816,"children":817},{"style":503},[818],{"type":66,"value":784},{"type":60,"tag":322,"props":820,"children":821},{"style":345},[822],{"type":66,"value":823}," POST ",{"type":60,"tag":322,"props":825,"children":826},{"style":335},[827],{"type":66,"value":516},{"type":60,"tag":322,"props":829,"children":830},{"style":524},[831],{"type":66,"value":461},{"type":60,"tag":322,"props":833,"children":834},{"style":345},[835],{"type":66,"value":802},{"type":60,"tag":322,"props":837,"children":838},{"style":335},[839],{"type":66,"value":400},{"type":60,"tag":322,"props":841,"children":843},{"class":324,"line":842},26,[844,848,852,857,861,865,869],{"type":60,"tag":322,"props":845,"children":846},{"style":329},[847],{"type":66,"value":779},{"type":60,"tag":322,"props":849,"children":850},{"style":503},[851],{"type":66,"value":784},{"type":60,"tag":322,"props":853,"children":854},{"style":345},[855],{"type":66,"value":856}," PATCH ",{"type":60,"tag":322,"props":858,"children":859},{"style":335},[860],{"type":66,"value":516},{"type":60,"tag":322,"props":862,"children":863},{"style":524},[864],{"type":66,"value":461},{"type":60,"tag":322,"props":866,"children":867},{"style":345},[868],{"type":66,"value":802},{"type":60,"tag":322,"props":870,"children":871},{"style":335},[872],{"type":66,"value":400},{"type":60,"tag":322,"props":874,"children":876},{"class":324,"line":875},27,[877,881,885,890,894,898,902],{"type":60,"tag":322,"props":878,"children":879},{"style":329},[880],{"type":66,"value":779},{"type":60,"tag":322,"props":882,"children":883},{"style":503},[884],{"type":66,"value":784},{"type":60,"tag":322,"props":886,"children":887},{"style":345},[888],{"type":66,"value":889}," DELETE ",{"type":60,"tag":322,"props":891,"children":892},{"style":335},[893],{"type":66,"value":516},{"type":60,"tag":322,"props":895,"children":896},{"style":524},[897],{"type":66,"value":461},{"type":60,"tag":322,"props":899,"children":900},{"style":345},[901],{"type":66,"value":802},{"type":60,"tag":322,"props":903,"children":904},{"style":335},[905],{"type":66,"value":400},{"type":60,"tag":261,"props":907,"children":909},{"id":908},"_2-wrap-your-app-with-the-provider-client",[910],{"type":66,"value":911},"2. Wrap Your App with the Provider (Client)",{"type":60,"tag":76,"props":913,"children":914},{},[915,917,922,924,929,931,937,939,944],{"type":66,"value":916},"Use the ",{"type":60,"tag":82,"props":918,"children":920},{"className":919},[],[921],{"type":66,"value":9},{"type":66,"value":923}," provider (from ",{"type":60,"tag":82,"props":925,"children":927},{"className":926},[],[928],{"type":66,"value":244},{"type":66,"value":930},"). It is the compatibility bridge across v1 and v2 and a strict superset of the legacy ",{"type":60,"tag":82,"props":932,"children":934},{"className":933},[],[935],{"type":66,"value":936},"CopilotKitProvider",{"type":66,"value":938}," -- all ",{"type":60,"tag":82,"props":940,"children":942},{"className":941},[],[943],{"type":66,"value":936},{"type":66,"value":945}," props work on it.",{"type":60,"tag":312,"props":947,"children":951},{"className":948,"code":949,"language":950,"meta":316,"style":316},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { CopilotKit } from \"@copilotkit\u002Freact-core\u002Fv2\";\n\nfunction App() {\n return (\n \u002F\u002F useSingleEndpoint={false} matches the multi-route backend above. The\n \u002F\u002F v1-compat CopilotKit bridge defaults it to true (single transport),\n \u002F\u002F which would 404 against a multi-route handler.\n \u003CCopilotKit runtimeUrl=\"\u002Fapi\u002Fcopilotkit\" useSingleEndpoint={false}>\n \u003CYourApp \u002F>\n \u003C\u002FCopilotKit>\n );\n}\n","tsx",[952],{"type":60,"tag":82,"props":953,"children":954},{"__ignoreMap":316},[955,995,1002,1024,1037,1045,1053,1061,1116,1134,1151,1163],{"type":60,"tag":322,"props":956,"children":957},{"class":324,"line":325},[958,962,966,971,975,979,983,987,991],{"type":60,"tag":322,"props":959,"children":960},{"style":329},[961],{"type":66,"value":332},{"type":60,"tag":322,"props":963,"children":964},{"style":335},[965],{"type":66,"value":413},{"type":60,"tag":322,"props":967,"children":968},{"style":345},[969],{"type":66,"value":970}," CopilotKit",{"type":60,"tag":322,"props":972,"children":973},{"style":335},[974],{"type":66,"value":423},{"type":60,"tag":322,"props":976,"children":977},{"style":329},[978],{"type":66,"value":380},{"type":60,"tag":322,"props":980,"children":981},{"style":335},[982],{"type":66,"value":385},{"type":60,"tag":322,"props":984,"children":985},{"style":388},[986],{"type":66,"value":244},{"type":60,"tag":322,"props":988,"children":989},{"style":335},[990],{"type":66,"value":395},{"type":60,"tag":322,"props":992,"children":993},{"style":335},[994],{"type":66,"value":400},{"type":60,"tag":322,"props":996,"children":997},{"class":324,"line":341},[998],{"type":60,"tag":322,"props":999,"children":1000},{"emptyLinePlaceholder":493},[1001],{"type":66,"value":496},{"type":60,"tag":322,"props":1003,"children":1004},{"class":324,"line":356},[1005,1010,1015,1020],{"type":60,"tag":322,"props":1006,"children":1007},{"style":503},[1008],{"type":66,"value":1009},"function",{"type":60,"tag":322,"props":1011,"children":1012},{"style":524},[1013],{"type":66,"value":1014}," App",{"type":60,"tag":322,"props":1016,"children":1017},{"style":335},[1018],{"type":66,"value":1019},"()",{"type":60,"tag":322,"props":1021,"children":1022},{"style":335},[1023],{"type":66,"value":338},{"type":60,"tag":322,"props":1025,"children":1026},{"class":324,"line":369},[1027,1032],{"type":60,"tag":322,"props":1028,"children":1029},{"style":329},[1030],{"type":66,"value":1031}," return",{"type":60,"tag":322,"props":1033,"children":1034},{"style":544},[1035],{"type":66,"value":1036}," (\n",{"type":60,"tag":322,"props":1038,"children":1039},{"class":324,"line":403},[1040],{"type":60,"tag":322,"props":1041,"children":1042},{"style":592},[1043],{"type":66,"value":1044}," \u002F\u002F useSingleEndpoint={false} matches the multi-route backend above. The\n",{"type":60,"tag":322,"props":1046,"children":1047},{"class":324,"line":447},[1048],{"type":60,"tag":322,"props":1049,"children":1050},{"style":592},[1051],{"type":66,"value":1052}," \u002F\u002F v1-compat CopilotKit bridge defaults it to true (single transport),\n",{"type":60,"tag":322,"props":1054,"children":1055},{"class":324,"line":489},[1056],{"type":60,"tag":322,"props":1057,"children":1058},{"style":592},[1059],{"type":66,"value":1060}," \u002F\u002F which would 404 against a multi-route handler.\n",{"type":60,"tag":322,"props":1062,"children":1063},{"class":324,"line":499},[1064,1069,1074,1079,1083,1087,1091,1095,1100,1105,1111],{"type":60,"tag":322,"props":1065,"children":1066},{"style":335},[1067],{"type":66,"value":1068}," \u003C",{"type":60,"tag":322,"props":1070,"children":1072},{"style":1071},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1073],{"type":66,"value":9},{"type":60,"tag":322,"props":1075,"children":1076},{"style":503},[1077],{"type":66,"value":1078}," runtimeUrl",{"type":60,"tag":322,"props":1080,"children":1081},{"style":335},[1082],{"type":66,"value":516},{"type":60,"tag":322,"props":1084,"children":1085},{"style":335},[1086],{"type":66,"value":395},{"type":60,"tag":322,"props":1088,"children":1089},{"style":388},[1090],{"type":66,"value":711},{"type":60,"tag":322,"props":1092,"children":1093},{"style":335},[1094],{"type":66,"value":395},{"type":60,"tag":322,"props":1096,"children":1097},{"style":503},[1098],{"type":66,"value":1099}," useSingleEndpoint",{"type":60,"tag":322,"props":1101,"children":1102},{"style":335},[1103],{"type":66,"value":1104},"={",{"type":60,"tag":322,"props":1106,"children":1108},{"style":1107},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[1109],{"type":66,"value":1110},"false",{"type":60,"tag":322,"props":1112,"children":1113},{"style":335},[1114],{"type":66,"value":1115},"}>\n",{"type":60,"tag":322,"props":1117,"children":1118},{"class":324,"line":540},[1119,1124,1129],{"type":60,"tag":322,"props":1120,"children":1121},{"style":335},[1122],{"type":66,"value":1123}," \u003C",{"type":60,"tag":322,"props":1125,"children":1126},{"style":1071},[1127],{"type":66,"value":1128},"YourApp",{"type":60,"tag":322,"props":1130,"children":1131},{"style":335},[1132],{"type":66,"value":1133}," \u002F>\n",{"type":60,"tag":322,"props":1135,"children":1136},{"class":324,"line":559},[1137,1142,1146],{"type":60,"tag":322,"props":1138,"children":1139},{"style":335},[1140],{"type":66,"value":1141}," \u003C\u002F",{"type":60,"tag":322,"props":1143,"children":1144},{"style":1071},[1145],{"type":66,"value":9},{"type":60,"tag":322,"props":1147,"children":1148},{"style":335},[1149],{"type":66,"value":1150},">\n",{"type":60,"tag":322,"props":1152,"children":1153},{"class":324,"line":588},[1154,1159],{"type":60,"tag":322,"props":1155,"children":1156},{"style":544},[1157],{"type":66,"value":1158}," )",{"type":60,"tag":322,"props":1160,"children":1161},{"style":335},[1162],{"type":66,"value":400},{"type":60,"tag":322,"props":1164,"children":1165},{"class":324,"line":598},[1166],{"type":60,"tag":322,"props":1167,"children":1168},{"style":335},[1169],{"type":66,"value":1170},"}\n",{"type":60,"tag":261,"props":1172,"children":1174},{"id":1173},"_3-add-a-chat-ui",[1175],{"type":66,"value":1176},"3. Add a Chat UI",{"type":60,"tag":76,"props":1178,"children":1179},{},[1180,1182,1188,1190,1196,1198,1204],{"type":66,"value":1181},"Use ",{"type":60,"tag":82,"props":1183,"children":1185},{"className":1184},[],[1186],{"type":66,"value":1187},"\u003CCopilotChat>",{"type":66,"value":1189},", ",{"type":60,"tag":82,"props":1191,"children":1193},{"className":1192},[],[1194],{"type":66,"value":1195},"\u003CCopilotPopup>",{"type":66,"value":1197},", or ",{"type":60,"tag":82,"props":1199,"children":1201},{"className":1200},[],[1202],{"type":66,"value":1203},"\u003CCopilotSidebar>",{"type":66,"value":552},{"type":60,"tag":312,"props":1206,"children":1208},{"className":948,"code":1207,"language":950,"meta":316,"style":316},"import { CopilotChat } from \"@copilotkit\u002Freact-core\u002Fv2\";\n\nfunction ChatPage() {\n return \u003CCopilotChat agentId=\"myAgent\" \u002F>;\n}\n",[1209],{"type":60,"tag":82,"props":1210,"children":1211},{"__ignoreMap":316},[1212,1252,1259,1279,1323],{"type":60,"tag":322,"props":1213,"children":1214},{"class":324,"line":325},[1215,1219,1223,1228,1232,1236,1240,1244,1248],{"type":60,"tag":322,"props":1216,"children":1217},{"style":329},[1218],{"type":66,"value":332},{"type":60,"tag":322,"props":1220,"children":1221},{"style":335},[1222],{"type":66,"value":413},{"type":60,"tag":322,"props":1224,"children":1225},{"style":345},[1226],{"type":66,"value":1227}," CopilotChat",{"type":60,"tag":322,"props":1229,"children":1230},{"style":335},[1231],{"type":66,"value":423},{"type":60,"tag":322,"props":1233,"children":1234},{"style":329},[1235],{"type":66,"value":380},{"type":60,"tag":322,"props":1237,"children":1238},{"style":335},[1239],{"type":66,"value":385},{"type":60,"tag":322,"props":1241,"children":1242},{"style":388},[1243],{"type":66,"value":244},{"type":60,"tag":322,"props":1245,"children":1246},{"style":335},[1247],{"type":66,"value":395},{"type":60,"tag":322,"props":1249,"children":1250},{"style":335},[1251],{"type":66,"value":400},{"type":60,"tag":322,"props":1253,"children":1254},{"class":324,"line":341},[1255],{"type":60,"tag":322,"props":1256,"children":1257},{"emptyLinePlaceholder":493},[1258],{"type":66,"value":496},{"type":60,"tag":322,"props":1260,"children":1261},{"class":324,"line":356},[1262,1266,1271,1275],{"type":60,"tag":322,"props":1263,"children":1264},{"style":503},[1265],{"type":66,"value":1009},{"type":60,"tag":322,"props":1267,"children":1268},{"style":524},[1269],{"type":66,"value":1270}," ChatPage",{"type":60,"tag":322,"props":1272,"children":1273},{"style":335},[1274],{"type":66,"value":1019},{"type":60,"tag":322,"props":1276,"children":1277},{"style":335},[1278],{"type":66,"value":338},{"type":60,"tag":322,"props":1280,"children":1281},{"class":324,"line":369},[1282,1286,1291,1296,1301,1305,1309,1314,1318],{"type":60,"tag":322,"props":1283,"children":1284},{"style":329},[1285],{"type":66,"value":1031},{"type":60,"tag":322,"props":1287,"children":1288},{"style":335},[1289],{"type":66,"value":1290}," \u003C",{"type":60,"tag":322,"props":1292,"children":1293},{"style":1071},[1294],{"type":66,"value":1295},"CopilotChat",{"type":60,"tag":322,"props":1297,"children":1298},{"style":503},[1299],{"type":66,"value":1300}," agentId",{"type":60,"tag":322,"props":1302,"children":1303},{"style":335},[1304],{"type":66,"value":516},{"type":60,"tag":322,"props":1306,"children":1307},{"style":335},[1308],{"type":66,"value":395},{"type":60,"tag":322,"props":1310,"children":1311},{"style":388},[1312],{"type":66,"value":1313},"myAgent",{"type":60,"tag":322,"props":1315,"children":1316},{"style":335},[1317],{"type":66,"value":395},{"type":60,"tag":322,"props":1319,"children":1320},{"style":335},[1321],{"type":66,"value":1322}," \u002F>;\n",{"type":60,"tag":322,"props":1324,"children":1325},{"class":324,"line":403},[1326],{"type":60,"tag":322,"props":1327,"children":1328},{"style":335},[1329],{"type":66,"value":1170},{"type":60,"tag":261,"props":1331,"children":1333},{"id":1332},"_4-register-frontend-tools",[1334],{"type":66,"value":1335},"4. Register Frontend Tools",{"type":60,"tag":76,"props":1337,"children":1338},{},[1339],{"type":66,"value":1340},"Let the agent call functions in the browser:",{"type":60,"tag":312,"props":1342,"children":1344},{"className":948,"code":1343,"language":950,"meta":316,"style":316},"import { useFrontendTool } from \"@copilotkit\u002Freact-core\u002Fv2\";\nimport { z } from \"zod\";\n\nuseFrontendTool({\n name: \"highlightCell\",\n description: \"Highlight a spreadsheet cell\",\n parameters: z.object({ row: z.number(), col: z.number() }),\n handler: async ({ row, col }) => {\n highlightCell(row, col);\n return \"done\";\n },\n});\n",[1345],{"type":60,"tag":82,"props":1346,"children":1347},{"__ignoreMap":316},[1348,1388,1429,1436,1452,1481,1510,1614,1663,1696,1721,1728],{"type":60,"tag":322,"props":1349,"children":1350},{"class":324,"line":325},[1351,1355,1359,1364,1368,1372,1376,1380,1384],{"type":60,"tag":322,"props":1352,"children":1353},{"style":329},[1354],{"type":66,"value":332},{"type":60,"tag":322,"props":1356,"children":1357},{"style":335},[1358],{"type":66,"value":413},{"type":60,"tag":322,"props":1360,"children":1361},{"style":345},[1362],{"type":66,"value":1363}," useFrontendTool",{"type":60,"tag":322,"props":1365,"children":1366},{"style":335},[1367],{"type":66,"value":423},{"type":60,"tag":322,"props":1369,"children":1370},{"style":329},[1371],{"type":66,"value":380},{"type":60,"tag":322,"props":1373,"children":1374},{"style":335},[1375],{"type":66,"value":385},{"type":60,"tag":322,"props":1377,"children":1378},{"style":388},[1379],{"type":66,"value":244},{"type":60,"tag":322,"props":1381,"children":1382},{"style":335},[1383],{"type":66,"value":395},{"type":60,"tag":322,"props":1385,"children":1386},{"style":335},[1387],{"type":66,"value":400},{"type":60,"tag":322,"props":1389,"children":1390},{"class":324,"line":341},[1391,1395,1399,1404,1408,1412,1416,1421,1425],{"type":60,"tag":322,"props":1392,"children":1393},{"style":329},[1394],{"type":66,"value":332},{"type":60,"tag":322,"props":1396,"children":1397},{"style":335},[1398],{"type":66,"value":413},{"type":60,"tag":322,"props":1400,"children":1401},{"style":345},[1402],{"type":66,"value":1403}," z",{"type":60,"tag":322,"props":1405,"children":1406},{"style":335},[1407],{"type":66,"value":423},{"type":60,"tag":322,"props":1409,"children":1410},{"style":329},[1411],{"type":66,"value":380},{"type":60,"tag":322,"props":1413,"children":1414},{"style":335},[1415],{"type":66,"value":385},{"type":60,"tag":322,"props":1417,"children":1418},{"style":388},[1419],{"type":66,"value":1420},"zod",{"type":60,"tag":322,"props":1422,"children":1423},{"style":335},[1424],{"type":66,"value":395},{"type":60,"tag":322,"props":1426,"children":1427},{"style":335},[1428],{"type":66,"value":400},{"type":60,"tag":322,"props":1430,"children":1431},{"class":324,"line":356},[1432],{"type":60,"tag":322,"props":1433,"children":1434},{"emptyLinePlaceholder":493},[1435],{"type":66,"value":496},{"type":60,"tag":322,"props":1437,"children":1438},{"class":324,"line":369},[1439,1444,1448],{"type":60,"tag":322,"props":1440,"children":1441},{"style":524},[1442],{"type":66,"value":1443},"useFrontendTool",{"type":60,"tag":322,"props":1445,"children":1446},{"style":345},[1447],{"type":66,"value":532},{"type":60,"tag":322,"props":1449,"children":1450},{"style":335},[1451],{"type":66,"value":537},{"type":60,"tag":322,"props":1453,"children":1454},{"class":324,"line":403},[1455,1460,1464,1468,1473,1477],{"type":60,"tag":322,"props":1456,"children":1457},{"style":544},[1458],{"type":66,"value":1459}," name",{"type":60,"tag":322,"props":1461,"children":1462},{"style":335},[1463],{"type":66,"value":552},{"type":60,"tag":322,"props":1465,"children":1466},{"style":335},[1467],{"type":66,"value":385},{"type":60,"tag":322,"props":1469,"children":1470},{"style":388},[1471],{"type":66,"value":1472},"highlightCell",{"type":60,"tag":322,"props":1474,"children":1475},{"style":335},[1476],{"type":66,"value":395},{"type":60,"tag":322,"props":1478,"children":1479},{"style":335},[1480],{"type":66,"value":353},{"type":60,"tag":322,"props":1482,"children":1483},{"class":324,"line":447},[1484,1489,1493,1497,1502,1506],{"type":60,"tag":322,"props":1485,"children":1486},{"style":544},[1487],{"type":66,"value":1488}," description",{"type":60,"tag":322,"props":1490,"children":1491},{"style":335},[1492],{"type":66,"value":552},{"type":60,"tag":322,"props":1494,"children":1495},{"style":335},[1496],{"type":66,"value":385},{"type":60,"tag":322,"props":1498,"children":1499},{"style":388},[1500],{"type":66,"value":1501},"Highlight a spreadsheet cell",{"type":60,"tag":322,"props":1503,"children":1504},{"style":335},[1505],{"type":66,"value":395},{"type":60,"tag":322,"props":1507,"children":1508},{"style":335},[1509],{"type":66,"value":353},{"type":60,"tag":322,"props":1511,"children":1512},{"class":324,"line":489},[1513,1518,1522,1526,1531,1536,1540,1545,1550,1554,1558,1562,1567,1571,1576,1581,1585,1589,1593,1597,1602,1606,1610],{"type":60,"tag":322,"props":1514,"children":1515},{"style":544},[1516],{"type":66,"value":1517}," parameters",{"type":60,"tag":322,"props":1519,"children":1520},{"style":335},[1521],{"type":66,"value":552},{"type":60,"tag":322,"props":1523,"children":1524},{"style":345},[1525],{"type":66,"value":1403},{"type":60,"tag":322,"props":1527,"children":1528},{"style":335},[1529],{"type":66,"value":1530},".",{"type":60,"tag":322,"props":1532,"children":1533},{"style":524},[1534],{"type":66,"value":1535},"object",{"type":60,"tag":322,"props":1537,"children":1538},{"style":345},[1539],{"type":66,"value":532},{"type":60,"tag":322,"props":1541,"children":1542},{"style":335},[1543],{"type":66,"value":1544},"{",{"type":60,"tag":322,"props":1546,"children":1547},{"style":544},[1548],{"type":66,"value":1549}," row",{"type":60,"tag":322,"props":1551,"children":1552},{"style":335},[1553],{"type":66,"value":552},{"type":60,"tag":322,"props":1555,"children":1556},{"style":345},[1557],{"type":66,"value":1403},{"type":60,"tag":322,"props":1559,"children":1560},{"style":335},[1561],{"type":66,"value":1530},{"type":60,"tag":322,"props":1563,"children":1564},{"style":524},[1565],{"type":66,"value":1566},"number",{"type":60,"tag":322,"props":1568,"children":1569},{"style":345},[1570],{"type":66,"value":1019},{"type":60,"tag":322,"props":1572,"children":1573},{"style":335},[1574],{"type":66,"value":1575},",",{"type":60,"tag":322,"props":1577,"children":1578},{"style":544},[1579],{"type":66,"value":1580}," col",{"type":60,"tag":322,"props":1582,"children":1583},{"style":335},[1584],{"type":66,"value":552},{"type":60,"tag":322,"props":1586,"children":1587},{"style":345},[1588],{"type":66,"value":1403},{"type":60,"tag":322,"props":1590,"children":1591},{"style":335},[1592],{"type":66,"value":1530},{"type":60,"tag":322,"props":1594,"children":1595},{"style":524},[1596],{"type":66,"value":1566},{"type":60,"tag":322,"props":1598,"children":1599},{"style":345},[1600],{"type":66,"value":1601},"() ",{"type":60,"tag":322,"props":1603,"children":1604},{"style":335},[1605],{"type":66,"value":375},{"type":60,"tag":322,"props":1607,"children":1608},{"style":345},[1609],{"type":66,"value":609},{"type":60,"tag":322,"props":1611,"children":1612},{"style":335},[1613],{"type":66,"value":353},{"type":60,"tag":322,"props":1615,"children":1616},{"class":324,"line":499},[1617,1622,1626,1631,1636,1641,1645,1649,1654,1659],{"type":60,"tag":322,"props":1618,"children":1619},{"style":524},[1620],{"type":66,"value":1621}," handler",{"type":60,"tag":322,"props":1623,"children":1624},{"style":335},[1625],{"type":66,"value":552},{"type":60,"tag":322,"props":1627,"children":1628},{"style":503},[1629],{"type":66,"value":1630}," async",{"type":60,"tag":322,"props":1632,"children":1633},{"style":335},[1634],{"type":66,"value":1635}," ({",{"type":60,"tag":322,"props":1637,"children":1639},{"style":1638},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[1640],{"type":66,"value":1549},{"type":60,"tag":322,"props":1642,"children":1643},{"style":335},[1644],{"type":66,"value":1575},{"type":60,"tag":322,"props":1646,"children":1647},{"style":1638},[1648],{"type":66,"value":1580},{"type":60,"tag":322,"props":1650,"children":1651},{"style":335},[1652],{"type":66,"value":1653}," })",{"type":60,"tag":322,"props":1655,"children":1656},{"style":503},[1657],{"type":66,"value":1658}," =>",{"type":60,"tag":322,"props":1660,"children":1661},{"style":335},[1662],{"type":66,"value":338},{"type":60,"tag":322,"props":1664,"children":1665},{"class":324,"line":540},[1666,1671,1675,1680,1684,1688,1692],{"type":60,"tag":322,"props":1667,"children":1668},{"style":524},[1669],{"type":66,"value":1670}," highlightCell",{"type":60,"tag":322,"props":1672,"children":1673},{"style":544},[1674],{"type":66,"value":532},{"type":60,"tag":322,"props":1676,"children":1677},{"style":345},[1678],{"type":66,"value":1679},"row",{"type":60,"tag":322,"props":1681,"children":1682},{"style":335},[1683],{"type":66,"value":1575},{"type":60,"tag":322,"props":1685,"children":1686},{"style":345},[1687],{"type":66,"value":1580},{"type":60,"tag":322,"props":1689,"children":1690},{"style":544},[1691],{"type":66,"value":609},{"type":60,"tag":322,"props":1693,"children":1694},{"style":335},[1695],{"type":66,"value":400},{"type":60,"tag":322,"props":1697,"children":1698},{"class":324,"line":559},[1699,1704,1708,1713,1717],{"type":60,"tag":322,"props":1700,"children":1701},{"style":329},[1702],{"type":66,"value":1703}," return",{"type":60,"tag":322,"props":1705,"children":1706},{"style":335},[1707],{"type":66,"value":385},{"type":60,"tag":322,"props":1709,"children":1710},{"style":388},[1711],{"type":66,"value":1712},"done",{"type":60,"tag":322,"props":1714,"children":1715},{"style":335},[1716],{"type":66,"value":395},{"type":60,"tag":322,"props":1718,"children":1719},{"style":335},[1720],{"type":66,"value":400},{"type":60,"tag":322,"props":1722,"children":1723},{"class":324,"line":588},[1724],{"type":60,"tag":322,"props":1725,"children":1726},{"style":335},[1727],{"type":66,"value":622},{"type":60,"tag":322,"props":1729,"children":1730},{"class":324,"line":598},[1731,1735,1739],{"type":60,"tag":322,"props":1732,"children":1733},{"style":335},[1734],{"type":66,"value":375},{"type":60,"tag":322,"props":1736,"children":1737},{"style":345},[1738],{"type":66,"value":609},{"type":60,"tag":322,"props":1740,"children":1741},{"style":335},[1742],{"type":66,"value":400},{"type":60,"tag":261,"props":1744,"children":1746},{"id":1745},"_5-share-application-context",[1747],{"type":66,"value":1748},"5. Share Application Context",{"type":60,"tag":76,"props":1750,"children":1751},{},[1752],{"type":66,"value":1753},"Provide runtime data to the agent:",{"type":60,"tag":312,"props":1755,"children":1757},{"className":948,"code":1756,"language":950,"meta":316,"style":316},"import { useAgentContext } from \"@copilotkit\u002Freact-core\u002Fv2\";\n\nuseAgentContext({\n description: \"The user's current shopping cart\",\n value: cart, \u002F\u002F any JSON-serializable value\n});\n",[1758],{"type":60,"tag":82,"props":1759,"children":1760},{"__ignoreMap":316},[1761,1801,1808,1824,1852,1878],{"type":60,"tag":322,"props":1762,"children":1763},{"class":324,"line":325},[1764,1768,1772,1777,1781,1785,1789,1793,1797],{"type":60,"tag":322,"props":1765,"children":1766},{"style":329},[1767],{"type":66,"value":332},{"type":60,"tag":322,"props":1769,"children":1770},{"style":335},[1771],{"type":66,"value":413},{"type":60,"tag":322,"props":1773,"children":1774},{"style":345},[1775],{"type":66,"value":1776}," useAgentContext",{"type":60,"tag":322,"props":1778,"children":1779},{"style":335},[1780],{"type":66,"value":423},{"type":60,"tag":322,"props":1782,"children":1783},{"style":329},[1784],{"type":66,"value":380},{"type":60,"tag":322,"props":1786,"children":1787},{"style":335},[1788],{"type":66,"value":385},{"type":60,"tag":322,"props":1790,"children":1791},{"style":388},[1792],{"type":66,"value":244},{"type":60,"tag":322,"props":1794,"children":1795},{"style":335},[1796],{"type":66,"value":395},{"type":60,"tag":322,"props":1798,"children":1799},{"style":335},[1800],{"type":66,"value":400},{"type":60,"tag":322,"props":1802,"children":1803},{"class":324,"line":341},[1804],{"type":60,"tag":322,"props":1805,"children":1806},{"emptyLinePlaceholder":493},[1807],{"type":66,"value":496},{"type":60,"tag":322,"props":1809,"children":1810},{"class":324,"line":356},[1811,1816,1820],{"type":60,"tag":322,"props":1812,"children":1813},{"style":524},[1814],{"type":66,"value":1815},"useAgentContext",{"type":60,"tag":322,"props":1817,"children":1818},{"style":345},[1819],{"type":66,"value":532},{"type":60,"tag":322,"props":1821,"children":1822},{"style":335},[1823],{"type":66,"value":537},{"type":60,"tag":322,"props":1825,"children":1826},{"class":324,"line":369},[1827,1831,1835,1839,1844,1848],{"type":60,"tag":322,"props":1828,"children":1829},{"style":544},[1830],{"type":66,"value":1488},{"type":60,"tag":322,"props":1832,"children":1833},{"style":335},[1834],{"type":66,"value":552},{"type":60,"tag":322,"props":1836,"children":1837},{"style":335},[1838],{"type":66,"value":385},{"type":60,"tag":322,"props":1840,"children":1841},{"style":388},[1842],{"type":66,"value":1843},"The user's current shopping cart",{"type":60,"tag":322,"props":1845,"children":1846},{"style":335},[1847],{"type":66,"value":395},{"type":60,"tag":322,"props":1849,"children":1850},{"style":335},[1851],{"type":66,"value":353},{"type":60,"tag":322,"props":1853,"children":1854},{"class":324,"line":403},[1855,1860,1864,1869,1873],{"type":60,"tag":322,"props":1856,"children":1857},{"style":544},[1858],{"type":66,"value":1859}," value",{"type":60,"tag":322,"props":1861,"children":1862},{"style":335},[1863],{"type":66,"value":552},{"type":60,"tag":322,"props":1865,"children":1866},{"style":345},[1867],{"type":66,"value":1868}," cart",{"type":60,"tag":322,"props":1870,"children":1871},{"style":335},[1872],{"type":66,"value":1575},{"type":60,"tag":322,"props":1874,"children":1875},{"style":592},[1876],{"type":66,"value":1877}," \u002F\u002F any JSON-serializable value\n",{"type":60,"tag":322,"props":1879,"children":1880},{"class":324,"line":447},[1881,1885,1889],{"type":60,"tag":322,"props":1882,"children":1883},{"style":335},[1884],{"type":66,"value":375},{"type":60,"tag":322,"props":1886,"children":1887},{"style":345},[1888],{"type":66,"value":609},{"type":60,"tag":322,"props":1890,"children":1891},{"style":335},[1892],{"type":66,"value":400},{"type":60,"tag":261,"props":1894,"children":1896},{"id":1895},"_6-handle-agent-interrupts",[1897],{"type":66,"value":1898},"6. Handle Agent Interrupts",{"type":60,"tag":76,"props":1900,"children":1901},{},[1902],{"type":66,"value":1903},"When an agent pauses for human input:",{"type":60,"tag":312,"props":1905,"children":1907},{"className":948,"code":1906,"language":950,"meta":316,"style":316},"import { useInterrupt } from \"@copilotkit\u002Freact-core\u002Fv2\";\n\nuseInterrupt({\n render: ({ event, resolve }) => (\n \u003Cdiv>\n \u003Cp>{event.value.question}\u003C\u002Fp>\n \u003Cbutton onClick={() => resolve({ approved: true })}>Approve\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n ),\n});\n",[1908],{"type":60,"tag":82,"props":1909,"children":1910},{"__ignoreMap":316},[1911,1951,1958,1974,2016,2032,2084,2167,2182,2193],{"type":60,"tag":322,"props":1912,"children":1913},{"class":324,"line":325},[1914,1918,1922,1927,1931,1935,1939,1943,1947],{"type":60,"tag":322,"props":1915,"children":1916},{"style":329},[1917],{"type":66,"value":332},{"type":60,"tag":322,"props":1919,"children":1920},{"style":335},[1921],{"type":66,"value":413},{"type":60,"tag":322,"props":1923,"children":1924},{"style":345},[1925],{"type":66,"value":1926}," useInterrupt",{"type":60,"tag":322,"props":1928,"children":1929},{"style":335},[1930],{"type":66,"value":423},{"type":60,"tag":322,"props":1932,"children":1933},{"style":329},[1934],{"type":66,"value":380},{"type":60,"tag":322,"props":1936,"children":1937},{"style":335},[1938],{"type":66,"value":385},{"type":60,"tag":322,"props":1940,"children":1941},{"style":388},[1942],{"type":66,"value":244},{"type":60,"tag":322,"props":1944,"children":1945},{"style":335},[1946],{"type":66,"value":395},{"type":60,"tag":322,"props":1948,"children":1949},{"style":335},[1950],{"type":66,"value":400},{"type":60,"tag":322,"props":1952,"children":1953},{"class":324,"line":341},[1954],{"type":60,"tag":322,"props":1955,"children":1956},{"emptyLinePlaceholder":493},[1957],{"type":66,"value":496},{"type":60,"tag":322,"props":1959,"children":1960},{"class":324,"line":356},[1961,1966,1970],{"type":60,"tag":322,"props":1962,"children":1963},{"style":524},[1964],{"type":66,"value":1965},"useInterrupt",{"type":60,"tag":322,"props":1967,"children":1968},{"style":345},[1969],{"type":66,"value":532},{"type":60,"tag":322,"props":1971,"children":1972},{"style":335},[1973],{"type":66,"value":537},{"type":60,"tag":322,"props":1975,"children":1976},{"class":324,"line":369},[1977,1982,1986,1990,1995,1999,2004,2008,2012],{"type":60,"tag":322,"props":1978,"children":1979},{"style":524},[1980],{"type":66,"value":1981}," render",{"type":60,"tag":322,"props":1983,"children":1984},{"style":335},[1985],{"type":66,"value":552},{"type":60,"tag":322,"props":1987,"children":1988},{"style":335},[1989],{"type":66,"value":1635},{"type":60,"tag":322,"props":1991,"children":1992},{"style":1638},[1993],{"type":66,"value":1994}," event",{"type":60,"tag":322,"props":1996,"children":1997},{"style":335},[1998],{"type":66,"value":1575},{"type":60,"tag":322,"props":2000,"children":2001},{"style":1638},[2002],{"type":66,"value":2003}," resolve",{"type":60,"tag":322,"props":2005,"children":2006},{"style":335},[2007],{"type":66,"value":1653},{"type":60,"tag":322,"props":2009,"children":2010},{"style":503},[2011],{"type":66,"value":1658},{"type":60,"tag":322,"props":2013,"children":2014},{"style":345},[2015],{"type":66,"value":1036},{"type":60,"tag":322,"props":2017,"children":2018},{"class":324,"line":403},[2019,2023,2028],{"type":60,"tag":322,"props":2020,"children":2021},{"style":335},[2022],{"type":66,"value":1068},{"type":60,"tag":322,"props":2024,"children":2025},{"style":544},[2026],{"type":66,"value":2027},"div",{"type":60,"tag":322,"props":2029,"children":2030},{"style":335},[2031],{"type":66,"value":1150},{"type":60,"tag":322,"props":2033,"children":2034},{"class":324,"line":447},[2035,2039,2043,2048,2053,2057,2062,2066,2071,2076,2080],{"type":60,"tag":322,"props":2036,"children":2037},{"style":335},[2038],{"type":66,"value":1123},{"type":60,"tag":322,"props":2040,"children":2041},{"style":544},[2042],{"type":66,"value":76},{"type":60,"tag":322,"props":2044,"children":2045},{"style":335},[2046],{"type":66,"value":2047},">{",{"type":60,"tag":322,"props":2049,"children":2050},{"style":345},[2051],{"type":66,"value":2052},"event",{"type":60,"tag":322,"props":2054,"children":2055},{"style":335},[2056],{"type":66,"value":1530},{"type":60,"tag":322,"props":2058,"children":2059},{"style":345},[2060],{"type":66,"value":2061},"value",{"type":60,"tag":322,"props":2063,"children":2064},{"style":335},[2065],{"type":66,"value":1530},{"type":60,"tag":322,"props":2067,"children":2068},{"style":345},[2069],{"type":66,"value":2070},"question",{"type":60,"tag":322,"props":2072,"children":2073},{"style":335},[2074],{"type":66,"value":2075},"}\u003C\u002F",{"type":60,"tag":322,"props":2077,"children":2078},{"style":544},[2079],{"type":66,"value":76},{"type":60,"tag":322,"props":2081,"children":2082},{"style":335},[2083],{"type":66,"value":1150},{"type":60,"tag":322,"props":2085,"children":2086},{"class":324,"line":489},[2087,2091,2096,2101,2106,2110,2114,2118,2122,2127,2131,2136,2140,2144,2149,2154,2159,2163],{"type":60,"tag":322,"props":2088,"children":2089},{"style":335},[2090],{"type":66,"value":1123},{"type":60,"tag":322,"props":2092,"children":2093},{"style":544},[2094],{"type":66,"value":2095},"button",{"type":60,"tag":322,"props":2097,"children":2098},{"style":503},[2099],{"type":66,"value":2100}," onClick",{"type":60,"tag":322,"props":2102,"children":2103},{"style":335},[2104],{"type":66,"value":2105},"={()",{"type":60,"tag":322,"props":2107,"children":2108},{"style":503},[2109],{"type":66,"value":1658},{"type":60,"tag":322,"props":2111,"children":2112},{"style":524},[2113],{"type":66,"value":2003},{"type":60,"tag":322,"props":2115,"children":2116},{"style":345},[2117],{"type":66,"value":532},{"type":60,"tag":322,"props":2119,"children":2120},{"style":335},[2121],{"type":66,"value":1544},{"type":60,"tag":322,"props":2123,"children":2124},{"style":544},[2125],{"type":66,"value":2126}," approved",{"type":60,"tag":322,"props":2128,"children":2129},{"style":335},[2130],{"type":66,"value":552},{"type":60,"tag":322,"props":2132,"children":2133},{"style":1107},[2134],{"type":66,"value":2135}," true",{"type":60,"tag":322,"props":2137,"children":2138},{"style":335},[2139],{"type":66,"value":423},{"type":60,"tag":322,"props":2141,"children":2142},{"style":345},[2143],{"type":66,"value":609},{"type":60,"tag":322,"props":2145,"children":2146},{"style":335},[2147],{"type":66,"value":2148},"}>",{"type":60,"tag":322,"props":2150,"children":2151},{"style":345},[2152],{"type":66,"value":2153},"Approve",{"type":60,"tag":322,"props":2155,"children":2156},{"style":335},[2157],{"type":66,"value":2158},"\u003C\u002F",{"type":60,"tag":322,"props":2160,"children":2161},{"style":544},[2162],{"type":66,"value":2095},{"type":60,"tag":322,"props":2164,"children":2165},{"style":335},[2166],{"type":66,"value":1150},{"type":60,"tag":322,"props":2168,"children":2169},{"class":324,"line":499},[2170,2174,2178],{"type":60,"tag":322,"props":2171,"children":2172},{"style":335},[2173],{"type":66,"value":1141},{"type":60,"tag":322,"props":2175,"children":2176},{"style":544},[2177],{"type":66,"value":2027},{"type":60,"tag":322,"props":2179,"children":2180},{"style":335},[2181],{"type":66,"value":1150},{"type":60,"tag":322,"props":2183,"children":2184},{"class":324,"line":540},[2185,2189],{"type":60,"tag":322,"props":2186,"children":2187},{"style":345},[2188],{"type":66,"value":1158},{"type":60,"tag":322,"props":2190,"children":2191},{"style":335},[2192],{"type":66,"value":353},{"type":60,"tag":322,"props":2194,"children":2195},{"class":324,"line":559},[2196,2200,2204],{"type":60,"tag":322,"props":2197,"children":2198},{"style":335},[2199],{"type":66,"value":375},{"type":60,"tag":322,"props":2201,"children":2202},{"style":345},[2203],{"type":66,"value":609},{"type":60,"tag":322,"props":2205,"children":2206},{"style":335},[2207],{"type":66,"value":400},{"type":60,"tag":261,"props":2209,"children":2211},{"id":2210},"_7-render-tool-calls-in-chat",[2212],{"type":66,"value":2213},"7. Render Tool Calls in Chat",{"type":60,"tag":76,"props":2215,"children":2216},{},[2217],{"type":66,"value":2218},"Show custom UI when tools execute:",{"type":60,"tag":312,"props":2220,"children":2222},{"className":948,"code":2221,"language":950,"meta":316,"style":316},"import { useRenderTool } from \"@copilotkit\u002Freact-core\u002Fv2\";\nimport { z } from \"zod\";\n\nuseRenderTool(\n {\n name: \"searchDocs\",\n parameters: z.object({ query: z.string() }),\n render: ({ status, parameters, result }) => {\n if (status === \"executing\")\n return \u003CSpinner>Searching {parameters.query}...\u003C\u002FSpinner>;\n if (status === \"complete\") return \u003CResults data={result} \u002F>;\n return \u003Cdiv>Preparing...\u003C\u002Fdiv>;\n },\n },\n [],\n);\n",[2223],{"type":60,"tag":82,"props":2224,"children":2225},{"__ignoreMap":316},[2226,2266,2305,2312,2325,2333,2362,2432,2483,2523,2590,2660,2697,2705,2712,2724],{"type":60,"tag":322,"props":2227,"children":2228},{"class":324,"line":325},[2229,2233,2237,2242,2246,2250,2254,2258,2262],{"type":60,"tag":322,"props":2230,"children":2231},{"style":329},[2232],{"type":66,"value":332},{"type":60,"tag":322,"props":2234,"children":2235},{"style":335},[2236],{"type":66,"value":413},{"type":60,"tag":322,"props":2238,"children":2239},{"style":345},[2240],{"type":66,"value":2241}," useRenderTool",{"type":60,"tag":322,"props":2243,"children":2244},{"style":335},[2245],{"type":66,"value":423},{"type":60,"tag":322,"props":2247,"children":2248},{"style":329},[2249],{"type":66,"value":380},{"type":60,"tag":322,"props":2251,"children":2252},{"style":335},[2253],{"type":66,"value":385},{"type":60,"tag":322,"props":2255,"children":2256},{"style":388},[2257],{"type":66,"value":244},{"type":60,"tag":322,"props":2259,"children":2260},{"style":335},[2261],{"type":66,"value":395},{"type":60,"tag":322,"props":2263,"children":2264},{"style":335},[2265],{"type":66,"value":400},{"type":60,"tag":322,"props":2267,"children":2268},{"class":324,"line":341},[2269,2273,2277,2281,2285,2289,2293,2297,2301],{"type":60,"tag":322,"props":2270,"children":2271},{"style":329},[2272],{"type":66,"value":332},{"type":60,"tag":322,"props":2274,"children":2275},{"style":335},[2276],{"type":66,"value":413},{"type":60,"tag":322,"props":2278,"children":2279},{"style":345},[2280],{"type":66,"value":1403},{"type":60,"tag":322,"props":2282,"children":2283},{"style":335},[2284],{"type":66,"value":423},{"type":60,"tag":322,"props":2286,"children":2287},{"style":329},[2288],{"type":66,"value":380},{"type":60,"tag":322,"props":2290,"children":2291},{"style":335},[2292],{"type":66,"value":385},{"type":60,"tag":322,"props":2294,"children":2295},{"style":388},[2296],{"type":66,"value":1420},{"type":60,"tag":322,"props":2298,"children":2299},{"style":335},[2300],{"type":66,"value":395},{"type":60,"tag":322,"props":2302,"children":2303},{"style":335},[2304],{"type":66,"value":400},{"type":60,"tag":322,"props":2306,"children":2307},{"class":324,"line":356},[2308],{"type":60,"tag":322,"props":2309,"children":2310},{"emptyLinePlaceholder":493},[2311],{"type":66,"value":496},{"type":60,"tag":322,"props":2313,"children":2314},{"class":324,"line":369},[2315,2320],{"type":60,"tag":322,"props":2316,"children":2317},{"style":524},[2318],{"type":66,"value":2319},"useRenderTool",{"type":60,"tag":322,"props":2321,"children":2322},{"style":345},[2323],{"type":66,"value":2324},"(\n",{"type":60,"tag":322,"props":2326,"children":2327},{"class":324,"line":403},[2328],{"type":60,"tag":322,"props":2329,"children":2330},{"style":335},[2331],{"type":66,"value":2332}," {\n",{"type":60,"tag":322,"props":2334,"children":2335},{"class":324,"line":447},[2336,2341,2345,2349,2354,2358],{"type":60,"tag":322,"props":2337,"children":2338},{"style":544},[2339],{"type":66,"value":2340}," name",{"type":60,"tag":322,"props":2342,"children":2343},{"style":335},[2344],{"type":66,"value":552},{"type":60,"tag":322,"props":2346,"children":2347},{"style":335},[2348],{"type":66,"value":385},{"type":60,"tag":322,"props":2350,"children":2351},{"style":388},[2352],{"type":66,"value":2353},"searchDocs",{"type":60,"tag":322,"props":2355,"children":2356},{"style":335},[2357],{"type":66,"value":395},{"type":60,"tag":322,"props":2359,"children":2360},{"style":335},[2361],{"type":66,"value":353},{"type":60,"tag":322,"props":2363,"children":2364},{"class":324,"line":489},[2365,2370,2374,2378,2382,2386,2390,2394,2399,2403,2407,2411,2416,2420,2424,2428],{"type":60,"tag":322,"props":2366,"children":2367},{"style":544},[2368],{"type":66,"value":2369}," parameters",{"type":60,"tag":322,"props":2371,"children":2372},{"style":335},[2373],{"type":66,"value":552},{"type":60,"tag":322,"props":2375,"children":2376},{"style":345},[2377],{"type":66,"value":1403},{"type":60,"tag":322,"props":2379,"children":2380},{"style":335},[2381],{"type":66,"value":1530},{"type":60,"tag":322,"props":2383,"children":2384},{"style":524},[2385],{"type":66,"value":1535},{"type":60,"tag":322,"props":2387,"children":2388},{"style":345},[2389],{"type":66,"value":532},{"type":60,"tag":322,"props":2391,"children":2392},{"style":335},[2393],{"type":66,"value":1544},{"type":60,"tag":322,"props":2395,"children":2396},{"style":544},[2397],{"type":66,"value":2398}," query",{"type":60,"tag":322,"props":2400,"children":2401},{"style":335},[2402],{"type":66,"value":552},{"type":60,"tag":322,"props":2404,"children":2405},{"style":345},[2406],{"type":66,"value":1403},{"type":60,"tag":322,"props":2408,"children":2409},{"style":335},[2410],{"type":66,"value":1530},{"type":60,"tag":322,"props":2412,"children":2413},{"style":524},[2414],{"type":66,"value":2415},"string",{"type":60,"tag":322,"props":2417,"children":2418},{"style":345},[2419],{"type":66,"value":1601},{"type":60,"tag":322,"props":2421,"children":2422},{"style":335},[2423],{"type":66,"value":375},{"type":60,"tag":322,"props":2425,"children":2426},{"style":345},[2427],{"type":66,"value":609},{"type":60,"tag":322,"props":2429,"children":2430},{"style":335},[2431],{"type":66,"value":353},{"type":60,"tag":322,"props":2433,"children":2434},{"class":324,"line":499},[2435,2440,2444,2448,2453,2457,2462,2466,2471,2475,2479],{"type":60,"tag":322,"props":2436,"children":2437},{"style":524},[2438],{"type":66,"value":2439}," render",{"type":60,"tag":322,"props":2441,"children":2442},{"style":335},[2443],{"type":66,"value":552},{"type":60,"tag":322,"props":2445,"children":2446},{"style":335},[2447],{"type":66,"value":1635},{"type":60,"tag":322,"props":2449,"children":2450},{"style":1638},[2451],{"type":66,"value":2452}," status",{"type":60,"tag":322,"props":2454,"children":2455},{"style":335},[2456],{"type":66,"value":1575},{"type":60,"tag":322,"props":2458,"children":2459},{"style":1638},[2460],{"type":66,"value":2461}," parameters",{"type":60,"tag":322,"props":2463,"children":2464},{"style":335},[2465],{"type":66,"value":1575},{"type":60,"tag":322,"props":2467,"children":2468},{"style":1638},[2469],{"type":66,"value":2470}," result",{"type":60,"tag":322,"props":2472,"children":2473},{"style":335},[2474],{"type":66,"value":1653},{"type":60,"tag":322,"props":2476,"children":2477},{"style":503},[2478],{"type":66,"value":1658},{"type":60,"tag":322,"props":2480,"children":2481},{"style":335},[2482],{"type":66,"value":338},{"type":60,"tag":322,"props":2484,"children":2485},{"class":324,"line":540},[2486,2491,2495,2500,2505,2509,2514,2518],{"type":60,"tag":322,"props":2487,"children":2488},{"style":329},[2489],{"type":66,"value":2490}," if",{"type":60,"tag":322,"props":2492,"children":2493},{"style":544},[2494],{"type":66,"value":189},{"type":60,"tag":322,"props":2496,"children":2497},{"style":345},[2498],{"type":66,"value":2499},"status",{"type":60,"tag":322,"props":2501,"children":2502},{"style":335},[2503],{"type":66,"value":2504}," ===",{"type":60,"tag":322,"props":2506,"children":2507},{"style":335},[2508],{"type":66,"value":385},{"type":60,"tag":322,"props":2510,"children":2511},{"style":388},[2512],{"type":66,"value":2513},"executing",{"type":60,"tag":322,"props":2515,"children":2516},{"style":335},[2517],{"type":66,"value":395},{"type":60,"tag":322,"props":2519,"children":2520},{"style":544},[2521],{"type":66,"value":2522},")\n",{"type":60,"tag":322,"props":2524,"children":2525},{"class":324,"line":559},[2526,2531,2535,2540,2545,2550,2554,2559,2563,2568,2572,2577,2581,2585],{"type":60,"tag":322,"props":2527,"children":2528},{"style":329},[2529],{"type":66,"value":2530}," return",{"type":60,"tag":322,"props":2532,"children":2533},{"style":335},[2534],{"type":66,"value":1290},{"type":60,"tag":322,"props":2536,"children":2537},{"style":1071},[2538],{"type":66,"value":2539},"Spinner",{"type":60,"tag":322,"props":2541,"children":2542},{"style":335},[2543],{"type":66,"value":2544},">",{"type":60,"tag":322,"props":2546,"children":2547},{"style":345},[2548],{"type":66,"value":2549},"Searching ",{"type":60,"tag":322,"props":2551,"children":2552},{"style":335},[2553],{"type":66,"value":1544},{"type":60,"tag":322,"props":2555,"children":2556},{"style":345},[2557],{"type":66,"value":2558},"parameters",{"type":60,"tag":322,"props":2560,"children":2561},{"style":335},[2562],{"type":66,"value":1530},{"type":60,"tag":322,"props":2564,"children":2565},{"style":345},[2566],{"type":66,"value":2567},"query",{"type":60,"tag":322,"props":2569,"children":2570},{"style":335},[2571],{"type":66,"value":375},{"type":60,"tag":322,"props":2573,"children":2574},{"style":345},[2575],{"type":66,"value":2576},"...",{"type":60,"tag":322,"props":2578,"children":2579},{"style":335},[2580],{"type":66,"value":2158},{"type":60,"tag":322,"props":2582,"children":2583},{"style":1071},[2584],{"type":66,"value":2539},{"type":60,"tag":322,"props":2586,"children":2587},{"style":335},[2588],{"type":66,"value":2589},">;\n",{"type":60,"tag":322,"props":2591,"children":2592},{"class":324,"line":588},[2593,2597,2601,2605,2609,2613,2618,2622,2627,2632,2636,2641,2646,2650,2655],{"type":60,"tag":322,"props":2594,"children":2595},{"style":329},[2596],{"type":66,"value":2490},{"type":60,"tag":322,"props":2598,"children":2599},{"style":544},[2600],{"type":66,"value":189},{"type":60,"tag":322,"props":2602,"children":2603},{"style":345},[2604],{"type":66,"value":2499},{"type":60,"tag":322,"props":2606,"children":2607},{"style":335},[2608],{"type":66,"value":2504},{"type":60,"tag":322,"props":2610,"children":2611},{"style":335},[2612],{"type":66,"value":385},{"type":60,"tag":322,"props":2614,"children":2615},{"style":388},[2616],{"type":66,"value":2617},"complete",{"type":60,"tag":322,"props":2619,"children":2620},{"style":335},[2621],{"type":66,"value":395},{"type":60,"tag":322,"props":2623,"children":2624},{"style":544},[2625],{"type":66,"value":2626},") ",{"type":60,"tag":322,"props":2628,"children":2629},{"style":329},[2630],{"type":66,"value":2631},"return",{"type":60,"tag":322,"props":2633,"children":2634},{"style":335},[2635],{"type":66,"value":1290},{"type":60,"tag":322,"props":2637,"children":2638},{"style":1071},[2639],{"type":66,"value":2640},"Results",{"type":60,"tag":322,"props":2642,"children":2643},{"style":503},[2644],{"type":66,"value":2645}," data",{"type":60,"tag":322,"props":2647,"children":2648},{"style":335},[2649],{"type":66,"value":1104},{"type":60,"tag":322,"props":2651,"children":2652},{"style":345},[2653],{"type":66,"value":2654},"result",{"type":60,"tag":322,"props":2656,"children":2657},{"style":335},[2658],{"type":66,"value":2659},"} \u002F>;\n",{"type":60,"tag":322,"props":2661,"children":2662},{"class":324,"line":598},[2663,2668,2672,2676,2680,2685,2689,2693],{"type":60,"tag":322,"props":2664,"children":2665},{"style":329},[2666],{"type":66,"value":2667}," return",{"type":60,"tag":322,"props":2669,"children":2670},{"style":335},[2671],{"type":66,"value":1290},{"type":60,"tag":322,"props":2673,"children":2674},{"style":544},[2675],{"type":66,"value":2027},{"type":60,"tag":322,"props":2677,"children":2678},{"style":335},[2679],{"type":66,"value":2544},{"type":60,"tag":322,"props":2681,"children":2682},{"style":345},[2683],{"type":66,"value":2684},"Preparing...",{"type":60,"tag":322,"props":2686,"children":2687},{"style":335},[2688],{"type":66,"value":2158},{"type":60,"tag":322,"props":2690,"children":2691},{"style":544},[2692],{"type":66,"value":2027},{"type":60,"tag":322,"props":2694,"children":2695},{"style":335},[2696],{"type":66,"value":2589},{"type":60,"tag":322,"props":2698,"children":2699},{"class":324,"line":616},[2700],{"type":60,"tag":322,"props":2701,"children":2702},{"style":335},[2703],{"type":66,"value":2704}," },\n",{"type":60,"tag":322,"props":2706,"children":2707},{"class":324,"line":625},[2708],{"type":60,"tag":322,"props":2709,"children":2710},{"style":335},[2711],{"type":66,"value":622},{"type":60,"tag":322,"props":2713,"children":2714},{"class":324,"line":641},[2715,2720],{"type":60,"tag":322,"props":2716,"children":2717},{"style":345},[2718],{"type":66,"value":2719}," []",{"type":60,"tag":322,"props":2721,"children":2722},{"style":335},[2723],{"type":66,"value":353},{"type":60,"tag":322,"props":2725,"children":2726},{"class":324,"line":649},[2727,2731],{"type":60,"tag":322,"props":2728,"children":2729},{"style":345},[2730],{"type":66,"value":609},{"type":60,"tag":322,"props":2732,"children":2733},{"style":335},[2734],{"type":66,"value":400},{"type":60,"tag":69,"props":2736,"children":2738},{"id":2737},"quick-reference-hooks",[2739],{"type":66,"value":2740},"Quick Reference: Hooks",{"type":60,"tag":2742,"props":2743,"children":2744},"table",{},[2745,2764],{"type":60,"tag":2746,"props":2747,"children":2748},"thead",{},[2749],{"type":60,"tag":2750,"props":2751,"children":2752},"tr",{},[2753,2759],{"type":60,"tag":2754,"props":2755,"children":2756},"th",{},[2757],{"type":66,"value":2758},"Hook",{"type":60,"tag":2754,"props":2760,"children":2761},{},[2762],{"type":66,"value":2763},"Purpose",{"type":60,"tag":2765,"props":2766,"children":2767},"tbody",{},[2768,2785,2808,2824,2849,2881,2898,2921,2945,2962,2979,2996,3013,3030],{"type":60,"tag":2750,"props":2769,"children":2770},{},[2771,2780],{"type":60,"tag":2772,"props":2773,"children":2774},"td",{},[2775],{"type":60,"tag":82,"props":2776,"children":2778},{"className":2777},[],[2779],{"type":66,"value":1443},{"type":60,"tag":2772,"props":2781,"children":2782},{},[2783],{"type":66,"value":2784},"Register a tool the agent can call in the browser",{"type":60,"tag":2750,"props":2786,"children":2787},{},[2788,2797],{"type":60,"tag":2772,"props":2789,"children":2790},{},[2791],{"type":60,"tag":82,"props":2792,"children":2794},{"className":2793},[],[2795],{"type":66,"value":2796},"useComponent",{"type":60,"tag":2772,"props":2798,"children":2799},{},[2800,2802,2807],{"type":66,"value":2801},"Register a React component as a chat-rendered tool (convenience wrapper around ",{"type":60,"tag":82,"props":2803,"children":2805},{"className":2804},[],[2806],{"type":66,"value":1443},{"type":66,"value":609},{"type":60,"tag":2750,"props":2809,"children":2810},{},[2811,2819],{"type":60,"tag":2772,"props":2812,"children":2813},{},[2814],{"type":60,"tag":82,"props":2815,"children":2817},{"className":2816},[],[2818],{"type":66,"value":1815},{"type":60,"tag":2772,"props":2820,"children":2821},{},[2822],{"type":66,"value":2823},"Share JSON-serializable application state with the agent",{"type":60,"tag":2750,"props":2825,"children":2826},{},[2827,2836],{"type":60,"tag":2772,"props":2828,"children":2829},{},[2830],{"type":60,"tag":82,"props":2831,"children":2833},{"className":2832},[],[2834],{"type":66,"value":2835},"useAgent",{"type":60,"tag":2772,"props":2837,"children":2838},{},[2839,2841,2847],{"type":66,"value":2840},"Get the ",{"type":60,"tag":82,"props":2842,"children":2844},{"className":2843},[],[2845],{"type":66,"value":2846},"AbstractAgent",{"type":66,"value":2848}," instance for an agent ID; subscribe to message\u002Fstate\u002Frun-status changes",{"type":60,"tag":2750,"props":2850,"children":2851},{},[2852,2860],{"type":60,"tag":2772,"props":2853,"children":2854},{},[2855],{"type":60,"tag":82,"props":2856,"children":2858},{"className":2857},[],[2859],{"type":66,"value":1965},{"type":60,"tag":2772,"props":2861,"children":2862},{},[2863,2865,2871,2873,2879],{"type":66,"value":2864},"Handle ",{"type":60,"tag":82,"props":2866,"children":2868},{"className":2867},[],[2869],{"type":66,"value":2870},"on_interrupt",{"type":66,"value":2872}," events from agents with render + optional handler\u002F",{"type":60,"tag":82,"props":2874,"children":2876},{"className":2875},[],[2877],{"type":66,"value":2878},"enabled",{"type":66,"value":2880}," predicate",{"type":60,"tag":2750,"props":2882,"children":2883},{},[2884,2893],{"type":60,"tag":2772,"props":2885,"children":2886},{},[2887],{"type":60,"tag":82,"props":2888,"children":2890},{"className":2889},[],[2891],{"type":66,"value":2892},"useHumanInTheLoop",{"type":60,"tag":2772,"props":2894,"children":2895},{},[2896],{"type":66,"value":2897},"Register a tool that pauses execution until the user responds via a rendered UI",{"type":60,"tag":2750,"props":2899,"children":2900},{},[2901,2909],{"type":60,"tag":2772,"props":2902,"children":2903},{},[2904],{"type":60,"tag":82,"props":2905,"children":2907},{"className":2906},[],[2908],{"type":66,"value":2319},{"type":60,"tag":2772,"props":2910,"children":2911},{},[2912,2914,2920],{"type":66,"value":2913},"Register a renderer for tool calls (by name or wildcard ",{"type":60,"tag":82,"props":2915,"children":2917},{"className":2916},[],[2918],{"type":66,"value":2919},"\"*\"",{"type":66,"value":609},{"type":60,"tag":2750,"props":2922,"children":2923},{},[2924,2933],{"type":60,"tag":2772,"props":2925,"children":2926},{},[2927],{"type":60,"tag":82,"props":2928,"children":2930},{"className":2929},[],[2931],{"type":66,"value":2932},"useDefaultRenderTool",{"type":60,"tag":2772,"props":2934,"children":2935},{},[2936,2938,2943],{"type":66,"value":2937},"Register a wildcard ",{"type":60,"tag":82,"props":2939,"children":2941},{"className":2940},[],[2942],{"type":66,"value":2919},{"type":66,"value":2944}," renderer using the built-in expandable card UI",{"type":60,"tag":2750,"props":2946,"children":2947},{},[2948,2957],{"type":60,"tag":2772,"props":2949,"children":2950},{},[2951],{"type":60,"tag":82,"props":2952,"children":2954},{"className":2953},[],[2955],{"type":66,"value":2956},"useRenderToolCall",{"type":60,"tag":2772,"props":2958,"children":2959},{},[2960],{"type":66,"value":2961},"Internal hook returning a function to resolve the correct renderer for a given tool call",{"type":60,"tag":2750,"props":2963,"children":2964},{},[2965,2974],{"type":60,"tag":2772,"props":2966,"children":2967},{},[2968],{"type":60,"tag":82,"props":2969,"children":2971},{"className":2970},[],[2972],{"type":66,"value":2973},"useRenderActivityMessage",{"type":60,"tag":2772,"props":2975,"children":2976},{},[2977],{"type":66,"value":2978},"Internal hook for rendering activity messages by type",{"type":60,"tag":2750,"props":2980,"children":2981},{},[2982,2991],{"type":60,"tag":2772,"props":2983,"children":2984},{},[2985],{"type":60,"tag":82,"props":2986,"children":2988},{"className":2987},[],[2989],{"type":66,"value":2990},"useRenderCustomMessages",{"type":60,"tag":2772,"props":2992,"children":2993},{},[2994],{"type":66,"value":2995},"Internal hook for rendering custom message decorators",{"type":60,"tag":2750,"props":2997,"children":2998},{},[2999,3008],{"type":60,"tag":2772,"props":3000,"children":3001},{},[3002],{"type":60,"tag":82,"props":3003,"children":3005},{"className":3004},[],[3006],{"type":66,"value":3007},"useSuggestions",{"type":60,"tag":2772,"props":3009,"children":3010},{},[3011],{"type":66,"value":3012},"Read the current suggestion list and control reload\u002Fclear",{"type":60,"tag":2750,"props":3014,"children":3015},{},[3016,3025],{"type":60,"tag":2772,"props":3017,"children":3018},{},[3019],{"type":60,"tag":82,"props":3020,"children":3022},{"className":3021},[],[3023],{"type":66,"value":3024},"useConfigureSuggestions",{"type":60,"tag":2772,"props":3026,"children":3027},{},[3028],{"type":66,"value":3029},"Register static or dynamic (LLM-generated) suggestion configs",{"type":60,"tag":2750,"props":3031,"children":3032},{},[3033,3042],{"type":60,"tag":2772,"props":3034,"children":3035},{},[3036],{"type":60,"tag":82,"props":3037,"children":3039},{"className":3038},[],[3040],{"type":66,"value":3041},"useThreads",{"type":60,"tag":2772,"props":3043,"children":3044},{},[3045],{"type":66,"value":3046},"List, rename, archive, and delete Intelligence platform threads",{"type":60,"tag":69,"props":3048,"children":3050},{"id":3049},"quick-reference-components",[3051],{"type":66,"value":3052},"Quick Reference: Components",{"type":60,"tag":2742,"props":3054,"children":3055},{},[3056,3071],{"type":60,"tag":2746,"props":3057,"children":3058},{},[3059],{"type":60,"tag":2750,"props":3060,"children":3061},{},[3062,3067],{"type":60,"tag":2754,"props":3063,"children":3064},{},[3065],{"type":66,"value":3066},"Component",{"type":60,"tag":2754,"props":3068,"children":3069},{},[3070],{"type":66,"value":2763},{"type":60,"tag":2765,"props":3072,"children":3073},{},[3074,3097,3113,3130,3147,3164,3181,3198],{"type":60,"tag":2750,"props":3075,"children":3076},{},[3077,3085],{"type":60,"tag":2772,"props":3078,"children":3079},{},[3080],{"type":60,"tag":82,"props":3081,"children":3083},{"className":3082},[],[3084],{"type":66,"value":9},{"type":60,"tag":2772,"props":3086,"children":3087},{},[3088,3090,3095],{"type":66,"value":3089},"Root provider (from ",{"type":60,"tag":82,"props":3091,"children":3093},{"className":3092},[],[3094],{"type":66,"value":244},{"type":66,"value":3096},") -- configures runtime URL, headers, agents, error handler",{"type":60,"tag":2750,"props":3098,"children":3099},{},[3100,3108],{"type":60,"tag":2772,"props":3101,"children":3102},{},[3103],{"type":60,"tag":82,"props":3104,"children":3106},{"className":3105},[],[3107],{"type":66,"value":1295},{"type":60,"tag":2772,"props":3109,"children":3110},{},[3111],{"type":66,"value":3112},"Full chat interface connected to an agent (inline layout)",{"type":60,"tag":2750,"props":3114,"children":3115},{},[3116,3125],{"type":60,"tag":2772,"props":3117,"children":3118},{},[3119],{"type":60,"tag":82,"props":3120,"children":3122},{"className":3121},[],[3123],{"type":66,"value":3124},"CopilotPopup",{"type":60,"tag":2772,"props":3126,"children":3127},{},[3128],{"type":66,"value":3129},"Chat in a floating popup with toggle button",{"type":60,"tag":2750,"props":3131,"children":3132},{},[3133,3142],{"type":60,"tag":2772,"props":3134,"children":3135},{},[3136],{"type":60,"tag":82,"props":3137,"children":3139},{"className":3138},[],[3140],{"type":66,"value":3141},"CopilotSidebar",{"type":60,"tag":2772,"props":3143,"children":3144},{},[3145],{"type":66,"value":3146},"Chat in a collapsible sidebar with toggle button",{"type":60,"tag":2750,"props":3148,"children":3149},{},[3150,3159],{"type":60,"tag":2772,"props":3151,"children":3152},{},[3153],{"type":60,"tag":82,"props":3154,"children":3156},{"className":3155},[],[3157],{"type":66,"value":3158},"CopilotChatView",{"type":60,"tag":2772,"props":3160,"children":3161},{},[3162],{"type":66,"value":3163},"Headless chat view with slots for message view, input, scroll, suggestions",{"type":60,"tag":2750,"props":3165,"children":3166},{},[3167,3176],{"type":60,"tag":2772,"props":3168,"children":3169},{},[3170],{"type":60,"tag":82,"props":3171,"children":3173},{"className":3172},[],[3174],{"type":66,"value":3175},"CopilotChatInput",{"type":60,"tag":2772,"props":3177,"children":3178},{},[3179],{"type":66,"value":3180},"Chat input textarea with send\u002Fstop\u002Ftranscribe controls",{"type":60,"tag":2750,"props":3182,"children":3183},{},[3184,3193],{"type":60,"tag":2772,"props":3185,"children":3186},{},[3187],{"type":60,"tag":82,"props":3188,"children":3190},{"className":3189},[],[3191],{"type":66,"value":3192},"CopilotChatMessageView",{"type":60,"tag":2772,"props":3194,"children":3195},{},[3196],{"type":66,"value":3197},"Renders the message list",{"type":60,"tag":2750,"props":3199,"children":3200},{},[3201,3210],{"type":60,"tag":2772,"props":3202,"children":3203},{},[3204],{"type":60,"tag":82,"props":3205,"children":3207},{"className":3206},[],[3208],{"type":66,"value":3209},"CopilotChatSuggestionView",{"type":60,"tag":2772,"props":3211,"children":3212},{},[3213],{"type":66,"value":3214},"Renders suggestion pills",{"type":60,"tag":69,"props":3216,"children":3218},{"id":3217},"quick-reference-runtime",[3219],{"type":66,"value":3220},"Quick Reference: Runtime",{"type":60,"tag":76,"props":3222,"children":3223},{},[3224,3226,3231,3232,3237,3239,3245],{"type":66,"value":3225},"All v2 runtime symbols import from ",{"type":60,"tag":82,"props":3227,"children":3229},{"className":3228},[],[3230],{"type":66,"value":203},{"type":66,"value":189},{"type":60,"tag":82,"props":3233,"children":3235},{"className":3234},[],[3236],{"type":66,"value":308},{"type":66,"value":3238}," from ",{"type":60,"tag":82,"props":3240,"children":3242},{"className":3241},[],[3243],{"type":66,"value":3244},"@copilotkit\u002Fruntime\u002Fv2\u002Fexpress",{"type":66,"value":3246},").",{"type":60,"tag":2742,"props":3248,"children":3249},{},[3250,3265],{"type":60,"tag":2746,"props":3251,"children":3252},{},[3253],{"type":60,"tag":2750,"props":3254,"children":3255},{},[3256,3261],{"type":60,"tag":2754,"props":3257,"children":3258},{},[3259],{"type":66,"value":3260},"Export",{"type":60,"tag":2754,"props":3262,"children":3263},{},[3264],{"type":66,"value":2763},{"type":60,"tag":2765,"props":3266,"children":3267},{},[3268,3284,3300,3316,3332,3348],{"type":60,"tag":2750,"props":3269,"children":3270},{},[3271,3279],{"type":60,"tag":2772,"props":3272,"children":3273},{},[3274],{"type":60,"tag":82,"props":3275,"children":3277},{"className":3276},[],[3278],{"type":66,"value":277},{"type":60,"tag":2772,"props":3280,"children":3281},{},[3282],{"type":66,"value":3283},"Auto-detecting runtime (delegates to SSE or Intelligence)",{"type":60,"tag":2750,"props":3285,"children":3286},{},[3287,3295],{"type":60,"tag":2772,"props":3288,"children":3289},{},[3290],{"type":60,"tag":82,"props":3291,"children":3293},{"className":3292},[],[3294],{"type":66,"value":285},{"type":60,"tag":2772,"props":3296,"children":3297},{},[3298],{"type":66,"value":3299},"Explicit SSE-mode runtime",{"type":60,"tag":2750,"props":3301,"children":3302},{},[3303,3311],{"type":60,"tag":2772,"props":3304,"children":3305},{},[3306],{"type":60,"tag":82,"props":3307,"children":3309},{"className":3308},[],[3310],{"type":66,"value":292},{"type":60,"tag":2772,"props":3312,"children":3313},{},[3314],{"type":66,"value":3315},"Intelligence-mode runtime with durable threads",{"type":60,"tag":2750,"props":3317,"children":3318},{},[3319,3327],{"type":60,"tag":2772,"props":3320,"children":3321},{},[3322],{"type":60,"tag":82,"props":3323,"children":3325},{"className":3324},[],[3326],{"type":66,"value":300},{"type":60,"tag":2772,"props":3328,"children":3329},{},[3330],{"type":66,"value":3331},"Create a Hono app with all CopilotKit routes",{"type":60,"tag":2750,"props":3333,"children":3334},{},[3335,3343],{"type":60,"tag":2772,"props":3336,"children":3337},{},[3338],{"type":60,"tag":82,"props":3339,"children":3341},{"className":3340},[],[3342],{"type":66,"value":308},{"type":60,"tag":2772,"props":3344,"children":3345},{},[3346],{"type":66,"value":3347},"Create an Express router with all CopilotKit routes",{"type":60,"tag":2750,"props":3349,"children":3350},{},[3351,3360],{"type":60,"tag":2772,"props":3352,"children":3353},{},[3354],{"type":60,"tag":82,"props":3355,"children":3357},{"className":3356},[],[3358],{"type":66,"value":3359},"CopilotKitIntelligence",{"type":60,"tag":2772,"props":3361,"children":3362},{},[3363],{"type":66,"value":3364},"Intelligence platform client configuration",{"type":60,"tag":3366,"props":3367,"children":3368},"style",{},[3369],{"type":66,"value":3370},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":3372,"total":625},[3373,3388,3406,3423,3435,3442,3455,3469,3481,3493,3507,3522],{"slug":3374,"name":3374,"fn":3375,"description":3376,"org":3377,"tags":3378,"stars":23,"repoUrl":24,"updatedAt":3387},"a2ui-renderer","render declarative agent UI surfaces","Render A2UI (Agent-to-UI declarative surfaces) in CopilotKit v2. Enable the runtime via CopilotRuntime({ a2ui: {...} }), then enable the provider via \u003CCopilotKit a2ui={{ theme }}>. Auto-activates via \u002Finfo — do NOT manually pass renderActivityMessages. createA2UIMessageRenderer ships from @copilotkit\u002Freact-core\u002Fv2; low-level primitives (A2UIProvider, A2UIRenderer, createCatalog) ship from @copilotkit\u002Fa2ui-renderer. Covers theme customization, createSurface dedup, action-bridge try\u002Ffinally cleanup. Load when an agent emits A2UI operations (createSurface \u002F updateComponents \u002F updateDataModel), when wiring a2ui on CopilotRuntime, or when styling A2UI surfaces.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3379,3380,3383,3384],{"name":9,"slug":8,"type":13},{"name":3381,"slug":3382,"type":13},"Design","design",{"name":21,"slug":22,"type":13},{"name":3385,"slug":3386,"type":13},"UI Components","ui-components","2026-07-12T08:06:36.722091",{"slug":3389,"name":3389,"fn":3390,"description":3391,"org":3392,"tags":3393,"stars":23,"repoUrl":24,"updatedAt":3405},"copilotkit-agui","build and debug CopilotKit agent backends","Use when building custom agent backends, implementing the AG-UI protocol, debugging streaming issues, or understanding how agents communicate with frontends. Covers event types, SSE transport, AbstractAgent\u002FHttpAgent patterns, state synchronization, tool calls, and human-in-the-loop flows.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3394,3395,3398,3401,3402],{"name":18,"slug":19,"type":13},{"name":3396,"slug":3397,"type":13},"API Development","api-development",{"name":3399,"slug":3400,"type":13},"Backend","backend",{"name":9,"slug":8,"type":13},{"name":3403,"slug":3404,"type":13},"Debugging","debugging","2026-07-12T08:06:22.179755",{"slug":3407,"name":3407,"fn":3408,"description":3409,"org":3410,"tags":3411,"stars":23,"repoUrl":24,"updatedAt":3422},"copilotkit-contribute","contribute to CopilotKit open-source project","Use when contributing to the CopilotKit open-source project — forking, cloning, setting up the monorepo, creating branches, running tests, and submitting pull requests against CopilotKit\u002FCopilotKit.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3412,3413,3416,3419],{"name":9,"slug":8,"type":13},{"name":3414,"slug":3415,"type":13},"Engineering","engineering",{"name":3417,"slug":3418,"type":13},"GitHub","github",{"name":3420,"slug":3421,"type":13},"Pull Requests","pull-requests","2026-07-12T08:06:30.102192",{"slug":3424,"name":3424,"fn":3425,"description":3426,"org":3427,"tags":3428,"stars":23,"repoUrl":24,"updatedAt":3434},"copilotkit-debug","diagnose and debug CopilotKit issues","Use when diagnosing CopilotKit issues -- runtime connectivity failures, agent not responding, streaming errors, tool execution problems, transcription failures, version mismatches, and AG-UI event tracing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3429,3430,3431],{"name":9,"slug":8,"type":13},{"name":3403,"slug":3404,"type":13},{"name":3432,"slug":3433,"type":13},"Observability","observability","2026-07-12T08:06:23.407872",{"slug":4,"name":4,"fn":5,"description":6,"org":3436,"tags":3437,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3438,3439,3440,3441],{"name":18,"slug":19,"type":13},{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},{"name":21,"slug":22,"type":13},{"slug":3443,"name":3443,"fn":3444,"description":3445,"org":3446,"tags":3447,"stars":23,"repoUrl":24,"updatedAt":3454},"copilotkit-integrations","integrate agent frameworks into CopilotKit applications","Use when wiring an external agent framework (LangGraph, CrewAI, PydanticAI, Mastra, ADK, LlamaIndex, Agno, Strands, Microsoft Agent Framework, or others) into a CopilotKit application via the AG-UI protocol.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3448,3449,3450,3451],{"name":18,"slug":19,"type":13},{"name":3396,"slug":3397,"type":13},{"name":9,"slug":8,"type":13},{"name":3452,"slug":3453,"type":13},"Integrations","integrations","2026-07-12T08:06:32.560054",{"slug":3456,"name":3456,"fn":3457,"description":3458,"org":3459,"tags":3460,"stars":23,"repoUrl":24,"updatedAt":3468},"copilotkit-self-update","update CopilotKit agent skills","Use when the user wants to update, refresh, or reinstall the CopilotKit agent SKILLS (the SKILL.md files that teach this agent about CopilotKit). NOT for updating the CopilotKit codebase or project — this is specifically about refreshing the skills\u002Fknowledge this agent has loaded. Triggers on \"update copilotkit skills\", \"update skills\", \"refresh skills\", \"skills are stale\", \"skills are outdated\", \"get latest skills\", \"my copilotkit knowledge is wrong\", \"copilotkit APIs changed\", \"skills seem old\", \"wrong API names\", \"reinstall skills\", \"skills not working right\", \"update your copilotkit knowledge\".",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3461,3462,3465],{"name":9,"slug":8,"type":13},{"name":3463,"slug":3464,"type":13},"Documentation","documentation",{"name":3466,"slug":3467,"type":13},"Productivity","productivity","2026-07-12T08:06:31.345052",{"slug":3470,"name":3470,"fn":3471,"description":3472,"org":3473,"tags":3474,"stars":23,"repoUrl":24,"updatedAt":3480},"copilotkit-setup","set up CopilotKit in projects","Use when adding CopilotKit to an existing project or bootstrapping a new CopilotKit project from scratch. Covers framework detection, package installation, runtime wiring, provider setup, and first working chat integration.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3475,3476,3477],{"name":9,"slug":8,"type":13},{"name":21,"slug":22,"type":13},{"name":3478,"slug":3479,"type":13},"Onboarding","onboarding","2026-07-12T08:06:25.534415",{"slug":3482,"name":3482,"fn":3483,"description":3484,"org":3485,"tags":3486,"stars":23,"repoUrl":24,"updatedAt":3492},"copilotkit-upgrade","migrate CopilotKit applications to v2","Use when migrating a CopilotKit v1 application to v2 -- updating package imports, replacing deprecated hooks and components, switching from GraphQL runtime to AG-UI protocol runtime, and resolving breaking API changes.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3487,3488,3489],{"name":9,"slug":8,"type":13},{"name":3414,"slug":3415,"type":13},{"name":3490,"slug":3491,"type":13},"Migration","migration","2026-07-12T08:06:26.949801",{"slug":3494,"name":3494,"fn":3495,"description":3496,"org":3497,"tags":3498,"stars":23,"repoUrl":24,"updatedAt":3506},"react-core","integrate CopilotKit into React applications","@copilotkit\u002Freact-core — mount the CopilotKit provider (from @copilotkit\u002Freact-core\u002Fv2) in a Next.js App Router \u002F React Router v7 \u002F TanStack Start \u002F SPA app, drop in CopilotChat\u002FCopilotPopup\u002FCopilotSidebar (v2 chat components ship from react-core\u002Fv2 — NOT react-ui, which is CSS-only in v2), access and subscribe to agents with useAgent \u002F useAgentContext \u002F useCapabilities, switch between multiple agents, manage durable Intelligence threads with useThreads, register browser-side tools via useFrontendTool, render tool calls with useRenderTool \u002F useComponent \u002F useDefaultRenderTool, gate execution with useHumanInTheLoop, wire file attachments with useAttachments, configure suggestion pills, and register activity- and custom-message renderers. publicLicenseKey is canonical (publicApiKey is deprecated alias). Load the reference under references\u002F that matches your task.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3499,3500,3501,3504,3505],{"name":9,"slug":8,"type":13},{"name":21,"slug":22,"type":13},{"name":3502,"slug":3503,"type":13},"Next.js","next-js",{"name":230,"slug":44,"type":13},{"name":3385,"slug":3386,"type":13},"2026-07-12T08:06:15.72619",{"slug":3508,"name":3508,"fn":3509,"description":3510,"org":3511,"tags":3512,"stars":23,"repoUrl":24,"updatedAt":3521},"runtime","mount and configure CopilotRuntime servers","@copilotkit\u002Fruntime — mount a fetch-native CopilotRuntime on any JS server, wire middleware, pick an AgentRunner, instantiate BuiltInAgent (Factory Mode with TanStack AI is the preferred default) or plug in any of 12 external agent frameworks (Mastra, LangGraph, CrewAI Crews\u002FFlows, PydanticAI, ADK, LlamaIndex, Agno, AWS Strands, MS Agent Framework, AG2, A2A), enable Intelligence mode for durable threads + websocket, register server-side tools via defineTool, and wire voice transcription. Uses the fetch-based createCopilotRuntimeHandler primitive — the Express\u002FHono adapters are discouraged. Load the reference under references\u002F that matches your task.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3513,3514,3515,3518],{"name":3399,"slug":3400,"type":13},{"name":9,"slug":8,"type":13},{"name":3516,"slug":3517,"type":13},"JavaScript","javascript",{"name":3519,"slug":3520,"type":13},"Middleware","middleware","2026-07-12T08:06:10.034875",{"slug":3523,"name":3524,"fn":3525,"description":3526,"org":3527,"tags":3528,"stars":3538,"repoUrl":3539,"updatedAt":3540},"advanced-visualization-techniques","Advanced Visualization Techniques","create advanced generative UI visualizations","UI mockups, dashboards, advanced interactivity, generative art, simulations, math visualizations, and design system rules for producing rich generateSandboxedUi output.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3529,3532,3533,3534,3537],{"name":3530,"slug":3531,"type":13},"Dashboards","dashboards",{"name":3381,"slug":3382,"type":13},{"name":21,"slug":22,"type":13},{"name":3535,"slug":3536,"type":13},"Generative Art","generative-art",{"name":3385,"slug":3386,"type":13},1440,"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI","2026-07-12T08:06:40.712754",{"items":3542,"total":588},[3543,3550,3558,3565,3571,3578,3585],{"slug":3374,"name":3374,"fn":3375,"description":3376,"org":3544,"tags":3545,"stars":23,"repoUrl":24,"updatedAt":3387},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3546,3547,3548,3549],{"name":9,"slug":8,"type":13},{"name":3381,"slug":3382,"type":13},{"name":21,"slug":22,"type":13},{"name":3385,"slug":3386,"type":13},{"slug":3389,"name":3389,"fn":3390,"description":3391,"org":3551,"tags":3552,"stars":23,"repoUrl":24,"updatedAt":3405},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3553,3554,3555,3556,3557],{"name":18,"slug":19,"type":13},{"name":3396,"slug":3397,"type":13},{"name":3399,"slug":3400,"type":13},{"name":9,"slug":8,"type":13},{"name":3403,"slug":3404,"type":13},{"slug":3407,"name":3407,"fn":3408,"description":3409,"org":3559,"tags":3560,"stars":23,"repoUrl":24,"updatedAt":3422},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3561,3562,3563,3564],{"name":9,"slug":8,"type":13},{"name":3414,"slug":3415,"type":13},{"name":3417,"slug":3418,"type":13},{"name":3420,"slug":3421,"type":13},{"slug":3424,"name":3424,"fn":3425,"description":3426,"org":3566,"tags":3567,"stars":23,"repoUrl":24,"updatedAt":3434},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3568,3569,3570],{"name":9,"slug":8,"type":13},{"name":3403,"slug":3404,"type":13},{"name":3432,"slug":3433,"type":13},{"slug":4,"name":4,"fn":5,"description":6,"org":3572,"tags":3573,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3574,3575,3576,3577],{"name":18,"slug":19,"type":13},{"name":15,"slug":16,"type":13},{"name":9,"slug":8,"type":13},{"name":21,"slug":22,"type":13},{"slug":3443,"name":3443,"fn":3444,"description":3445,"org":3579,"tags":3580,"stars":23,"repoUrl":24,"updatedAt":3454},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3581,3582,3583,3584],{"name":18,"slug":19,"type":13},{"name":3396,"slug":3397,"type":13},{"name":9,"slug":8,"type":13},{"name":3452,"slug":3453,"type":13},{"slug":3456,"name":3456,"fn":3457,"description":3458,"org":3586,"tags":3587,"stars":23,"repoUrl":24,"updatedAt":3468},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3588,3589,3590],{"name":9,"slug":8,"type":13},{"name":3463,"slug":3464,"type":13},{"name":3466,"slug":3467,"type":13}]