Overview
CopilotKit is an open-source frontend framework and component library designed to help developers embed powerful AI copilots, chatbots, and in-app agents into web applications quickly. It focuses on the frontend/UX layer — providing both headless APIs for full control and a set of customizable pre-built components for rapid integration. CopilotKit aims to be framework-agnostic (works with React, Next.js, AGUI, etc.) while offering production-ready features and built-in security patterns.
Key features
- Headless APIs and hooks (e.g. useAgent) for programmatic control of agent state and lifecycle.
- Pre-built, customizable UI components (sidebars, chat widgets, stateful renderers) that can be styled or replaced with your own subcomponents.
- Frontend tool primitives (useFrontendTool, useHumanInTheLoop, useRenderToolCall) to surface tools, approvals, and render tool results in the UI.
- Streaming and state-driven rendering to support progressive generation and live updates.
- Prompt-injection protections and other frontend security considerations baked into the patterns.
- CLI to scaffold projects quickly (npx copilotkit@latest create) and documentation/site for examples and hosted cloud options.
- Open-source MIT license and an active community (Discord, docs, examples).
Architecture & developer APIs
CopilotKit separates concerns between agent orchestration and UI rendering. You can:
- Use headless APIs/hooks to create and control agents programmatically (inspect messages, set state, call tools, run agents).
- Drop in pre-built components when you want a working UI quickly (e.g., CopilotSidebar) and deeply customize labels, CSS, or replace subcomponents.
- Define frontend tools that render custom UIs while executing handlers (useFrontendTool), enabling rich integrations like spreadsheet editing or approval flows.
Example usage:
// Get and control an agent
const { copilotkit } = useCopilotKit();
const { agent } = useAgent({ agentId: "my_agent" });
const { messages, state, addMessage } = agent;
// Run the agent programmatically
copilotkit.runAgent({ agent });
// Pre-built component
<CopilotSidebar
instructions={"You are assisting the user as best as you can."}
labels={{ title: "Sidebar Assistant", initial: "Need any help?" }}
/>Integrations & use cases
- In-app assistants and sidebars that help users with workflows (form-filling, contextual help).
- Agentic frontends that coordinate tools, human-in-the-loop approvals, and render tool outputs as interactive UI.
- Embedding chat + RAG workflows inside dashboards or product UIs with streaming responses.
- Rapid prototypes to production-ready integrations thanks to customizable components and CLI scaffolding.
Community, docs & license
CopilotKit maintains documentation (https://docs.copilotkit.ai), example pages, and a community Discord. The repository is licensed under MIT and accepts contributions (CONTRIBUTING.md, docs contributions guide). The project also advertises a hosted cloud offering and links to examples demonstrating form-filling copilots, state-machine copilots, and chat-with-your-data patterns.
Who should use it
Frontend engineers, product teams, and platform builders who want a structured, production-focused way to add AI assistants and agents to web apps without building all UI and agent orchestration from scratch. It’s particularly useful when you need both fine-grained programmatic control and polished, customizable UI components.
