skills.rest
diegoc1005
diegoc1005COMMUNITY
Explore all skills by this author →
GitHub

copilotkit-agui

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

Updated May 9, 2026
Search Tags:#typescript#copilotkit#tool calls#state synchronization#ag-ui#agent protocol#sse streaming
One-click install
npx skills add https://github.com/diegoc1005/hackAI --skill copilotkit-agui-diegoc1005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: copilotkit-agui
Source: https://github.com/diegoc1005/hackAI/tree/main/.cursor/skills/copilotkit-agui
Command: npx skills add https://github.com/diegoc1005/hackAI --skill copilotkit-agui-diegoc1005

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, middleware, subscribers, and event application pipelines. - Use Case: You are building an Express server that streams LLM responses to a CopilotKit React app. Use this Skill to emit correctly ordered RUN_STARTED, TEXT_MESSAGE_*, and RUN_FINISHED events and wire up frontend tool execution. ## Quick Start Use the copilotkit-agui skill to build an Express endpoint that streams AG-UI events for a simple echo 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 TEXT_MESSAGE_START/CONTENT/END events, and terminate with RUN_FINISHED or RUN_ERROR.

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

Every run must start with RUN_STARTED and end 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 finishes the run. The client executes the tool, appends the result as a tool-role message, and starts a new run where the agent reads the 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 using RFC 6902 JSON Patch operations like add, replace, and remove against the existing state.

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

Common causes include missing SSE headers (Content-Type: text/event-stream), malformed data lines that fail Zod schema parsing, empty TEXT_MESSAGE_CONTENT deltas, or violating event ordering rules. The client verifies event sequences and drops invalid streams.

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

Avoid hand-rolling AG-UI when working only with CopilotKit React hooks, runtime setup, or existing framework integrations like LangGraph, Mastra, or CrewAI, which already implement the protocol. Use it for custom backends or new framework integrations.

Related Skills

Explore More Software Engineering Skills→
CopilotKitCopilotKit
7

copilotkit-develop

Implements CopilotKit v2 chat interfaces, frontend tools, and runtime endpoints in React applications.

Official
Intermediate
23wj1a054123wj1a0541

copilotkit-debug

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

Community
Advanced
CopilotKitCopilotKit
7

copilotkit-integrations

Connects external agent frameworks to CopilotKit applications via the AG-UI protocol.

Official
Advanced
gptdeividgptdeivid

copilotkit-integrations

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

Community
Advanced