LangChain Chat

OpenUI's renderer is transport-agnostic: it turns streamed OpenUI Lang into interactive components no matter which agent produced it. This example uses a DeepAgents agent running on LangGraph and the supported @openuidev/langchain integration to deliver its response as AG-UI events.

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 { openUIStreamTransformer } from "@openuidev/langchain/transformer";
import { createDeepAgent } from "deepagents";

export const graph = createDeepAgent({
  model: `openai:${process.env.OPENAI_MODEL ?? "gpt-5.5"}`,
  tools: [getWeather, getStockPrice, searchWeb],
  systemPrompt: SYSTEM_PROMPT,
  streamTransformers: [openUIStreamTransformer],
});

The example's SYSTEM_PROMPT includes the prompt generated from its OpenUI component library. That 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, openuiChatLibrary } from "@openuidev/react-ui";

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

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

Project layout

examples/langchain-chat/
|- 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/library.ts             # Components the model can render
|- src/generated/             # Generated OpenUI system prompt
|- langgraph.json             # Local and deployed graph configuration

Run the example

From examples/langchain-chat, install dependencies and copy the environment template:

pnpm install
cp .env.example .env

Add OPENAI_API_KEY to .env, then start the LangGraph server and Next.js app together:

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. Point the proxy at the 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.