copilotkit-agui

Implements AG-UI protocol agent backends with SSE event streaming and state synchronization.

Updated May 9, 2026
One-click install
npx skills add https://github.com/SebastienGt/LivingMargin-Google-Deepmind-Hackathon --skill copilotkit-agui-sebastiengt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: copilotkit-agui
Source: https://github.com/SebastienGt/LivingMargin-Google-Deepmind-Hackathon/tree/main/.cursor/skills/copilotkit-agui
Command: npx skills add https://github.com/SebastienGt/LivingMargin-Google-Deepmind-Hackathon --skill copilotkit-agui-sebastiengt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @ag-ui/core, @ag-ui/client, @ag-ui/encoder, rxjs, express, and includes references (resource) components.

What problem does it solve? Building a custom agent backend that communicates with CopilotKit frontends requires correctly implementing the AG-UI event protocol, including event ordering, SSE encoding, state synchronization, and tool call flows, which is error-prone without a complete reference. ## Core Features & Use Cases - Event Protocol Reference: Complete schemas for all AG-UI event families including lifecycle, text, tool calls, state, reasoning, and activity events. - Backend Implementation Guide: Step-by-step patterns for extending AbstractAgent, exposing HTTP SSE endpoints, and handling tool calls and human-in-the-loop interrupts. - Client SDK Reference: API documentation for HttpAgent, middleware, subscribers, and event application pipelines. - Use Case: You are building a Python or TypeScript agent backend for a CopilotKit frontend and events are arriving malformed or out of order; use this Skill to verify event sequences against the protocol specification and fix your SSE encoding. ## Quick Start Use the copilotkit-agui skill to help me implement an AG-UI compliant agent endpoint that streams text responses over SSE.

Frequently Asked Questions about copilotkit-agui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an AG-UI agent backend with SSE streaming?▼

Create an HTTP POST endpoint that accepts RunAgentInput, set Content-Type to text/event-stream, then emit RUN_STARTED, content events, and RUN_FINISHED encoded as SSE data lines. The @ag-ui/encoder EventEncoder class handles the wire format automatically.

What is the correct event order for AG-UI text messages?▼

Every run starts with RUN_STARTED and ends with RUN_FINISHED or RUN_ERROR. Text messages require TEXT_MESSAGE_START before any TEXT_MESSAGE_CONTENT deltas, followed by TEXT_MESSAGE_END for the same messageId.

How do AG-UI tool calls work with frontend tools?▼

The agent emits TOOL_CALL_START, TOOL_CALL_ARGS, and TOOL_CALL_END, then typically RUN_FINISHED. The client executes the tool and sends the result back as a tool-role message in the next run's input messages.

What is the difference between STATE_SNAPSHOT and STATE_DELTA in AG-UI?▼

STATE_SNAPSHOT replaces the entire client-side state with a complete object. STATE_DELTA applies incremental updates using RFC 6902 JSON Patch operations against the existing state.

Why are my AG-UI events not reaching the CopilotKit frontend?▼

Common causes include missing SSE headers, malformed data lines, empty TEXT_MESSAGE_CONTENT deltas, or incorrect event ordering. Verify each event is a JSON object on a data: line terminated by a double newline.

When should I not use the AG-UI protocol directly?▼

Use CopilotKit's React hooks and runtime setup skills for frontend work, and framework-specific integrations like LangGraph or Mastra when available. Implement AG-UI directly only for custom backends without an existing integration.