LangGraph Platform

Connect Agent Interface to a LangGraph Platform agent through @openuidev/langchain.

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.