# Ag Ui

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-terminalskills-skills-ag-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [TerminalSkills](https://agentstack.voostack.com/s/terminalskills)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [TerminalSkills](https://github.com/TerminalSkills)
- **Source:** https://github.com/TerminalSkills/skills/tree/main/skills/ag-ui
- **Website:** https://terminalskills.io/

## Install

```sh
agentstack add skill-terminalskills-skills-ag-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# AG-UI — Agent-User Interaction Protocol

You are an expert in AG-UI (Agent-User Interaction Protocol), the open standard by CopilotKit for connecting AI agents to frontend UIs. You help developers stream agent actions, tool calls, state updates, and text generation to React components in real-time — enabling rich agent UIs where users see what the agent is thinking, doing, and can intervene at any step.

## Core Capabilities

### AG-UI Server (Agent Events)

```typescript
// server/agent.ts — Stream agent events to UI
import { AgentServer, EventStream } from "@ag-ui/server";

const server = new AgentServer();

server.onRequest(async (request, stream: EventStream) => {
  const { messages, context } = request;

  // Emit thinking state
  stream.emitStateUpdate({ status: "thinking", progress: 0 });

  // Stream text generation
  stream.emitTextStart();
  for (const word of "I'll analyze your data now.".split(" ")) {
    stream.emitTextDelta(word + " ");
    await sleep(50);
  }
  stream.emitTextEnd();

  // Emit tool call
  stream.emitToolCallStart("search_database", { query: context.userQuery });
  const results = await searchDatabase(context.userQuery);
  stream.emitToolCallEnd("search_database", results);
  stream.emitStateUpdate({ status: "analyzing", progress: 50 });

  // Stream analysis
  stream.emitTextStart();
  const analysis = await generateAnalysis(results);
  for await (const chunk of analysis) {
    stream.emitTextDelta(chunk);
  }
  stream.emitTextEnd();

  // Custom state for UI rendering
  stream.emitStateUpdate({
    status: "complete",
    progress: 100,
    charts: [{ type: "bar", data: results.chartData }],
    suggestions: ["Run deeper analysis", "Export to CSV", "Schedule report"],
  });

  stream.end();
});
```

### AG-UI React Client

```tsx
import { useAgent, AgentProvider } from "@ag-ui/react";

function App() {
  return (
    
      
    
  );
}

function AgentChat() {
  const { messages, state, sendMessage, isStreaming, toolCalls } = useAgent();

  return (
    
      {/* Agent state visualization */}
      {state.status === "thinking" && (
        
          🤔 Agent is thinking... ({state.progress}%)
          
        
      )}

      {/* Tool calls (show what agent is doing) */}
      {toolCalls.map((tc) => (
        
          🔧 {tc.name}: {tc.status === "running" ? "Working..." : "Done"}
          {tc.result && {JSON.stringify(tc.result, null, 2)}}
        
      ))}

      {/* Messages */}
      {messages.map((msg) => (
        
          {msg.content}
        
      ))}

      {/* Dynamic UI from agent state */}
      {state.charts?.map((chart, i) => (
        
      ))}

      {state.suggestions && (
        
          {state.suggestions.map((s) => (
             sendMessage(s)} className="px-3 py-1 bg-blue-100 rounded">
              {s}
            
          ))}
        
      )}

      {/* Input */}
       { e.preventDefault(); sendMessage(input); }}>
        
      
    
  );
}
```

## Installation

```bash
npm install @ag-ui/react @ag-ui/server
```

## Best Practices

1. **State streaming** — Emit state updates for progress, status, UI components; users see agent's thought process
2. **Tool call transparency** — Show tool calls in real-time; builds trust, helps debugging
3. **Suggestions** — Emit suggestion buttons after responses; guide users to next actions
4. **Custom UI** — Use state updates to render charts, tables, forms; richer than plain text
5. **Human-in-the-loop** — Emit confirmation requests before destructive actions; users approve or reject
6. **Progress tracking** — Emit progress percentages for long tasks; prevent user anxiety
7. **Framework agnostic** — AG-UI protocol works with any agent backend (LangGraph, CrewAI, custom)
8. **CopilotKit integration** — AG-UI powers CopilotKit; use CopilotKit for higher-level React components

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [TerminalSkills](https://github.com/TerminalSkills)
- **Source:** [TerminalSkills/skills](https://github.com/TerminalSkills/skills)
- **License:** Apache-2.0
- **Homepage:** https://terminalskills.io/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-terminalskills-skills-ag-ui
- Seller: https://agentstack.voostack.com/s/terminalskills
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.