copilotkit-nextjs-integration

CopilotKit for Next.js Integration

Integrate CopilotKit AI components into your Next.js application to build intelligent, context-aware interfaces where AI agents can read application state and trigger actionable tools.

When to use

Use this skill when you need to:

• Build AI-powered chat interfaces in your Next.js app
• Create context-aware AI agents that understand current UI state
• Enable AI to trigger actions and mutate app state
• Integrate custom or self-hosted LLM endpoints
• Implement human-in-the-loop AI workflows
• Add AI copilots to SaaS dashboards or productivity tools
• Support multiple LLM providers with custom adapters
• Build agentic UIs with sidebar, popup, or headless chat

Core concepts

Mental Model

CopilotKit is a bridge between your Next.js frontend and an LLM runtime endpoint:

[Next.js Frontend] 
    ↕ state/actions/messages
[Copilot Runtime Endpoint]
    ↕ provider protocol
[LLM Adapter] → [OpenAI/Claude/Groq/Custom LLM]

The runtime:

• Manages conversation history
• Calls your LLM provider through an adapter
• Executes tools/actions triggered by the model
• Syncs generated content back to your UI

Key Primitives

• Copilot Runtime: Self-hosted endpoint managing message history, tool calls, and provider integration
• Readable State: App data exposed to the model via useCopilotReadable hooks for context
• Actions/Tools: Executable functions the model can trigger via useCopilotAction
• UI Components: CopilotPopup, CopilotSidebar, or custom headless chat
• Adapters: Provider integration layer (OpenAI, Groq, Google, custom self-hosted, etc.)
• Generative UI: Structured responses for interactive UI updates

Quick start

Basic Setup

npm install @copilotkit/react @copilotkit/sdk

Minimal Example

import { CopilotPopup } from "@copilotkit/react-ui";
import { CopilotKit } from "@copilotkit/react-core";

export default function App() {
  return (
    <CopilotKit runtimeUrl="http://localhost:8080/copilot">
      <YourApp />
      <CopilotPopup />
    </CopilotKit>
  );
}