skills.rest
franciscogar94
franciscogar94COMMUNITY
Explore all skills by this author →
GitHub

copilotkit-setup

Configures CopilotKit runtime, provider, and chat UI for React and Next.js projects.

Updated May 9, 2026
Search Tags:#react#runtime#setup#nextjs#copilotkit#ai chat#frontend integration
One-click install
npx skills add https://github.com/franciscogar94/CrisisOS --skill copilotkit-setup-franciscogar94
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: copilotkit-setup
Source: https://github.com/franciscogar94/CrisisOS/tree/main/.cursor/skills/copilotkit-setup
Command: npx skills add https://github.com/franciscogar94/CrisisOS --skill copilotkit-setup-franciscogar94

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @copilotkit/react, @copilotkit/core, @copilotkit/runtime, @copilotkit/agent, hono, express, and includes references (resource) and assets (resource) components.

What problem does it solve? Setting up CopilotKit requires coordinating frontend packages, a server-side runtime, endpoint factories, and provider configuration across different frameworks, which is error-prone when done manually. ## Core Features & Use Cases - Framework Detection: Identifies Next.js App Router, Pages Router, Vite + React, or Angular from project files before generating any code. - Runtime Wiring: Generates runtime endpoints using createCopilotEndpoint or single-route variants for Hono and Express backends with BuiltInAgent. - Provider & Chat UI Setup: Configures CopilotKitProvider with the correct runtimeUrl and adds CopilotChat, CopilotSidebar, or CopilotPopup components. - Use Case: Add a working AI chat sidebar to an existing Vite + React app with a standalone Express backend running a BuiltInAgent on OpenAI, including stylesheet imports and environment variables. ## Quick Start Set up CopilotKit in my Next.js App Router project with a chat interface connected to a BuiltInAgent runtime.

Frequently Asked Questions about copilotkit-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add CopilotKit to a Next.js App Router project?▼

Install @copilotkit/react, @copilotkit/core, @copilotkit/runtime, and @copilotkit/agent, then create a catch-all route at src/app/api/copilotkit/[[...slug]]/route.ts using createCopilotEndpoint with a BuiltInAgent. Wrap your page in CopilotKitProvider pointing to /api/copilotkit and add a CopilotChat component.

How to set up CopilotKit with Vite and React?▼

Vite only serves the frontend, so run a standalone Express or Hono backend with CopilotRuntime and BuiltInAgent. In the React app, wrap your root component with CopilotKitProvider whose runtimeUrl points to the backend server, and import @copilotkit/react/styles.css.

What is the difference between single-route and multi-route CopilotKit endpoints?▼

Multi-route endpoints give each operation (run, connect, stop, threads) its own HTTP path and require a catch-all route. Single-route endpoints multiplex all operations through one POST endpoint using a method field, which is simpler to deploy but lacks thread management endpoints.

Which AI models does CopilotKit BuiltInAgent support?▼

BuiltInAgent accepts a provider/model string such as openai/gpt-4o, anthropic/claude-sonnet-4.5, or google/gemini-2.5-flash, or a Vercel AI SDK LanguageModel instance. API keys are resolved automatically from OPENAI_API_KEY, ANTHROPIC_API_KEY, or GOOGLE_API_KEY environment variables.

Why is my CopilotKit chat not connecting to the runtime?▼

Check that the provider's runtimeUrl matches the endpoint's basePath and that useSingleEndpoint is set when the backend uses a single-route factory. Also verify the stylesheet import, the AI provider API key in your env file, and CORS settings if the runtime runs on a separate server.

Related Skills

Explore More Software Engineering Skills→
CopilotKitCopilotKit
7

copilotkit-setup

Configures CopilotKit runtime, provider, and chat UI for React and Next.js projects.

Official
Intermediate
diegoc1005diegoc1005

copilotkit-agui

Implement AG-UI protocol backends that stream typed agent events over SSE to frontends.

Community
Advanced
hanu-tayalhanu-tayal

copilotkit-debug

Diagnose CopilotKit runtime connectivity, agent streaming, and tool execution failures.

Community
Advanced
blockmaticblockmatic
88

AI SDK v6 Core

Build backend AI workflows with Vercel AI SDK v5/v6 and multi-provider tool orchestration.

Official
Advanced