# CopilotKit | CopilotKit | Knowledge Base | Instagit The Frontend Stack for Agents & Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol GitHub Stars: 33k Repository: https://github.com/CopilotKit/CopilotKit --- ## Articles ### [CopilotKit Integration with Next.js App Router vs Pages Router for SSR](/CopilotKit/CopilotKit/copilotkit-integration-with-nextjs-app-router-vs-pages-router-for-ssr) Explore CopilotKit integration with Next.js App Router versus Pages Router for SSR. Learn how to implement secure server-side rendering without exposing API keys. - Tags: comparison - Published: 2026-06-14 ### [How to Use Wildcard Tool Calls for Dynamic Tool Invocation in CopilotKit](/CopilotKit/CopilotKit/how-to-use-wildcard-tool-calls-for-dynamic-tool-invocation-in-copilotkit) Learn how to use wildcard tool calls in CopilotKit for dynamic tool invocation. Master fallback UI rendering with defineToolCallRenderer to handle unknown tools seamlessly. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Implement Custom UI Components for Tool Calls in CopilotKit](/CopilotKit/CopilotKit/how-to-implement-custom-ui-components-for-tool-calls-in-copilotkit) Learn to implement custom UI components for tool calls in CopilotKit. Discover how useRenderTool and useDefaultRenderTool manage typed props and execution states for flexible integrations. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Set Up Telemetry and Observability for CopilotKit Agent Performance](/CopilotKit/CopilotKit/how-to-set-up-telemetry-and-observability-for-copilotkit-agent-performance) Easily set up telemetry and observability for CopilotKit agent performance. Gain insights into metrics with the built-in TelemetryClient without affecting stability. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Use AgentRegistry for Dynamic Agent Registration in CopilotKit](/CopilotKit/CopilotKit/how-to-use-agentregistry-for-dynamic-agent-registration) Learn how to use CopilotKit AgentRegistry to dynamically register AI agents at runtime. Add, replace, or remove agents without rebuilding your application. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Handle Attachment Rendering and File Uploads in CopilotKit Messages](/CopilotKit/CopilotKit/how-to-handle-attachment-rendering-and-file-uploads-in-copilotkit-messages) Learn to handle file uploads and attachment rendering in CopilotKit messages. Use the useAttachments hook for validation and custom workflows, and AttachmentChip for UI. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Handle Agent Errors and Implement Error Boundaries in CopilotKit Chat UI](/CopilotKit/CopilotKit/how-to-handle-agent-errors-and-implement-error-boundaries-in-copilotkit-chat-ui) Learn to handle agent errors in CopilotKit chat UI using CopilotErrorBoundary and CopilotKitErrorBridge. Automatically catch failures log them and display usage banners. Maintain a single subscription to error events across you... - Tags: how-to-guide - Published: 2026-06-14 ### [How to Implement Voice Input and Transcription with CopilotChatAudioRecorder](/CopilotKit/CopilotKit/how-to-implement-voice-input-and-transcription-with-copilotchataudiorecorder) Implement voice input and transcription easily using CopilotChatAudioRecorder. This component records audio, visualizes input, and converts speech to text with the runtime's transcription service. Get started now! - Tags: how-to-guide - Published: 2026-06-14 ### [How to Use CopilotRuntime with Express, Hono, or Node.js](/CopilotKit/CopilotKit/how-to-use-copilotruntime-with-express-hono-or-nodejs) Learn how to use CopilotRuntime with Express, Hono, or Node.js HTTP servers. CopilotKit adapters enable seamless integration for identical capabilities across any Node.js environment. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Secure CopilotKit Endpoints with Authentication and Authorization](/CopilotKit/CopilotKit/how-to-secure-copilotkit-endpoints-with-authentication-and-authorization) Secure your CopilotKit endpoints using authentication and authorization. Implement API keys, JWT, or OAuth with the onRequest hook for robust security. - Tags: how-to-guide - Published: 2026-06-14 ### [CopilotKit v1 to v2 Migration Guide: Breaking Changes & Upgrade Steps](/CopilotKit/CopilotKit/copilotkit-v1-to-v2-migration-guide-and-breaking-changes) Migrate CopilotKit v1 to v2 seamlessly. Discover breaking changes and follow clear upgrade steps for the new agent-centric model. Upgrade your AI copilots today. - Tags: migration-guide - Published: 2026-06-14 ### [How to Manage Conversation Threads and Context with CopilotKit Stores](/CopilotKit/CopilotKit/how-to-manage-conversation-threads-and-context-with-copilotkit-stores) Learn to manage conversation threads and context with CopilotKit stores. Separate state from UI using ThreadStore and ContextStore for seamless persistence and agent data management. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Implement OpenGenerativeUI for Dynamic UI from Agent Responses in CopilotKit](/CopilotKit/CopilotKit/how-to-implement-opengenerativeui-for-dynamic-ui-from-agent-responses) Learn to implement OpenGenerativeUI in CopilotKit to dynamically render React components from agent responses. Stream UI specs without pre-defined schemas for flexible UIs. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Debug Agent Execution with DebugEventBus and Telemetry in CopilotKit](/CopilotKit/CopilotKit/how-to-debug-agent-execution-with-debugeventbus-and-telemetry) Debug CopilotKit agent execution with DebugEventBus and telemetry. Activate real-time debugging by enabling the debug option for agent lifecycle events, tool calls, and LLM responses via SSE. - Tags: how-to-guide - Published: 2026-06-14 ### [Custom Chat UI Components vs Built-in CopilotKit UI Components: A Complete Guide](/CopilotKit/CopilotKit/custom-chat-ui-components-vs-built-in-copilotkit-ui-components) Explore custom CopilotKit UI components vs built-in options. Learn how CopilotKit's slot-based architecture gives you flexibility to use ready components or swap in your own React UI. - Tags: comparison - Published: 2026-06-14 ### [How to Configure MCP Tools with the CopilotKit Runtime Package](/CopilotKit/CopilotKit/how-to-configure-mcp-model-context-protocol-tools-with-the-runtime-package) Configure MCP tools in CopilotKit with the runtime package by passing mcpApps to CopilotRuntime. Enable automatic middleware for tool discovery and UI rendering. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Implement Multi-Agent Orchestration with useCoAgent in CopilotKit](/CopilotKit/CopilotKit/how-to-implement-multi-agent-orchestration-with-usecoagent) Learn to implement multi-agent orchestration with useCoAgent in CopilotKit. Wire LangGraph agents into React, register multiple agents, and scope tools for independent specialist operation. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Integrate LangGraph Agents with CopilotKit Using useInterrupt](/CopilotKit/CopilotKit/how-to-integrate-langgraph-agents-with-copilotkit-using-uselanggraphinterrupt) Seamlessly integrate LangGraph agents with CopilotKit using useInterrupt. Pause agent execution, render custom UI, and return user input efficiently. Learn how for your React apps. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Set Up Server-Sent Events (SSE) Streaming for Agent Responses in CopilotKit](/CopilotKit/CopilotKit/how-to-set-up-server-sent-events-sse-streaming-for-agent-responses) Learn how to set up Server-Sent Events SSE streaming for agent responses in CopilotKit. This guide details the runtime architecture for seamless LLM output. - Tags: how-to-guide - Published: 2026-06-14 ### [How to use useCopilotAction to Register Frontend Actions for Agents in CopilotKit](/CopilotKit/CopilotKit/how-to-use-usecopilotaction-to-register-frontend-actions-for-agents) Learn to use useCopilotAction to register frontend actions for Copilot agents in CopilotKit. Easily integrate custom functions for background tasks or interactive UI flows. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Implement Human-in-the-Loop Workflows in CopilotKit](/CopilotKit/CopilotKit/how-to-implement-human-in-the-loop-workflows-in-copilotkit) Learn how to implement human-in-the-loop workflows in CopilotKit. Use the useHumanInTheLoop hook to pause agent execution and get user input for seamless integration. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Configure CopilotKitProvider for Production with Custom Endpoints and Auth](/CopilotKit/CopilotKit/how-to-configure-copilotkitprovider-for-production-with-custom-endpoints-and-auth) Configure CopilotKitProvider for production by setting runtimeUrl, implementing dynamic headers for auth, and using credentials include. Learn to secure your CopilotKit setup. - Tags: how-to-guide - Published: 2026-06-14 ### [How to Implement Real-Time State Synchronization with useCopilotReadable](/CopilotKit/CopilotKit/how-to-implement-real-time-state-synchronization-with-usecopilotreadable) Implement real-time state synchronization with useCopilotReadable. Stream app state updates to your AI agent automatically via AG-UI protocol. - Tags: how-to-guide - Published: 2026-06-14 ### [How @copilotkit/voice Enables Speech-to-Text for Conversational Agents](/CopilotKit/CopilotKit/copilotkit-voice-package-speech-to-text-conversational-agents) Learn how CopilotKit voice enables speech-to-text for conversational agents. This package wraps OpenAI's Whisper API for easy audio to text conversion with minimal configuration. - Tags: how-to-guide - Published: 2026-06-13 ### [How to Extend CopilotKit with Custom Middleware to Intercept or Modify Agent Communication](/CopilotKit/CopilotKit/extend-copilotkit-custom-middleware-agent-communication) Easily extend CopilotKit with custom middleware. Intercept or modify agent communication before request and after response using beforeRequestMiddleware and afterRequestMiddleware for custom agent interactions. - Tags: how-to-guide - Published: 2026-06-13 ### [Authentication and Security Configurations in CopilotKit for Enterprise Deployments](/CopilotKit/CopilotKit/copilotkit-authentication-security-configurations-enterprise) Secure your enterprise deployments with CopilotKit. Explore robust authentication and security configurations including JWT, CORS, HTTPS, and audit logging for enhanced safety. - Tags: best-practices - Published: 2026-06-13 ### [How to Integrate External Agent Frameworks (CrewAI, Mastra, and PydanticAI) with CopilotKit](/CopilotKit/CopilotKit/integrate-crewai-mastra-pydanticai-copilotkit) Learn how to integrate CrewAI Mastra and PydanticAI with CopilotKit using the AG-UI protocol bridge and HttpAgent runtime adapter for seamless external agent framework connection. - Tags: how-to-guide - Published: 2026-06-13 ### [Migrating from CopilotKit v1 APIs to v2: Breaking Changes and Migration Guide](/CopilotKit/CopilotKit/breaking-changes-migrating-copilotkit-v1-to-v2-apis) Migrate from CopilotKit v1 to v2. Discover breaking changes including updated import paths, new hooks like useFrontendTool and useHumanInTheLoop, and the shift from imageUploadsEnabled to useAttachments. Simplify your upgrade t... - Tags: migration-guide - Published: 2026-06-13 ### [SSE Streaming in Production Environments: Performance and Best Practices for CopilotKit](/CopilotKit/CopilotKit/performance-best-practices-sse-streaming-production) Discover performance implications and best practices for SSE streaming in production with CopilotKit. Learn to optimize reliability and prevent memory issues. - Tags: performance - Published: 2026-06-13 ### [How CopilotKit Manages Human-in-the-Loop Interruptions for Mid-Workflow User Approvals](/CopilotKit/CopilotKit/copilotkit-human-in-the-loop-interruptions-user-approvals) Learn how CopilotKit manages human-in-the-loop interruptions for mid-workflow user approvals using the useHumanInTheLoop hook, custom interfaces, and AG-UI sync. Approve workflows seamlessly. - Tags: how-to-guide - Published: 2026-06-13 ### [How to Set Up CopilotKit Runtime with Express, Hono, or Node Adapters](/CopilotKit/CopilotKit/setup-copilotkit-runtime-express-hono-node-adapters) Learn how to set up CopilotKit runtime with Express, Hono, or Node adapters. Easily integrate AI agents into your Node.js server applications for enhanced functionality. - Tags: how-to-guide - Published: 2026-06-13 ### [How to Synchronize Shared State Between Agents and React Components Using the useAgent Hook in CopilotKit](/CopilotKit/CopilotKit/copilotkit-shared-state-synchronization-useagent-hook) Learn how to synchronize shared state between agents and React components with CopilotKit's useAgent hook. Effortlessly manage reactive UI updates and agent context. - Tags: how-to-guide - Published: 2026-06-13 ### [How to Implement Custom Tool Calls that Dynamically Render Generative UI Components in CopilotKit](/CopilotKit/CopilotKit/implement-custom-tool-calls-generative-ui-components) Learn to implement custom tool calls that dynamically render generative UI components in CopilotKit. Define Zod schemas, use type-safe renderers, and register them for real-time UI updates. Get started now! - Tags: how-to-guide - Published: 2026-06-13 ### [AG-UI Protocol Architecture: How CopilotKit Enables Cross-Platform Agents](/CopilotKit/CopilotKit/ag-ui-protocol-architecture-cross-platform-agents) Explore the AG-UI protocol architecture and how CopilotKit enables cross-platform agents. Learn how typed, event-driven SSE connects your UI, runtime, and agents for seamless communication. - Tags: architecture - Published: 2026-06-13 ### [How the @copilotkit/runtime LangGraph Integration Orchestrates Agent Workflows](/CopilotKit/CopilotKit/copilotkit-runtime-langgraph-integration-workflow-orchestration) Discover how the @copilotkit/runtime LangGraph integration easily orchestrates agent workflows. Learn about event filtering, custom event dispatching, and metadata control. - Tags: deep-dive - Published: 2026-06-13 ### [How to Configure CopilotKitProvider for Multi-Agent Architectures and Agent Switching](/CopilotKit/CopilotKit/copilotkit-provider-multi-agent-switching-configuration) Configure CopilotKitProvider for multi-agent systems using agents__unsafe_dev_only or selfManagedAgents. Easily switch agents and isolate conversations with React's key prop. - Tags: how-to-guide - Published: 2026-06-13 ### [How CopilotKit's Runtime Processes Server-Sent Events (SSE) for Real-Time Agent Responses](/CopilotKit/CopilotKit/copilotkit-runtime-sse-streaming-realtime-responses) Discover how CopilotKit's runtime processes Server-Sent Events SSE for instant agent chat updates. Learn about the RuntimeEventSource class and JSON event serialization for efficient real-time communication. - Tags: internals - Published: 2026-06-13 ### [Extensibility Options in CopilotKit: Frontend, Backend, and Agent Customization](/CopilotKit/CopilotKit/what-are-the-extensibility-options-in-copilotkit) Explore CopilotKit extensibility options for frontend, backend, and agent customization. Tailor tools, UI, and execution with pluggable architecture for complete control. - Tags: deep-dive - Published: 2026-06-12 ### [How to Manage User Data with CopilotKit: Thread Stores and Context Persistence Explained](/CopilotKit/CopilotKit/how-to-manage-user-data-with-copilotkit) Learn to manage user data with CopilotKit using Thread Stores and Context Persistence for secure, session-based data handling. Discover easy React hooks for your app. - Tags: deep-dive - Published: 2026-06-12 ### [How to Set Up a Local Development Environment for CopilotKit: Complete Guide](/CopilotKit/CopilotKit/how-to-set-up-a-local-development-environment-for-copilotkit) Set up a local CopilotKit development environment easily. Install packages, configure runtime, and connect with CopilotKitProvider for seamless AI integration. - Tags: how-to-guide - Published: 2026-06-12 ### [Security Best Practices for CopilotKit: A Complete Guide to Safe AI Integration](/CopilotKit/CopilotKit/what-are-the-security-best-practices-for-copilotkit) Learn CopilotKit security best practices for safe AI integration. Keep packages updated, sanitize inputs, disable telemetry, and validate config slugs to prevent attacks. - Tags: best-practices - Published: 2026-06-12 ### [How to Deploy an Application Using CopilotKit: Complete Guide](/CopilotKit/CopilotKit/how-to-deploy-an-application-using-copilotkit) Learn how to deploy an application using CopilotKit. This guide covers scaffolding, agent runtime configuration with LangGraph, and deployment to Vercel or Railway for your React app and API. - Tags: how-to-guide - Published: 2026-06-12 ### [How to Debug CopilotKit Applications: Complete Guide to SSE Streams and the Web Inspector](/CopilotKit/CopilotKit/how-to-debug-copilotkit-applications) Master debugging CopilotKit applications with our complete guide to SSE streams and the Web Inspector. Learn to inspect raw data, structured logs, and visual console output for efficient troubleshooting. - Tags: how-to-guide - Published: 2026-06-12 ### [Which AI Models Are Compatible with CopilotKit? A Complete Guide to LLM Service Adapters](/CopilotKit/CopilotKit/what-ai-models-are-compatible-with-copilotkit) Discover which AI models work with CopilotKit exploring LLM service adapters for OpenAI, Anthropic, Gemini, and more. Integrate seamlessly with your preferred AI. - Tags: deep-dive - Published: 2026-06-12 ### [How to Migrate from CopilotKit v1 to v2: The Complete Upgrade Guide](/CopilotKit/CopilotKit/how-to-migrate-from-copilotkit-v1-to-v2) Upgrade seamlessly from CopilotKit v1 to v2 with this comprehensive guide. Learn to update packages, imports, components, and refactor your runtime for the latest features. - Tags: migration-guide - Published: 2026-06-11 ### [How to Test CopilotKit Applications: A Complete Guide to Vitest and Nx](/CopilotKit/CopilotKit/how-to-test-copilotkit-applications) Learn to test CopilotKit applications efficiently using Vitest and Nx. Master unit tests with MockAgent and React component tests in jsdom. - Tags: how-to-guide - Published: 2026-06-11 ### [Optimizing CopilotKit Application Performance: Frontend, Runtime, and Agent Strategies](/CopilotKit/CopilotKit/tips-for-optimizing-copilotkit-application-performance) Boost CopilotKit performance with frontend memoization, runtime SSE batching, and agent-level tool caching. Learn essential optimization strategies for faster applications. - Tags: performance - Published: 2026-06-11 ### [How to Handle Errors and Edge Cases in CopilotKit Applications](/CopilotKit/CopilotKit/how-to-handle-errors-and-edge-cases-in-copilotkit-applications) Master CopilotKit error handling. Learn to manage runtime client and UI errors with typed codes severity levels and visibility controls for robust applications. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Configure the CopilotKit Runtime for Production: Enterprise Deployment Guide](/CopilotKit/CopilotKit/how-to-configure-copilotkit-runtime-for-production) Configure the CopilotKit runtime for production. Learn to set up a persistent SQLiteAgentRunner, implement authentication, and deploy securely with Node ENV production for enterprise use. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Set Up Angular Integration with CopilotKit: A Complete Guide](/CopilotKit/CopilotKit/how-to-set-up-angular-integration-with-copilotkit) Learn how to set up Angular integration with CopilotKit. Install the package, configure DI, inject the service, and bind to AgentStore signals for AI interactions. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Switch Between Different Agents in CopilotKit: A Complete Guide](/CopilotKit/CopilotKit/how-to-switch-between-different-agents-in-copilotkit) Learn how to easily switch between agents in CopilotKit using agent IDs and the AgentRegistry. Master agent selection with the CopilotKit component or useAgent hook for flexible AI. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Handle Tool Call Events in CopilotKit: Frontend to Runtime Guide](/CopilotKit/CopilotKit/how-to-handle-tool-call-events-in-copilotkit) Learn to handle tool call events in CopilotKit. Register tools, use the useToolCall hook, and set results to complete the LLM conversation loop for seamless frontend to runtime integration. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Use Middleware for Authentication and Logging in CopilotKit](/CopilotKit/CopilotKit/how-to-use-middleware-for-authentication-and-logging-in-copilotkit) Implement custom authentication and logging in CopilotKit using middleware. Learn how to use BEFORE REQUEST and AFTER REQUEST lifecycle stages to enhance your application. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Implement Voice Input in CopilotKit: Real-Time Audio Transcription Guide](/CopilotKit/CopilotKit/how-to-implement-voice-input-in-copilotkit) Implement voice input in CopilotKit easily. This guide shows how to enable real-time audio transcription for your chat component using the MediaRecorder API and a custom endpoint. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Customize the Chat UI in CopilotKit: 4 Methods from Props to Headless](/CopilotKit/CopilotKit/how-to-customize-chat-ui-in-copilotkit) Learn 4 ways to customize CopilotKit chat UI. Easily brand with props, swap components with slots, or build a fully custom interface using headless hooks. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Integrate CopilotKit with LangGraph: A Complete Implementation Guide](/CopilotKit/CopilotKit/how-to-integrate-copilotkit-with-langgraph) Integrate CopilotKit with LangGraph by installing the package, creating a LangGraphAgent, and registering it in CopilotRuntime. Build sophisticated AI applications with this simple guide. - Tags: how-to-guide - Published: 2026-06-11 ### [What is the AG-UI Protocol and How to Use It with CopilotKit](/CopilotKit/CopilotKit/what-is-ag-ui-protocol-and-how-to-use-it-with-copilotkit) Discover the AG-UI protocol, an event-driven standard for real-time communication between CopilotKit components. Learn how to use AG-UI for message streaming and state updates in your applications. - Tags: deep-dive - Published: 2026-06-11 ### [How to Persist Thread State Using SQLite with CopilotKit](/CopilotKit/CopilotKit/how-to-persist-thread-state-using-sqlite-with-copilotkit) Persist thread state with SQLite and CopilotKit. Use SqliteAgentRunner to automatically store agent runs locally, enabling thread state recovery. Learn how now. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Debug CopilotKit Applications: A Complete Guide to Frontend, Runtime, and Agent Layers](/CopilotKit/CopilotKit/how-to-debug-copilotkit-applications-effectively) Master debugging CopilotKit applications with this guide. Learn to inspect frontend, runtime, and agent layers using dev console, network logs, and AG-UI for efficient troubleshooting. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Manage Context Within CopilotKit Agents: A Complete Guide](/CopilotKit/CopilotKit/how-to-manage-context-within-copilotkit-agents) Learn how to manage context within CopilotKit agents using the ContextStore for efficient LLM request injection. This guide details automated context management. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Implement Multi-Agent Systems Using CopilotKit: A Complete Guide](/CopilotKit/CopilotKit/how-to-implement-multi-agent-systems-using-copilotkit) Master multi-agent systems with CopilotKit. Follow our guide to configure agents, manage conversations, and enhance your application's intelligence easily. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Use Frontend Tools (In-App Actions) with CopilotKit](/CopilotKit/CopilotKit/how-to-use-backend-tools-with-copilotkit) Learn to leverage frontend tools in CopilotKit to allow LLM agents to invoke client-side JavaScript. Integrate powerful in-app actions seamlessly with your AI. - Tags: how-to-guide - Published: 2026-06-11 ### [How to use frontend tools with CopilotKit: A Complete Guide to In-App Actions](/CopilotKit/CopilotKit/how-to-use-frontend-tools-with-copilotkit) Learn how to use frontend tools with CopilotKit in this guide. Integrate AI agents and client-side code seamlessly into your React app with the useFrontendTool hook. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Create Custom Agents in CopilotKit: A Complete Implementation Guide](/CopilotKit/CopilotKit/how-to-create-custom-agents-in-copilotkit) Learn to create custom agents in CopilotKit by implementing AbstractAgent. Explore BuiltInAgent or factory-mode for LLM workflows and custom backends. Get the complete guide. - Tags: how-to-guide - Published: 2026-06-11 ### [How to Set Up a Development Environment for CopilotKit: Complete Guide](/CopilotKit/CopilotKit/how-to-set-up-copilotkit-dev-environment) Set up your CopilotKit development environment easily. Install the runtime, configure agents with Express, and connect your React frontend for seamless LLM communication. Get started today! - Tags: how-to-guide - Published: 2026-06-10 ### [How to Deploy an Application Using CopilotKit: From Setup to Production](/CopilotKit/CopilotKit/how-to-deploy-app-with-copilotkit) Deploy your application with CopilotKit. Learn to scaffold, configure your agent runner, and deploy your frontend and backend to Vercel, Railway, or Docker. - Tags: how-to-guide - Published: 2026-06-10 ### [How to Customize the CopilotKit UI: Complete Guide to Styling and Branding](/CopilotKit/CopilotKit/how-to-customize-copilotkit-ui) Learn how to customize CopilotKit UI elements freely. Style CopilotKit components using CSS imports, inline styles, CSS variables, and configuration for a unique brand experience. - Tags: how-to-guide - Published: 2026-06-10 ### [How to Optimize CopilotKit Performance for Production: Essential Checklist and Code Patterns](/CopilotKit/CopilotKit/optimizing-copilotkit-performance-for-production) Optimize CopilotKit performance for production. Discover essential tips like using persistent runners, enforcing bundle budgets with size-limit, leveraging Turborepo caching, and implementing request caching. - Tags: best-practices - Published: 2026-06-07 ### [CopilotKit Shared State Persistence: 5 Production Strategies Explained](/CopilotKit/CopilotKit/copilotkit-shared-state-persistence-strategies) Discover 5 production strategies for CopilotKit shared state persistence. Learn how to manage real-time AG-UI state, localStorage, SQLite, backend tools, and hybrid writes for durable shared state. - Tags: best-practices - Published: 2026-06-07 ### [CopilotKit React Native Integration: Headless SDK Setup with Polyfills and Hooks](/CopilotKit/CopilotKit/copilotkit-react-native-integration-specifics) Easily integrate CopilotKit with React Native using our headless SDK. Get started with polyfills, CopilotKitProvider, and core hooks like useAgent for mobile apps. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Build Custom Chat Suggestions with useCopilotChatSuggestions in CopilotKit](/CopilotKit/CopilotKit/building-custom-chat-suggestions-with-usecopilotchatsuggestions) Learn how to build custom chat suggestions with useCopilotChatSuggestions in CopilotKit. Stream and render suggestions effortlessly for enhanced user experience. - Tags: how-to-guide - Published: 2026-06-07 ### [How CopilotKit Handles Context Propagation Across Components](/CopilotKit/CopilotKit/copilotkit-context-propagation-across-components) Discover how CopilotKit handles context propagation across components via its ContextStore and frontend hooks. Learn to inject data into agent system prompts for seamless integration. - Tags: internals - Published: 2026-06-07 ### [How to Handle Tool Call Errors in CopilotKit: A Complete Guide](/CopilotKit/CopilotKit/handling-tool-call-errors-in-copilotkit) Learn to handle tool call errors in CopilotKit effectively. Our guide shows how to catch exceptions, serialize errors, and deliver seamless UI feedback to maintain conversation flow. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Set Up the CopilotKit Hono Server Adapter](/CopilotKit/CopilotKit/copilotkit-hono-server-adapter-setup) Setup the CopilotKit Hono server adapter easily. Expose your Copilot runtime as HTTP endpoints with createCopilotHonoHandler. Supports multi-route, single-route, CORS, and streaming. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Implement Authentication with `useCopilotAuthenticatedAction` in CopilotKit](/CopilotKit/CopilotKit/implementing-authentication-with-usecopilotauthenticatedaction) Learn how to implement authentication with useCopilotAuthenticatedAction in CopilotKit. Secure frontend actions with automatic sign in and custom components. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Stream Responses with the CopilotKit Runtime: SSE Adapters and Event Protocol](/CopilotKit/CopilotKit/streaming-responses-with-copilotkit-runtime) Learn to stream AI responses with the CopilotKit runtime using SSE adapters and its event protocol. Push real-time text and tool-call updates to your UI efficiently. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Configure CopilotKit Express Middleware: Before and After Request Hooks](/CopilotKit/CopilotKit/copilotkit-express-middleware-configuration) Learn to configure CopilotKit Express middleware using before and after request hooks. Easily integrate custom logic into your CopilotKit runtime for enhanced control. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Use useCoAgent for Multi-Agent Orchestration in CopilotKit](/CopilotKit/CopilotKit/multi-agent-orchestration-with-usecoagent) Learn to orchestrate AI agents in CopilotKit with useCoAgent. Synchronize state between your React UI and LangGraph agents effortlessly. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Set Up CopilotKit Telemetry and Observability](/CopilotKit/CopilotKit/copilotkit-telemetry-and-observability-setup) Learn to set up CopilotKit telemetry and observability with our easy guide. Track LLM interactions and configure settings for seamless monitoring. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Debug Agent Communication in CopilotKit: A Complete Troubleshooting Guide](/CopilotKit/CopilotKit/debugging-agent-communication-in-copilotkit) Debug agent communication in CopilotKit with our complete troubleshooting guide. Set log level to debug and inspect the SSE stream to trace messages effectively. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Customize CopilotKit Chat UI Components: 4 Proven Methods](/CopilotKit/CopilotKit/customizing-copilotkit-chat-ui-components) Learn how to customize CopilotKit chat UI components with 4 proven methods. Override props, use the slot API, set global defaults, or build from scratch for complete control. - Tags: how-to-guide - Published: 2026-06-07 ### [What Is the Difference Between useCopilotReadable and useMakeCopilotDocumentReadable in CopilotKit?](/CopilotKit/CopilotKit/usecopilotreadable-vs-usemakcopilotdocumentreadable-differences) Understand the difference between useCopilotReadable and useMakeCopilotDocumentReadable in CopilotKit to expose state or large documents to your Copilot. - Tags: deep-dive - Published: 2026-06-07 ### [How to Migrate from CopilotKit v1 to v2: A Step-by-Step Guide with Code Examples](/CopilotKit/CopilotKit/migrating-from-copilotkit-v1-to-v2) Migrate from CopilotKit v1 to v2 effortlessly. Follow this step-by-step guide with code examples to update packages, providers, hooks, and the server runtime for a smooth transition. - Tags: migration-guide - Published: 2026-06-07 ### [How to Configure the Frontend Tool Execution Sandbox in CopilotKit](/CopilotKit/CopilotKit/frontend-tool-execution-sandbox-configuration) Learn to configure the frontend tool execution sandbox in CopilotKit. Modify iframe attributes, register host functions, and adjust sandbox flags for secure execution. - Tags: how-to-guide - Published: 2026-06-07 ### [CopilotKit AG‑UI Protocol Integration Patterns: A Complete Implementation Guide](/CopilotKit/CopilotKit/copilotkit-ag-ui-protocol-integration-patterns) Explore CopilotKit AG-UI protocol integration patterns to streamline React frontend and backend agent communication. Master SSE streaming for messages, tool calls, and state snapshots with this comprehensive guide. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Implement Human-in-the-Loop Workflows with `useHumanInTheLoop` in CopilotKit](/CopilotKit/CopilotKit/implementing-human-in-the-loop-workflows-with-use-human-in-the-loop) Implement human in the loop workflows with CopilotKit's useHumanInTheLoop hook. Pause LLM agents and render interactive UI components for seamless user input. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Build Generative UI with the A2UI Renderer in CopilotKit](/CopilotKit/CopilotKit/building-generative-ui-with-a2ui-renderer-in-copilotkit) Learn to build Generative UI with CopilotKit's A2UI renderer. Seamlessly generate React UI components from LLM agents using the RAG framework. Enable the a2ui middleware and A2UIProvider to get started. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Configure LangGraph Interrupts Using the useLangGraphInterrupt Hook in CopilotKit](/CopilotKit/CopilotKit/configuring-langgraph-interrupts-with-use-lang-graph-interrupt-hook) Learn to configure LangGraph interrupts with CopilotKit's useLangGraphInterrupt hook. Execute custom UI or async logic when your LangGraph workflow pauses at a specific node. - Tags: how-to-guide - Published: 2026-06-07 ### [How CopilotKit Handles Shared State Synchronization Between Agents and UI](/CopilotKit/CopilotKit/copilotkit-shared-state-synchronization-between-agent-and-ui) Discover how CopilotKit synchronizes shared state between agents and UI using the useCoAgent hook and OnCopilotKitStateSync events for real-time updates. Learn more now! - Tags: internals - Published: 2026-06-07 ### [How to Implement Custom Tool Call Renderers in CopilotKit](/CopilotKit/CopilotKit/how-to-implement-custom-tool-call-renderers-in-copilotkit) Learn to implement custom tool call renderers in CopilotKit for React. Visualize AI tool execution with useRenderTool and defineToolCallRenderer for inProgress, executing, and complete states. - Tags: how-to-guide - Published: 2026-06-07 ### [How to Implement Continuous Learning from Human Feedback (CLHF) in CopilotKit](/CopilotKit/CopilotKit/implement-clhf-self-learning-agents) Implement Continuous Learning from Human Feedback CLHF in CopilotKit with frontend capture backend persistence and agent consumption Learn how to enhance your AI with CLHF. - Tags: how-to-guide - Published: 2026-06-06 ### [What Are MCP Apps in CopilotKit for Generative UI?](/CopilotKit/CopilotKit/what-are-mcp-apps-generative-ui) Discover MCP Apps in CopilotKit for generative UI. Learn how these runtime middleware components connect MCP servers to your chat agents, rendering interactive apps in sandboxed iframes. - Tags: deep-dive - Published: 2026-06-06 ### [How to Provide UI State Context to CopilotKit Agents: A Complete Implementation Guide](/CopilotKit/CopilotKit/provide-ui-state-context-agents) Learn how to provide UI state context to CopilotKit agents using the useCopilotContext hook implement a complete guide for seamless LLM integration. - Tags: how-to-guide - Published: 2026-06-06 ### [How to Use the Hono Runtime Adapter for Edge Deployments with CopilotKit](/CopilotKit/CopilotKit/use-hono-runtime-adapter-edge) Deploy CopilotKit runtime to edge platforms like Cloudflare Workers with the Hono adapter. Leverage the lightweight Hono router for seamless edge deployments. - Tags: how-to-guide - Published: 2026-06-06 ### [How to Deploy CopilotKit Agents to Microsoft Teams: A Complete Guide](/CopilotKit/CopilotKit/deploy-copilotkit-agents-teams) Deploy CopilotKit agents to Microsoft Teams easily. Follow our complete guide to integrate AI agents into your Teams environment using the Microsoft Agent Framework and Azure Bot Service. - Tags: how-to-guide - Published: 2026-06-06 ### [CopilotKit Vue Support: Complete Framework Guide for Vue 3 Developers](/CopilotKit/CopilotKit/copilotkit-support-vue-framework) Explore CopilotKit Vue support for Vue 3 developers. Leverage Vue-native composables and slot-based UI with our comprehensive framework guide for seamless integration. - Tags: tutorial - Published: 2026-06-06 ### [How to Integrate CopilotKit with Angular: A Complete Step-by-Step Guide](/CopilotKit/CopilotKit/integrate-copilotkit-angular) Easily integrate CopilotKit with Angular using our step-by-step guide. Install, configure, and bind the AgentStore for a reactive AI agent UI. Get started today! - Tags: how-to-guide - Published: 2026-06-06 ### [How to Migrate from CopilotKit v1 to v2: Complete 7-Step Guide](/CopilotKit/CopilotKit/migrate-copilotkit-v1-to-v2) Easily migrate from CopilotKit v1 to v2 with our 7-step guide. Follow simple instructions to update packages provider hooks and runtime for a smooth transition to the latest version. - Tags: migration-guide - Published: 2026-06-06 ### [How to Implement Voice Input and Transcription in CopilotKit: A Complete Guide](/CopilotKit/CopilotKit/implement-voice-input-transcription-copilotkit) Learn how to implement voice input and transcription in CopilotKit with this complete guide. Easily add microphone functionality to capture and transcribe audio directly into your app. - Tags: how-to-guide - Published: 2026-06-06 ### [How to Use CopilotTextarea for AI-Assisted Editing in CopilotKit](/CopilotKit/CopilotKit/use-copilottextarea-ai-editing) Integrate AI-assisted editing with CopilotTextarea in CopilotKit. Enable autocomplete, insertion, and editing powered by the Chat API for seamless content creation. - Tags: how-to-guide - Published: 2026-06-06 ### [How to Deploy CopilotKit Agents to Slack: A Runtime Integration Guide](/CopilotKit/CopilotKit/deploy-copilotkit-agents-slack) Deploy CopilotKit agents to Slack with ease. Follow this runtime integration guide to connect your agents and enhance your Slack workflows. Learn how to set up webhooks and dispatch signals efficiently. - Tags: how-to-guide - Published: 2026-06-06 ### [How to Use SQLiteAgentRunner for Persistent Thread State in CopilotKit](/CopilotKit/CopilotKit/use-sqliteagentrunner-persistent-state) Learn how to use SQLiteAgentRunner to ensure persistent thread state in CopilotKit. Save conversational history to SQLite and reconnect seamlessly after server restarts. - Tags: how-to-guide - Published: 2026-06-06 ### [CopilotKit React Native Integration: Build AI Chat Agents in Mobile Apps](/CopilotKit/CopilotKit/copilotkit-react-native-apps) Integrate CopilotKit into your React Native apps to build powerful AI chat agents. Use headless providers and web-identical hooks for seamless mobile AI experiences on iOS and Android. - Tags: tutorial - Published: 2026-06-06 ### [How to Integrate LangGraph Agents with the CopilotKit Runtime](/CopilotKit/CopilotKit/integrate-langgraph-agents-copilotkit) Integrate LangGraph agents with the CopilotKit runtime using the LangGraphAgent class. Seamlessly connect frontend components with advanced event filtering, state merging, and schema augmentation. - Tags: how-to-guide - Published: 2026-06-06 ### [How to Configure Middleware in CopilotRuntime for Authentication](/CopilotKit/CopilotKit/configure-copilotruntime-middleware-auth) Learn to configure middleware in CopilotRuntime for authentication using onRequest or onBeforeHandler hooks. Protect your AI agents from unauthorized access effectively. - Tags: how-to-guide - Published: 2026-06-06 ### [How to Architect a Multi-Agent System Using CopilotKit: A Complete Guide](/CopilotKit/CopilotKit/architect-multi-agent-system-copilotkit) Learn to architect a multi-agent system with CopilotKit. Discover how AG-UI protocol and CopilotRuntime host isolated agents for unified frontend composition. Build specialized AI planners, researchers, and writers. - Tags: architecture - Published: 2026-06-06 ### [How to Achieve Shared State Synchronization Between CopilotKit Agents and UI](/CopilotKit/CopilotKit/shared-state-sync-agents-ui) Sync UI state and CopilotKit agent execution effortlessly. Learn how the useCoAgent hook and OnCopilotKitStateSync events provide a bidirectional shared-state channel. - Tags: how-to-guide - Published: 2026-06-06 ### [How to Register and Execute Frontend Tools in CopilotKit: 4 Production Patterns](/CopilotKit/CopilotKit/register-execute-frontend-tools) Learn to register and execute frontend tools in CopilotKit using the useFrontendTool hook. Seamlessly integrate browser-native handlers into your React components for an enhanced LLM runtime. - Tags: how-to-guide - Published: 2026-06-06 ### [How to Use Generative UI with the A2UI Specification in CopilotKit](/CopilotKit/CopilotKit/use-generative-ui-a2ui-spec) Learn how to use generative UI with the A2UI specification in CopilotKit. Seamlessly render interactive surfaces with just a few configuration steps and an AI agent. Start building dynamic interfaces today. - Tags: how-to-guide - Published: 2026-06-06 ### [How to Implement Human-in-the-Loop Workflows with CopilotKit Agents: A Complete Guide](/CopilotKit/CopilotKit/implement-human-in-loop-workflows) Implement human-in-the-loop workflows with CopilotKit agents using the useHumanInTheLoop hook. Ensure user approval before agent actions for seamless integration. - Tags: how-to-guide - Published: 2026-06-06 ### [How to Enable and Configure Debug Mode in CopilotKit](/CopilotKit/CopilotKit/configure-copilotkit-debug-mode) Learn how to enable and configure debug mode in CopilotKit for detailed logging. Pass debug true or a DebugConfig object to CopilotRuntime and CopilotKit components for AG-UI events and lifecycle logs. - Tags: how-to-guide - Published: 2026-06-06 ### [How to Set Up CopilotRuntime with the Express Adapter: A Complete Guide](/CopilotKit/CopilotKit/setup-copilotruntime-express-adapter) Learn how to set up CopilotRuntime with the Express adapter. This guide details instance creation, handler configuration, and router mounting for seamless integration. - Tags: how-to-guide - Published: 2026-06-06 ### [What Is the AG-UI Protocol in CopilotKit? A Deep Dive into the Event-Driven Communication Layer](/CopilotKit/CopilotKit/what-is-ag-ui-protocol) Discover the AG-UI protocol in CopilotKit, an event-driven communication layer enabling real-time streaming between frontend, runtime, and agents. Explore its SSE-based architecture. - Tags: deep-dive - Published: 2026-06-06 ### [How to Implement the useAgent Hook for Programmatic Agent Control in React](/CopilotKit/CopilotKit/how-to-implement-useagent-hook) Learn to implement the useAgent hook in React for programmatic agent control. Start agent runs, mutate state, and subscribe to events with this powerful hook from CopilotKit. - Tags: how-to-guide - Published: 2026-06-06