CopilotKit

Implements the AG-UI Protocol (Agent-User Interaction Protocol) as a standardized message format for real-time, bidirectional communication between frontend UI components and backend agents. Uses a schema-based event streaming architecture where agents emit structured events (tool calls, state updates, generative UI renders) that the frontend consumes and renders reactively. The protocol enables human-in-the-loop workflows where UI can interrupt, modify, or approve agent actions before execution.

Provides pre-built React components (CopilotChat, CopilotTextarea, CopilotSidebar) that integrate with the CopilotKit Provider to render agent conversations, tool outputs, and generative UI. Components use React hooks (useCopilotAction, useCopilotReadable) to bind frontend state to agent context, enabling bidirectional data flow. The library handles streaming message rendering, tool result visualization, and real-time state synchronization without requiring manual WebSocket management.

Enables agents to access and reason about the application's codebase through useCopilotReadable hook (React) or CopilotReadableService (Angular). Developers can expose code snippets, documentation, or application state as readable context that agents can access during reasoning. The context is sent to the agent's LLM as part of the system prompt, enabling code-aware suggestions and actions. Supports selective context exposure through metadata filtering.

Provides a command-line tool (create-copilot-app) that scaffolds new CopilotKit projects with pre-configured frontend (React/Angular) and backend (Express/Next.js/NestJS/Hono/FastAPI) templates. The CLI generates boilerplate code, installs dependencies, and configures the CopilotKit Provider and Runtime. Supports multiple framework combinations and includes example agents to demonstrate patterns.

Automatically renders tool execution results in the chat interface, with support for custom component rendering. When an agent executes a tool, the result is displayed using a registered component renderer. Developers can define custom renderers for specific tool types (e.g., render database query results as a table, render code as syntax-highlighted blocks). The system falls back to JSON rendering for unregistered tool types.

Abstracts LLM provider selection through a provider configuration layer, supporting OpenAI, Anthropic, Google, Azure, and local models (Ollama). Agents can be configured to use any provider without code changes. The abstraction handles provider-specific API differences (function calling schemas, streaming formats, token limits) transparently. Supports provider fallback and cost-aware provider selection.

Provides AgentRegistry for registering multiple agents and routing requests to the appropriate agent based on user input or configuration. Agents are registered by name and can be selected at runtime. The registry handles agent lifecycle, tool execution context, and state isolation between agents. Supports agent composition where one agent can delegate to another.

Provides Angular services (CopilotService, CopilotChatService) and directives that integrate with Angular's dependency injection system to connect agent backends. Services expose RxJS Observables for agent state, messages, and tool outputs, enabling reactive data binding in Angular templates. Handles WebSocket lifecycle management and automatic reconnection within Angular's service lifecycle hooks.

Enables developers to define frontend actions (useFrontendAction hook in React, FrontendActionService in Angular) that agents can invoke with type-safe arguments. Actions are registered with JSON Schema definitions that the agent receives, allowing it to understand available frontend capabilities. The system validates arguments against schemas before execution and provides TypeScript type inference for action handlers, ensuring compile-time safety.

Implements the Generative UI system where agents can emit UI component definitions (as JSON/JSX) that the frontend renders dynamically. Uses a shared state management layer (useCopilotReadable hook) where frontend state is synchronized bidirectionally with agent context. Agents can read current UI state, generate new components based on that state, and trigger re-renders when state changes, enabling truly interactive generative interfaces.

Provides a backend runtime abstraction (CopilotRuntime class) that works across Node.js frameworks (Express, Next.js, NestJS, Hono) and Python (FastAPI). The runtime handles agent lifecycle management, tool execution, event streaming, and state persistence. It abstracts framework-specific HTTP/WebSocket details, allowing developers to define agents once and deploy to any supported framework. Includes built-in agent support (default agent) and custom agent registration via AgentRegistry.

Provides native integration with LangGraph (LangChain's agentic framework) and CrewAI through the Python SDK. Developers can define agents in LangGraph or CrewAI, then wrap them with CopilotKitRemoteEndpoint to expose them via FastAPI. The integration handles graph execution, tool calling, and event streaming, translating LangGraph/CrewAI events into AG-UI Protocol messages. Supports custom agents via Python SDK's Agent base class.

Implements real-time communication between backend agents and frontend using WebSocket (preferred) or Server-Sent Events (SSE) fallback. The runtime automatically handles connection lifecycle, reconnection logic, and message buffering. Events are streamed as they occur (tool calls, state updates, messages) without batching, enabling low-latency agent-UI interaction. Supports event filtering and metadata attachment for selective frontend updates.

Enables agents to pause execution and request human approval before executing sensitive actions. Agents emit approval requests with action details; the frontend displays these to users who can approve, reject, or modify the action. The agent receives the user's decision and continues or aborts execution accordingly. Supports conditional approval (e.g., approve if cost < $100) and action modification before execution.

Provides a default agent implementation (DefaultAgent) that handles basic conversational AI and tool calling without requiring external agent frameworks. The agent maintains conversation history, manages tool execution state, and supports persistence to external storage (database, file system). Developers can extend DefaultAgent with custom logic or replace it entirely with LangGraph/CrewAI agents. State is stored in a configurable StateStore interface, enabling pluggable persistence backends.