Skip to content
Get packs

Guide · Open source

How to use CopilotKit: install, set up and build agent UIs

Updated · written with AI from the project's own documentation and checked against our catalogue data

CopilotKit is an open-source SDK for adding AI agent interfaces to JavaScript and TypeScript applications. It provides a chat UI, shared state between agents and components, generative UI, and human-in-the-loop prompts. This guide walks through setup, the main features, and when the tool is a good fit, so you can decide whether to use it and how to start.

CopilotKitCopilotKit/CopilotKit · ★ 38.5k · MIT

Quick start

  1. 1Check prerequisites. Confirm you have Node.js installed and a JavaScript or TypeScript project to work in, or plan to create a new one.
  2. 2Run the onboarding command. From your project root, run npx --yes copilotkit@latest onboard start and follow the instructions your coding agent gives.
  3. 3Or scaffold a new project. To start fresh, run npx copilotkit@latest create. It creates a project in its own directory without changing existing apps.
  4. 4Install agent skills. Run npx copilotkit@latest skills install to give your coding agent help with building features and debugging.
  5. 5Add a chat UI and tools. Use the chat UI, backend tool rendering, and shared state to connect your agent to the interface.
  6. 6Add human-in-the-loop checks. Where an agent needs approval or edits, use human-in-the-loop so it pauses for user input before continuing.

What CopilotKit is and who it is for

CopilotKit is an SDK for building applications where AI agents interact with users through an interface. The README describes it as the layer between your agents and your users, and says the same agent can serve React, Angular, Vue, React Native, and Slack or Microsoft Teams.

It is aimed at developers. The README targets people writing code, so it is not a ready-made app for non-developers.

  • Developers adding an AI assistant or agent interface to a React or Next.js app
  • Teams who want one agent backend to serve a web app, a mobile app, and Slack or Teams
  • Projects where agents must ask users for confirmation or edits before continuing
  • Developers building chat interfaces that render custom UI components from tool calls

Prerequisites before you install CopilotKit

You need Node.js and either an existing or a new JavaScript or TypeScript project. The README excerpt does not state a required Node.js version, so check the official docs for that.

The listed frameworks are JavaScript-based, so CopilotKit is not a fit for projects without a JavaScript or TypeScript frontend.

  • Node.js (the README excerpt does not give a version)
  • An existing or new JavaScript/TypeScript project

Install CopilotKit with your coding agent

The simplest route in the README is to let your coding agent do the integration. Run the onboarding command from your project root, and the agent inspects your project and guides the setup.

You can also add the agent skills, which help your coding agent build features and debug issues.

npx --yes copilotkit@latest onboard start

Start a new project or install agent skills

To create a new project, use the create command. According to the README, it scaffolds a project in its own directory and does not modify an app you already have.

To add the agent skills to a project that already uses CopilotKit, run the skills install command.

  • Create a new project in its own directory: npx copilotkit@latest create
  • Install agent skills for your coding agent: npx copilotkit@latest skills install
npx copilotkit@latest create

Understand the core features

CopilotKit is built around a few pieces you combine in your app. The chat UI handles message streaming, tool calls, and agent responses. Shared state is a synchronized layer that agents and UI components can both read and write.

Generative UI lets agents create and update components at runtime, and human-in-the-loop lets an agent pause to ask for input, confirmation, or edits.

  • Chat UI: customizable interface with message streaming, tool calls, and agent responses
  • Backend Tool Rendering: agents call backend tools that return UI components rendered in the client
  • Generative UI: components generated and updated at runtime based on user intent and agent state
  • Shared State: real-time layer that agents and UI components read and write
  • Human-in-the-Loop: agents pause for user input, confirmation, or edits before continuing

Deploy one agent to multiple surfaces

The README says the same agent can power a web app, a mobile app, and a Slack or Microsoft Teams workspace. Agent logic stays the same, while AG-UI handles the wire protocol and CopilotKit handles the UI layer for each framework and channel.

Support is listed by platform. React and Next.js are marked GA, while Angular, Vue, React Native, and Slack or Teams are marked supported. Discord and WhatsApp have a Channels SDK adapter, and Google Chat, iMessage, and SMS are on the roadmap.

  • React / Next.js: GA
  • Angular, Vue, React Native, Slack / Microsoft Teams: supported
  • Discord / WhatsApp: Channels SDK adapter, managed connection coming soon
  • Google Chat / iMessage / SMS: on the roadmap

Optional: CopilotKit Intelligence for production

CopilotKit Intelligence is a separate add-on for production use. It adds rich threads that persist with generative UI, user memories, product analytics, inspection, and automatic learning. The README says you can use the hosted platform or deploy it in your own infrastructure.

It is optional. The README points to the Intelligence overview for what each plan includes, so check that page rather than relying on this guide for plan details.

What people use it for

  • Adding an AI assistant to a React or Next.js app
  • Letting an agent render custom UI components from tool calls
  • Asking users to confirm or edit an agent's action before it continues
  • Serving one agent backend to a web app, a mobile app, and Slack or Microsoft Teams

Frequently asked questions

Is CopilotKit free to use?

CopilotKit is released under the MIT licence, as the repository states. The README excerpt does not list prices for CopilotKit Intelligence, so check the Intelligence overview page for plan details.

What do I need to install CopilotKit?

You need Node.js and a JavaScript or TypeScript project, new or existing. The README excerpt does not state a minimum Node.js version, so check the official docs.

How do I install CopilotKit?

Run npx --yes copilotkit@latest onboard start from your project root to set it up with your coding agent. To start a new project in its own directory, run npx copilotkit@latest create.

Does CopilotKit work with Vue or Angular?

The README lists Angular and Vue as supported, with Vue's quickstart marked as coming soon. React and Next.js are listed as GA.

What are the alternatives to CopilotKit?

Projects often compared with it include Vercel AI SDK, LangGraph, and Assistant UI, as well as other AG-UI-compatible frameworks. Compare them on the framework and features you need.

Does CopilotKit work with non-JavaScript projects?

No, the listed frameworks are JavaScript-based, so projects without a JavaScript or TypeScript frontend are not a fit.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

CopilotKit suits developers who build chat or agent interfaces in React, Next.js, or other supported JavaScript frontends, especially if they need human-in-the-loop steps or one agent across web, mobile, and Slack or Teams. It is less suitable for non-developers, non-JavaScript projects, or teams that want a finished product without integrating an agent framework of their own.

Install options & downloads