CopilotKit React Patterns

Best practices for building agentic React applications with CopilotKit. Contains 25 rules across 6 categories, prioritized by impact to guide code generation and refactoring. Covers both v1 (@copilotkit/react-core) and v2 (@copilotkit/react-core/v2) APIs.

When to Apply

Reference these guidelines when:

• Setting up CopilotKit provider in a React application
• Using agent hooks (useAgent, useFrontendTool, useCopilotAction)
• Rendering tool calls or custom messages from agents
• Managing shared state between UI and agents via useCopilotReadable or useCoAgent
• Building chat interfaces with CopilotChat, CopilotSidebar, or CopilotPopup
• Configuring suggestions for proactive agent assistance

Rule Categories by Priority