mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Jordan Ritter
928ece2f6c
Annotates 14 integration manifests with d6_not_supported_features entries and aligns d6_supported_features with what each backend actually implements, so the D6 fleet probe only enumerates demos that the backend can serve.
433 lines
16 KiB
YAML
433 lines
16 KiB
YAML
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 <CopilotSidebar />
|
|
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 <CopilotPopup />
|
|
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.
|