mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Sam Julien
de8afbb758
Per team decision 2026-05-07: state-streaming only works on LangGraph variants. Move shared-state-streaming from features to not_supported_features for ag2, agno, claude-sdk-python, claude-sdk-typescript, crewai-crews, langroid, llamaindex, mastra, ms-agent-dotnet, ms-agent-python, pydantic-ai. Catalog regenerator now classifies these cells as unsupported, so the docs render the blue UnsupportedBox instead of yellow Missing snippet warnings.
527 lines
19 KiB
YAML
527 lines
19 KiB
YAML
name: Langroid
|
|
slug: langroid
|
|
category: emerging
|
|
language: python
|
|
logo: /logos/langroid.svg
|
|
description: CopilotKit integration with Langroid
|
|
partner_docs: null
|
|
repo: https://github.com/CopilotKit/CopilotKit/tree/main/showcase/integrations/langroid
|
|
copilotkit_version: 2.0.0
|
|
backend_url: https://showcase-langroid-production.up.railway.app
|
|
deployed: true
|
|
sort_order: 140
|
|
generative_ui:
|
|
- constrained-explicit
|
|
- a2ui-fixed-schema
|
|
- a2ui-dynamic-schema
|
|
interaction_modalities:
|
|
- sidebar
|
|
- embedded
|
|
- chat
|
|
not_supported_features:
|
|
- shared-state-streaming
|
|
features:
|
|
- cli-start
|
|
- agentic-chat
|
|
- hitl
|
|
- hitl-in-app
|
|
- hitl-in-chat
|
|
- hitl-in-chat-booking
|
|
- tool-rendering
|
|
- gen-ui-agent
|
|
- gen-ui-tool-based
|
|
- shared-state-read-write
|
|
- subagents
|
|
- chat-customization-css
|
|
- prebuilt-sidebar
|
|
- prebuilt-popup
|
|
- chat-slots
|
|
- headless-simple
|
|
- frontend-tools
|
|
- frontend-tools-async
|
|
- agentic-chat-reasoning
|
|
- reasoning-default-render
|
|
- readonly-state-agent-context
|
|
- declarative-gen-ui
|
|
- auth
|
|
- headless-complete
|
|
- agent-config
|
|
- tool-rendering-default-catchall
|
|
- tool-rendering-custom-catchall
|
|
- tool-rendering-reasoning-chain
|
|
- open-gen-ui
|
|
- open-gen-ui-advanced
|
|
- voice
|
|
- multimodal
|
|
- byoc-hashbrown
|
|
- byoc-json-render
|
|
- mcp-apps
|
|
- beautiful-chat
|
|
- a2ui-fixed-schema
|
|
- gen-ui-interrupt
|
|
- interrupt-headless
|
|
agent_config_pattern: shared-state
|
|
interrupt_pattern: promise-based
|
|
|
|
a2ui_pattern: schema-loading
|
|
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 langroid"
|
|
- id: agentic-chat
|
|
name: Agentic Chat
|
|
description: Natural conversation with frontend tool execution
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/agentic-chat
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/agent.py
|
|
- src/app/demos/agentic-chat/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: hitl
|
|
name: In-Chat Human in the Loop
|
|
description: User approves agent actions before execution
|
|
tags:
|
|
- interactivity
|
|
route: /demos/hitl
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/agent.py
|
|
- src/app/demos/hitl/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: hitl-in-chat
|
|
name: In-Chat HITL (useHumanInTheLoop — ergonomic API)
|
|
description: Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook
|
|
tags:
|
|
- interactivity
|
|
route: /demos/hitl-in-chat
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/hitl-in-chat/page.tsx
|
|
- src/app/demos/hitl-in-chat/time-picker-card.tsx
|
|
- src/app/api/copilotkit/route.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
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/hitl-in-chat/page.tsx
|
|
- src/app/demos/hitl-in-chat/time-picker-card.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: hitl-in-app
|
|
name: In-App Human in the Loop
|
|
description: Agent requests approval via async useFrontendTool; UI pops as an app-level modal
|
|
tags:
|
|
- interactivity
|
|
route: /demos/hitl-in-app
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/hitl-in-app/page.tsx
|
|
- src/app/demos/hitl-in-app/approval-dialog.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: tool-rendering
|
|
name: Tool Rendering
|
|
description: Custom render for tool calls inline in the chat stream
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/tool-rendering
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/agent.py
|
|
- src/app/demos/tool-rendering/page.tsx
|
|
- src/app/api/copilotkit/route.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
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/agent.py
|
|
- src/app/demos/gen-ui-tool-based/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: gen-ui-agent
|
|
name: Agentic Generative UI
|
|
description: Long-running agent tasks with generated UI
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/gen-ui-agent
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/agent.py
|
|
- src/app/demos/gen-ui-agent/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- 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
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/agent.py
|
|
- src/app/demos/shared-state-streaming/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: shared-state-read-write
|
|
name: Shared State (Read + Write)
|
|
description: Bidirectional shared state — UI writes preferences via agent.setState, agent writes notes via the set_notes tool
|
|
tags:
|
|
- agent-state
|
|
route: /demos/shared-state-read-write
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/shared_state_read_write.py
|
|
- src/app/demos/shared-state-read-write/page.tsx
|
|
- src/app/demos/shared-state-read-write/preferences-card.tsx
|
|
- src/app/demos/shared-state-read-write/notes-card.tsx
|
|
- src/app/api/copilotkit-shared-state-read-write/route.ts
|
|
- id: subagents
|
|
name: Sub-Agents
|
|
description: Supervisor LLM delegates to research / writing / critique sub-agents; live delegation log streams running -> completed transitions
|
|
tags:
|
|
- agent-capabilities
|
|
route: /demos/subagents
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/subagents.py
|
|
- src/app/demos/subagents/page.tsx
|
|
- src/app/demos/subagents/delegation-log.tsx
|
|
- src/app/api/copilotkit-subagents/route.ts
|
|
- id: chat-customization-css
|
|
name: Chat Customization (CSS)
|
|
description: Default CopilotChat re-themed via CopilotKitCSSProperties
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/chat-customization-css
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/chat-customization-css/page.tsx
|
|
- src/app/demos/chat-customization-css/theme.css
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: prebuilt-sidebar
|
|
name: "Pre-Built: Sidebar"
|
|
description: Docked sidebar chat via <CopilotSidebar />
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/prebuilt-sidebar
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/prebuilt-sidebar/page.tsx
|
|
- 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
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/prebuilt-popup/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: chat-slots
|
|
name: Chat Customization (Slots)
|
|
description: Customize CopilotChat via its slot system (welcomeScreen, disclaimer, assistantMessage)
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/chat-slots
|
|
animated_preview_url:
|
|
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
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: headless-simple
|
|
name: Headless Chat (Simple)
|
|
description: Minimal custom chat surface built on useAgent
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/headless-simple
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/headless-simple/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: frontend-tools
|
|
name: Frontend Tools (In-App Actions)
|
|
description: Agent invokes client-side handlers registered with useFrontendTool
|
|
tags:
|
|
- interactivity
|
|
route: /demos/frontend-tools
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/frontend-tools/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: frontend-tools-async
|
|
name: Frontend Tools (Async)
|
|
description: useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result
|
|
tags:
|
|
- interactivity
|
|
route: /demos/frontend-tools-async
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/frontend-tools-async/page.tsx
|
|
- src/app/demos/frontend-tools-async/notes-card.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: agentic-chat-reasoning
|
|
name: Reasoning
|
|
description: Custom reasoning slot render (placeholder until Langroid exposes reasoning events)
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/agentic-chat-reasoning
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/agentic-chat-reasoning/page.tsx
|
|
- src/app/demos/agentic-chat-reasoning/reasoning-block.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: reasoning-default-render
|
|
name: Reasoning (Default Render)
|
|
description: Built-in CopilotChatReasoningMessage renders without a custom slot (placeholder until Langroid exposes reasoning events)
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/reasoning-default-render
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/reasoning-default-render/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: readonly-state-agent-context
|
|
name: Readonly State (Agent Context)
|
|
description: Frontend provides read-only context to the agent via useAgentContext
|
|
tags:
|
|
- agent-state
|
|
route: /demos/readonly-state-agent-context
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/readonly-state-agent-context/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: declarative-gen-ui
|
|
name: Declarative Generative UI
|
|
description: A2UI dynamic-schema rendering — agent emits operations against a client-declared catalog
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/declarative-gen-ui
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/agent.py
|
|
- 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/app/api/copilotkit-declarative-gen-ui/route.ts
|
|
- id: auth
|
|
name: Authentication
|
|
description: Bearer-token gate via the V2 runtime's onRequest hook; unauth requests are rejected with 401
|
|
tags:
|
|
- authentication
|
|
route: /demos/auth
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/auth/page.tsx
|
|
- src/app/demos/auth/auth-banner.tsx
|
|
- src/app/demos/auth/use-demo-auth.ts
|
|
- src/app/demos/auth/demo-token.ts
|
|
- src/app/api/copilotkit-auth/[[...slug]]/route.ts
|
|
- id: headless-complete
|
|
name: Headless Chat (Complete)
|
|
description: A full chat surface built from scratch on useAgent — no CopilotChat, hand-rolled message list + bubbles
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/headless-complete
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/headless-complete/page.tsx
|
|
- src/app/demos/headless-complete/message-list.tsx
|
|
- src/app/demos/headless-complete/use-rendered-messages.tsx
|
|
- src/app/demos/headless-complete/tool-renderers.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: agent-config
|
|
name: Agent Config Object
|
|
description: Typed config forwarded via CopilotKit provider properties; the agent reads tone/expertise/responseLength per turn
|
|
tags:
|
|
- agent-capabilities
|
|
route: /demos/agent-config
|
|
animated_preview_url:
|
|
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/api/copilotkit-agent-config/route.ts
|
|
- id: tool-rendering-default-catchall
|
|
name: Tool Rendering (Default Catch-all)
|
|
description: 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
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/tool-rendering-default-catchall
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/tool-rendering-default-catchall/page.tsx
|
|
- src/agents/agent.py
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: tool-rendering-custom-catchall
|
|
name: Tool Rendering (Custom Catch-all)
|
|
description: Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/tool-rendering-custom-catchall
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/tool-rendering-custom-catchall/page.tsx
|
|
- src/app/demos/tool-rendering-custom-catchall/custom-catchall-renderer.tsx
|
|
- src/agents/agent.py
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: tool-rendering-reasoning-chain
|
|
name: Tool Rendering + Reasoning Chain (testing)
|
|
description: Sequential tool calls with reasoning tokens rendered side-by-side. NOTE — Langroid does not yet emit native reasoning AG-UI events; the slot wires up only when reasoning content arrives over the wire
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/tool-rendering-reasoning-chain
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/tool-rendering-reasoning-chain/page.tsx
|
|
- src/app/demos/tool-rendering-reasoning-chain/weather-card.tsx
|
|
- src/app/demos/tool-rendering-reasoning-chain/flight-list-card.tsx
|
|
- src/agents/agent.py
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: open-gen-ui
|
|
name: Fully Open-Ended Generative UI
|
|
description: Agent generates UI from an arbitrary component library via the runtime's openGenerativeUI middleware
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/open-gen-ui
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/app/demos/open-gen-ui/page.tsx
|
|
- src/agents/agent.py
|
|
- src/app/api/copilotkit-ogui/route.ts
|
|
- id: open-gen-ui-advanced
|
|
name: "Open-Ended Gen UI (Advanced: with frontend function calling)"
|
|
description: Agent-authored UI that can invoke frontend sandbox functions from inside the iframe
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/open-gen-ui-advanced
|
|
animated_preview_url:
|
|
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/agents/agent.py
|
|
- src/app/api/copilotkit-ogui/route.ts
|
|
- id: voice
|
|
name: Voice Input
|
|
description: Speech-to-text via @copilotkit/voice — mic button or sample audio populates the chat composer
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/voice
|
|
animated_preview_url:
|
|
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 + PDF uploads forwarded to a vision-capable agent (gpt-4o); PDFs are flattened to text server-side
|
|
tags:
|
|
- chat-ui
|
|
- generative-ui
|
|
route: /demos/multimodal
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/multimodal_agent.py
|
|
- 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: Frontend BYOC via @hashbrownai/react — agent emits a JSON envelope that streams progressively into a sales dashboard
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/byoc-hashbrown
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/byoc_hashbrown_agent.py
|
|
- src/app/demos/byoc-hashbrown/page.tsx
|
|
- src/app/demos/byoc-hashbrown/hashbrown-renderer.tsx
|
|
- src/app/api/copilotkit-byoc-hashbrown/route.ts
|
|
- id: byoc-json-render
|
|
name: "BYOC: json-render"
|
|
description: Frontend BYOC via @json-render/react — agent emits a flat element-map spec rendered against a Zod-validated catalog
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/byoc-json-render
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/byoc_json_render_agent.py
|
|
- src/app/demos/byoc-json-render/page.tsx
|
|
- src/app/demos/byoc-json-render/json-render-renderer.tsx
|
|
- src/app/api/copilotkit-byoc-json-render/route.ts
|
|
- id: mcp-apps
|
|
name: MCP Apps
|
|
description: MCP servers with UI resources rendered inline as sandboxed iframes via the runtime's mcpApps middleware
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/mcp-apps
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/mcp_apps_agent.py
|
|
- src/app/demos/mcp-apps/page.tsx
|
|
- src/app/api/copilotkit-mcp-apps/route.ts
|
|
- id: beautiful-chat
|
|
name: Beautiful Chat
|
|
description: Polished landing-style chat shell over the shared Langroid agent — gradient background, suggestion pills, and an example dashboard surface
|
|
tags:
|
|
- chat-ui
|
|
route: /demos/beautiful-chat
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/agent.py
|
|
- src/app/demos/beautiful-chat/page.tsx
|
|
- src/app/demos/byoc-json-render/charts/bar-chart.tsx
|
|
- src/app/demos/byoc-json-render/charts/pie-chart.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: a2ui-fixed-schema
|
|
name: A2UI (Fixed Schema)
|
|
description: Agent streams data into a frontend-authored fixed component schema; backend ships JSON, agent fills in values
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/a2ui-fixed-schema
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/a2ui_fixed_agent.py
|
|
- src/agents/a2ui_schemas/flight_schema.json
|
|
- 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/app/api/copilotkit-a2ui-fixed-schema/route.ts
|
|
- id: gen-ui-interrupt
|
|
name: In-Chat HITL (useInterrupt — low-level primitive)
|
|
description: Interactive component rendered inline in the chat via the lower-level `useInterrupt` primitive — direct control over the interrupt lifecycle
|
|
tags:
|
|
- generative-ui
|
|
route: /demos/gen-ui-interrupt
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/agent.py
|
|
- src/app/demos/gen-ui-interrupt/page.tsx
|
|
- src/app/demos/gen-ui-interrupt/time-picker-card.tsx
|
|
- src/app/api/copilotkit/route.ts
|
|
- id: interrupt-headless
|
|
name: Headless Interrupt (testing)
|
|
description: Resolve interrupts from a plain button grid — no chat, no useInterrupt render prop
|
|
tags:
|
|
- interactivity
|
|
route: /demos/interrupt-headless
|
|
animated_preview_url:
|
|
highlight:
|
|
- src/agents/agent.py
|
|
- src/app/demos/interrupt-headless/page.tsx
|
|
- src/app/api/copilotkit/route.ts
|