skills.rest
23wj1a0541
23wj1a0541COMMUNITY
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/23wj1a0541/L.E.N.S --skill copilotkit-setup-23wj1a0541
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: copilotkit-setup
Source: https://github.com/23wj1a0541/L.E.N.S/tree/main/.cursor/skills/copilotkit-setup
Command: npx skills add https://github.com/23wj1a0541/L.E.N.S --skill copilotkit-setup-23wj1a0541

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 projects from signal 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 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 chat interface and a BuiltInAgent backend.

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 pointing to /api/copilotkit and render CopilotChat.

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 URL, set useSingleEndpoint if using single-route endpoints, and import @copilotkit/react/styles.css.

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

Multi-route endpoints give each operation (run, connect, stop, info, threads) its own HTTP path and require a catch-all route in Next.js. 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 BuiltInAgent support?▼

BuiltInAgent accepts a provider/model string such as openai/gpt-4o, anthropic/claude-sonnet-4.5, or google/gemini-2.5-pro, 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.

Does CopilotKit work with Angular applications?▼

Yes, but Angular uses the separate @copilotkit/angular package instead of @copilotkit/react, so CopilotKitProvider and React hooks do not apply. The runtime still runs as a standalone Express or Hono backend server.

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

Check that the provider's runtimeUrl matches the endpoint's basePath, and set useSingleEndpoint when the backend uses single-route factories. Verify the runtime's /info endpoint responds and that the required AI provider API key is set in the environment.

Related Skills

Explore More Software Engineering Skills→
hanu-tayalhanu-tayal

copilotkit-setup

Configure CopilotKit runtime and frontend providers for React and Node.js applications.

Community
Intermediate
Sri-Krishna-VSri-Krishna-V
4

tools-and-context

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

Community
Advanced
Z43LZ43L

node-inspect-debugger

Inspect Node.js runtime state via breakpoints, stepping, and CDP.

Community
Intermediate
aranlucasaranlucas

a2ui-renderer

Render declarative A2UI surfaces within CopilotKit v2 with theming support.

Community
Advanced