feat(examples): add LangGraph multi-agent chat example (#293)

examples/langgraph-chat/.env.example

@@ -0,0 +1,18 @@
+# ── Model (used by the LangGraph server) ──────────────────────────
+# The graph runs the LLM, so the API key lives with the LangGraph
+# process, not the Next.js app.
+OPENAI_API_KEY=sk-your-key-here
+OPENAI_MODEL=gpt-5.5
+
+# ── LangGraph connection (used by the Next.js /api/chat proxy) ─────
+# Local: the URL printed by `pnpm langgraph:dev` (defaults to 2024).
+LANGGRAPH_API_URL=http://localhost:2024
+# The graph name from langgraph.json ("agent"), or a deployed
+# assistant id.
+LANGGRAPH_ASSISTANT_ID=agent
+
+# ── LangGraph Cloud / Platform (only for a hosted deployment) ──────
+# Point LANGGRAPH_API_URL at your deployment URL and set the key.
+# Leave blank when running locally.
+# LANGGRAPH_API_URL=https://your-deployment.us.langgraph.app
+# LANGSMITH_API_KEY=lsv2-...

examples/langgraph-chat/.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+!.env.example
+
+# langgraph dev server state
+.langgraph_api/
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/langgraph-chat/README.md

@@ -0,0 +1,95 @@
+# OpenUI + LangGraph Chat
+
+A generative-UI chat app where the responses are produced by a **multi-agent
+[LangGraph](https://langchain-ai.github.io/langgraphjs/) graph** and rendered
+live with [OpenUI](https://openui.com).
+
+A supervisor routes each message to one of three specialists — **weather**,
+**finance**, or **research** — and the chosen agent streams its answer as
+[OpenUI Lang](https://www.openui.com/docs/openui-lang/overview), which the
+renderer turns into cards, tables, and charts as the tokens arrive.
+
+```
+browser ──fetch /api/chat──▶ Next.js route ──@langchain/langgraph-sdk──▶ LangGraph server
+   ▲                              │                                          (router → specialist
+   └────── SSE (LangGraph) ───────┘                                           → tools → OpenUI Lang)
+        parsed by langGraphAdapter()
+```
+
+## How it connects
+
+| Piece | File | Role |
+| --- | --- | --- |
+| Frontend | `src/app/page.tsx` | `<FullScreen>` with `streamProtocol={langGraphAdapter()}`; converts messages with `langGraphMessageFormat.toApi`. |
+| Proxy | `src/app/api/chat/route.ts` | Opens a stateless run on the LangGraph server and forwards its SSE. Keeps the API key + deployment URL server-side. |
+| Graph | `src/agent/graph.ts` | Supervisor + specialist ReAct loops. Each specialist shares the generated OpenUI system prompt, so its output is OpenUI Lang. |
+| Tools | `src/agent/tools.ts` | Mock `get_weather` / `get_stock_price` / `search_web` (no external keys needed). |
+| Component library | `src/library.ts` | The OpenUI components the model is allowed to render. `pnpm generate:prompt` turns it into `src/generated/system-prompt.txt`. |
+
+The graph streams in `messages-tuple` mode; the proxy normalizes those events to
+`event: messages`, which is exactly what `langGraphAdapter()` consumes.
+
+## Getting started (local)
+
+This example runs **two processes**: the LangGraph server (runs the model) and
+the Next.js app (serves the UI). Run them in two terminals.
+
+1. Create a `.env` from the template:
+
+   ```bash
+   cp .env.example .env
+   ```
+
+   ```env
+   OPENAI_API_KEY=sk-your-key-here
+   OPENAI_MODEL=gpt-5.5
+   LANGGRAPH_API_URL=http://localhost:2024
+   LANGGRAPH_ASSISTANT_ID=agent
+   ```
+
+2. **Terminal 1 — LangGraph server** (hot-reloads the graph on `:2024`):
+
+   ```bash
+   pnpm langgraph:dev
+   ```
+
+3. **Terminal 2 — Next.js app**:
+
+   ```bash
+   pnpm dev
+   ```
+
+Open [http://localhost:3000](http://localhost:3000) and try a starter such as
+"Weather in Tokyo" or "AAPL stock price".
+
+> `OPENAI_API_KEY` is read by the **LangGraph server** (it runs the LLM), so it
+> belongs in `.env` next to `langgraph.json`. The Next.js app only needs the
+> `LANGGRAPH_*` variables.
+
+## Using LangGraph Cloud / Platform
+
+Deploy the graph (this folder already has a `langgraph.json`) and point the app
+at the deployment instead of localhost — no app code changes:
+
+```env
+LANGGRAPH_API_URL=https://your-deployment.us.langgraph.app
+LANGGRAPH_ASSISTANT_ID=agent        # graph name, or a created assistant id
+LANGSMITH_API_KEY=lsv2-...          # auth for the deployment
+```
+
+`LANGSMITH_API_KEY` is sent as `x-api-key` by the SDK from the server side only.
+Restart `pnpm dev` after changing `.env`.
+
+## Customizing
+
+- **Add a specialist:** extend the `SPECIALISTS` map in `src/agent/graph.ts` and
+  add the matching `*_agent` / `*_tools` node pair in the graph wiring.
+- **Use real tools:** replace the mock bodies in `src/agent/tools.ts` with real
+  API calls.
+- **Change what the model can render:** edit `src/library.ts`, then re-run
+  `pnpm generate:prompt` (the dev scripts do this for you).
+
+## Learn more
+
+- [OpenUI docs](https://openui.com/docs) and the [LangGraph provider guide](https://www.openui.com/docs/chat/providers)
+- [LangGraph.js docs](https://langchain-ai.github.io/langgraphjs/)

examples/langgraph-chat/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

examples/langgraph-chat/langgraph.json

@@ -0,0 +1,8 @@
+{
+  "node_version": "20",
+  "dependencies": ["."],
+  "graphs": {
+    "agent": "./src/agent/graph.ts:graph"
+  },
+  "env": ".env"
+}

examples/langgraph-chat/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+  turbopack: {},
+};
+
+export default nextConfig;

examples/langgraph-chat/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "langgraph-chat",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "generate:prompt": "pnpm --filter @openuidev/cli build && pnpm exec openui generate src/library.ts --out src/generated/system-prompt.txt",
+    "langgraph:dev": "pnpm generate:prompt && langgraphjs dev",
+    "dev": "pnpm generate:prompt && next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@langchain/core": "^1.1.48",
+    "@langchain/langgraph": "^1.3.6",
+    "@langchain/langgraph-sdk": "^1.9.18",
+    "@langchain/openai": "^1.4.7",
+    "@openuidev/react-headless": "workspace:*",
+    "@openuidev/react-lang": "workspace:*",
+    "@openuidev/react-ui": "workspace:*",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "zod": "^4.0.0"
+  },
+  "devDependencies": {
+    "@langchain/langgraph-cli": "^1.2.5",
+    "@openuidev/cli": "workspace:*",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

examples/langgraph-chat/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;