CopilotKit for In-App AI Agents and Generative UI

What does CopilotKit do, in plain English?

CopilotKit is an open-source framework from Tawkit, Inc. for adding AI assistants to your own applications. Think of it as the connection between an agent and the screen where people already work. A user can ask for help, see a chart or status card, and interact with functions that your development team has exposed.

For example, an assistant in a task application could add an item to a shared list and show the updated result. Your team supplies the application, data access and permitted actions. Visiting the CopilotKit website does not automatically give an assistant control over unrelated software.

From chat to application actions

The framework is useful for SaaS products, internal tools and mobile applications that need more than a text-only conversation. Frontend tools can invoke registered browser-side handlers, such as changing a filter or opening a record. Access to business data still depends on your application's permissions.

Official SDKs cover React, Angular, Vue and React Native. You can use a built-in agent or follow an integration for LangGraph, Google ADK, Mastra, PydanticAI and other supported backends. AG-UI carries the interaction between agent and interface; CopilotKit supplies the application-facing building blocks. Channels also provides routes into Slack and Microsoft Teams.

Build your first working integration

Start with one small task that has an observable result:

1. Prepare a React project, Node.js 20+ and a model-provider API key.
2. Install @copilotkit/react-core and @copilotkit/runtime. Configure credentials on the server and create the runtime endpoint.
3. Connect the Provider to that endpoint, import the styles and add a chat or sidebar component.
4. Test an ordinary conversation, then register a narrowly defined frontend tool.
5. Verify the resulting application state and inspect the agent and AG-UI events locally in Inspector.

The official quickstart contains the complete configuration. If you already have an agent, use its framework integration: BuiltInAgent calls a model directly and does not automatically connect your existing logic. A client-only SPA also needs its own runtime server rather than assuming a Next.js same-origin API route.

Generative UI, state and human approval

Controlled generative UI lets the agent present your own cards, charts and tables. In React, useComponent registers a display component and typed parameters. The agent supplies the data; your design system determines the appearance. That display mechanism does not itself execute a backend transaction.

Shared state keeps the agent and application working with synchronized data. Human-in-the-loop interactions let a run pause for a selection or confirmation. For a mandatory approval, distinguish an agent choosing to ask a question from a graph-enforced checkpoint. The component guide explains where display ends and interactive workflows begin.

Free SDK, hosted plans and usage limits

Checked on October 18, 2026, the public USD pricing lists Developer as free for one developer, with 200 maximum threads, three-day thread retention and 1 GB of multimodal storage. Pro is $39/month. Team is $100 per seat/month for up to five seats; pending invitations also consume seats. Enterprise uses custom pricing and terms. Local taxes and checkout conditions may differ.

Budget for your model provider and application infrastructure as well. Intelligence adds persistent rich conversations and user memories; the current table lists Analytics and Self-Learning as Enterprise early access. Consult the current plan comparison before relying on an older tutorial's allowances.

Deployment, privacy and commercial use

The repository's MIT license permits commercial use subject to preserving its notices. Hosted services and enterprise capabilities have their own terms. The pricing table distinguishes runtime-only self-hosting on Developer/Pro from broader platform deployment options.

Self-hosting a runtime does not establish that data never reaches an external model. The privacy policy separates website processing from processing governed by customer agreements. Open-source telemetry documentation says it collects metadata rather than prompts, messages, agent state or tool content and provides an opt-out. That statement is specific to telemetry, not every service in your stack.

Frequently asked questions

Is CopilotKit free?

The SDK is open source and Developer offers a free platform allowance. Neither means unlimited hosted usage or free model inference.

Does CopilotKit work only with React?

No. Official SDKs also cover Angular, Vue and React Native, with framework-specific components and configuration.

Can I self-host CopilotKit?

Yes, but distinguish the runtime from the full Intelligence platform. Deployment scope depends on the plan, and external model connections still need a data-flow review.

Official resources and community

• Official documentation: choose your frontend and agent integration.
• GitHub repository: inspect source, licensing and issues.
• Official Discord community: discuss implementation questions.