copilotkit-nextjs-integration

Install @copilotkit/react-core, @copilotkit/runtime, and @copilotkit/react-ui, create a POST route at /api/copilotkit using CopilotRuntime with an adapter like OpenAIAdapter, then wrap your root layout in the CopilotKit provider with runtimeUrl pointing to that route.

Use the useCopilotReadable hook with a description and a JSON-serializable value. The model receives that state as context, so it can answer questions grounded in your current UI data, such as a user list or task collection.

Yes. Implement a custom CopilotServiceAdapter whose streamChatCompletion method calls your local endpoint, such as Ollama at localhost:11434 or LM Studio's OpenAI-compatible API, and pass that adapter to the runtime endpoint.

CopilotKit focuses on agentic UIs with built-in hooks for readable state and model-triggered actions, while Vercel AI SDK is simpler for plain chat without UI-state tooling. Choose CopilotKit when the model must read and mutate app state.

Serverless functions have default execution limits that cut off long streaming responses. Set maxDuration to 60 seconds in your route or next.config, and consider a faster adapter like Groq to reduce response latency.

Avoid it for standalone backend AI with no UI state synchronization, for enterprise-scale orchestration across many systems, and for non-React frontends. It is an app-level React framework, not a distributed workflow engine.