name: CopilotKit's Built-in Agent slug: built-in-agent category: popular language: typescript logo: /logos/built-in-agent.svg description: >- CopilotKit's Built-in Agent in factory mode. The agent runs in-process inside the Next.js route handler — no separate agent server. partner_docs: null repo: https://github.com/CopilotKit/CopilotKit/tree/main/showcase/integrations/built-in-agent copilotkit_version: 2.0.0 deployed: true docs_mode: authored sort_order: 5 generative_ui: - constrained-explicit - a2ui-fixed-schema - a2ui-dynamic-schema interaction_modalities: - sidebar - embedded - chat features: - beautiful-chat - cli-start - agentic-chat - prebuilt-sidebar - prebuilt-popup - chat-slots - chat-customization-css - headless-simple - headless-complete - hitl-in-chat - hitl-in-chat-booking - hitl-in-app - tool-rendering - gen-ui-tool-based - gen-ui-agent - shared-state-read-write - readonly-state-agent-context - subagents - mcp-apps - open-gen-ui - open-gen-ui-advanced - tool-rendering-default-catchall - tool-rendering-custom-catchall - frontend-tools - frontend-tools-async - auth - agent-config - voice - multimodal - byoc-hashbrown - byoc-json-render - reasoning-custom - reasoning-default - declarative-gen-ui - a2ui-fixed-schema not_supported_features: - hitl - shared-state-streaming # QUARANTINED pending a @copilotkit/react-core release. gen-ui-interrupt / # interrupt-headless fail turn-2 due to a useInterrupt/useHeadlessInterrupt # RESUME-PATH hook bug in @copilotkit/react-core/v2: the backend resumes and # streams fine (HTTP 200), but the frontend never appends the confirmation # assistant bubble, so the harness DOM settle-check times out. The fix is a # published-package change (out of scope here), so these demos are honestly # marked not-supported (skipped-incapable side-rows, not green, not red) # rather than counting as a regression. The demos remain wired below. - gen-ui-interrupt - interrupt-headless - reasoning-default-render - agentic-chat-reasoning - tool-rendering-reasoning-chain agent_config_pattern: runtime-properties a2ui_pattern: schema-inline auth_pattern: runtime-onrequest demos: - id: cli-start name: CLI Start Command description: Copy-paste command to clone the canonical starter tags: - chat-ui command: "npx copilotkit@latest init --framework built-in-agent" - id: beautiful-chat name: Beautiful Chat description: Polished starter chat with two-pane layout and pre-wired suggestions tags: - chat-ui route: /demos/beautiful-chat highlight: - src/app/demos/beautiful-chat/page.tsx - src/lib/factory/tanstack-factory.ts - src/app/api/copilotkit/route.ts - id: agentic-chat name: Agentic Chat description: Natural conversation with frontend tool execution tags: [chat-ui] route: /demos/agentic-chat - id: prebuilt-sidebar name: "Pre-Built: Sidebar" description: Docked sidebar chat via tags: - chat-ui route: /demos/prebuilt-sidebar highlight: - src/app/demos/prebuilt-sidebar/page.tsx - src/lib/factory/tanstack-factory.ts - src/app/api/copilotkit/route.ts - id: prebuilt-popup name: "Pre-Built: Popup" description: Floating popup chat via tags: - chat-ui route: /demos/prebuilt-popup highlight: - src/app/demos/prebuilt-popup/page.tsx - src/lib/factory/tanstack-factory.ts - src/app/api/copilotkit/route.ts - id: chat-slots name: Chat Customization (Slots) description: Customize CopilotChat via its slot system tags: - chat-ui route: /demos/chat-slots highlight: - src/app/demos/chat-slots/page.tsx - src/app/demos/chat-slots/custom-welcome-screen.tsx - src/app/demos/chat-slots/custom-assistant-message.tsx - src/app/demos/chat-slots/custom-disclaimer.tsx - id: chat-customization-css name: Chat Customization (CSS) description: Default CopilotChat re-themed via CopilotKitCSSProperties tags: - chat-ui route: /demos/chat-customization-css highlight: - src/app/demos/chat-customization-css/page.tsx - src/app/demos/chat-customization-css/theme.css - id: headless-simple name: Headless Chat (Simple) description: Minimal custom chat surface built on useAgent tags: - chat-ui route: /demos/headless-simple highlight: - src/app/demos/headless-simple/page.tsx - src/lib/factory/tanstack-factory.ts - src/app/api/copilotkit/route.ts - id: headless-complete name: Headless Chat (Complete) description: Full chat implementation built from scratch on useAgent tags: - chat-ui route: /demos/headless-complete highlight: - src/app/demos/headless-complete/page.tsx - src/app/demos/headless-complete/use-rendered-messages.tsx - src/app/demos/headless-complete/tool-renderers.tsx - src/app/demos/headless-complete/message-list.tsx - id: hitl-in-chat name: In-Chat Human in the Loop description: User approves agent actions before execution tags: [interactivity] route: /demos/hitl - id: tool-rendering name: Tool Rendering description: Backend agent tools rendered as UI components tags: [agent-capabilities] route: /demos/tool-rendering highlight: - src/lib/factory/server-tools.ts - id: gen-ui-tool-based name: Tool-Based Generative UI description: Agent uses tools to trigger UI generation tags: [generative-ui] route: /demos/gen-ui-tool-based - id: gen-ui-agent name: Agentic Generative UI description: Long-running agent tasks with generated UI tags: [generative-ui] route: /demos/gen-ui-agent - id: shared-state-read-write name: Shared State (Read + Write) description: Bidirectional agent state — UI writes preferences, agent writes notes back tags: [agent-state] route: /demos/shared-state-read-write - id: shared-state-streaming name: State Streaming description: Per-token state delta streaming from agent to UI tags: [agent-state] route: /demos/shared-state-streaming - id: subagents name: Sub-Agents description: Multiple agents with visible task delegation tags: [multi-agent] route: /demos/subagents highlight: - src/lib/factory/subagent-tools.ts - id: hitl-in-chat-booking name: In-Chat HITL (Booking) description: Time-picker card rendered inline via useHumanInTheLoop for a booking flow tags: [interactivity] route: /demos/hitl-in-chat-booking highlight: - src/app/demos/hitl-in-chat-booking/page.tsx - src/app/demos/hitl-in-chat-booking/time-picker-card.tsx - src/lib/factory/tanstack-factory.ts - id: mcp-apps name: MCP Apps description: MCP server-driven UI via activity renderers tags: [generative-ui] route: /demos/mcp-apps highlight: - src/app/demos/mcp-apps/page.tsx - src/app/api/copilotkit-mcp-apps/route.ts - src/lib/factory/mcp-apps-factory.ts - id: open-gen-ui name: Fully Open-Ended Generative UI description: Agent generates UI from an arbitrary component library tags: [generative-ui] route: /demos/open-gen-ui highlight: - src/app/demos/open-gen-ui/page.tsx - src/app/api/copilotkit-ogui/route.ts - src/lib/factory/ogui-factory.ts - id: open-gen-ui-advanced name: Open-Ended Generative UI (Advanced) description: Sandboxed iframe UI calls back into host-defined functions tags: [generative-ui] route: /demos/open-gen-ui-advanced highlight: - src/app/demos/open-gen-ui-advanced/page.tsx - src/app/demos/open-gen-ui-advanced/sandbox-functions.ts - src/app/demos/open-gen-ui-advanced/suggestions.ts - src/app/api/copilotkit-ogui/route.ts - src/lib/factory/ogui-factory.ts - id: tool-rendering-default-catchall name: "Tool Rendering: Default Catch-all" description: Built-in DefaultToolCallRenderer wired with no config tags: [agent-capabilities] route: /demos/tool-rendering-default-catchall highlight: - src/app/demos/tool-rendering-default-catchall/page.tsx - src/lib/factory/server-tools.ts - src/lib/factory/tanstack-factory.ts - id: tool-rendering-custom-catchall name: "Tool Rendering: Custom Catch-all" description: Single branded wildcard renderer for every tool call tags: [agent-capabilities] route: /demos/tool-rendering-custom-catchall highlight: - src/app/demos/tool-rendering-custom-catchall/page.tsx - src/app/demos/tool-rendering-custom-catchall/custom-catchall-renderer.tsx - src/lib/factory/server-tools.ts - id: frontend-tools name: Frontend Tools description: Tool defined in React, executed in the browser, invoked by the agent tags: [agent-capabilities] route: /demos/frontend-tools highlight: - src/app/demos/frontend-tools/page.tsx - src/lib/factory/tanstack-factory.ts - id: frontend-tools-async name: Frontend Tools (Async) description: Async frontend-tool handler with branded per-tool render tags: [agent-capabilities] route: /demos/frontend-tools-async highlight: - src/app/demos/frontend-tools-async/page.tsx - src/app/demos/frontend-tools-async/notes-card.tsx - src/lib/factory/tanstack-factory.ts - id: hitl-in-app name: In-App Human in the Loop description: Async frontend-tool handler resolved by an app-level approval modal tags: [interactivity] route: /demos/hitl-in-app highlight: - src/app/demos/hitl-in-app/page.tsx - src/app/demos/hitl-in-app/approval-dialog.tsx - id: readonly-state-agent-context name: Readonly Agent Context description: Frontend publishes structured read-only context to the agent via useAgentContext tags: [agent-state] route: /demos/readonly-state-agent-context highlight: - src/app/demos/readonly-state-agent-context/page.tsx - id: auth name: Authentication description: Bearer-token gate on the runtime via the V2 onRequest hook tags: [agent-capabilities] route: /demos/auth highlight: - src/app/demos/auth/page.tsx - src/app/demos/auth/use-demo-auth.ts - src/app/demos/auth/auth-banner.tsx - src/app/demos/auth/demo-token.ts - src/app/api/copilotkit-auth/[[...slug]]/route.ts - id: agent-config name: Agent Config Object description: Typed config (tone / expertise / responseLength) forwarded via provider properties tags: [agent-capabilities] route: /demos/agent-config highlight: - src/app/demos/agent-config/page.tsx - src/app/demos/agent-config/config-card.tsx - src/app/demos/agent-config/use-agent-config.ts - src/app/demos/agent-config/config-types.ts - src/app/api/copilotkit-agent-config/route.ts - id: voice name: Voice Input description: Speech-to-text via @copilotkit/voice with sample-audio button tags: [chat-ui] route: /demos/voice highlight: - src/app/demos/voice/page.tsx - src/app/demos/voice/sample-audio-button.tsx - src/app/api/copilotkit-voice/[[...slug]]/route.ts - id: multimodal name: Multimodal Attachments description: Image and PDF uploads answered by the vision-capable gpt-4o agent tags: [chat-ui] route: /demos/multimodal highlight: - src/app/demos/multimodal/page.tsx - src/app/demos/multimodal/sample-attachment-buttons.tsx - src/app/api/copilotkit-multimodal/route.ts - id: byoc-hashbrown name: "BYOC: Hashbrown" description: Streaming structured output via @hashbrownai/react tags: [generative-ui] route: /demos/byoc-hashbrown highlight: - src/app/demos/byoc-hashbrown/page.tsx - src/app/demos/byoc-hashbrown/hashbrown-renderer.tsx - src/lib/factory/byoc-hashbrown-factory.ts - src/app/api/copilotkit-byoc-hashbrown/route.ts - id: byoc-json-render name: "BYOC: json-render" description: Streaming structured output via @json-render/react tags: [generative-ui] route: /demos/byoc-json-render highlight: - src/app/demos/byoc-json-render/page.tsx - src/app/demos/byoc-json-render/json-render-renderer.tsx - src/app/demos/byoc-json-render/registry.tsx - src/app/demos/byoc-json-render/catalog.ts - src/lib/factory/byoc-json-render-factory.ts - src/app/api/copilotkit-byoc-json-render/route.ts - id: reasoning-custom name: Agentic Chat (Reasoning) description: Visible chain-of-thought during normal conversation, rendered via a custom reasoningMessage slot tags: [chat-ui] route: /demos/reasoning-custom highlight: - src/app/demos/reasoning-custom/page.tsx - src/app/demos/reasoning-custom/reasoning-block.tsx - src/lib/factory/reasoning-factory.ts - src/app/api/copilotkit-reasoning/route.ts - id: reasoning-default name: Reasoning (Default Render) description: Zero-config rendering of the agent's reasoning chain via CopilotKit's built-in reasoning message tags: [chat-ui] route: /demos/reasoning-default highlight: - src/app/demos/reasoning-default/page.tsx - src/lib/factory/reasoning-factory.ts - src/app/api/copilotkit-reasoning/route.ts - id: tool-rendering-reasoning-chain name: "Tool Rendering: Reasoning Chain" description: Sequential tool calls interleaved with the agent's visible reasoning chain tags: [agent-capabilities] route: /demos/tool-rendering-reasoning-chain highlight: - src/app/demos/tool-rendering-reasoning-chain/page.tsx - src/app/demos/tool-rendering-reasoning-chain/reasoning-block.tsx - src/app/demos/tool-rendering-reasoning-chain/weather-card.tsx - src/app/demos/tool-rendering-reasoning-chain/flight-list-card.tsx - src/app/demos/tool-rendering-reasoning-chain/custom-catchall-renderer.tsx - src/lib/factory/reasoning-factory.ts - src/app/api/copilotkit-reasoning/route.ts - id: declarative-gen-ui name: Declarative Generative UI (A2UI Dynamic) description: Agent designs an A2UI component tree at runtime from a registered catalog tags: [generative-ui] route: /demos/declarative-gen-ui highlight: - src/app/demos/declarative-gen-ui/page.tsx - src/app/demos/declarative-gen-ui/a2ui/catalog.ts - src/app/demos/declarative-gen-ui/a2ui/definitions.ts - src/app/demos/declarative-gen-ui/a2ui/renderers.tsx - src/lib/factory/a2ui-factory.ts - src/app/api/copilotkit-declarative-gen-ui/route.ts - id: a2ui-fixed-schema name: A2UI Fixed Schema (Flight Card) description: Frontend owns the component tree; the agent only streams data tags: [generative-ui] route: /demos/a2ui-fixed-schema highlight: - src/app/demos/a2ui-fixed-schema/page.tsx - src/app/demos/a2ui-fixed-schema/a2ui/catalog.ts - src/app/demos/a2ui-fixed-schema/a2ui/definitions.ts - src/app/demos/a2ui-fixed-schema/a2ui/renderers.tsx - src/lib/factory/a2ui-fixed-schema-factory.ts - src/app/api/copilotkit-a2ui-fixed-schema/route.ts - id: gen-ui-interrupt name: Gen UI Interrupt (Frontend Tool) description: In-chat time-picker via useFrontendTool with an async handler that blocks until the user picks a slot — Strategy B adaptation of the LangGraph interrupt primitive tags: - interactivity route: /demos/gen-ui-interrupt highlight: - src/app/demos/gen-ui-interrupt/page.tsx - src/app/demos/gen-ui-interrupt/time-picker-card.tsx - src/lib/factory/tanstack-factory.ts - src/app/api/copilotkit/route.ts - id: interrupt-headless name: Headless Interrupt (Frontend Tool) description: Time-picker popup rendered outside the chat in the app surface — headless variant of the Strategy B interrupt adaptation tags: - interactivity route: /demos/interrupt-headless highlight: - src/app/demos/interrupt-headless/page.tsx - src/lib/factory/tanstack-factory.ts - src/app/api/copilotkit/route.ts # NOTE: starter omitted intentionally for v1 of this column. The # `showcase/scripts/generate-starters.ts` generator expects every package # to have a separate `src/agent/` backend; built-in-agent runs in-process # with no separate agent server, so generator support for single-service # packages is a follow-up. Starter will be added in a subsequent PR.