copilotkit-setup

What problem does it solve?

Setting up CopilotKit from scratch or integrating it into an existing app can be confusing because you must coordinate compatible frontend packages, a server-side runtime, correct endpoint wiring, provider configuration, and environment variables.

Core Features & Use Cases

• Framework detection + setup guidance: Detects common project structures (Next.js App Router/Pages Router, Angular, Vite+React) and tailors the runtime and routing approach accordingly, including Hono-based route handlers.
• Runtime endpoint configuration: Provides clear options for multi-route vs single-route endpoint styles (including Express and Hono adapters) so the frontend can reliably call the correct API paths.
• Provider + chat UI integration: Guides wrapping the app with CopilotKitProvider and rendering CopilotChat/CopilotSidebar/CopilotPopup, including the required stylesheet import.
• Environment + telemetry readiness: Ensures AI provider API keys are set and optionally connects to CopilotKit’s cloud telemetry with a license key.

Quick Start

Add CopilotKit to your project by installing the required @copilotkit/react and @copilotkit/runtime/@copilotkit/agent packages, then create the appropriate runtime endpoint route and wrap your UI with CopilotKitProvider configured to use the matching runtimeUrl.