copilotkit-agent-patterns
Patterns for building AI agents that integrate with CopilotKit. Use when designing agent architecture, implementing AG-UI event streaming, managing shared state between agent and UI, adding human-in-the-loop checkpoints, or emitting generative UI from agents. Triggers on agent implementation tasks involving CopilotKit runtime, BuiltInAgent, or AG-UI protocol.
Why use this skill?
Master CopilotKit agent development with this official pattern guide. Learn AG-UI streaming, state management, and HITL workflows to build professional AI agents.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/generaljerel/copilotkit-agent-patternsWhat This Skill Does
The copilotkit-agent-patterns skill serves as an authoritative architecture guide for developers building AI agents within the CopilotKit ecosystem. It encapsulates years of best practices into a modular rule-set covering five key areas: Agent Architecture, AG-UI Protocol, State Management, Human-in-the-Loop (HITL) workflows, and Generative UI emission. By utilizing this skill, developers ensure their agents are not only performant but also fully compatible with the CopilotKit runtime and frontend protocols. The skill provides explicit guidance on avoiding common pitfalls like infinite tool-call loops, suboptimal state synchronization, and inconsistent event streaming. It serves as a blueprint for implementing complex, multi-turn AI interactions that require high-fidelity UI feedback and seamless human oversight.
Installation
To integrate these patterns into your OpenClaw environment, use the provided install command:
clawhub install openclaw/skills/skills/generaljerel/copilotkit-agent-patterns
Use Cases
- Architects building scalable CopilotKit runtimes who need to enforce consistent design patterns across team members.
- Developers implementing custom BuiltInAgent structures that require tight integration with the AG-UI protocol for real-time streaming.
- Engineering teams establishing state management lifecycles to ensure UI components reflect accurate agent thread status.
- Developers designing high-stakes applications (e.g., financial processing or data deletion) that necessitate strict Human-in-the-Loop approval gates.
- Frontend-heavy agent applications that utilize generative UI to display complex data widgets rather than standard text responses.
Example Prompts
- "Apply the architecture-built-in-agent pattern to refactor my current runtime implementation and ensure I am using the latest @copilotkit/runtime/v2 approach."
- "Review my current agent loop and suggest improvements based on hitl-approval-gates and hitl-timeout-fallback to make my user confirmations more robust."
- "How should I structure my state-snapshot-frequency to ensure the UI stays synchronized during long-running tool calls? Give me an example based on the CopilotKit patterns."
Tips & Limitations
- Tips: Prioritize rules by category; always start with the CRITICAL architecture patterns before moving to styling or UI concerns. Use the AG-UI protocol strictly to prevent UI flickering or lost events.
- Limitations: This skill is a pattern library and documentation aid, not a runtime executable. It requires the developer to manually translate the patterns into code. Ensure you have the corresponding @copilotkit SDKs installed in your project, as these patterns assume the availability of the CopilotKit v2 API.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-generaljerel-copilotkit-agent-patterns": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Related Skills
copilotkit-runtime-patterns
Server-side runtime patterns for CopilotKit. Use when setting up CopilotKit runtime endpoints (Express, Hono, Next.js), configuring remote agent endpoints, adding middleware, or securing the runtime. Triggers on backend tasks involving @copilotkit/runtime, CopilotRuntime, agent registration, or API endpoint configuration.
copilotkit-react-patterns
CopilotKit React best practices for agentic applications. Use when writing, reviewing, or refactoring React code that uses CopilotKit hooks (useAgent, useFrontendTool, useRenderTool, useCopilotAction, useCopilotReadable), providers (CopilotKit), or chat UI components (CopilotChat, CopilotSidebar, CopilotPopup). Triggers on tasks involving agent integration, tool rendering, shared state, or generative UI in React.