LaunchKit · 2026
Back to Skills

copilotkit-agent-patterns

Patterns for building AI agents that integrate with CopilotKit.

0
330 downloads
by @generaljerel

Setup & Installation

openclaw skills install @generaljerel/copilotkit-agent-patterns

Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:

npx clawhub install copilotkit-agent-patterns

Version History

v1.0.2Feb 27, 2026 - Version note by skill developer:

Version 2.0.0 - Updated agent architecture patterns to use BuiltInAgent from @copilotkit/runtime/v2 and clarified model selection format. - Adjusted architecture guidance to reference MCP "endpoints" instead of servers. - Standardized generative UI emission practices: use text messages for non-tool status updates. - Incremented version metadata to reflect major changes in guidelines. - No code changes; documentation improvements only.

What This Skill Does

A collection of 20 architecture and implementation rules for building AI agents that connect to CopilotKit. Covers AG-UI event streaming, shared state management, human-in-the-loop checkpoints, and generative UI emission. Organized into five priority tiers for incremental adoption.

Rather than piecing together AG-UI protocol behavior from scattered docs, these rules give ordered, opinionated patterns that cover the full lifecycle from architecture to generative UI.

When to use it

  • Adding approval gates before an agent takes a destructive action
  • Streaming agent output incrementally into a React UI component
  • Syncing shared state between a LangGraph agent and a CopilotKit frontend
  • Rendering dynamic UI components from agent tool calls
  • Configuring MCP server endpoints for external tool access in an agent

Example Workflow

Here's how your AI assistant might use this skill in practice.

INPUT

User asks: How do I add a human approval step before my agent deletes records?

AGENT
  1. 1Consult hitl-approval-gates rule to confirm tool calls are the correct mechanism for approval gates
  2. 2Consult hitl-timeout-fallback rule to add a timeout with safe fallback behavior
  3. 3Consult hitl-context-in-prompt rule to ensure the user sees enough context to decide
  4. 4Consult hitl-resume-state rule to preserve full agent state after the user responds
OUTPUT

Agent implementation with an approval gate tool call, timeout handling, rich decision context in the prompt, and correct state restoration on resume