Skip to main content
hc
Submit
toolsSource-backedReview first Safety ✓ Privacy ✓

CopilotKit

MIT-licensed frontend stack for agent-native applications and generative UI, with React, Angular, Vue, React Native, Slack and Teams surfaces, AG-UI protocol support, shared state, human-in-the-loop workflows, backend tool rendering, coding-agent skills, and runtime packages for agent apps.

by CopilotKit·added 2026-06-18·
CLI
HarnessCLI
Review first — review before installing

Open the source and read safety notes before installing.

Safety notes

  • CopilotKit connects UI, agents, tools, and backend runtimes. Treat backend tool rendering, tool calls, and generative UI as application behavior that can mutate state or trigger real actions.
  • Human-in-the-loop workflows should define which actions require user confirmation, how interruptions resume, and how failed or stale approvals are handled.
  • The CLI package description references workspace connection and local CLI authentication for CopilotKit Intelligence onboarding; review auth state, workspace linkage, and generated files before using it in a sensitive project.
  • Agent skills can modify app code, runtime routes, providers, packages, and integration wiring; review generated changes before committing or deploying.
  • AG-UI and SSE integrations require event ordering, error handling, CORS, retry, timeout, and streaming limits to avoid stuck runs or duplicated actions.

Privacy notes

  • CopilotKit apps can process user messages, shared state, UI events, tool arguments, tool outputs, generated components, screenshots or attachments from app workflows, thread history, feedback, logs, traces, and provider responses.
  • Cloud, enterprise, self-learning, Slack, Microsoft Teams, Discord, Google Chat, MCP docs search, and CopilotKit Intelligence features may send or retain additional data depending on configuration.
  • Shared state and generative UI can expose application data to agents and model providers; avoid placing secrets, regulated records, private customer data, or privileged admin state in agent-visible context.
  • Keep provider keys, CopilotKit workspace credentials, runtime URLs, private tool schemas, and generated support artifacts out of public issues, examples, screenshots, and PRs.

Prerequisites

  • Node.js 18 or newer and a package manager such as npm, pnpm, yarn, or bun.
  • A supported frontend or app surface, such as React, Next.js, Angular, Vue, React Native, Slack, Microsoft Teams, Discord, or Google Chat, with surface maturity checked against current docs.
  • An AI provider key or runtime route for OpenAI, Anthropic, Gemini, or another supported model/provider.
  • Backend runtime plan for CopilotKit runtime endpoints, Hono or Express integration, CORS, streaming, tool calls, threads, state, and deployment.
  • Data policy for shared state, user messages, tool arguments, tool results, generated UI, feedback, thread history, and CopilotKit Cloud or self-hosted Intelligence usage.

Schema details

Install type
cli
Troubleshooting
No
Source repository stats
Scope
Source repo
Collection metadata
Estimated setup
30 minutes
Difficulty
intermediate
Tool listing metadata
Pricing
freemium
Disclosure
editorial
Application category
DeveloperApplication
Operating system
Cross-platform
Full copyable content
npx copilotkit@latest create

# Install CopilotKit coding-agent skills in an existing project
npx copilotkit@latest skills install

# Manual Next.js-style package install
npm install @copilotkit/react-core @copilotkit/runtime hono

About this resource

Overview

CopilotKit is a frontend and runtime stack for agent-native applications. The README describes generative UI, shared state, human-in-the-loop workflows, chat interfaces, backend tool rendering, and AG-UI protocol support across React, Angular, Vue, React Native, Slack, Microsoft Teams, and related surfaces.

Use it when an agent needs to live inside an application UI rather than only in a terminal or chat transcript. CopilotKit is especially relevant for product teams building "AI copilots", generative UI, stateful agent workflows, tool approval flows, AG-UI-compatible backends, and coding-agent-assisted CopilotKit setup.

Install

Scaffold a new app:

npx copilotkit@latest create

Install first-party CopilotKit coding-agent skills in an existing project:

