skills.rest
franciscogar94
franciscogar94COMMUNITY
Explore all skills by this author →
GitHub

copilotkit-agui

Implements AG-UI protocol backends with typed SSE events for agent-to-frontend communication.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building a custom agent backend that streams structured output to a frontend requires implementing the AG-UI event protocol correctly — event ordering, SSE encoding, state synchronization, and tool call lifecycles are easy to get wrong, resulting in malformed streams or lost events. ## Core Features & Use Cases - Protocol Reference: Complete event type schemas covering lifecycle, text, tool call, state, reasoning, and activity events with JSON examples. - Backend Implementation Guide: Step-by-step patterns for extending AbstractAgent, exposing HTTP SSE endpoints, emitting state snapshots and JSON Patch deltas, and handling tool results. - Client SDK Reference: API documentation for HttpAgent, middleware, subscribers, and event application pipelines. - Use Case: You are building a LangGraph agent that must drive a live canvas UI. Use this Skill to emit STATE_SNAPSHOT and TOOL_CALL events in the correct order so the frontend re-renders reactively. ## Quick Start Use the copilotkit-agui skill to 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?▼

Create an HTTP POST endpoint accepting RunAgentInput, respond with text/event-stream, and emit events in order: RUN_STARTED first, then content events, then RUN_FINISHED or RUN_ERROR. Use @ag-ui/encoder's EventEncoder to format each event as an SSE data line.

What event types does the AG-UI protocol define?▼

AG-UI defines lifecycle events (RUN_STARTED, RUN_FINISHED, RUN_ERROR, STEP_STARTED/FINISHED), text message events, tool call events, state events (STATE_SNAPSHOT, STATE_DELTA), reasoning events, activity events, and RAW/CUSTOM extension events.

How does state synchronization work in AG-UI?▼

STATE_SNAPSHOT replaces the entire client state, while STATE_DELTA applies incremental updates using RFC 6902 JSON Patch operations. Agents typically send one snapshot early in a run, then deltas as work progresses.

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

Common causes include missing SSE headers (Content-Type: text/event-stream), malformed data lines, or violating event ordering rules such as emitting TEXT_MESSAGE_CONTENT before TEXT_MESSAGE_START. The client verifies event sequences and drops invalid streams.

How do tool calls work between agent and frontend?▼

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 message, and starts a new run where the agent reads the result from input.messages.

When should I not use this AG-UI skill?▼

Use copilotkit-develop for React hooks and frontend components, copilotkit-setup for runtime configuration, and copilotkit-integrations for framework-specific guides like LangGraph or CrewAI. This skill covers only the protocol and backend implementation.

Related Skills

Explore More Software Engineering Skills→
diegoc1005diegoc1005

copilotkit-debug

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

Community
Advanced
hanu-tayalhanu-tayal

copilotkit-develop

Integrate CopilotKit v2 into React and Next.js applications with agent state and chat UI.

Community
Advanced
gptdeividgptdeivid

copilotkit-integrations

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

Community
Advanced
jerelvelardejerelvelarde
41

copilotkit-agui

Implement the AG-UI protocol for agent-frontend communication via SSE transport.

Community
Advanced