PageSourceSearch

https://showcase-crewai-crews-production.up.railway.app/

html showcase-crewai-crews-production.up.railway.app collected 2026-10-03 12:13:47 UTC 73,098 bytes, 8 lines download raw bytes

1<!DOCTYPE html><!--tPs_IVPLJqt4nI23WhErR--><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/d6ee38b07b61a41b.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/610acb89818fb02b.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-0b8617e9074abd8b.js"/>
1<script src="/_next/static/chunks/4bd1b696-182b6b13bdad92e3.js" async=""></script>
1<script src="/_next/static/chunks/1255-f5c4f3c719acc9db.js" async=""></script>
1<script src="/_next/static/chunks/main-app-f3336e172256d2ab.js" async=""></script>
1<title>CopilotKit Showcase</title>
1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
1</head><body><div hidden=""><!--$--><!--/$--></div>
1<script>console.log('[showcase] Demo loaded:', window.location.href);
2console.log('[showcase] In iframe:', window.self !== window.top);
3window.addEventListener('error', function(e) {
4  console.error('[showcase] Uncaught error:', e.message, e.filename, e.lineno);
5});
6window.addEventListener('unhandledrejection', function(e) {
7  console.error('[showcase] Unhandled rejection:', e.reason);
8});</script>
8<div style="position:fixed;inset:0;overflow-y:auto;background:var(--background);color:var(--foreground)"><main style="max-width:980px;margin:0 auto;padding:3rem 1.5rem 4rem"><header style="padding-bottom:1.5rem;border-bottom:1px solid var(--border);margin-bottom:2rem"><div style="font-size:0.75rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted-foreground);margin-bottom:0.5rem">CopilotKit Showcase</div><h1 style="font-size:2.25rem;font-weight:700;letter-spacing:-0.02em;margin:0">CrewAI Flows</h1><p style="color:var(--muted-foreground);font-size:1rem;line-height:1.6;margin-top:0.75rem;max-width:62ch">CopilotKit integration with regular CrewAI Flows</p><div style="display:flex;gap:0.5rem;margin-top:1rem;font-size:0.8125rem;color:var(--muted-foreground)"><span><strong style="color:var(--foreground)">38</strong> <!-- -->demos</span><span>·</span><span>7<!-- --> categories</span><span>·</span><span>integration<!-- --> <code style="background:var(--muted);padding:0.125rem 0.4rem;border-radius:0.375rem;font-size:0.8125rem">crewai-crews</code></span></div></header><section style="margin-bottom:2.5rem"><h2 style="font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted-foreground);margin:0 0 0.875rem">Chat UI<span style="margin-left:0.5rem;font-weight:400;color:var(--muted-foreground);opacity:0.6">12</span></h2><div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:0.75rem"><a href="/demos/agentic-chat" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Agentic Chat</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Natural conversation with frontend tool execution</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/agentic-chat</div></a><a href="/demos/chat-slots" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Chat Customization (Slots)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Customize CopilotChat via its slot system</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/chat-slots</div></a><a href="/demos/chat-customization-css" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Chat Customization (CSS)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Default CopilotChat re-themed via CopilotKitCSSProperties</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/chat-customization-css</div></a><a href="/demos/prebuilt-sidebar" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Pre-Built: Sidebar</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Docked sidebar chat via &lt;CopilotSidebar /&gt;</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/prebuilt-sidebar</div></a><a href="/demos/prebuilt-popup" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Pre-Built: Popup</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Floating popup chat via &lt;CopilotPopup /&gt;</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/prebuilt-popup</div></a><a href="/demos/headless-simple" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Headless Chat (Simple)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Minimal custom chat surface built on useAgent</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/headless-simple</div></a><a href="/demos/headless-complete" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Headless Chat (Complete)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Full chat implementation built from scratch on useAgent</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/headless-complete</div></a><a href="/demos/reasoning-default" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Reasoning: Default</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Built-in CopilotChat reasoning rendering backed by native CrewAI Flow reasoning events</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/reasoning-default</div></a><a href="/demos/reasoning-custom" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Reasoning: Custom</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Native CrewAI reasoning tokens rendered through a custom reasoning message slot</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/reasoning-custom</div></a><a href="/demos/voice" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Voice Input</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Speech-to-text transcription via @copilotkit/voice mounted on a per-demo runtime</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/voice</div></a><a href="/demos/beautiful-chat" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Beautiful Chat</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Flagship showcase - polished brand-styled chat with A2UI, Open Generative UI, and shared-state todos</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/beautiful-chat</div></a><a href="/demos/multimodal" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Multimodal Attachments</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Image and PDF uploads routed through the AG-UI attachment pipeline</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/multimodal</div></a></div></section><section style="margin-bottom:2.5rem"><h2 style="font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted-foreground);margin:0 0 0.875rem">Interactivity<span style="margin-left:0.5rem;font-weight:400;color:var(--muted-foreground);opacity:0.6">8</span></h2><div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:0.75rem"><a href="/demos/hitl" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">In-Chat Human in the Loop (original)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Original CrewAI HITL demo — kept for backwards-compat</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/hitl</div></a><a href="/demos/hitl-in-chat" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">In-Chat Human in the Loop</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">User approves agent actions before execution</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/hitl-in-chat</div></a><a href="/demos/hitl-in-chat" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">In-Chat HITL (Booking)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Time-picker card rendered inline via useHumanInTheLoop for a booking flow</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/hitl-in-chat</div></a><a href="/demos/hitl-in-app" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">In-App Human in the Loop</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Agent requests approval via useFrontendTool; the approval UI pops up as an app-level modal OUTSIDE the chat</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/hitl-in-app</div></a><a href="/demos/frontend-tools" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Frontend Tools (In-App Actions)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Agent invokes client-side handlers registered with useFrontendTool</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/frontend-tools</div></a><a href="/demos/frontend-tools-async" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Frontend Tools (Async)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">useFrontendTool with an async handler</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/frontend-tools-async</div></a><a href="/demos/gen-ui-interrupt" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Human in the Loop: Interrupts</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Native CrewAI Flow human feedback rendered inline through useInterrupt</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/gen-ui-interrupt</div></a><a href="/demos/interrupt-headless" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Headless Interrupt</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Native CrewAI Flow human feedback rendered in the app surface outside chat</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/interrupt-headless</div></a></div></section><section style="margin-bottom:2.5rem"><h2 style="font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted-foreground);margin:0 0 0.875rem">Generative UI<span style="margin-left:0.5rem;font-weight:400;color:var(--muted-foreground);opacity:0.6">11</span></h2><div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:0.75rem"><a href="/demos/tool-rendering-default-catchall" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Tool Rendering (Default Catch-all)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Out-of-the-box tool rendering — backend defines the tools; the frontend adds zero custom renderers and relies on CopilotKit&#x27;s built-in default UI</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/tool-rendering-default-catchall</div></a><a href="/demos/tool-rendering-custom-catchall" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Tool Rendering (Custom Catch-all)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/tool-rendering-custom-catchall</div></a><a href="/demos/tool-rendering-reasoning-chain" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Tool Rendering + Reasoning Chain</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Sequential tool calls with reasoning tokens side-by-side</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/tool-rendering-reasoning-chain</div></a><a href="/demos/gen-ui-agent" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Agentic Generative UI</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Long-ru
8nning agent tasks with generated UI</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/gen-ui-agent</div></a><a href="/demos/gen-ui-tool-based" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Tool-Based Generative UI</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Agent uses tools to trigger UI generation</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/gen-ui-tool-based</div></a><a href="/demos/open-gen-ui" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Fully Open-Ended Generative UI</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Agent generates UI from an arbitrary component library</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/open-gen-ui</div></a><a href="/demos/open-gen-ui-advanced" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Open-Ended Gen UI (Advanced)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Agent-authored UI that invokes host sandbox functions from inside the iframe</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/open-gen-ui-advanced</div></a><a href="/demos/declarative-gen-ui" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Declarative Generative UI (A2UI - Dynamic Schema)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Branded A2UI components generated by a secondary LLM against a custom catalog</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/declarative-gen-ui</div></a><a href="/demos/a2ui-fixed-schema" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">A2UI Fixed-Schema</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Pre-authored component tree; the agent streams only data into the data model</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/a2ui-fixed-schema</div></a><a href="/demos/a2ui-recovery" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">A2UI Error Recovery</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">CrewAI Flow-owned validate-to-retry recovery that heals a malformed render or shows a graceful exhausted fallback</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/a2ui-recovery</div></a><a href="/demos/mcp-apps" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">MCP Apps</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">MCP server-driven UI via activity renderers</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/mcp-apps</div></a></div></section><section style="margin-bottom:2.5rem"><h2 style="font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted-foreground);margin:0 0 0.875rem">
8Agent Capabilities<span style="margin-left:0.5rem;font-weight:400;color:var(--muted-foreground);opacity:0.6">1</span></h2><div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:0.75rem"><a href="/demos/tool-rendering" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Tool Rendering</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Custom per-tool renderers plus a wildcard catch-all for every other tool</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/tool-rendering</div></a></div></section><section style="margin-bottom:2.5rem"><h2 style="font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted-foreground);margin:0 0 0.875rem">Agent State<span style="margin-left:0.5rem;font-weight:400;color:var(--muted-foreground);opacity:0.6">3</span></h2><div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:0.75rem"><a href="/demos/shared-state-read-write" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Shared State (Read + Write)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Bidirectional shared state - UI writes preferences, agent writes notes</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/shared-state-read-write</div></a><a href="/demos/readonly-state-agent-context" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Readonly State (Agent Context)</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Frontend provides read-only context to the agent via useAgentContext</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/readonly-state-agent-context</div></a><a href="/demos/shared-state-streaming" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">State Streaming</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Per-token state delta streaming from agent to UI</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/shared-state-streaming</div></a></div></section><section style="margin-bottom:2.5rem"><h2 style="font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted-foreground);margin:0 0 0.875rem">Multi-Agent<span style="margin-left:0.5rem;font-weight:400;color:var(--muted-foreground);opacity:0.6">1</span></h2><div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:0.75rem"><a href="/demos/subagents" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Sub-Agents</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Supervisor delegates to research / writing / critique CrewAI sub-crews with a live delegation log</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/subagents</div></a></div></section><section style="margin-bottom:2.5rem"><h2 style="font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted-foreground);margin:0 0 0.875rem">
8Platform<span style="margin-left:0.5rem;font-weight:400;color:var(--muted-foreground);opacity:0.6">2</span></h2><div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:0.75rem"><a href="/demos/agent-config" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Agent Config Object</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Forward a typed config object (tone / expertise / response length) from the provider to the agent</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/agent-config</div></a><a href="/demos/auth" class="demo-card"><h3 style="font-size:1rem;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.375rem;color:var(--foreground)">Authentication</h3><p style="font-size:0.8125rem;line-height:1.5;color:var(--muted-foreground);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden">Runtime-level bearer-token auth via the V2 onRequest hook</p><div style="margin-top:0.75rem;font-family:ui-monospace, monospace;font-size:0.75rem;color:var(--muted-foreground);opacity:0.7">/demos/auth</div></a></div></section></main></div><!--$--><!--/$-->
8<script src="/_next/static/chunks/webpack-0b8617e9074abd8b.js" id="_R_" async=""></script>
8<script>(self.__next_f=self.__next_f||[]).push([0])</script>
8<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[9766,[],\"\"]\n3:I[98924,[],\"\"]\n19:I[57150,[],\"\"]\n:HL[\"/_next/static/css/d6ee38b07b61a41b.css\",\"style\"]\n:HL[\"/_next/static/css/610acb89818fb02b.css\",\"style\"]\n"])</script>
8<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"tPs-IVPLJqt4nI23WhErR\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/d6ee38b07b61a41b.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/610acb89818fb02b.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"children\":[[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"console.log('[showcase] Demo loaded:', window.location.href);\\nconsole.log('[showcase] In iframe:', window.self !== window.top);\\nwindow.addEventListener('error', function(e) {\\n  console.error('[showcase] Uncaught error:', e.message, e.filename, e.lineno);\\n});\\nwindow.addEventListener('unhandledrejection', function(e) {\\n  console.error('[showcase] Unhandled rejection:', e.reason);\\n});\"}}],[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"div\",null,{\"style\":{\"position\":\"fixed\",\"inset\":0,\"overflowY\":\"auto\",\"background\":\"var(--background)\",\"color\":\"var(--foreground)\"},\"children\":[\"$\",\"main\",null,{\"style\":{\"maxWidth\":\"980px\",\"margin\":\"0 auto\",\"padding\":\"3rem 1.5rem 4rem\"},\"children\":[[\"$\",\"header\",null,{\"style\":{\"paddingBottom\":\"1.5rem\",\"borderBottom\":\"1px solid var(--border)\",\"marginBottom\":\"2rem\"},\"children\":[[\"$\",\"div\",null,{\"style\":{\"fontSize\":\"0.75rem\",\"fontWeight\":600,\"letterSpacing\":\"0.08em\",\"textTransform\":\"uppercase\",\"color\":\"var(--muted-foreground)\",\"marginBottom\":\"0.5rem\"},\"children\":\"CopilotKit Showcase\"}],[\"$\",\"h1\",null,{\"style\":{\"fontSize\":\"2.25rem\",\"fontWeight\":700,\"letterSpacing\":\"-0.02em\",\"margin\":0},\"children\":\"CrewAI Flows\"}],[\"$\",\"p\",null,{\"style\":{\"color\":\"var(--muted-foreground)\",\"fontSize\":\"1rem\",\"lineHeight\":1.6,\"marginTop\":\"0.75rem\",\"maxWidth\":\"62ch\"},\"children\":\"CopilotKit integration with regular CrewAI Flows\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"flex\",\"gap\":\"0.5rem\",\"marginTop\":\"1rem\",\"fontSize\":\"0.8125rem\",\"color\":\"var(--muted-foreground)\"},\"children\":[[\"$\",\"span\",null,{\"children\":[[\"$\",\"strong\",null,{\"style\":{\"color\":\"var(--foreground)\"},\"children\":38}],\" \",\"demos\"]}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":[7,\" categories\"]}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":[\"integration\",\" \",[\"$\",\"code\",null,{\"style\":{\"background\":\"var(--muted)\",\"padding\":\"0.125rem 0.4rem\",\"borderRadius\":\"0.375rem\",\"fontSize\":\"0.8125rem\"},\"children\":\"crewai-crews\"}]]}]]}]]}],[[\"$\",\"section\",\"chat-ui\",{\"style\":{\"marginBottom\":\"2.5rem\"},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"fontWeight\":600,\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.08em\",\"color\":\"var(--muted-foreground)\",\"margin\":\"0 0 0.875rem\"},\"children\":[\"Chat UI\",[\"$\",\"span\",null,{\"style\":{\"marginLeft\":\"0.5rem\",\"fontWeight\":400,\"color\":\"var(--muted-foreground)\",\"opacity\":0.6},\"children\":12}]]}],[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gridTemplateColumns\":\"repeat(auto-fill, minmax(260px, 1fr))\",\"gap\":\"0.75rem\"},\"children\":[[\"$\",\"a\",\"agentic-chat\",{\"href\":\"/demos/agentic-chat\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Agentic Chat\"}],\"$L4\",\"$L5\"]}],\"$L6\",\"$L7\",\"$L8\",\"$L9\",\"$La\",\"$Lb\",\"$Lc\",\"$Ld\",\"$Le\",\"$Lf\",\"$L10\"]}]]}],\"$L11\",\"$L12\",\"$L13\",\"$L14\",\"$L15\",\"$L16\"]]}]}],null,\"$L17\"]}],{}
8,null,false]},null,false],\"$L18\",false]],\"m\":\"$undefined\",\"G\":[\"$19\",[]],\"s\":false,\"S\":true}\n"])</script>
8<script>self.__next_f.push([1,"26:I[24431,[],\"OutletBoundary\"]\n28:I[15278,[],\"AsyncMetadataOutlet\"]\n2a:I[24431,[],\"ViewportBoundary\"]\n2c:I[24431,[],\"MetadataBoundary\"]\n2d:\"$Sreact.suspense\"\n4:[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Natural conversation with frontend tool execution\"}]\n5:[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/agentic-chat\"}]\n"])</script>
8<script>self.__next_f.push([1,"6:[\"$\",\"a\",\"chat-slots\",{\"href\":\"/demos/chat-slots\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Chat Customization (Slots)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Customize CopilotChat via its slot system\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/chat-slots\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"7:[\"$\",\"a\",\"chat-customization-css\",{\"href\":\"/demos/chat-customization-css\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Chat Customization (CSS)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Default CopilotChat re-themed via CopilotKitCSSProperties\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/chat-customization-css\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"8:[\"$\",\"a\",\"prebuilt-sidebar\",{\"href\":\"/demos/prebuilt-sidebar\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Pre-Built: Sidebar\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Docked sidebar chat via \u003cCopilotSidebar /\u003e\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/prebuilt-sidebar\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"9:[\"$\",\"a\",\"prebuilt-popup\",{\"href\":\"/demos/prebuilt-popup\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Pre-Built: Popup\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Floating popup chat via \u003cCopilotPopup /\u003e\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/prebuilt-popup\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"a:[\"$\",\"a\",\"headless-simple\",{\"href\":\"/demos/headless-simple\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Headless Chat (Simple)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Minimal custom chat surface built on useAgent\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/headless-simple\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"b:[\"$\",\"a\",\"headless-complete\",{\"href\":\"/demos/headless-complete\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Headless Chat (Complete)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Full chat implementation built from scratch on useAgent\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/headless-complete\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"c:[\"$\",\"a\",\"reasoning-default\",{\"href\":\"/demos/reasoning-default\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Reasoning: Default\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Built-in CopilotChat reasoning rendering backed by native CrewAI Flow reasoning events\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/reasoning-default\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"d:[\"$\",\"a\",\"reasoning-custom\",{\"href\":\"/demos/reasoning-custom\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Reasoning: Custom\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Native CrewAI reasoning tokens rendered through a custom reasoning message slot\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/reasoning-custom\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"e:[\"$\",\"a\",\"voice\",{\"href\":\"/demos/voice\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Voice Input\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Speech-to-text transcription via @copilotkit/voice mounted on a per-demo runtime\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/voice\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"f:[\"$\",\"a\",\"beautiful-chat\",{\"href\":\"/demos/beautiful-chat\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Beautiful Chat\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Flagship showcase - polished brand-styled chat with A2UI, Open Generative UI, and shared-state todos\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/beautiful-chat\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"10:[\"$\",\"a\",\"multimodal\",{\"href\":\"/demos/multimodal\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Multimodal Attachments\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Image and PDF uploads routed through the AG-UI attachment pipeline\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/multimodal\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"11:[\"$\",\"section\",\"interactivity\",{\"style\":{\"marginBottom\":\"2.5rem\"},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"fontWeight\":600,\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.08em\",\"color\":\"var(--muted-foreground)\",\"margin\":\"0 0 0.875rem\"},\"children\":[\"Interactivity\",[\"$\",\"span\",null,{\"style\":{\"marginLeft\":\"0.5rem\",\"fontWeight\":400,\"color\":\"var(--muted-foreground)\",\"opacity\":0.6},\"children\":8}]]}],[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gridTemplateColumns\":\"repeat(auto-fill, minmax(260px, 1fr))\",\"gap\":\"0.75rem\"},\"children\":[[\"$\",\"a\",\"hitl\",{\"href\":\"/demos/hitl\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"In-Chat Human in the Loop (original)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Original CrewAI HITL demo — kept for backwards-compat\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/hitl\"}]]}],[\"$\",\"a\",\"hitl-in-chat\",{\"href\":\"/demos/hitl-in-chat\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"In-Chat Human in the Loop\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"User approves agent actions before execution\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/hitl-in-chat\"}]]}],[\"$\",\"a\",\"hitl-in-chat-booking\",{\"href\":\"/demos/hitl-in-chat\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"In-Chat HITL (Booking)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Time-picker card rendered inline via useHumanInTheLoop for a booking flow\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/hitl-in-chat\"}]]}],[\"$\",\"a\",\"hitl-in-app\",{\"href\":\"/demos/hitl-in-app\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"In-App Human in the Loop\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Agent requests approval via useFrontendTool; the approval UI pops up as an app-level modal OUTSIDE the chat\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/hitl-in-app\"}]]}],[\"$\",\"a\",\"frontend-tools\",{\"href\":\"/demos/frontend-tools\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Frontend Tools (In-App Actions)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\"
8:1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Agent invokes client-side handlers registered with useFrontendTool\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/frontend-tools\"}]]}],[\"$\",\"a\",\"frontend-tools-async\",{\"href\":\"/demos/frontend-tools-async\",\"className\":\"demo-card\",\"children\":[\"$L1a\",\"$L1b\",\"$L1c\"]}],\"$L1d\",\"$L1e\"]}]]}]\n"])</script>
8<script>self.__next_f.push([1,"12:[\"$\",\"section\",\"generative-ui\",{\"style\":{\"marginBottom\":\"2.5rem\"},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"fontWeight\":600,\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.08em\",\"color\":\"var(--muted-foreground)\",\"margin\":\"0 0 0.875rem\"},\"children\":[\"Generative UI\",[\"$\",\"span\",null,{\"style\":{\"marginLeft\":\"0.5rem\",\"fontWeight\":400,\"color\":\"var(--muted-foreground)\",\"opacity\":0.6},\"children\":11}]]}],[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gridTemplateColumns\":\"repeat(auto-fill, minmax(260px, 1fr))\",\"gap\":\"0.75rem\"},\"children\":[[\"$\",\"a\",\"tool-rendering-default-catchall\",{\"href\":\"/demos/tool-rendering-default-catchall\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Tool Rendering (Default Catch-all)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Out-of-the-box tool rendering — backend defines the tools; the frontend adds zero custom renderers and relies on CopilotKit's built-in default UI\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/tool-rendering-default-catchall\"}]]}],[\"$\",\"a\",\"tool-rendering-custom-catchall\",{\"href\":\"/demos/tool-rendering-custom-catchall\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Tool Rendering (Custom Catch-all)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/tool-rendering-custom-catchall\"}]]}],[\"$\",\"a\",\"tool-rendering-reasoning-chain\",{\"href\":\"/demos/tool-rendering-reasoning-chain\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Tool Rendering + Reasoning Chain\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Sequential tool calls with reasoning tokens side-by-side\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/tool-rendering-reasoning-chain\"}]]}],[\"$\",\"a\",\"gen-ui-agent\",{\"href\":\"/demos/gen-ui-agent\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Agentic Generative UI\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Long-running agent tasks with generated UI\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/gen-ui-agent\"}]]}],[\"$\",\"a\",\"gen-ui-tool-based\",{\"href\":\"/demos/gen-ui-tool-based\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Tool-Based Generative UI\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\"
8:1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Agent uses tools to trigger UI generation\"}],\"$L1f\"]}],\"$L20\",\"$L21\",\"$L22\",\"$L23\",\"$L24\",\"$L25\"]}]]}]\n"])</script>
8<script>self.__next_f.push([1,"13:[\"$\",\"section\",\"agent-capabilities\",{\"style\":{\"marginBottom\":\"2.5rem\"},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"fontWeight\":600,\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.08em\",\"color\":\"var(--muted-foreground)\",\"margin\":\"0 0 0.875rem\"},\"children\":[\"Agent Capabilities\",[\"$\",\"span\",null,{\"style\":{\"marginLeft\":\"0.5rem\",\"fontWeight\":400,\"color\":\"var(--muted-foreground)\",\"opacity\":0.6},\"children\":1}]]}],[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gridTemplateColumns\":\"repeat(auto-fill, minmax(260px, 1fr))\",\"gap\":\"0.75rem\"},\"children\":[[\"$\",\"a\",\"tool-rendering\",{\"href\":\"/demos/tool-rendering\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Tool Rendering\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Custom per-tool renderers plus a wildcard catch-all for every other tool\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/tool-rendering\"}]]}]]}]]}]\n"])</script>
8<script>self.__next_f.push([1,"14:[\"$\",\"section\",\"agent-state\",{\"style\":{\"marginBottom\":\"2.5rem\"},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"fontWeight\":600,\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.08em\",\"color\":\"var(--muted-foreground)\",\"margin\":\"0 0 0.875rem\"},\"children\":[\"Agent State\",[\"$\",\"span\",null,{\"style\":{\"marginLeft\":\"0.5rem\",\"fontWeight\":400,\"color\":\"var(--muted-foreground)\",\"opacity\":0.6},\"children\":3}]]}],[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gridTemplateColumns\":\"repeat(auto-fill, minmax(260px, 1fr))\",\"gap\":\"0.75rem\"},\"children\":[[\"$\",\"a\",\"shared-state-read-write\",{\"href\":\"/demos/shared-state-read-write\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Shared State (Read + Write)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Bidirectional shared state - UI writes preferences, agent writes notes\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/shared-state-read-write\"}]]}],[\"$\",\"a\",\"readonly-state-agent-context\",{\"href\":\"/demos/readonly-state-agent-context\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Readonly State (Agent Context)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Frontend provides read-only context to the agent via useAgentContext\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/readonly-state-agent-context\"}]]}],[\"$\",\"a\",\"shared-state-streaming\",{\"href\":\"/demos/shared-state-streaming\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"State Streaming\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Per-token state delta streaming from agent to UI\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/shared-state-streaming\"}]]}]]}]]}]\n"])</script>
8<script>self.__next_f.push([1,"15:[\"$\",\"section\",\"multi-agent\",{\"style\":{\"marginBottom\":\"2.5rem\"},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"fontWeight\":600,\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.08em\",\"color\":\"var(--muted-foreground)\",\"margin\":\"0 0 0.875rem\"},\"children\":[\"Multi-Agent\",[\"$\",\"span\",null,{\"style\":{\"marginLeft\":\"0.5rem\",\"fontWeight\":400,\"color\":\"var(--muted-foreground)\",\"opacity\":0.6},\"children\":1}]]}],[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gridTemplateColumns\":\"repeat(auto-fill, minmax(260px, 1fr))\",\"gap\":\"0.75rem\"},\"children\":[[\"$\",\"a\",\"subagents\",{\"href\":\"/demos/subagents\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Sub-Agents\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Supervisor delegates to research / writing / critique CrewAI sub-crews with a live delegation log\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/subagents\"}]]}]]}]]}]\n"])</script>
8<script>self.__next_f.push([1,"16:[\"$\",\"section\",\"platform\",{\"style\":{\"marginBottom\":\"2.5rem\"},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"fontWeight\":600,\"textTransform\":\"uppercase\",\"letterSpacing\":\"0.08em\",\"color\":\"var(--muted-foreground)\",\"margin\":\"0 0 0.875rem\"},\"children\":[\"Platform\",[\"$\",\"span\",null,{\"style\":{\"marginLeft\":\"0.5rem\",\"fontWeight\":400,\"color\":\"var(--muted-foreground)\",\"opacity\":0.6},\"children\":2}]]}],[\"$\",\"div\",null,{\"style\":{\"display\":\"grid\",\"gridTemplateColumns\":\"repeat(auto-fill, minmax(260px, 1fr))\",\"gap\":\"0.75rem\"},\"children\":[[\"$\",\"a\",\"agent-config\",{\"href\":\"/demos/agent-config\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Agent Config Object\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Forward a typed config object (tone / expertise / response length) from the provider to the agent\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/agent-config\"}]]}],[\"$\",\"a\",\"auth\",{\"href\":\"/demos/auth\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Authentication\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Runtime-level bearer-token auth via the V2 onRequest hook\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/auth\"}]]}]]}]]}]\n"])</script>
8<script>self.__next_f.push([1,"17:[\"$\",\"$L26\",null,{\"children\":[\"$L27\",[\"$\",\"$L28\",null,{\"promise\":\"$@29\"}]]}]\n18:[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$L2a\",null,{\"children\":\"$L2b\"}],null],[\"$\",\"$L2c\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$2d\",null,{\"fallback\":null,\"children\":\"$L2e\"}]}]}]]}]\n"])</script>
8<script>self.__next_f.push([1,"1a:[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Frontend Tools (Async)\"}]\n1b:[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"useFrontendTool with an async handler\"}]\n1c:[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/frontend-tools-async\"}]\n"])</script>
8<script>self.__next_f.push([1,"1d:[\"$\",\"a\",\"gen-ui-interrupt\",{\"href\":\"/demos/gen-ui-interrupt\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Human in the Loop: Interrupts\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Native CrewAI Flow human feedback rendered inline through useInterrupt\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/gen-ui-interrupt\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"1e:[\"$\",\"a\",\"interrupt-headless\",{\"href\":\"/demos/interrupt-headless\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Headless Interrupt\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Native CrewAI Flow human feedback rendered in the app surface outside chat\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/interrupt-headless\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"1f:[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/gen-ui-tool-based\"}]\n"])</script>
8<script>self.__next_f.push([1,"20:[\"$\",\"a\",\"open-gen-ui\",{\"href\":\"/demos/open-gen-ui\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Fully Open-Ended Generative UI\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Agent generates UI from an arbitrary component library\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/open-gen-ui\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"21:[\"$\",\"a\",\"open-gen-ui-advanced\",{\"href\":\"/demos/open-gen-ui-advanced\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Open-Ended Gen UI (Advanced)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Agent-authored UI that invokes host sandbox functions from inside the iframe\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/open-gen-ui-advanced\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"22:[\"$\",\"a\",\"declarative-gen-ui\",{\"href\":\"/demos/declarative-gen-ui\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"Declarative Generative UI (A2UI - Dynamic Schema)\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Branded A2UI components generated by a secondary LLM against a custom catalog\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/declarative-gen-ui\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"23:[\"$\",\"a\",\"a2ui-fixed-schema\",{\"href\":\"/demos/a2ui-fixed-schema\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"A2UI Fixed-Schema\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"Pre-authored component tree; the agent streams only data into the data model\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/a2ui-fixed-schema\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"24:[\"$\",\"a\",\"a2ui-recovery\",{\"href\":\"/demos/a2ui-recovery\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"A2UI Error Recovery\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"CrewAI Flow-owned validate-to-retry recovery that heals a malformed render or shows a graceful exhausted fallback\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/a2ui-recovery\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"25:[\"$\",\"a\",\"mcp-apps\",{\"href\":\"/demos/mcp-apps\",\"className\":\"demo-card\",\"children\":[[\"$\",\"h3\",null,{\"style\":{\"fontSize\":\"1rem\",\"fontWeight\":600,\"letterSpacing\":\"-0.01em\",\"margin\":\"0 0 0.375rem\",\"color\":\"var(--foreground)\"},\"children\":\"MCP Apps\"}],[\"$\",\"p\",null,{\"style\":{\"fontSize\":\"0.8125rem\",\"lineHeight\":1.5,\"color\":\"var(--muted-foreground)\",\"margin\":0,\"display\":\"-webkit-box\",\"WebkitLineClamp\":3,\"WebkitBoxOrient\":\"vertical\",\"overflow\":\"hidden\"},\"children\":\"MCP server-driven UI via activity renderers\"}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":\"0.75rem\",\"fontFamily\":\"ui-monospace, monospace\",\"fontSize\":\"0.75rem\",\"color\":\"var(--muted-foreground)\",\"opacity\":0.7},\"children\":\"/demos/mcp-apps\"}]]}]\n"])</script>
8<script>self.__next_f.push([1,"2b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n27:null\n"])</script>
8<script>self.__next_f.push([1,"29:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"CopilotKit Showcase\"}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script>
8<script>self.__next_f.push([1,"2e:\"$29:metadata\"\n"])</script>
8</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.