npx copilotkit@latest skills install

Manual package installs depend on the target framework. For a common Next.js-style setup:

npm install @copilotkit/react-core @copilotkit/runtime hono

The coding-agent setup skill documents additional routes for frontend-only installs, standalone Express backends, runtime setup, provider setup, and project framework detection.

Agent Capabilities

Area CopilotKit Coverage
UI Surfaces React, Next.js, Angular, Vue, React Native, Slack, Microsoft Teams, Discord, and Google Chat paths
Agent UX Chat UI, message streaming, tool calls, agent responses, and human-in-the-loop workflows
Generative UI Agents render or update UI components from backend tool results and agent state
Shared State Agent and UI components can read and write synchronized state
AG-UI Event-based agent-user interaction protocol over SSE or binary protobuf transport
Runtime @copilotkit/runtime, Hono/Express handlers, agent runners, provider routes, and runtime endpoints
Agent Skills Setup, development, integrations, AG-UI, debug, upgrade, runtime, and self-update skills
Debugging Web inspector, structured error codes, runtime connectivity checks, SSE tracing, and MCP docs search

Use Cases

  • Add a chat or copilot panel to a React or Next.js application.
  • Let an agent call backend tools that render UI components in the client.
  • Build AG-UI-compatible agent backends that stream typed events to a frontend.
  • Add user confirmations, edits, and approvals to an agent workflow.
  • Share application state between UI components and agent logic.
  • Install first-party CopilotKit skills so Claude Code, Codex, Cursor, Gemini, or another coding agent can set up, debug, or upgrade CopilotKit.
  • Compare CopilotKit with LangGraph UI patterns, AG-UI integrations, MCP Apps, A2UI, and custom agent frontend stacks.

Source Review

Verified on 2026-06-18:

  • The upstream README describes CopilotKit as an SDK for full-stack agentic applications, generative UI, and chat applications.
  • The README documents npx copilotkit@latest create and npx copilotkit@latest skills install.
  • The README lists React/Next.js, Angular, Vue, React Native, Slack, Microsoft Teams, Discord, and Google Chat surfaces, with different support levels.
  • The README describes chat UI, backend tool rendering, generative UI, shared state, human-in-the-loop workflows, and self-learning features.
  • The README identifies CopilotKit as the company behind the AG-UI protocol and links to the AG-UI protocol repository.
  • The repository contains first-party Agent Skills for CopilotKit setup, AG-UI, debugging, development, integrations, upgrades, runtime, and self-update workflows.
  • skills/copilotkit-setup/SKILL.md documents Node.js 18+, provider keys, framework detection, package installs, runtime wiring, and MCP docs search.
  • skills/copilotkit-agui/SKILL.md documents AG-UI event families, SSE transport, state synchronization, tool calls, and human-in-the-loop flows.
  • skills/copilotkit-debug/SKILL.md documents runtime connectivity, streaming, tool execution, version mismatches, structured error codes, and AG-UI event tracing.
  • npm resolves @copilotkit/react-core version 1.60.2 with MIT licensing, and copilotkit CLI version 3.0.3.
  • The latest GitHub release is v1.60.2, published on 2026-06-17.
  • The repository license is MIT.

Safety and Privacy

CopilotKit moves agents into product interfaces, where mistakes become user experience and application behavior. Treat tool calls, generated UI, shared state writes, user approvals, and Slack or Teams actions as real product surface area. Keep destructive tools and privileged state behind explicit authorization and auditable runtime behavior.

The cloud and enterprise surfaces are separate from the MIT source code. Review which prompts, state, feedback, thread history, tool results, and user identifiers are sent to model providers, CopilotKit-hosted services, workplace chat platforms, or self-hosted infrastructure before enabling those features.

Duplicate Check

