Copilotkit Setup

Handles the complete CopilotKit installation flow from framework detection through first working chat. Covers both Next.js (App Router and Pages Router) and standalone Express/Hono setups, with clear guidance on the multi-route versus single-route endpoint choice. The skill walks through package installation, runtime configuration with agents, provider setup with the right props, and drops in a working chat component. It includes an MCP server for live docs access, which is handy when you inevitably need to debug why your runtime isn't connecting. Most valuable when you're wiring up CopilotKit for the first time and need the full checklist rather than piecing together snippets from different docs pages.

skills.sh installs: 613
GitHub stars: 39
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add copilotkit/skills --skill copilotkit-setup --agent claude-code

Installs into .claude/skills of the current project.

Files

CopilotKit Setup

Prerequisites

Live Documentation (MCP)

This plugin includes an MCP server (copilotkit-docs) that provides search-docs and search-code tools for querying live CopilotKit documentation and source code.

Claude Code: Auto-configured by the plugin's .mcp.json -- no setup needed.
Codex: Requires manual configuration. See the copilotkit-debug skill for setup instructions.

Environment

Before starting setup, verify:

Node.js >= 18 (required for fetch globals used by the runtime)
An AI provider API key (one of: OPENAI_API_KEY, ANTHROPIC_API_KEY, GOOGLE_API_KEY)
A React-based frontend (Next.js App Router, Next.js Pages Router, Vite + React, or Angular)
A backend capable of running the runtime (same Next.js app via API routes, or a standalone Express/Hono server)

Framework Detection

Before generating any code, detect the project's framework by checking files in the project root. See references/framework-detection.md for the full decision tree.

Quick summary:

SKILL.md on GitHub