skills.rest
CopilotKit
CopilotKitOFFICIAL
Explore all skills by this author →
WebsiteGitHub

copilotkit-setup

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

7|3|Updated May 8, 2026
Search Tags:#react#runtime#setup#nextjs#copilotkit#ai chat#express
One-click install
npx skills add https://github.com/CopilotKit/Generative-UI-Global-Hackathon-Starter-Kit --skill copilotkit-setup-copilotkit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: copilotkit-setup
Source: https://github.com/CopilotKit/Generative-UI-Global-Hackathon-Starter-Kit/tree/main/.cursor/skills/copilotkit-setup
Command: npx skills add https://github.com/CopilotKit/Generative-UI-Global-Hackathon-Starter-Kit --skill copilotkit-setup-copilotkit

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, Angular, or Vite + React 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 and Chat UI Setup: Configures CopilotKitProvider with runtimeUrl, stylesheet imports, and chat components like CopilotChat, CopilotSidebar, or CopilotPopup. - Use Case: Add a working AI chat sidebar to an existing Vite + React app with a standalone Express backend running a BuiltInAgent connected to OpenAI. ## Quick Start Set up CopilotKit in my Next.js App Router project with a BuiltInAgent and a chat interface.

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 with runtimeUrl set to /api/copilotkit and add a CopilotChat component.

What is the difference between createCopilotEndpoint and createCopilotEndpointSingleRoute?▼

createCopilotEndpoint exposes each operation (run, connect, stop, info, threads) on its own HTTP path and requires a catch-all route. createCopilotEndpointSingleRoute multiplexes all operations through one POST endpoint, requiring useSingleEndpoint on the frontend provider.

Can I use CopilotKit with a Vite React app?▼

Yes, but the runtime must run as a separate Express or Hono server since Vite only serves the frontend. Point CopilotKitProvider's runtimeUrl at the backend server URL and set useSingleEndpoint if using a single-route endpoint.

Which AI models does BuiltInAgent support?▼

BuiltInAgent accepts provider-prefixed model strings for OpenAI (e.g., openai/gpt-4o), Anthropic (e.g., anthropic/claude-sonnet-4.5), and Google (e.g., google/gemini-2.5-pro), or any Vercel AI SDK LanguageModel instance. API keys resolve automatically from environment variables.

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

Check that the provider's runtimeUrl matches the endpoint's basePath, that useSingleEndpoint is set when using single-route endpoints, and that the @copilotkit/react/styles.css stylesheet is imported. Verify the runtime's /info GET endpoint reports available agents.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
Sri-Krishna-VSri-Krishna-V
4

tools-and-context

Connect Tambo to custom tools, MCP servers, and context helpers.

Community
Advanced
gptdeividgptdeivid

copilotkit-debug

Diagnose CopilotKit runtime, SSE streaming, and agent failures.

Community
Advanced
gptdeividgptdeivid

copilotkit-develop

Build CopilotKit chat interfaces and runtime endpoints for React and Next.js apps.

Community
Advanced