CopilotKit for Claude Code: Setup, Channels, and Debugging

What is copilotkit/copilotkit, actually

copilotkit/copilotkit is the repository behind CopilotKit, an SDK for what its own docs call agent-native applications: a chat interface, UI an agent generates on the fly, and shared state between the two, on top of one agent backend, across React, Angular, Vue, React Native, Slack, and Microsoft Teams. The repository has over 37,000 GitHub stars, and Flowy lists it under development.

The plugin Flowy indexes is not CopilotKit itself. It is the set of agent skills the project ships to teach a coding agent, Claude Code among others, how to work with it: 17 components, 15 skills and 2 MCP servers, none of them agents, commands, or hooks. Flowy indexes what the repository ships; it does not own, bundle, or host copilotkit/copilotkit, and a project's own package manager still installs the CopilotKit packages.

Building and running a CopilotKit app

Four skills cover the path from an empty project to a working copilot. copilotkit-setup is the entry point: adding CopilotKit to an existing or new project, detecting the framework, installing packages, wiring the runtime, and getting a first chat working. react-core mounts the CopilotKit provider in a Next.js, React Router, TanStack Start, or single-page app, then drops in the chat interface. runtime is the server half: mounting a fetch-native CopilotRuntime on any JavaScript server and choosing what answers, its own built-in agent or one of 12 external agent frameworks. copilotkit-develop covers the work that follows: registering frontend tools, sharing application context with the agent, and handling the moments an agent needs to pause for user input.

Connecting your own agent backend

Three skills work at the protocol CopilotKit is built on. copilotkit-agui builds a custom agent backend directly against the AG-UI protocol: event types, the streaming transport, and how CopilotKit keeps an agent's state in sync with the frontend. copilotkit-integrations covers the more common case, wiring an agent framework that already exists, LangGraph, CrewAI, PydanticAI, and Mastra among them, into a CopilotKit app over that same protocol instead of writing the AG-UI side by hand. a2ui-renderer is narrower: it wires up A2UI, Agent-to-UI declarative surfaces a backend can send instead of plain text, with one flag on the runtime and one on the provider, since the renderer auto-activates rather than needing to be wired in by hand.

Getting a copilot answering in Slack or Microsoft Teams

Three skills split that job into stages. channels-setup is the starting point for building a first Channels agent end to end. copilotkit-channels is the code half of that work: customizing a Channel a CLI-scaffolded project already ships, or, for a project the CLI did not generate, writing the Channel declaration and the long-running host it needs. setup-slack-channel is the provider half: when no Slack app exists yet, creating one, generating its tokens, and attaching it to a managed Intelligence Channel. A team extending an existing Channel needs only the second skill; one starting from a bare Slack workspace needs the third.

Upgrading, debugging, and the two MCP servers

copilotkit-upgrade handles one move, migrating a CopilotKit v1 application to v2: updated imports, replaced hooks and components, and the switch from a GraphQL runtime to the AG-UI protocol runtime. copilotkit-debug is the general diagnostic skill: connectivity failures, an unresponsive agent, streaming errors, tool problems, or a version mismatch.

The two MCP servers carry no description in Flowy's index, but the plugin's repository names what each one is. copilotkit-docs connects over HTTP to CopilotKit's hosted documentation server, so an agent can query current docs directly. nx-mcp runs the standard Nx workspace server, useful once you are working inside the CopilotKit monorepo itself rather than a project that merely depends on it.

Skills that are not about your app at all

Three more skills do nothing to an app you are building at all. copilotkit-contribute covers forking and cloning the project, setting up its monorepo, creating branches, running its tests, and opening a pull request against copilotkit/copilotkit. inspector-docs keeps CopilotKit's own documentation pointing at whichever panes its web inspector actually ships, for people maintaining those docs. copilotkit-self-update is easy to misread: it refreshes the skill files this plugin installs into your coding agent, not your project and not CopilotKit's own codebase.

When would I actually reach for this

Start with copilotkit-setup, then the connecting or Channels skills once an outside agent or Slack and Teams is in scope. copilotkit-debug and copilotkit-upgrade sit installed and mostly unused until something breaks. copilotkit-docs and copilotkit-self-update are worth keeping regardless of what you build; copilotkit-contribute, inspector-docs, and nx-mcp matter only inside CopilotKit's own repository.

How do I install it

Flowy indexes copilotkit/copilotkit from its public GitHub repository. Install from the listing page linked at the top of this guide, and all 17 components become available in that session.