LangGraph Platform

This example connects a DeepAgents agent running on LangGraph to <AgentInterface />. The supported @openuidev/langchain integration converts LangGraph protocol events into the AG-UI stream consumed by Agent Interface.

View source on GitHub →

Architecture

browser ──fetch /api/chat──▶ Next.js route ──protocol v2──▶ LangGraph server
   ▲                        @openuidev/langchain             (DeepAgent + tools)
   └──────────── AG-UI SSE ◀──────────┘                          │
                  parsed by agUIAdapter()    custom:openui ◀─────┘

The example runs a LangGraph server for the agent and a Next.js app for the UI. The browser talks only to the app's /api/chat route. That keeps the LangGraph deployment URL and optional LangSmith API key on the server.

The integration has two halves:

• openUIStreamTransformer runs with the graph and maps LangGraph protocol-v2 messages and tools events to AG-UI events on custom:openui.
• createLangChainStreamResponse runs in the app route, starts a stateless graph run, adds AG-UI run lifecycle events, and relays the custom channel as AG-UI SSE.

Add the agent transformer

Pass the transformer factory to the agent's streamTransformers option:

import { cloudInstructions } from "@/lib/cloud-prompt";
import { ChatOpenAI } from "@langchain/openai";
import { openUIStreamTransformer } from "@openuidev/langchain/transformer";
import { createDeepAgent } from "deepagents";

const model = new ChatOpenAI({
  model: "google/gemini-3.6-flash-free",
  apiKey: process.env.THESYS_API_KEY,
  streaming: true,
  configuration: { baseURL: "https://api.thesys.dev/v1/embed" },
});

export const graph = createDeepAgent({
  model,
  tools: [getWeather, getStockPrice, searchWeb],
  systemPrompt: cloudInstructions(
    [
      "You are an OpenUI assistant with weather, finance, and research tools.",
      "Use the tools when they help answer the user's request, then answer only in OpenUI Lang.",
    ].join("\n"),
  ),
  streamTransformers: [openUIStreamTransformer],
});

cloudInstructions() loads the generated component-library specification and wraps it for OpenUI Gateway. This teaches the agent to return OpenUI Lang after it uses the mock weather, stock-price, and research tools.

The integration package does not depend on DeepAgents. It works with any agent surface that accepts LangGraph stream transformers.

Add the proxy route

The route is a thin Web-standard adapter:

import { createLangChainStreamResponse } from "@openuidev/langchain";

export const runtime = "nodejs";

export async function POST(request: Request) {
  return createLangChainStreamResponse(request, {
    apiUrl: process.env.LANGGRAPH_API_URL ?? "http://localhost:2024",
    assistantId: process.env.LANGGRAPH_ASSISTANT_ID ?? "agent",
    apiKey: process.env.LANGSMITH_API_KEY,
    debug: process.env.NODE_ENV !== "production",
  });
}

createLangChainStreamResponse validates AG-UI messages, converts text and multimodal content to LangChain messages, preserves complete tool transcripts, removes incomplete tool history that cannot be replayed safely, and calls the LangGraph protocol-v2 endpoints. Aborting the browser request also aborts the upstream subscription and run. Its temporary LangGraph thread is deleted after the run completes. The integration requires a server with custom:* and root lifecycle event-channel support; the tested local baseline is @langchain/langgraph-cli 1.4.x.

Use the lower-level streamOpenUI() export when your route needs to build the graph input or response itself.

Connect the frontend

The proxy already returns AG-UI, so no LangChain-specific browser adapter or message conversion is needed:

import { AgentInterface, agUIAdapter, fetchLLM } from "@openuidev/react-ui";
import { openuiLibrary } from "@openuidev/react-ui/genui-lib";

const llm = fetchLLM({
  url: "/api/chat",
  streamAdapter: agUIAdapter(),
});

<AgentInterface llm={llm} componentLibrary={openuiLibrary} agentName="OpenUI + DeepAgents Chat" />;

Project layout

examples/agent-frameworks/langgraph-platform/
|- src/app/page.tsx           # AgentInterface with agUIAdapter()
|- src/app/api/chat/route.ts  # createLangChainStreamResponse()
|- src/agent/agent.ts         # DeepAgent with openUIStreamTransformer()
|- src/agent/tools.ts         # Mock weather, finance, and research tools
|- src/lib/cloud-prompt.ts    # Generated OpenUI Lang instructions for Gateway
|- src/library.ts             # Components the model can render
|- src/generated/             # Generated component-library specification
|- langgraph.json             # Local and deployed graph configuration

Run the example

From examples/agent-frameworks/langgraph-platform, install dependencies and copy the environment template:

pnpm install
cp .env.example .env

Add THESYS_API_KEY to .env, then start the LangGraph server and Next.js app together. The LangGraph process uses this key when it calls OpenUI Gateway:

pnpm dev

Open http://localhost:3000 and try "Weather in Tokyo" or "AAPL stock price".

Deploy to LangGraph Platform

The included langgraph.json can be deployed without changing app code. Configure THESYS_API_KEY for the LangGraph deployment, then point the Next.js proxy at that deployment through .env:

LANGGRAPH_API_URL=https://your-deployment.us.langgraph.app
LANGGRAPH_ASSISTANT_ID=agent
LANGSMITH_API_KEY=lsv2-...

LANGSMITH_API_KEY is sent as x-api-key only from the server route. Restart the app after changing the environment.

Use a different chat UI

This guide renders the agent with Agent Interface. The backend doesn't depend on it: to use another chat UI, keep the backend from this guide, connect the chat UI to LangGraph with that chat UI's own integration, then follow its OpenUI guide to render responses and handle actions.