skills.rest
diegoc1005
diegoc1005COMMUNITY
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#agent#runtime#setup#nextjs#copilotkit#ai chat
One-click install
npx skills add https://github.com/diegoc1005/hackAI --skill copilotkit-setup-diegoc1005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: copilotkit-setup
Source: https://github.com/diegoc1005/hackAI/tree/main/.cursor/skills/copilotkit-setup
Command: npx skills add https://github.com/diegoc1005/hackAI --skill copilotkit-setup-diegoc1005

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, Angular, or standalone backends from project files before generating code. - Runtime Wiring: Generates runtime endpoints using createCopilotEndpoint variants for Hono or Express, in multi-route or single-route styles. - Provider & Chat UI Setup: Configures CopilotKitProvider with CopilotChat, CopilotSidebar, or CopilotPopup, including stylesheet imports and environment variables. - 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 backend 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 a CopilotChat component and import the styles.css stylesheet.

How do I set up CopilotKit with Vite and React?▼

Vite only serves the frontend, so run a standalone Express or Hono backend hosting the CopilotRuntime with a BuiltInAgent. Point CopilotKitProvider's runtimeUrl at the backend server, add a CopilotSidebar component, and import @copilotkit/react/styles.css in your app entry.

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

Multi-route endpoints give each operation (run, connect, stop, threads) its own HTTP path and require a catch-all route, while single-route endpoints multiplex all operations through one POST endpoint. Single-route requires setting useSingleEndpoint on the frontend provider.

Which AI models does CopilotKit 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 are resolved automatically from environment variables based on the provider prefix.

Does CopilotKit work with Angular applications?▼

Angular uses the separate @copilotkit/angular package instead of @copilotkit/react, so it does not use CopilotKitProvider or React hooks. The runtime runs as a standalone Express or Hono backend server, with styles configured through angular.json.

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 factories, and that the AI provider API key is present in the environment. You can verify the runtime by calling its GET /info endpoint to confirm 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
aranlucasaranlucas

a2ui-renderer

Render declarative A2UI surfaces within CopilotKit v2 with theming support.

Community
Advanced