ag-ui

// 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();
});

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>
  );
}

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