thesysdev · vishxrad · Aug 30, 2026
diff --git a/.github/workflows/publish-npm-package.yml b/.github/workflows/publish-npm-package.yml
@@ -19,6 +19,7 @@ on:
           - react-email
           - lang-core
           - langchain
+          - langflow
           - openui-cli
           - svelte-lang
           - vue-lang

diff --git a/README.md b/README.md
@@ -95,6 +95,7 @@ Try it yourself in the [Playground](https://www.openui.com/playground): generate
 | :--------------------------------------------------------------------------------------------------------- | :----------------------------------------------- | :----------------------------------------------------------------------------------------------------------- |
 | [`@openuidev/lang-core`](./packages/lang-core)                                                             | Framework-agnostic parsing and prompt generation | Core parser, prompt-generation, runtime-evaluation, and type layer with no React, Vue, or Svelte dependency  |
 | [`@openuidev/langchain`](./packages/langchain)                                                             | LangChain and LangGraph agents                   | Agent transformer and server helpers that stream OpenUI through AG-UI                                        |
+| [`@openuidev/langflow`](./packages/langflow)                                                               | Langflow workflows                               | Server helpers that map OpenUI turns to Workflow API v2 and relay Langflow's native AG-UI stream             |
 | [`@openuidev/react-lang`](./packages/react-lang)                                                           | React rendering runtimes                         | Define component libraries, generate prompts, and render streamed OpenUI Lang in React                       |
 | [`@openuidev/react-headless`](./packages/react-headless)                                                   | Bring-your-own React chat UI                     | Headless chat state, streaming adapters, and message format converters                                       |
 | [`@openuidev/react-ui`](./packages/react-ui)                                                               | Fastest path to a full React chat experience     | Prebuilt chat layouts, standalone UI primitives, and two built-in component libraries                        |
@@ -117,6 +118,9 @@ npm install @openuidev/lang-core
 # LangChain/LangGraph agent and server integration
 npm install @openuidev/langchain @langchain/langgraph
 
+# Langflow Workflow API integration
+npm install @openuidev/langflow
+
 # Vue or Svelte runtime
 npm install @openuidev/vue-lang
 npm install @openuidev/svelte-lang
@@ -163,6 +167,7 @@ openui/
 │   ├── react-email/      # React Email component library for generated emails
 │   ├── lang-core/        # Framework-agnostic parser, prompt, and runtime layer
 │   ├── langchain/        # LangChain/LangGraph streaming integration
+│   ├── langflow/         # Langflow Workflow API and AG-UI integration
 │   ├── vue-lang/         # Vue runtime bindings for OpenUI Lang
 │   ├── svelte-lang/      # Svelte runtime bindings for OpenUI Lang
 │   ├── browser-bundle/   # Script-tag bundle for CDN / iframe / no-build embeds

diff --git a/docs/app/(home)/integrations/data.ts b/docs/app/(home)/integrations/data.ts
@@ -86,7 +86,11 @@ const integrationCatalog: Integration[] = [
     howItWorks:
       "Each shadcn component is registered with defineComponent and a Zod prop schema. createLibrary produces both the prompt vocabulary and the renderer mapping used by the example chat app.",
     links: [
-      { label: "Integration guide", href: "/docs/openui-lang/examples/design-systems/shadcn", kind: "Guide" },
+      {
+        label: "Integration guide",
+        href: "/docs/openui-lang/examples/design-systems/shadcn",
+        kind: "Guide",
+      },
       exampleLink("shadcn-chat"),
       { label: "shadcn/ui", href: "https://ui.shadcn.com", kind: "Website" },
     ],
@@ -166,6 +170,22 @@ const integrationCatalog: Integration[] = [
       exampleLink("langchain-chat"),
     ],
   },
+  {
+    slug: "langflow",
+    name: "Langflow",
+    logo: "https://raw.githubusercontent.com/langflow-ai/langflow/main/docs/static/img/langflow-icon-black-transparent.svg",
+    category: "ai-frameworks",
+    type: "Visual agent framework adapter",
+    summary:
+      "Connect Langflow workflows to OpenUI through Workflow API v2 and Langflow's native AG-UI stream.",
+    howItWorks:
+      "The @openuidev/langflow package maps OpenUI thread, follow-up, and form turns to Langflow workflow inputs and session ids. Langflow runs the flow and emits native AG-UI SSE, which agUIAdapter() consumes in AgentInterface.",
+    install: "npm install @openuidev/langflow",
+    links: [
+      ...packageLinks("@openuidev/langflow", "langflow", "/docs/api-reference/langflow"),
+      { label: "Langflow", href: "https://www.langflow.org", kind: "Website" },
+    ],
+  },
   {
     slug: "vercel-ai-sdk",
     name: "Vercel AI SDK",

diff --git a/docs/content/docs/api-reference/index.mdx b/docs/content/docs/api-reference/index.mdx
@@ -17,6 +17,8 @@ The OpenUI SDK is split into packages that build on each other:
 
 - **`@openuidev/langchain`** — LangChain and LangGraph integration primitives for transforming protocol-v2 agent streams into AG-UI events and relaying them to an OpenUI frontend over Web-standard Server-Sent Events.
 
+- **`@openuidev/langflow`** — Server-side helpers that map OpenUI chat turns to Langflow Workflow API v2 runs and relay Langflow's native AG-UI stream.
+
 - **`@openuidev/react-email`** — Pre-built email component library and prompt options for model-generated emails that can be rendered to HTML with React Email.
 
 - **`@openuidev/vue-lang`** — Vue 3 bindings for defining model-renderable components, generating prompts from those definitions, and rendering streamed OpenUI Lang in Vue apps.
@@ -39,6 +41,7 @@ The OpenUI SDK is split into packages that build on each other:
 | A ready-made React chat surface                                    | [`@openuidev/react-ui`](/docs/api-reference/react-ui)                                                |
 | OpenUI tool rendering in an assistant-ui application               | [`@openuidev/assistant-ui`](/docs/api-reference/assistant-ui)                                        |
 | A LangChain or LangGraph agent connected to an OpenUI frontend     | [`@openuidev/langchain`](/docs/api-reference/langchain)                                              |
+| A Langflow workflow connected to an OpenUI Agent Interface         | [`@openuidev/langflow`](/docs/api-reference/langflow)                                                |
 | Model-generated emails                                             | [`@openuidev/react-email`](/docs/api-reference/react-email)                                          |
 | Vue integration                                                    | [`@openuidev/vue-lang`](https://github.com/thesysdev/openui/tree/main/packages/vue-lang)             |
 | Svelte integration                                                 | [`@openuidev/svelte-lang`](https://github.com/thesysdev/openui/tree/main/packages/svelte-lang)       |
@@ -75,6 +78,10 @@ The OpenUI SDK is split into packages that build on each other:
     LangGraph stream transformation, stateless run helpers, and AG-UI SSE relay APIs for OpenUI
     frontends.
   </Card>
+  <Card title="@openuidev/langflow" href="/docs/api-reference/langflow">
+    Workflow API v2 request mapping, session scoping, action normalization, and native AG-UI
+    passthrough for OpenUI frontends.
+  </Card>
   <Card title="@openuidev/react-email" href="/docs/api-reference/react-email">
     API reference for the pre-built email templates library and prompt options.
   </Card>

diff --git a/docs/content/docs/api-reference/langflow.mdx b/docs/content/docs/api-reference/langflow.mdx
@@ -0,0 +1,220 @@
+---
+title: "@openuidev/langflow"
+description: API reference for streaming Langflow Workflow API v2 runs to OpenUI over native AG-UI.
+---
+
+Use this package to connect an OpenUI Agent Interface to a Langflow workflow. It maps OpenUI
+messages, thread ids, follow-ups, and submitted form values to Langflow's Workflow API v2 and
+returns Langflow's native AG-UI stream without an intermediate protocol conversion.
+
+The package is framework-independent at the HTTP boundary. Its APIs use Web-standard `Request`,
+`Response`, `fetch`, and `ReadableStream` types.
+
+## Install
+
+```bash tab="pnpm" tab-group="pkg"
+pnpm add @openuidev/langflow
+```
+
+```bash tab="bun" tab-group="pkg"
+bun add @openuidev/langflow
+```
+
+```bash tab="yarn" tab-group="pkg"
+yarn add @openuidev/langflow
+```
+
+```bash tab="npm" tab-group="pkg"
+npm install @openuidev/langflow
+```
+
+The integration requires a Langflow server that exposes `POST /api/v2/workflows` and supports
+`stream_protocol: "agui"`. It was tested with Langflow/LFX 1.11.4.
+
+## Data flow
+
+1. OpenUI's `fetchLLM` sends `{ threadId, messages }` to an application server route.
+2. `createLangflowStreamResponse()` extracts the newest user or action turn, maps `threadId` to
+   Langflow's `session_id`, and starts a Workflow API v2 streaming run.
+3. Langflow runs the flow and returns native AG-UI Server-Sent Events.
+4. OpenUI's `agUIAdapter()` consumes the response in `AgentInterface`.
+
+Langflow owns the workflow graph, model calls, tools, and session memory. OpenUI owns the chat
+surface, OpenUI Lang parser and renderer, streaming UI state, theme, follow-ups, and form actions.
+
+## `createLangflowStreamResponse(request, options)`
+
+Creates the complete OpenUI-request-to-Langflow-response path:
+
+```ts
+function createLangflowStreamResponse(
+  request: Request,
+  options: CreateLangflowStreamResponseOptions,
+): Promise<Response>;
+```
+
+```ts
+interface CreateLangflowStreamResponseOptions extends LangflowWorkflowOverrides {
+  apiUrl: string;
+  flowId: string;
+  apiKey?: string;
+  headers?: Record<string, string>;
+  prepareSessionId?: (context: PrepareLangflowSessionContext) => string | Promise<string>;
+  prepareInput?: (context: PrepareLangflowInputContext) => string | Promise<string>;
+  debug?: boolean;
+  fetch?: typeof fetch;
+}
+```
+
+The request body must contain a non-empty AG-UI `messages` array. A missing `threadId` receives an
+opaque generated id. Invalid requests return JSON with status `400` without starting a Langflow
+run. Upstream failures return status `502`; response details remain redacted unless trusted
+development code enables `debug`.
+
+The helper can be returned directly from a Next.js route or another Web-standard route handler:
+
+```ts
+import { createLangflowStreamResponse } from "@openuidev/langflow";
+
+export const runtime = "nodejs";
+
+export async function POST(request: Request) {
+  return createLangflowStreamResponse(request, {
+    apiUrl: process.env.LANGFLOW_API_URL ?? "http://localhost:7860",
+    apiKey: process.env.LANGFLOW_API_KEY,
+    flowId: process.env.LANGFLOW_FLOW_ID!,
+    debug: process.env.NODE_ENV !== "production",
+  });
+}
+```
+
+Keep the Langflow API key in the server route. Do not expose it to the browser.
+
+### `prepareSessionId(context)`
+
+OpenUI's `threadId` is client input. Authenticate the route and use `prepareSessionId` to authorize
+or scope Langflow session ids in a multi-user application:
+
+```ts
+const user = await requireUser(request);
+
+return createLangflowStreamResponse(request, {
+  apiUrl: process.env.LANGFLOW_API_URL!,
+  apiKey: process.env.LANGFLOW_API_KEY,
+  flowId: process.env.LANGFLOW_FLOW_ID!,
+  prepareSessionId: ({ threadId }) => `${user.id}:${threadId}`,
+});
+```
+
+```ts
+interface PrepareLangflowSessionContext {
+  threadId: string;
+  requestBody: Record<string, unknown>;
+}
+```
+
+### `prepareInput(context)`
+
+By default, the helper sends only the newest non-empty user turn because Langflow uses
+`session_id` for conversation memory. OpenUI follow-ups and forms encode a readable action plus
+structured context in that turn. The helper removes the transport markers while preserving the
+action label and edited form values.
+
+Use `prepareInput` to add trusted application context after authenticating the request:
+
+```ts
+return createLangflowStreamResponse(request, {
+  apiUrl: process.env.LANGFLOW_API_URL!,
+  apiKey: process.env.LANGFLOW_API_KEY,
+  flowId: process.env.LANGFLOW_FLOW_ID!,
+  prepareInput: ({ inputValue, requestBody }) =>
+    `[tenant=${String(requestBody.tenant)}] ${inputValue}`,
+});
+```
+
+```ts
+interface PrepareLangflowInputContext {
+  messages: Message[];
+  inputValue: string;
+  requestBody: Record<string, unknown>;
+  sessionId: string;
+}
+```
+
+Treat all fields in `requestBody` as untrusted client input.
+
+## `streamLangflowWorkflow(options)`
+
+Use the lower-level helper when the application already owns request parsing:
+
+```ts
+interface StreamLangflowWorkflowOptions extends LangflowWorkflowOverrides {
+  apiUrl: string;
+  flowId: string;
+  inputValue: string;
+  sessionId: string;
+  apiKey?: string;
+  headers?: Record<string, string>;
+  signal?: AbortSignal;
+  debug?: boolean;
+  fetch?: typeof fetch;
+}
+
+function streamLangflowWorkflow(options: StreamLangflowWorkflowOptions): Promise<Response>;
+```
+
+```ts
+import { streamLangflowWorkflow } from "@openuidev/langflow";
+
+const response = await streamLangflowWorkflow({
+  apiUrl: "http://localhost:7860",
+  apiKey: process.env.LANGFLOW_API_KEY,
+  flowId: process.env.LANGFLOW_FLOW_ID!,
+  inputValue: "Show quarterly revenue as a labeled bar chart",
+  sessionId: "thread-123",
+  signal: request.signal,
+});
+```
+
+The helper fixes `mode` to `"stream"` and `stream_protocol` to `"agui"`. It passes the upstream
+response body through as AG-UI SSE. `LangflowWorkflowOverrides` supports `tweaks`, live-canvas
+`data`, uploaded `files`, and partial-run `startComponentId` and `stopComponentId` values.
+
+## Connect the OpenUI frontend
+
+Langflow already emits AG-UI, so the browser uses OpenUI's maintained adapter:
+
+```tsx
+"use client";
+
+import { AgentInterface, agUIAdapter, fetchLLM } from "@openuidev/react-ui";
+
+const llm = fetchLLM({
+  url: "/api/chat",
+  streamAdapter: agUIAdapter(),
+});
+
+export function Chat() {
+  return <AgentInterface llm={llm} />;
+}
+```
+
+Keep `AgentInterface`'s theme provider enabled. Attach the system prompt generated from the same
+OpenUI component library rendered by the frontend to the Langflow Agent component.
+
+## Exports
+
+| Export                                | Description                                                 |
+| :------------------------------------ | :---------------------------------------------------------- |
+| `createLangflowStreamResponse`        | Complete Web-standard request/response helper               |
+| `streamLangflowWorkflow`              | Lower-level Workflow API v2 streaming call                  |
+| `toLangflowInput`                     | Newest-turn and OpenUI action/form normalizer               |
+| `LangflowRequestError`                | Upstream HTTP error with optional development detail        |
+| `CreateLangflowStreamResponseOptions` | Request helper configuration                                |
+| `PrepareLangflowInputContext`         | Values passed to `prepareInput`                             |
+| `PrepareLangflowSessionContext`       | Values passed to `prepareSessionId`                         |
+| `StreamLangflowWorkflowOptions`       | Lower-level streaming configuration                         |
+| `LangflowWorkflowOverrides`           | Workflow tweaks, data, files, and partial-run component ids |
+
+See Langflow's [Workflow API documentation](https://docs.langflow.org/workflow-api) for the
+upstream endpoint and flow configuration.
diff --git a/docs/content/docs/api-reference/meta.json b/docs/content/docs/api-reference/meta.json
@@ -10,6 +10,7 @@
     "cli",
     "devtools",
     "langchain",
+    "langflow",
     "assistant-ui"
   ]
 }