Checked current content/tools/, content/agents/, content/mcp/, content/skills/, guides, open pull requests, and repository-wide content for CopilotKit, CopilotKit/CopilotKit, AG-UI, @copilotkit/react-core, copilotkit CLI, CopilotKit runtime, CopilotKit agent skills, generative UI, and human-in-the-loop agents. Existing AG2 content mentions AG-UI as an integration surface, but no dedicated CopilotKit tools entry, exact source URL duplicate, target file, or open duplicate PR was found.

Disclosure

Editorial listing. No paid placement or affiliate link is used. CopilotKit's repository is MIT-licensed open-source software, while CopilotKit Cloud, Enterprise Intelligence Platform, self-learning features, Slack or Teams early access, hosted docs search, model providers, and workplace chat platforms may have separate licenses, billing, terms, privacy controls, and access requirements.

#copilotkit#agents#generative-ui#ag-ui#react#nextjs#agent-skills#human-in-the-loop

Source citations

Add this badge to your README

Show that CopilotKit is listed on HeyClaude. Paste this Markdown into your README — it renders the badge and links back to this page.

Listed on HeyClaude
[![Listed on HeyClaude](https://heyclau.de/badge/tools/copilotkit.svg)](https://heyclau.de/entry/tools/copilotkit)

How it compares

CopilotKit side by side with 3 alternatives on trust, install, platform support, and disclosed safety notes — all from reviewed registry metadata.

FieldCopilotKit

MIT-licensed frontend stack for agent-native applications and generative UI, with React, Angular, Vue, React Native, Slack and Teams surfaces, AG-UI protocol support, shared state, human-in-the-loop workflows, backend tool rendering, coding-agent skills, and runtime packages for agent apps.

Open dossier 		Browser Harness

MIT-licensed CDP browser-control harness from Browser Use that lets Claude Code, Codex, and other coding agents connect to a real or cloud Chrome browser, use screenshots and coordinate clicks, edit task-specific helpers, and optionally learn reusable domain skills for web automation workflows.

Open dossier 		Hermes Agent

Nous Research AI agent with terminal UI, messaging gateway, skills, memory, MCP integration, scheduled automations, subagents, terminal backends, OpenClaw migration, model switching, and persistent cross-session workflows.

Open dossier 		Skills CLI

MIT-licensed `skills` CLI from Vercel Labs for installing, using, finding, listing, updating, removing, and initializing Agent Skills across Claude Code, Codex, Cursor, OpenCode, OpenClaw, Gemini CLI, GitHub Copilot, Windsurf, Zed, and dozens of other agent hosts.

Open dossier
Trust
Install riskReview firstReview firstReview firstReview first
Notes Safety ✓ Privacy ✓ Safety ✓ Privacy ✓ Safety ✓ Privacy ✓ Safety ✓ Privacy ✓
Categorytoolstoolstoolstools
Sourcesource-backedsource-backedsource-backedsource-backed
AuthorCopilotKitBrowser UseNous ResearchVercel Labs
Added2026-06-182026-06-182026-06-182026-06-18
Platforms
CLI
CodexCLI
CodexCLI
CursorCodexCLI
Source repo————
Safety notes✓CopilotKit connects UI, agents, tools, and backend runtimes. Treat backend tool rendering, tool calls, and generative UI as application behavior that can mutate state or trigger real actions. Human-in-the-loop workflows should define which actions require user confirmation, how interruptions resume, and how failed or stale approvals are handled. The CLI package description references workspace connection and local CLI authentication for CopilotKit Intelligence onboarding; review auth state, workspace linkage, and generated files before using it in a sensitive project. Agent skills can modify app code, runtime routes, providers, packages, and integration wiring; review generated changes before committing or deploying. AG-UI and SSE integrations require event ordering, error handling, CORS, retry, timeout, and streaming limits to avoid stuck runs or duplicated actions.✓Browser Harness can connect agents to a real logged-in Chrome profile. Remote debugging may expose active sessions, extensions, bookmarks, history, page content, downloads, uploads, and account actions to the agent. The documented Way 1 setup uses the user's everyday Chrome profile through `chrome://inspect/#remote-debugging`; require explicit user consent before attaching to sensitive accounts. The documented Way 2 setup launches Chrome with a non-default `--user-data-dir` and remote debugging port; keep that isolated profile separate from everyday browser data. Remote Browser Use Cloud sessions require `BROWSER_USE_API_KEY`, may use proxies, can persist profile state, and can continue billing until timeout or shutdown. Agents using Browser Harness can edit `agent-workspace/agent_helpers.py` and optional domain-skill files; review generated helper code and public skill contributions before reuse. Browser automation can submit forms, send messages, purchase items, scrape websites, change account settings, and upload files. Keep destructive or account-writing tasks behind confirmation.✓Hermes Agent can run tools, shell commands, terminal sessions, scheduled jobs, subagents, skills, MCP servers, messaging gateways, and remote backends; review permissions before using it on sensitive systems. The README documents one-line shell installers for some platforms. Inspect installer scripts and prefer isolated package installs or disposable environments when evaluating the agent. OpenClaw migration can import settings, memories, skills, command allowlists, messaging settings, API keys, audio assets, and workspace instructions; use dry-run and non-secret presets before migrating real profiles. Scheduled automations and messaging gateways can run unattended and deliver results to external chat systems, so restrict allowed users, home directories, credentials, and write-capable tools. Terminal backends such as local shell, Docker, SSH, Singularity, Modal, and Daytona can touch local files, containers, remote hosts, cloud sandboxes, and GPU infrastructure.✓Agent Skills are executable instructions for coding agents. Inspect `SKILL.md` and supporting files before installing or using skills from unknown repositories. `skills add`, `skills update`, `skills remove`, and `experimental_sync` can write, replace, symlink, copy, or remove skill folders across many local agent directories. Review `--agent`, `--skill`, `--all`, `--global`, and `--yes` flags before running broad operations. `skills use` can materialize a skill into a temporary directory and print the generated prompt, or start a supported agent interactively with that prompt. Treat untrusted skill text as prompt-bearing code. Symlink install mode keeps a canonical copy and links agent directories to it. Copy mode creates independent copies. Choose deliberately when working across shared repos, Windows environments, containers, or synchronized directories. The CLI includes explicit warnings for OpenClaw community skills in `skills use`; do not bypass those warnings unless you understand the trust model for the selected source. The security audit lookup is best-effort and never blocks installation. A missing or safe-looking audit result is not a substitute for reviewing the skill source.
Privacy notes✓CopilotKit apps can process user messages, shared state, UI events, tool arguments, tool outputs, generated components, screenshots or attachments from app workflows, thread history, feedback, logs, traces, and provider responses. Cloud, enterprise, self-learning, Slack, Microsoft Teams, Discord, Google Chat, MCP docs search, and CopilotKit Intelligence features may send or retain additional data depending on configuration. Shared state and generative UI can expose application data to agents and model providers; avoid placing secrets, regulated records, private customer data, or privileged admin state in agent-visible context. Keep provider keys, CopilotKit workspace credentials, runtime URLs, private tool schemas, and generated support artifacts out of public issues, examples, screenshots, and PRs.✓Browser Harness workflows can expose page screenshots, DOM text, URLs, cookies-backed login state, account data, downloads, uploads, form inputs, and extracted website data to the agent and configured model providers. Profile sync for Browser Use Cloud is documented as cookies-only, but it still moves browser authentication material into a remote browser environment. Cloud browser live URLs, proxy settings, profile identifiers, daemon logs, `/tmp` socket or pid files, and copied support artifacts may reveal browsing activity or account context. Public domain-skill PRs should not include secrets, private selectors tied to confidential apps, customer data, screenshots, credentials, tokens, or personal browsing history.✓Conversation history, memory files, user profiles, skill outputs, session search indexes, tool arguments, tool results, model responses, gateway messages, audio transcripts, and logs may contain sensitive data. Model providers, messaging platforms, search/image/TTS/browser tool gateways, MCP servers, and remote terminal backends may receive prompts, files, commands, account identifiers, or generated outputs depending on configuration. OpenClaw migration may copy memories, persona files, skills, API keys, messaging settings, command allowlists, TTS assets, and workspace instructions into the Hermes profile. Keep provider keys, bot tokens, OAuth grants, migrated secrets, workspace paths, generated summaries, and session search data out of public prompts, screenshots, issues, and examples.✓By default, the CLI can send telemetry to `add-skill.vercel.sh` unless `DISABLE_TELEMETRY` or `DO_NOT_TRACK` is set. Telemetry fields in source include CLI version, CI flag, detected agent name, event type, source, selected skills, selected agents, global flag, source type, update counts, find query, and result counts. Security-audit lookup requests can send the skill source and selected skill slugs to the audit endpoint. Local project and global installs can persist source names, selected skills, agent targets, canonical paths, lock data, symlinks, and copied skill contents on disk. Skill contents used through `skills use` are embedded into the generated prompt and may be sent to the downstream model provider or interactive agent process.
Prerequisites
  • Node.js 18 or newer and a package manager such as npm, pnpm, yarn, or bun.
  • A supported frontend or app surface, such as React, Next.js, Angular, Vue, React Native, Slack, Microsoft Teams, Discord, or Google Chat, with surface maturity checked against current docs.
  • An AI provider key or runtime route for OpenAI, Anthropic, Gemini, or another supported model/provider.
  • Backend runtime plan for CopilotKit runtime endpoints, Hono or Express integration, CORS, streaming, tool calls, threads, state, and deployment.
  • Python 3.11 or newer, uv, git, and a durable local checkout for editable installation.
  • A Chrome or Chromium-based browser that can be attached through Chrome remote debugging, or a Browser Use Cloud API key for cloud browsers.
  • Codex, Claude Code, or another agent host that can read the Browser Harness `SKILL.md` instructions.
  • A clear boundary for which browser profile, logged-in sites, cloud browser sessions, downloads, uploads, and account actions the agent may access.
  • Python 3.11 through 3.13 for the packaged Python project.
  • uv, pipx, or another isolated Python application installer.
  • Model provider credentials for Nous Portal, OpenRouter, NovitaAI, NVIDIA NIM, OpenAI-compatible endpoints, or another configured provider.
  • A clear tool and terminal-backend policy before enabling local shell, Docker, SSH, Singularity, Modal, Daytona, browser, search, messaging, or MCP features.
  • Node.js 18 or newer for the published `skills` npm package.
  • At least one supported agent host installed if using auto-detected targets, such as Claude Code, Codex, Cursor, OpenCode, OpenClaw, Gemini CLI, GitHub Copilot, Windsurf, Zed, or another supported agent.
  • A reviewed skill source from GitHub, GitLab, a git URL, a local path, a direct skill folder, or another supported provider.
  • A decision between project-scoped skills that live under the current repository and global skills that live under the user's home/config directories.
Install
npx copilotkit@latest create
git clone https://github.com/browser-use/browser-harness && cd browser-harness && uv tool install -e .
uv tool install hermes-agent
npm install -g skills
Config———
{
  "projectInstall": "npx skills add vercel-labs/agent-skills --skill frontend-design -a claude-code",
  "globalInstall": "npx skills add vercel-labs/agent-skills --skill frontend-design -g -a claude-code -y",
  "temporaryUse": "npx skills use vercel-labs/agent-skills@web-design-guidelines | claude",
  "disableTelemetry": "DISABLE_TELEMETRY=1 npx skills list"
}
Citations
ClaimUnclaimedUnclaimedUnclaimedUnclaimed

Signals

Loading live community signals…

More like this, weekly

A short, calm digest of reviewed Claude resources. Unsubscribe any time.