skills.rest
CopilotKit
CopilotKitOFFICIAL
Explore all skills by this author →
WebsiteGitHub

copilotkit-agui

Implement AG-UI protocol backends that stream typed agent events over SSE to frontends.

7|3|Updated May 8, 2026
Search Tags:#typescript#copilotkit#tool calls#state synchronization#ag-ui#agent protocol#sse streaming
One-click install
npx skills add https://github.com/CopilotKit/Generative-UI-Global-Hackathon-Starter-Kit --skill copilotkit-agui-copilotkit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: copilotkit-agui
Source: https://github.com/CopilotKit/Generative-UI-Global-Hackathon-Starter-Kit/tree/main/.cursor/skills/copilotkit-agui
Command: npx skills add https://github.com/CopilotKit/Generative-UI-Global-Hackathon-Starter-Kit --skill copilotkit-agui-copilotkit

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 a CopilotKit frontend requires correctly implementing the AG-UI event protocol, and mistakes in event ordering, SSE encoding, or state synchronization cause silent streaming failures that are hard to debug. ## Core Features & Use Cases - Protocol Reference: Complete schemas for all AG-UI event families including lifecycle, text messages, tool calls, state snapshots/deltas, reasoning, and activity events. - Backend Implementation Guide: Step-by-step patterns for extending AbstractAgent, exposing HTTP SSE endpoints with EventEncoder, and handling tool call round-trips. - Client SDK Reference: API documentation for HttpAgent, subscribers, middleware, and event application pipelines. - Use Case: You are building a custom LangGraph or Express agent backend and need it to stream responses, tool calls, and JSON Patch state updates to a CopilotKit React frontend without protocol errors. ## Quick Start Use the copilotkit-agui skill to help me build an Express endpoint that streams AG-UI events for my agent.

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 a POST endpoint accepting RunAgentInput, set Content-Type to text/event-stream, and emit events using @ag-ui/encoder's EventEncoder. Start with RUN_STARTED, stream content events, and end with RUN_FINISHED or RUN_ERROR.

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

Every run starts with RUN_STARTED and ends with RUN_FINISHED or RUN_ERROR. TEXT_MESSAGE_START must precede TEXT_MESSAGE_CONTENT for the same messageId, and TEXT_MESSAGE_END closes the message. Tool calls follow the same START/ARGS/END triad linked by toolCallId.

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, adds the result to messages, and starts a new run where the agent reads the tool result from 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 as RFC 6902 JSON Patch operations to the existing state, which is more efficient for small changes.

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

Common causes include missing SSE headers (Content-Type: text/event-stream), malformed data lines not ending with double newlines, empty TEXT_MESSAGE_CONTENT deltas, or events failing Zod schema validation in the client's EventSchemas parser.

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

Use CopilotKit's React hooks and runtime setup skills for frontend work instead of raw protocol implementation. Framework-specific integrations like LangGraph or Mastra already handle AG-UI event emission, so manual implementation is only needed for custom backends.

Related Skills

Explore More Software Engineering Skills→
23wj1a054123wj1a0541

copilotkit-debug

Diagnose CopilotKit runtime, agent, streaming, and tool execution failures.

Community
Advanced
quanngynxquanngynx

copilotkit-develop

Build CopilotKit v2 chat apps connecting runtime agents to React interfaces.

Community
Intermediate
gptdeividgptdeivid

copilotkit-integrations

Integrates external AI agent frameworks into CopilotKit applications via AG-UI protocol.

Community
Advanced
hanu-tayalhanu-tayal

copilotkit-integrations

Integrate external agent frameworks into CopilotKit applications via AG-UI.

Community
Advanced