ag-ui

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)

// 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

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

function App() {
  return (
    <AgentProvider url="https://api.example.com/agent">
      <AgentChat />
    </AgentProvider>
  );
}

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

  return (
    <div className="flex flex-col h-screen">
      {/* Agent state visualization */}
      {state.status === "thinking" && (
        <div className="bg-blue-50 p-3 rounded-lg animate-pulse">
          🤔 Agent is thinking... ({state.progress}%)
          <progress value={state.progress} max={100} />
        </div>
      )}

      {/* Tool calls (show what agent is doing) */}
      {toolCalls.map((tc) => (
        <div key={tc.id} className="bg-gray-50 p-2 rounded text-sm">
          🔧 <strong>{tc.name}</strong>: {tc.status === "running" ? "Working..." : "Done"}
          {tc.result && <pre className="mt-1">{JSON.stringify(tc.result, null, 2)}</pre>}
        </div>
      ))}

      {/* Messages */}
      {messages.map((msg) => (
        <div key={msg.id} className={msg.role === "user" ? "text-right" : "text-left"}>
          <p>{msg.content}</p>
        </div>
      ))}

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

      {state.suggestions && (
        <div className="flex gap-2">
          {state.suggestions.map((s) => (
            <button key={s} onClick={() => sendMessage(s)} className="px-3 py-1 bg-blue-100 rounded">
              {s}
            </button>
          ))}
        </div>
      )}

      {/* Input */}
      <form onSubmit={(e) => { e.preventDefault(); sendMessage(input); }}>
        <input placeholder="Ask anything..." disabled={isStreaming} />
      </form>
    </div>
  );
}