{"slug":"othmanadi-openui-forge-langchain","name":"openui-forge-langchain","description":"OpenUI generative UI with LangChain/LangGraph backend. Supports ChatOpenAI and ChatAnthropic.","long_description":"---\nname: openui-forge-langchain\ndescription: OpenUI generative UI with LangChain/LangGraph backend. Supports ChatOpenAI and ChatAnthropic.\nversion: 1.2.0\nauthor: OthmanAdi\n---\n\n# OpenUI Forge — LangChain\n\nBuild generative UI apps with OpenUI + LangChain. Stream from ChatOpenAI or ChatAnthropic, convert to OpenAI NDJSON.\n\n## Activation Triggers\n\n- \"openui langchain\", \"openui langgraph\", \"openui langsmith\"\n- \"generative ui langchain\", \"langchain streaming ui\"\n\n## Prerequisites\n\n- Node.js >= 22 (24 LTS recommended), React >= 18.3.1 (19+ recommended)\n- `OPENAI_API_KEY` or `ANTHROPIC_API_KEY` set\n- Next.js project (App Router recommended)\n\n## Quick Start\n\n1. Install dependencies (pick one or both LLM providers):\n```bash\nnpm install @openuidev/react-ui @openuidev/react-headless @openuidev/react-lang lucide-react zod @langchain/openai @langchain/core\n# For Anthropic: npm install @langchain/anthropic\n```\n2. Add the CSS import to `app/layout.tsx`:\n```tsx\nimport \"@openuidev/react-ui/components.css\";\n```\n3. Create the API route and frontend page below\n4. Run `npm run dev` and test\n\n## Full Code\n\n### Backend (OpenAI): `app/api/chat/route.ts`\n\n```typescript\nimport { openuiChatLibrary } from \"@openuidev/react-ui/genui-lib\";\nimport { ChatOpenAI } from \"@langchain/openai\";\nimport { HumanMessage, SystemMessage, AIMessage } from \"@langchain/core/messages\";\n\nconst model = new ChatOpenAI({ model: process.env.OPENAI_MODEL ?? \"gpt-5.5\", streaming: true });\n\nexport async function POST(req: Request) {\n const { messages } = await req.json();\n\n const systemPrompt = openuiChatLibrary.prompt({\n preamble: \"You are a helpful assistant that generates interactive UIs.\",\n });\n\n const lcMessages = [\n new SystemMessage(systemPrompt),\n ...messages.map((m: { role: string; content: string }) =>\n m.role === \"user\" ? new HumanMessage(m.content) : new AIMessage(m.content)\n ),\n ];\n\n const stream = await model.stream(lcMessages);\n const encoder = new TextEncoder();\n const id = `chatcmpl-${Date.now()}`;\n\n const readableStream = new ReadableStream({\n async start(controller) {\n for await (const chunk of stream) {\n const text = typeof chunk.content === \"string\" ? chunk.content : \"\";\n if (!text) continue;\n const payload = {\n id,\n object: \"chat.completion.chunk\",\n choices: [{ index: 0, delta: { content: text }, finish_reason: null }],\n };\n controller.enqueue(encoder.encode(`data: ${JSON.stringify(payload)}\\n\\n`));\n }\n const done = {\n id,\n object: \"chat.completion.chunk\",\n choices: [{ index: 0, delta: {}, finish_reason: \"stop\" }],\n };\n controller.enqueue(encoder.encode(`data: ${JSON.stringify(done)}\\n\\n`));\n controller.enqueue(encoder.encode(\"data: [DONE]\\n\\n\"));\n controller.close();\n },\n });\n\n return new Response(readableStream, {\n headers: { \"Content-Type\": \"text/event-stream\" },\n });\n}\n```\n\n### Backend (Anthropic variant): `app/api/chat/route.ts`\n\nReplace the model initialization and import:\n\n```typescript\nimport { ChatAnthropic } from \"@langchain/anthropic\";\n\nconst model = new ChatAnthropic({\n model: process.env.ANTHROPIC_MODEL ?? \"claude-sonnet-4-6\",\n maxTokens: 4096,\n streaming: true,\n});\n```\n\nEverything else (message mapping, stream conversion, response) stays identical.\n\n### Frontend: `app/chat/page.tsx`\n\n```tsx\n\"use client\";\nimport { FullScreen } from \"@openuidev/react-ui\";\nimport { openuiChatLibrary } from \"@openuidev/react-ui/genui-lib\";\nimport {\n openAIAdapter,\n openAIMessageFormat,\n} from \"@openuidev/react-headless\";\n\nexport default function ChatPage() {\n return (\n \n );\n}\n```\n\n> The backend emits SSE (`data: {json}\\n\\n`). Pair it with `openAIAdapter()` on the frontend. (`langGraphAdapter` is also exported from `@openuidev/react-headless` if you stream LangGraph events natively rather than converting to OpenAI shape.)\n\n## Component Creation\n\n```tsx\nimport { defineComponent } from \"@openuidev/react-lang\";\nimport { z } from \"zod\";\n\nexport const MetricCard = defineComponent({\n name: \"MetricCard\",\n description: \"Displays a metric with label, value, and optional trend\",\n props: z.object({\n label: z.string().describe(\"Metric name\"),\n value: z.number().describe(\"Current metric value\"),\n trend: z.enum([\"up\", \"down\", \"flat\"]).optional().describe(\"Trend direction\"),\n }),\n component: ({ props }) => (\n \n
{props.label}
\n
{props.value}
\n {props.trend &&
{props.trend === \"up\" ? \"+\" : props.trend === \"down\" ? \"-\" : \"=\"}}\n