Emerging
CopilotKit integration with Langroid
Copy-paste command to clone the canonical starter
npx copilotkit@latest init --framework langroid
Natural conversation with frontend tool execution
User approves agent actions before execution
Interactive approval/decision surface rendered inline in the chat via the high-level `useHumanInTheLoop` hook
Time-picker card rendered inline via useHumanInTheLoop for a booking flow
Agent requests approval via async useFrontendTool; UI pops as an app-level modal
Custom render for tool calls inline in the chat stream
Agent uses tools to trigger UI generation
Long-running agent tasks with generated UI
Per-token state delta streaming from agent to UI
Bidirectional shared state — UI writes preferences via agent.setState, agent writes notes via the set_notes tool
Supervisor LLM delegates to research / writing / critique sub-agents; live delegation log streams running -> completed transitions
Default CopilotChat re-themed via CopilotKitCSSProperties
Docked sidebar chat via <CopilotSidebar />
Floating popup chat via <CopilotPopup />
Customize CopilotChat via its slot system (welcomeScreen, disclaimer, assistantMessage)
Minimal custom chat surface built on useAgent
Agent invokes client-side handlers registered with useFrontendTool
useFrontendTool with an async handler — agent awaits a client-side async operation (simulated notes DB query) and uses the returned result
Custom reasoning slot render (placeholder until Langroid exposes reasoning events)
Built-in CopilotChatReasoningMessage renders without a custom slot (placeholder until Langroid exposes reasoning events)
Frontend provides read-only context to the agent via useAgentContext
A2UI dynamic-schema rendering — agent emits operations against a client-declared catalog
Bearer-token gate via the V2 runtime's onRequest hook; unauth requests are rejected with 401
A full chat surface built from scratch on useAgent — no CopilotChat, hand-rolled message list + bubbles
Typed config forwarded via CopilotKit provider properties; the agent reads tone/expertise/responseLength per turn
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
Single branded wildcard renderer via useDefaultRenderTool — the same app-designed card paints every tool call
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
Agent generates UI from an arbitrary component library via the runtime's openGenerativeUI middleware
Agent-authored UI that can invoke frontend sandbox functions from inside the iframe
Speech-to-text via @copilotkit/voice — mic button or sample audio populates the chat composer
Image + PDF uploads forwarded to a vision-capable agent (gpt-4o); PDFs are flattened to text server-side
Frontend BYOC via @hashbrownai/react — agent emits a JSON envelope that streams progressively into a sales dashboard
Frontend BYOC via @json-render/react — agent emits a flat element-map spec rendered against a Zod-validated catalog
MCP servers with UI resources rendered inline as sandboxed iframes via the runtime's mcpApps middleware
Polished landing-style chat shell over the shared Langroid agent — gradient background, suggestion pills, and an example dashboard surface
Agent streams data into a frontend-authored fixed component schema; backend ships JSON, agent fills in values
Interactive component rendered inline in the chat via the lower-level `useInterrupt` primitive — direct control over the interrupt lifecycle
Resolve interrupts from a plain button grid — no chat, no useInterrupt render prop