CopilotKit

CopilotKit — Best-in-class copilots in your product

CopilotKit provides AI copilots that you can embed into your application to understand your app and users, ground the copilot in real-time context, and take actions on behalf of users. It ships with headless UI primitives and pre-built UI components for seamless integration, including chat, suggestions, generative UI, audio, and more. The platform is designed for developers to build fast, customize effortlessly, and deploy virtual colleagues that augment your product experience.

---

How it works

1. Embed Copilot UI: Use the headless APIs and pre-built components such as <CopilotChat /> and <CopilotPopup /> to render a customizable Copilot UI inside your product.
2. Ground in context: Connect real-time application data and user data so the copilot can act with awareness of the current state (e.g., current document, spreadsheet, or user session).
3. Take actions: Use action hooks to let the copilot perform tasks on behalf of the user (e.g., sorting data, generating content, or triggering workflows).
4. Extend with CoAgents: Integrate LangGraph or CrewAI agents via the CoAgents infrastructure to expand capabilities and delegate complex tasks.
5. Iterate and customize: Leverage features for generative UI, guardrails, suggestions, and AI-enabled text editing to tailor the experience.

---

Getting started

• Refer to the docs for API usage and component props.
• Insert <CopilotKit publicApiKey="yourPublicKey"> around your app to initialize.
• Compose your app UI with <CopilotSidebar />, <YourApp />, and the Copilot components.
• Define actions with useCopilotAction to enable the copilot to perform domain-specific tasks.
• Optionally extend behavior with CoAgents for multi-agent orchestration.

---

Safety and governance

• Use guardrails to ensure safe and predictable AI actions.
• Design actions and prompts to avoid sensitive data leakage and comply with privacy requirements.

---

Core Features

• Headless UI integration with <CopilotChat /> and <CopilotPopup /> components
• Real-time grounding to application-specific and user-specific data
• Actionable AI: define actions that the copilot can execute (e.g., sort data, modify UI, trigger workflows)
• Generative UI: render fully custom React components inside the chat
• AI-assisted editing: CopilotTextarea for text editing with autocompletions and drafts
• Suggestions: in-chat suggestions to guide user interaction
• CoAgents: integrate LangGraph or CrewAI agents for extended capabilities
• Reusable boilerplate for common app scenarios (chat, commands, tasks)
• Open-source framework with community-driven enhancements
• Try-for-free and robust documentation support

---

Use cases

• In-app virtual assistant that understands the app and user context
• Automated data operations (sorting, filtering, summarizing) triggered by user requests
• Generative UI inside their app for dynamic content and interactions
• Collaborative agents that help users manage complex workflows
• Seamless extension with external AI agents via CoAgents

---

References

• Documentation: learn how to integrate CopilotKit, useCopilotReadable, useCopilotAction, and CoAgents
• API surface includes public API key initialization, CopilotKit container, and UI primitives