Agent User Interaction Protocol (AG-UI)

Agent User Interaction Protocol (AG-UI) is an open, lightweight, event-based protocol that standardizes how AI agents connect to user-facing applications. Exposing a deep agent over AG-UI turns its run into a typed event stream (messages, tool calls, reasoning, state, and lifecycle) that any AG-UI client can consume, so you can drive a frontend without coupling it to LangGraph internals.

Quickstart

Serve a deep agent as a LangGraph graph, then connect the TypeScript @ag-ui/langgraph adapter so AG-UI clients can drive it.

Install dependencies

Install Deep Agents, the LangGraph CLI, and the AG-UI LangGraph adapter:

npm install @ag-ui/langgraph deepagents @langchain/langgraph-cli

yarn add @ag-ui/langgraph deepagents @langchain/langgraph-cli

pnpm add @ag-ui/langgraph deepagents @langchain/langgraph-cli

A deep agent created with createDeepAgent (create_deep_agent in Python) is a LangGraph graph. Expose it to AG-UI clients by serving it as a LangGraph server, then point the AG-UI adapter at that server.

Create a deep agent

Define the agent and export the graph so a LangGraph server can load it.

import { createDeepAgent } from "deepagents";

export const agent = createDeepAgent({
  model: "anthropic:claude-sonnet-4-6",
  systemPrompt: "You are an expert researcher.",
});

Serve the agent

Register the graph in a langgraph.json file at your project root.

{
  "dependencies": ["."],
  "graphs": {
    "deep_agent": "./agent.ts:agent"
  },
  "env": ".env"
}

Start the LangGraph development server. It exposes the graph over HTTP at http://localhost:2024.

npx @langchain/langgraph-cli dev

Connect the AG-UI adapter

The TypeScript @ag-ui/langgraph adapter wraps the running graph as an AG-UI agent that any client can drive. Point it at the LangGraph server and name the graph to load. This works whether the graph was authored in Python or TypeScript.

import { LangGraphAgent } from "@ag-ui/langgraph";

const agent = new LangGraphAgent({
  graphId: "deep_agent",
  deploymentUrl: "http://localhost:2024",
});

Stream events

AG-UI is an event stream. As a deep agent runs, the adapter translates its LangGraph execution into typed AG-UI events. A client subscribes to those events and updates as they arrive, rather than waiting for the final answer.

A deep agent run maps onto many AG-UI event types. The main ones, among others:

State updates use STATE_SNAPSHOT for a full baseline and STATE_DELTA (JSON Patch, RFC 6902) for incremental changes, so a client can keep todos, plans, and subagent status in sync without re-sending the whole state on every step.

To watch the stream directly, run the agent with a subscriber. Each event has a matching on…Event callback:

import { LangGraphAgent } from "@ag-ui/langgraph";

const agent = new LangGraphAgent({
  graphId: "deep_agent",
  deploymentUrl: "http://localhost:2024",
  initialMessages: [
    { id: "1", role: "user", content: "Research the AG-UI protocol." },
  ],
});

await agent.runAgent(
  {},
  {
    onTextMessageContentEvent({ event }) {
      process.stdout.write(event.delta);
    },
    onToolCallStartEvent({ event }) {
      console.log(`\n[tool] ${event.toolCallName}`);
    },
    onStateSnapshotEvent({ event }) {
      console.log("\n[state]", event.snapshot);
    },
    onRunFinishedEvent() {
      console.log("\n[done]");
    },
  },
);

When a deep agent pauses for human input, the run finishes with an interrupt. By default, @ag-ui/langgraph emits a legacy on_interrupt custom event alongside RUN_FINISHED. To receive the structured AG-UI interrupt outcome on RUN_FINISHED (outcome.type === "interrupt"), set emitInterruptOutcome: true when you construct the agent:

const agent = new LangGraphAgent({
  graphId: "deep_agent",
  deploymentUrl: "http://localhost:2024",
  emitInterruptOutcome: true,
});

Resume the run by sending the standard AG-UI resume field on the next input:

const input = {
  threadId: "t1",
  runId: "r2",
  messages: [],
  resume: [
    { interruptId: "int-abc", status: "resolved", payload: { approved: true } },
  ],
};

For the interrupt model itself, see Human-in-the-loop.

Connect a frontend

Any AG-UI client can drive a deep agent exposed over the protocol, so you do not have to build message rendering, streaming, or state sync yourself. Point the client at the adapter (or a runtime that wraps it) and select the agent by its graphId.

Programmatic API

LangGraphAgent connects to a deep agent on a LangGraph server and exposes it as an AG-UI agent. Construct it with the graph to load, then drive it with a few methods.

import { LangGraphAgent } from "@ag-ui/langgraph";

const agent = new LangGraphAgent({
  graphId: "deep_agent",              // matches a key in langgraph.json
  deploymentUrl: "http://localhost:2024",
});

• runAgent(parameters?, subscriber?): Run the agent and stream AG-UI events to the subscriber's on…Event callbacks (see Stream events). Resolves when the run finishes.
• subscribe(subscriber): Attach a persistent subscriber that receives events across every run, rather than for a single call.
• abortRun(): Cancel the run in progress.

To seed input, pass initialMessages to the constructor, or call addMessage or setMessages before running.

See also

• CopilotKit: Python and TypeScript CopilotKit runtime patterns for Deep Agents over AG-UI
• Frontend overview: Build UIs that stream deep agent progress with the LangChain frontend SDKs
• Human-in-the-loop: Interrupt and resume model for deep agents
• Agent Client Protocol (ACP): Connect deep agents to code editors and IDEs
• AG-UI documentation: Protocol concepts, events, and client SDKs