From dcbc7d322db884227d9d3b3f691796361b2e2140 Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Thu, 16 Jul 2026 19:50:34 +0530
Subject: [PATCH 01/15] feat(cli): scaffold selected backend framework

---
 docs/content/docs/api-reference/cli.mdx       |  59 ++--
 packages/openui-cli/README.md                 |  27 ++
 .../openui-cli/src/commands/create-app.ts     | 150 ++++++++++-
 packages/openui-cli/src/index.ts              |  15 +-
 .../openui-cli/src/lib/create-telemetry.ts    |   3 +-
 packages/openui-cli/src/lib/create-types.ts   |   3 +
 packages/openui-cli/src/lib/utils.ts          |  14 +-
 .../openui-cloud/_backend-routes/langgraph.ts | 175 ++++++++++++
 .../openui-cloud/_backend-routes/vercel.ts    | 206 ++++++++++++++
 .../_backend-routes/langgraph.ts              | 124 +++++++++
 .../_backend-routes/vercel.ts                 | 253 ++++++++++++++++++
 11 files changed, 996 insertions(+), 33 deletions(-)
 create mode 100644 packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
 create mode 100644 packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts
 create mode 100644 packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts
 create mode 100644 packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel.ts

diff --git a/docs/content/docs/api-reference/cli.mdx b/docs/content/docs/api-reference/cli.mdx
index 11d7e261e..f27c22eb5 100644
--- a/docs/content/docs/api-reference/cli.mdx
+++ b/docs/content/docs/api-reference/cli.mdx
@@ -53,27 +53,28 @@ openui create [options]
 
 **Options**
 
-| Flag                        | Description                                                      |
-| --------------------------- | ---------------------------------------------------------------- |
-| `-n, --name <string>`       | Project name (interactive default: `openui-agent`)               |
-| `-t, --template <template>` | AI backend: `openui-cloud` (recommended) or `openui-self-hosted` |
-| `--api-key <key>`           | OpenUI Cloud API key; skips sign-in for the Cloud setup          |
-| `--auth <method>`           | Cloud auth method: `oauth` or `skip`; `manual` is deprecated     |
-| `--skill`                   | Install the OpenUI agent skill for AI coding assistants          |
-| `--no-skill`                | Skip installing the OpenUI agent skill                           |
-| `--no-install`              | Scaffold without running dependency installation                 |
-| `-i, --immediate`           | Start the development server after installing dependencies       |
-| `--no-immediate`            | Install dependencies without starting the development server     |
-| `--no-interactive`          | Fail instead of prompting for missing input                      |
-| `--agent-name <name>`       | Declare the invoking coding-agent slug (default: `unknown`)      |
-
-When run interactively (default), the CLI prompts for any missing options, then asks whether to start the development server after installing dependencies with the detected package manager. The start prompt defaults to yes; answering no preserves the existing install-and-exit behavior and prints the `cd` and dev commands. For most prototypes and evaluations, start with **OpenUI Cloud, the recommended default**: hosted models, managed conversation history and streaming, built-in tools, and ready-to-use reports and presentations without operating the model, storage, or artifact infrastructure. Choose **self-hosted** when owning the OpenAI-compatible provider, AI route, and persistence is a requirement.
+| Flag                              | Description                                                      |
+| --------------------------------- | ---------------------------------------------------------------- |
+| `-n, --name <string>`             | Project name (interactive default: `openui-agent`)               |
+| `-t, --template <template>`       | AI backend: `openui-cloud` (recommended) or `openui-self-hosted` |
+| `--backend-framework <framework>` | API route: `none`, `langgraph`, or `vercel`                      |
+| `--api-key <key>`                 | OpenUI Cloud API key; skips sign-in for the Cloud setup          |
+| `--auth <method>`                 | Cloud auth method: `oauth` or `skip`; `manual` is deprecated     |
+| `--skill`                         | Install the OpenUI agent skill for AI coding assistants          |
+| `--no-skill`                      | Skip installing the OpenUI agent skill                           |
+| `--no-install`                    | Scaffold without running dependency installation                 |
+| `-i, --immediate`                 | Start the development server after installing dependencies       |
+| `--no-immediate`                  | Install dependencies without starting the development server     |
+| `--no-interactive`                | Fail instead of prompting for missing input                      |
+| `--agent-name <name>`             | Declare the invoking coding-agent slug (default: `unknown`)      |
+
+When run interactively (default), the CLI prompts for any missing options, including the backend framework, then asks whether to start the development server after installing dependencies with the detected package manager. The start prompt defaults to yes; answering no preserves the existing install-and-exit behavior and prints the `cd` and dev commands. For most prototypes and evaluations, start with **OpenUI Cloud, the recommended default**: hosted models, managed conversation history and streaming, built-in tools, and ready-to-use reports and presentations without operating the model, storage, or artifact infrastructure. Choose **self-hosted** when owning the OpenAI-compatible provider, AI route, and persistence is a requirement.
 
 In non-interactive mode, dependencies are installed without starting the long-running development server. Pass `--immediate` to install and start, `--no-immediate` to make the install-and-exit behavior explicit, or `--no-install` to scaffold only.
 
 **What it does**
 
-1. Resolves the project name and AI setup
+1. Resolves the project name, AI setup, and backend framework
 2. Copies the selected Next.js template into `<name>/`
 3. Rewrites `workspace:*` dependency versions to `latest`
 4. Writes the relevant `.env` values, including Thesys sign-in/API-key setup for OpenUI Cloud
@@ -81,7 +82,15 @@ In non-interactive mode, dependencies are installed without starting the long-ru
 6. Auto-detects your package manager (npm, pnpm, yarn, bun)
 7. Installs dependencies unless skipped, then optionally starts the development server in the generated directory
 
-The generated project includes a `generate:prompt` script that runs `openui generate` as part of `dev` and `build`.
+**Backend frameworks**
+
+| Value       | OpenUI Cloud route                           | Self-hosted route                          |
+| ----------- | -------------------------------------------- | ------------------------------------------ |
+| `none`      | Direct OpenAI SDK Responses proxy            | Direct OpenAI SDK Chat Completions proxy   |
+| `langgraph` | LangGraph workflow calling OpenUI Cloud      | LangGraph `StateGraph` using your provider |
+| `vercel`    | Vercel AI SDK transport calling OpenUI Cloud | Vercel AI SDK `streamText()` route         |
+
+The CLI replaces `src/app/api/chat/route.ts` and adds the selected framework's dependencies. Cloud framework routes preserve the raw Responses SSE contract, managed conversations, artifacts, and built-in tools. A Cloud framework selection changes orchestration, not the model provider: choose self-hosted to use your own provider key.
 
 **Agent skill**
 
@@ -100,6 +109,10 @@ pnpx @openuidev/cli@latest create --name my-app --template openui-cloud
 pnpx @openuidev/cli@latest create --name my-app --template openui-self-hosted
 pnpx @openuidev/cli@latest create --name my-app --template openui-cloud --immediate
 
+# Select a backend framework explicitly
+pnpx @openuidev/cli@latest create --name my-app --template openui-cloud --backend-framework langgraph
+pnpx @openuidev/cli@latest create --name my-app --template openui-self-hosted --backend-framework langgraph
+
 # Non-interactive
 pnpx @openuidev/cli@latest create --no-interactive --name my-app --template openui-cloud --auth skip
 
@@ -116,6 +129,10 @@ bunx @openuidev/cli@latest create
 bunx @openuidev/cli@latest create --name my-app --template openui-cloud
 bunx @openuidev/cli@latest create --name my-app --template openui-self-hosted
 
+# Select a backend framework explicitly
+bunx @openuidev/cli@latest create --name my-app --template openui-cloud --backend-framework langgraph
+bunx @openuidev/cli@latest create --name my-app --template openui-self-hosted --backend-framework langgraph
+
 # Non-interactive
 bunx @openuidev/cli@latest create --no-interactive --name my-app --template openui-cloud --auth skip
 
@@ -132,6 +149,10 @@ yarn dlx @openuidev/cli@latest create
 yarn dlx @openuidev/cli@latest create --name my-app --template openui-cloud
 yarn dlx @openuidev/cli@latest create --name my-app --template openui-self-hosted
 
+# Select a backend framework explicitly
+yarn dlx @openuidev/cli@latest create --name my-app --template openui-cloud --backend-framework langgraph
+yarn dlx @openuidev/cli@latest create --name my-app --template openui-self-hosted --backend-framework langgraph
+
 # Non-interactive
 yarn dlx @openuidev/cli@latest create --no-interactive --name my-app --template openui-cloud --auth skip
 
@@ -148,6 +169,10 @@ npx @openuidev/cli@latest create
 npx @openuidev/cli@latest create --name my-app --template openui-cloud
 npx @openuidev/cli@latest create --name my-app --template openui-self-hosted
 
+# Select a backend framework explicitly
+npx @openuidev/cli@latest create --name my-app --template openui-cloud --backend-framework langgraph
+npx @openuidev/cli@latest create --name my-app --template openui-self-hosted --backend-framework langgraph
+
 # Non-interactive
 npx @openuidev/cli@latest create --no-interactive --name my-app --template openui-cloud --auth skip
 
diff --git a/packages/openui-cli/README.md b/packages/openui-cli/README.md
index a429794c4..715d0cc2c 100644
--- a/packages/openui-cli/README.md
+++ b/packages/openui-cli/README.md
@@ -12,6 +12,7 @@ It currently supports two workflows:
 - scaffolding a new OpenUI app from one of two templates:
   - **OpenUI Cloud (recommended)** — hosted models with managed conversations, streaming, built-in tools, and ready-to-use report and presentation artifacts
   - **Self-hosted** — bring an OpenAI-compatible model key and own the AI route and persistence
+- choosing the direct OpenAI SDK route, LangGraph, or Vercel AI SDK for either template
 - generating a system prompt or JSON Schema from a `createLibrary()` export
 
 ## Install
@@ -39,6 +40,15 @@ npx @openuidev/cli@latest create --template openui-cloud
 npx @openuidev/cli@latest create --template openui-self-hosted
 ```
 
+Choose a backend framework directly (the default is `none`, which uses the OpenAI SDK):
+
+```bash
+npx @openuidev/cli@latest create --template openui-cloud --backend-framework langgraph
+npx @openuidev/cli@latest create --template openui-cloud --backend-framework vercel
+npx @openuidev/cli@latest create --template openui-self-hosted --backend-framework langgraph
+npx @openuidev/cli@latest create --template openui-self-hosted --backend-framework vercel
+```
+
 Generate a prompt from a library file:
 
 ```bash
@@ -65,6 +75,7 @@ Options:
 
 - `-n, --name <string>`: Project name (interactive default: `openui-agent`)
 - `-t, --template <template>`: AI backend — `openui-cloud` (managed) or `openui-self-hosted` (bring your provider)
+- `--backend-framework <framework>`: API route implementation — `none`, `langgraph`, or `vercel`
 - `--skill`: Install the OpenUI agent skill for AI coding assistants
 - `--no-skill`: Skip installing the OpenUI agent skill
 - `--no-install`: Scaffold without running the package install
@@ -79,6 +90,7 @@ What it does:
 
 - prompts for the project name, defaulting to `openui-agent`, if you do not pass `--name`
 - prompts for the template if you do not pass `--template`
+- prompts for a backend framework after the template; non-interactive usage defaults to `none`
 - copies the bundled template into a new directory
 - rewrites monorepo-local dependencies (`workspace:`, `file:`, `catalog:`) in the generated `package.json` to `latest`
 - asks whether to start the development server after dependency installation (default: yes); answering no preserves the install-and-exit behavior
@@ -92,6 +104,16 @@ What it does:
 - **OpenUI Cloud (recommended default)** — start here for prototypes and evaluations. You get hosted models, managed conversation history and streaming, built-in tools, and ready-to-use report and presentation artifacts without operating the model, storage, or artifact infrastructure.
 - **Self-hosted** — choose this when owning the OpenAI-compatible provider integration, AI route, and persistence is a requirement.
 
+#### Backend frameworks
+
+| Value       | OpenUI Cloud route                                | Self-hosted route                          |
+| ----------- | ------------------------------------------------- | ------------------------------------------ |
+| `none`      | Direct OpenAI SDK Responses proxy                 | Direct OpenAI SDK Chat Completions proxy   |
+| `langgraph` | LangGraph workflow calling OpenUI Cloud           | LangGraph `StateGraph` using your provider |
+| `vercel`    | Vercel AI SDK Responses transport to OpenUI Cloud | Vercel AI SDK `streamText()` route         |
+
+The CLI replaces `src/app/api/chat/route.ts` and adds the dependencies for the selected framework. Cloud combinations still call OpenUI Cloud and preserve its Responses SSE stream, conversation storage, artifacts, and built-in tools. Selecting a Cloud framework changes the orchestration layer; it does not configure a user-owned provider key. Choose `openui-self-hosted` when you want to bring your own provider.
+
 #### Template-specific `.env`
 
 - **OpenUI Cloud** — obtains an OpenUI Cloud API key and writes `THESYS_API_KEY` plus `DEMO_USER_ID=demo-user` to `.env`. The key is resolved by, in order:
@@ -107,7 +129,12 @@ Examples:
 
 ```bash
 openui create
+openui create --name my-app --template openui-self-hosted
+openui create --name my-app --template openui-self-hosted --backend-framework langgraph
+openui create --name my-app --template openui-self-hosted --backend-framework vercel
 openui create --name my-app --template openui-cloud --auth oauth
+openui create --name my-app --template openui-cloud --backend-framework langgraph --auth oauth
+openui create --name my-app --template openui-cloud --backend-framework vercel --auth oauth
 openui create --name my-app --template openui-cloud --api-key tk_your_key
 openui create --name my-app --template openui-self-hosted
 openui create --name my-app --template openui-cloud --immediate
diff --git a/packages/openui-cli/src/commands/create-app.ts b/packages/openui-cli/src/commands/create-app.ts
index 01fa566ce..fa7220147 100644
--- a/packages/openui-cli/src/commands/create-app.ts
+++ b/packages/openui-cli/src/commands/create-app.ts
@@ -5,7 +5,12 @@ import * as path from "node:path";
 
 import { resolveCloudApiKey, THESYS_KEYS_URL } from "../auth/mint";
 import { aiSetupFromTemplate, createFunnelProps } from "../lib/create-telemetry";
-import type { CreateAppOptions, EnvResult, TemplateName } from "../lib/create-types";
+import type {
+  BackendFramework,
+  CreateAppOptions,
+  EnvResult,
+  TemplateName,
+} from "../lib/create-types";
 import {
   resolveInstallPackageManager,
   type PackageManagerName,
@@ -23,6 +28,34 @@ function errorCode(error: Error): string {
   return typeof code === "string" ? code : "UNKNOWN";
 }
 
+const backendDependencies: Record<
+  TemplateName,
+  Record<Exclude<BackendFramework, "none">, Record<string, string>>
+> = {
+  "openui-cloud": {
+    langgraph: {
+      "@langchain/core": "^1.2.1",
+      "@langchain/langgraph": "^1.4.5",
+    },
+    vercel: {
+      "@ai-sdk/openai": "^3.0.65",
+    },
+  },
+  "openui-self-hosted": {
+    langgraph: {
+      "@langchain/core": "^1.2.1",
+      "@langchain/langgraph": "^1.4.5",
+      "@langchain/openai": "^1.5.2",
+      zod: "^4.0.0",
+    },
+    vercel: {
+      "@ai-sdk/openai": "^3.0.65",
+      ai: "^6.0.191",
+      zod: "^4.3.6",
+    },
+  },
+};
+
 function shouldCopyTemplatePath(templateDir: string, src: string): boolean {
   const rel = path.relative(templateDir, src);
   if (!rel) return true;
@@ -50,7 +83,13 @@ function buildAppId(name: string): string {
   return `${slug}-${Math.random().toString(36).slice(2, 8)}`;
 }
 
-function rewritePackageJson(projectDir: string, name: string, packageManager: PackageManagerName) {
+function rewritePackageJson(
+  projectDir: string,
+  name: string,
+  packageManager: PackageManagerName,
+  template: TemplateName,
+  backendFramework: BackendFramework,
+) {
   // package.json: set the project name and de-vendor monorepo-local deps
   // (workspace:* / file: / catalog:) to the published "latest". link: deps are
   // rewritten to an absolute file: path so locally-linked packages (e.g.
@@ -66,6 +105,11 @@ function rewritePackageJson(projectDir: string, name: string, packageManager: Pa
   };
   pkg.name = name;
   if (packageManager !== "pnpm") delete pkg.pnpm;
+  if (backendFramework !== "none") {
+    pkg.dependencies ??= {};
+    if (template === "openui-self-hosted") delete pkg.dependencies["openai"];
+    Object.assign(pkg.dependencies, backendDependencies[template][backendFramework]);
+  }
   for (const section of ["dependencies", "devDependencies"] as const) {
     const deps = pkg[section];
     if (!deps) continue;
@@ -113,6 +157,22 @@ function rewritePackageJson(projectDir: string, name: string, packageManager: Pa
   }
 }
 
+function applyBackendRoute(projectDir: string, backendFramework: BackendFramework) {
+  const routeOptionsDir = path.join(projectDir, "_backend-routes");
+  if (backendFramework !== "none") {
+    const source = path.join(routeOptionsDir, `${backendFramework}.ts`);
+    const destination = path.join(projectDir, "src", "app", "api", "chat", "route.ts");
+    if (!fs.existsSync(source)) {
+      throw new CreateError(
+        "template_missing",
+        `Backend route "${backendFramework}" not found. Rebuild the CLI with \`pnpm build\`.`,
+      );
+    }
+    fs.copyFileSync(source, destination);
+  }
+  fs.rmSync(routeOptionsDir, { recursive: true, force: true });
+}
+
 export async function runCreateApp(options: CreateAppOptions): Promise<void> {
   const interactive = !options.noInteractive;
   const packageManager = resolveInstallPackageManager();
@@ -123,13 +183,14 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
     interactive,
     has_name_arg: Boolean(options.name),
     has_template_arg: Boolean(options.template),
+    has_backend_framework_arg: Boolean(options.backendFramework),
     has_api_key_arg: Boolean(options.apiKey),
     has_auth_arg: Boolean(options.auth),
     no_install: Boolean(options.noInstall),
     immediate_arg: options.immediate,
   });
 
-  const args = await resolveArgs(
+  const baseArgs = await resolveArgs(
     {
       name: options.name
         ? { value: options.name }
@@ -150,7 +211,7 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
                 },
                 {
                   value: "openui-self-hosted",
-                  name: "Self-hosted — bring your own provider and self-manage the entire backend",
+                  name: "Self-hosted — bring your own provider and self-manage the backend",
                 },
               ],
             },
@@ -160,14 +221,50 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
     interactive,
   );
 
-  const { name, template } = args as { name: string; template: TemplateName };
+  const { name, template } = baseArgs as { name: string; template: TemplateName };
+
+  const frameworkArgs = await resolveArgs(
+    {
+      backendFramework:
+        options.backendFramework || !interactive
+          ? { value: options.backendFramework ?? "none" }
+          : {
+              prompt: {
+                type: "select",
+                message: "Choose your backend framework",
+                choices: [
+                  {
+                    value: "none",
+                    name: "No framework — OpenAI SDK (default)",
+                  },
+                  { value: "langgraph", name: "LangGraph" },
+                  { value: "vercel", name: "Vercel AI SDK" },
+                ],
+              },
+              required: true,
+            },
+    },
+    interactive,
+  );
+  const backendFramework = (frameworkArgs as { backendFramework: BackendFramework })
+    .backendFramework;
+
   const aiSetup = aiSetupFromTemplate(template);
-  telemetry.register({ template, ai_setup: aiSetup });
+  telemetry.register({ template, ai_setup: aiSetup, backend_framework: backendFramework });
   telemetry.capture("cli_ai_setup_selected", {
     ...createFunnelProps("ai_setup_selected"),
     template,
     ai_setup: aiSetup,
   });
+  telemetry.capture("cli_backend_framework_selected", {
+    ...createFunnelProps("backend_framework_selected"),
+    backend_framework: backendFramework,
+    backend_framework_source: options.backendFramework
+      ? "flag"
+      : interactive
+        ? "prompt"
+        : "default",
+  });
 
   const targetDir = path.resolve(process.cwd(), name);
   if (fs.existsSync(targetDir)) {
@@ -229,16 +326,21 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
       filter: (src) => shouldCopyTemplatePath(templateDir, src),
     });
     restoreDotfiles(targetDir);
-    rewritePackageJson(targetDir, name, packageManager.name);
+    applyBackendRoute(targetDir, backendFramework);
+    rewritePackageJson(targetDir, name, packageManager.name, template, backendFramework);
     // npm ci requires the copied package-lock; other managers resolve from package.json.
-    if (packageManager.name !== "npm") {
+    // Framework routes add dependencies at scaffold time, so their npm lock
+    // cannot remain frozen; npm install creates a fresh lock for that variant.
+    if (packageManager.name !== "npm" || backendFramework !== "none") {
       fs.rmSync(path.join(targetDir, "package-lock.json"), { force: true });
     }
     // The Cloud template ships pnpm's lock/workspace files for reproducible pnpm
-    // installs and native-build policy. They are irrelevant to npm/yarn/bun and
-    // can confuse workspace-root detection, so keep them only for pnpm scaffolds.
-    if (packageManager.name !== "pnpm") {
+    // installs and native-build policy. A framework changes dependencies, so
+    // regenerate its lock; non-pnpm scaffolds do not need either pnpm file.
+    if (packageManager.name !== "pnpm" || backendFramework !== "none") {
       fs.rmSync(path.join(targetDir, "pnpm-lock.yaml"), { force: true });
+    }
+    if (packageManager.name !== "pnpm") {
       fs.rmSync(path.join(targetDir, "pnpm-workspace.yaml"), { force: true });
     }
   } catch (err) {
@@ -273,7 +375,19 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
     });
   }
 
-  const installCmd = packageManager.installCmd;
+  const frameworkInstall = backendFramework !== "none";
+  const installCmd =
+    frameworkInstall && packageManager.name === "npm"
+      ? "npm install --prefer-offline --no-audit --no-fund --progress=false"
+      : frameworkInstall && packageManager.name === "pnpm"
+        ? "pnpm install --no-frozen-lockfile"
+        : packageManager.installCmd;
+  const installArgs =
+    frameworkInstall && packageManager.name === "npm"
+      ? ["install", "--prefer-offline", "--no-audit", "--no-fund", "--progress=false"]
+      : frameworkInstall && packageManager.name === "pnpm"
+        ? ["install", "--no-frozen-lockfile"]
+        : packageManager.installArgs;
   let dependencyInstalled = false;
 
   if (!immediateResolution.installDependencies) {
@@ -288,7 +402,7 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
       template,
       ai_setup: aiSetup,
     });
-    const installResult = runCommand(packageManager.runCmd, packageManager.installArgs, targetDir);
+    const installResult = runCommand(packageManager.runCmd, installArgs, targetDir);
     if (!installResult.error && installResult.status === 0) {
       dependencyInstalled = true;
       telemetry.capture("cli_dependency_install_succeeded", {
@@ -325,6 +439,7 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
       name,
       devCmd,
       template,
+      backendFramework,
       skillInstalled: installSkill,
       envWritten: envResult.envWritten,
       startDev,
@@ -494,6 +609,7 @@ function getStartedMessage(o: {
   name: string;
   devCmd: string;
   template: TemplateName;
+  backendFramework: BackendFramework;
   skillInstalled: boolean;
   envWritten: boolean;
   startDev: boolean;
@@ -521,10 +637,18 @@ function getStartedMessage(o: {
         `> ${o.devCmd} run dev`,
       ].join("\n");
 
+  const frameworkNote =
+    o.backendFramework === "langgraph"
+      ? "The generated API route uses LangGraph."
+      : o.backendFramework === "vercel"
+        ? "The generated API route uses the Vercel AI SDK."
+        : "";
+
   return `${skillMessage}
 Done!
 
 ${envNote}
+${frameworkNote ? `\n${frameworkNote}\n` : ""}
 
 ${nextStep}
 `;
diff --git a/packages/openui-cli/src/index.ts b/packages/openui-cli/src/index.ts
index 541180751..8ece6f7ae 100644
--- a/packages/openui-cli/src/index.ts
+++ b/packages/openui-cli/src/index.ts
@@ -10,7 +10,12 @@ import { GenerateOptions, runGenerate } from "./commands/generate";
 import { detectAgent, UNKNOWN_AGENT_NAME } from "./lib/detect-agent";
 import { resolveArgs } from "./lib/resolve-args";
 import { telemetry } from "./lib/telemetry";
-import { handleCliError, normalizeAuth, normalizeTemplate } from "./lib/utils"; // Ensure utils.ts is included for type declarations
+import {
+  handleCliError,
+  normalizeAuth,
+  normalizeBackendFramework,
+  normalizeTemplate,
+} from "./lib/utils"; // Ensure utils.ts is included for type declarations
 
 const program = new Command();
 
@@ -51,6 +56,7 @@ program
     "-t, --template <template>",
     "AI backend: openui-cloud (recommended default) | openui-self-hosted (infrastructure control)",
   )
+  .option("--backend-framework <framework>", "Backend route: none | langgraph | vercel")
   .option("--api-key <key>", "OpenUI Cloud API key (cloud template; skips sign-in)")
   .option("--auth <method>", "Cloud auth method: oauth | skip (manual is deprecated)")
   .option("--skill", "Install the OpenUI agent skill for AI coding assistants")
@@ -69,12 +75,18 @@ Templates:
                       or artifact infrastructure to operate.
   openui-self-hosted  Choose when owning the OpenAI-compatible provider, AI route,
                       and persistence is a requirement.
+
+Backend frameworks:
+  none       Direct OpenAI SDK route (default).
+  langgraph  LangGraph orchestration around the selected backend.
+  vercel     Vercel AI SDK integration with the selected backend.
 `,
   )
   .action(
     async (options: {
       name?: string;
       template?: string;
+      backendFramework?: string;
       apiKey?: string;
       auth?: string;
       skill?: boolean;
@@ -86,6 +98,7 @@ Templates:
         await runCreateApp({
           name: options.name,
           template: normalizeTemplate(options.template),
+          backendFramework: normalizeBackendFramework(options.backendFramework),
           apiKey: options.apiKey,
           auth: normalizeAuth(options.auth),
           skill: options.skill,
diff --git a/packages/openui-cli/src/lib/create-telemetry.ts b/packages/openui-cli/src/lib/create-telemetry.ts
index 671b4aa82..1604c6ac0 100644
--- a/packages/openui-cli/src/lib/create-telemetry.ts
+++ b/packages/openui-cli/src/lib/create-telemetry.ts
@@ -2,12 +2,13 @@ import type { AiSetup, TemplateName } from "./create-types";
 
 const createFunnel = {
   funnel: "cli_create",
-  funnel_version: "frontloaded_cloud_setup_v1",
+  funnel_version: "frontloaded_cloud_setup_v2",
 } as const;
 
 const createFunnelSteps = {
   create_started: "0100",
   ai_setup_selected: "0200",
+  backend_framework_selected: "0250",
   scaffold_started: "0300",
   scaffold_succeeded: "0310",
   scaffold_failed: "0320",
diff --git a/packages/openui-cli/src/lib/create-types.ts b/packages/openui-cli/src/lib/create-types.ts
index aa38a849f..f5c21fb65 100644
--- a/packages/openui-cli/src/lib/create-types.ts
+++ b/packages/openui-cli/src/lib/create-types.ts
@@ -2,9 +2,12 @@ import type { CloudAuthMethod, ResolvedAuthMethod } from "../auth/mint";
 
 export type TemplateName = "openui-self-hosted" | "openui-cloud";
 
+export type BackendFramework = "none" | "langgraph" | "vercel";
+
 export interface CreateAppOptions {
   name?: string;
   template?: TemplateName;
+  backendFramework?: BackendFramework;
   skill?: boolean;
   noInteractive?: boolean;
   noInstall?: boolean;
diff --git a/packages/openui-cli/src/lib/utils.ts b/packages/openui-cli/src/lib/utils.ts
index 681ae6220..154a35f35 100644
--- a/packages/openui-cli/src/lib/utils.ts
+++ b/packages/openui-cli/src/lib/utils.ts
@@ -1,6 +1,6 @@
 import type { CloudAuthMethod } from "../auth/mint";
 import { createFunnelProps } from "./create-telemetry";
-import type { TemplateName } from "./create-types";
+import type { BackendFramework, TemplateName } from "./create-types";
 import { CreateError, telemetry as defaultTelemetry, type Telemetry } from "./telemetry";
 
 /** ASCII Record Separator — Untypeable in prompt text and always
@@ -41,6 +41,18 @@ export function normalizeTemplate(t?: string): TemplateName | undefined {
   );
 }
 
+export function normalizeBackendFramework(framework?: string): BackendFramework | undefined {
+  if (!framework) return undefined;
+  const value = framework.toLowerCase();
+  if (value === "none" || value === "no-framework") return "none";
+  if (value === "langgraph" || value === "lang-graph") return "langgraph";
+  if (value === "vercel" || value === "vercel-ai-sdk" || value === "ai-sdk") return "vercel";
+  throw new CreateError(
+    "bad_args",
+    `unknown backend framework "${framework}". Use: none | langgraph | vercel.`,
+  );
+}
+
 export function normalizeAuth(a?: string): CloudAuthMethod | undefined {
   if (!a) return undefined;
   const v = a.toLowerCase();
diff --git a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
new file mode 100644
index 000000000..806cd09f6
--- /dev/null
+++ b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
@@ -0,0 +1,175 @@
+import { requiredEnv } from "@/lib/env";
+import { resolveRequestedModel } from "@/lib/models";
+import { runFunctionToolLoop } from "@/lib/tool-loop";
+import { executeGetWeather, getWeatherTool } from "@/lib/tools/get-weather";
+import {
+  Annotation,
+  END,
+  START,
+  StateGraph,
+  type LangGraphRunnableConfig,
+} from "@langchain/langgraph";
+import { artifactTool, generateSystemPrompt } from "@openuidev/thesys-server";
+import { NextResponse } from "next/server";
+import OpenAI from "openai";
+import type {
+  ResponseCreateParamsNonStreaming,
+  ResponseInputItem,
+  Tool,
+} from "openai/resources/responses/responses";
+
+export const runtime = "nodejs";
+
+const CloudState = Annotation.Root({
+  threadId: Annotation<string>(),
+  input: Annotation<ResponseInputItem[]>(),
+  model: Annotation<string>(),
+});
+
+async function callCloud(
+  state: typeof CloudState.State,
+  config: LangGraphRunnableConfig,
+): Promise<Record<string, never>> {
+  if (!config.writer) throw new Error("LangGraph custom stream writer is unavailable");
+
+  const client = new OpenAI({
+    baseURL: "https://api.thesys.dev/v1/embed",
+    apiKey: requiredEnv("THESYS_API_KEY"),
+  });
+  const functionTools = {
+    [getWeatherTool.name]: executeGetWeather,
+  };
+  const createParams: ResponseCreateParamsNonStreaming = {
+    model: state.model,
+    conversation: state.threadId,
+    input: state.input,
+    store: true,
+    tools: [
+      artifactTool({ artifacts: ["slides", "report"] }) as unknown as Tool,
+      { type: "web_search" },
+      { type: "image_search" } as unknown as Tool,
+      getWeatherTool,
+    ],
+    instructions: generateSystemPrompt(),
+  };
+
+  const firstStream = (await client.responses.create(
+    { ...createParams, stream: true },
+    { signal: config.signal },
+  )) as unknown as AsyncIterable<Record<string, unknown>>;
+
+  await runFunctionToolLoop({
+    client,
+    createParams,
+    firstStream,
+    tools: functionTools,
+    enqueue: (event) => config.writer?.(event),
+    signal: config.signal,
+  });
+  return {};
+}
+
+const graph = new StateGraph(CloudState)
+  .addNode("cloud", callCloud)
+  .addEdge(START, "cloud")
+  .addEdge("cloud", END)
+  .compile();
+
+/**
+ * LangGraph owns orchestration; OpenUI Cloud remains the Responses provider.
+ * Custom stream mode preserves every Cloud event for openAIResponsesAdapter.
+ */
+export async function POST(req: Request) {
+  const {
+    threadId,
+    messages,
+    model: requestedModel,
+  } = (await req.json()) as {
+    threadId?: string;
+    messages?: ResponseInputItem[];
+    model?: unknown;
+  };
+
+  if (!threadId) return badRequest("threadId is required — create the conversation first");
+  if (!Array.isArray(messages) || messages.length === 0) {
+    return badRequest("messages must be a non-empty ResponseInputItem[]");
+  }
+  const model = resolveRequestedModel(requestedModel);
+  if (!model) return badRequest("model is not available in this agent");
+
+  const abortController = new AbortController();
+  const abortFromRequest = () => abortController.abort(req.signal.reason);
+  if (req.signal.aborted) abortFromRequest();
+  else req.signal.addEventListener("abort", abortFromRequest, { once: true });
+
+  let iterator: AsyncIterator<Record<string, unknown>>;
+  let first: IteratorResult<Record<string, unknown>>;
+  try {
+    const events = (await graph.stream(
+      { threadId, input: messages.slice(-1), model },
+      { streamMode: "custom", signal: abortController.signal },
+    )) as AsyncIterable<Record<string, unknown>>;
+    iterator = events[Symbol.asyncIterator]();
+    // Start the graph before committing a 200 response so upstream HTTP errors
+    // still reach the browser with their original status.
+    first = await iterator.next();
+  } catch (err) {
+    req.signal.removeEventListener("abort", abortFromRequest);
+    return upstreamError(err);
+  }
+
+  const encoder = new TextEncoder();
+  const encode = (event: Record<string, unknown>) =>
+    encoder.encode(`data: ${JSON.stringify(event)}\n\n`);
+  let cancelled = false;
+  const body = new ReadableStream<Uint8Array>({
+    async start(controller) {
+      try {
+        if (!first.done) controller.enqueue(encode(first.value));
+        for (;;) {
+          const next = await iterator.next();
+          if (next.done) break;
+          controller.enqueue(encode(next.value));
+        }
+      } catch (err) {
+        if (cancelled) return;
+        controller.enqueue(
+          encode({ type: "error", message: err instanceof Error ? err.message : String(err) }),
+        );
+      } finally {
+        req.signal.removeEventListener("abort", abortFromRequest);
+        if (!cancelled) controller.close();
+      }
+    },
+    async cancel(reason) {
+      cancelled = true;
+      abortController.abort(reason);
+      await iterator.return?.();
+    },
+  });
+
+  return new Response(body, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+    },
+  });
+}
+
+function badRequest(message: string): Response {
+  return NextResponse.json({ error: { message } }, { status: 400 });
+}
+
+function upstreamError(err: unknown): Response {
+  const e = err as {
+    status?: number;
+    statusCode?: number;
+    error?: unknown;
+    message?: string;
+  };
+  return NextResponse.json(
+    { error: e.error ?? { message: e.message ?? "upstream error" } },
+    { status: e.status ?? e.statusCode ?? 502 },
+  );
+}
diff --git a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts
new file mode 100644
index 000000000..e8b1a9111
--- /dev/null
+++ b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts
@@ -0,0 +1,206 @@
+import { requiredEnv } from "@/lib/env";
+import { resolveRequestedModel } from "@/lib/models";
+import { runFunctionToolLoop } from "@/lib/tool-loop";
+import { executeGetWeather, getWeatherTool } from "@/lib/tools/get-weather";
+import { createOpenAI } from "@ai-sdk/openai";
+import { artifactTool, generateSystemPrompt } from "@openuidev/thesys-server";
+import { NextResponse } from "next/server";
+import type OpenAI from "openai";
+import type {
+  ResponseCreateParamsNonStreaming,
+  ResponseInputItem,
+  Tool,
+} from "openai/resources/responses/responses";
+
+export const runtime = "nodejs";
+
+type CloudCreateParams = Omit<ResponseCreateParamsNonStreaming, "stream"> & {
+  stream?: boolean;
+};
+
+type ProviderChunk = {
+  type: string;
+  rawValue?: unknown;
+};
+
+/**
+ * Use the AI SDK's documented custom fetch hook to pass through OpenUI Cloud's
+ * Responses extensions. The provider natively handles Responses SSE, while the
+ * hook preserves exact ResponseInputItem values plus artifact/image_search tools
+ * that are not yet represented by @ai-sdk/openai's typed tool registry.
+ */
+async function createResponsesStream(
+  createParams: CloudCreateParams,
+  signal?: AbortSignal,
+): Promise<AsyncIterable<Record<string, unknown>>> {
+  const cloud = createOpenAI({
+    name: "openui-cloud",
+    baseURL: "https://api.thesys.dev/v1/embed",
+    apiKey: requiredEnv("THESYS_API_KEY"),
+    fetch: async (input, init) => {
+      if (!init || typeof init.body !== "string") {
+        throw new Error("Expected a JSON Responses request body");
+      }
+      const providerBody = JSON.parse(init.body) as Record<string, unknown>;
+      return fetch(input, {
+        ...init,
+        body: JSON.stringify({ ...providerBody, ...createParams, stream: true }),
+      });
+    },
+  });
+
+  const result = await cloud.responses(String(createParams.model)).doStream({
+    // The transport hook replaces this placeholder with createParams.input.
+    prompt: [{ role: "user", content: [{ type: "text", text: "" }] }],
+    includeRawChunks: true,
+    abortSignal: signal,
+  });
+
+  return rawResponseEvents(result.stream as ReadableStream<ProviderChunk>);
+}
+
+async function* rawResponseEvents(
+  stream: ReadableStream<ProviderChunk>,
+): AsyncIterable<Record<string, unknown>> {
+  const reader = stream.getReader();
+  let completed = false;
+  try {
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) {
+        completed = true;
+        return;
+      }
+      if (value.type === "raw" && typeof value.rawValue === "object" && value.rawValue !== null) {
+        yield value.rawValue as Record<string, unknown>;
+      }
+    }
+  } finally {
+    if (!completed) await reader.cancel().catch(() => undefined);
+    reader.releaseLock();
+  }
+}
+
+function createCloudClient(): OpenAI {
+  return {
+    responses: {
+      create: (params: CloudCreateParams, options?: { signal?: AbortSignal }) =>
+        createResponsesStream(params, options?.signal),
+    },
+  } as unknown as OpenAI;
+}
+
+/**
+ * Vercel AI SDK owns the Responses transport; OpenUI Cloud still owns model
+ * routing, conversations, server-side tools, artifacts, and billing.
+ */
+export async function POST(req: Request) {
+  const {
+    threadId,
+    messages,
+    model: requestedModel,
+  } = (await req.json()) as {
+    threadId?: string;
+    messages?: ResponseInputItem[];
+    model?: unknown;
+  };
+
+  if (!threadId) return badRequest("threadId is required — create the conversation first");
+  if (!Array.isArray(messages) || messages.length === 0) {
+    return badRequest("messages must be a non-empty ResponseInputItem[]");
+  }
+  const model = resolveRequestedModel(requestedModel);
+  if (!model) return badRequest("model is not available in this agent");
+
+  const abortController = new AbortController();
+  const abortFromRequest = () => abortController.abort(req.signal.reason);
+  if (req.signal.aborted) abortFromRequest();
+  else req.signal.addEventListener("abort", abortFromRequest, { once: true });
+
+  const client = createCloudClient();
+  const functionTools = {
+    [getWeatherTool.name]: executeGetWeather,
+  };
+  const createParams: ResponseCreateParamsNonStreaming = {
+    model,
+    conversation: threadId,
+    input: messages.slice(-1),
+    store: true,
+    tools: [
+      artifactTool({ artifacts: ["slides", "report"] }) as unknown as Tool,
+      { type: "web_search" },
+      { type: "image_search" } as unknown as Tool,
+      getWeatherTool,
+    ],
+    instructions: generateSystemPrompt(),
+  };
+
+  let stream: AsyncIterable<Record<string, unknown>>;
+  try {
+    stream = (await client.responses.create(
+      { ...createParams, stream: true },
+      { signal: abortController.signal },
+    )) as unknown as AsyncIterable<Record<string, unknown>>;
+  } catch (err) {
+    req.signal.removeEventListener("abort", abortFromRequest);
+    return upstreamError(err);
+  }
+
+  const encoder = new TextEncoder();
+  let cancelled = false;
+  const body = new ReadableStream<Uint8Array>({
+    async start(controller) {
+      const enqueue = (event: Record<string, unknown>) => {
+        controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
+      };
+      try {
+        await runFunctionToolLoop({
+          client,
+          createParams,
+          firstStream: stream,
+          tools: functionTools,
+          enqueue,
+          signal: abortController.signal,
+        });
+      } catch (err) {
+        if (cancelled) return;
+        enqueue({
+          type: "error",
+          message: err instanceof Error ? err.message : String(err),
+        });
+      } finally {
+        req.signal.removeEventListener("abort", abortFromRequest);
+        if (!cancelled) controller.close();
+      }
+    },
+    cancel(reason) {
+      cancelled = true;
+      abortController.abort(reason);
+    },
+  });
+
+  return new Response(body, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+    },
+  });
+}
+
+function badRequest(message: string): Response {
+  return NextResponse.json({ error: { message } }, { status: 400 });
+}
+
+function upstreamError(err: unknown): Response {
+  const e = err as {
+    status?: number;
+    statusCode?: number;
+    data?: unknown;
+    message?: string;
+  };
+  return NextResponse.json(
+    { error: e.data ?? { message: e.message ?? "upstream error" } },
+    { status: e.status ?? e.statusCode ?? 502 },
+  );
+}
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts
new file mode 100644
index 000000000..ed7770cc7
--- /dev/null
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts
@@ -0,0 +1,124 @@
+import librarySpec from "@/generated/spec.json";
+import { promptOptions } from "@/lib/prompt-options";
+import type { BaseMessageLike } from "@langchain/core/messages";
+import { END, MessagesAnnotation, START, StateGraph } from "@langchain/langgraph";
+import { ChatOpenAI } from "@langchain/openai";
+import { generateSystemPrompt } from "@openuidev/lang-core";
+
+export const runtime = "nodejs";
+
+const modelName = process.env.OPENAI_MODEL ?? "gpt-5.2";
+const model = new ChatOpenAI({
+  model: modelName,
+  streaming: true,
+  configuration: process.env.OPENAI_BASE_URL ? { baseURL: process.env.OPENAI_BASE_URL } : undefined,
+});
+
+async function callModel(state: typeof MessagesAnnotation.State) {
+  return { messages: [await model.invoke(state.messages)] };
+}
+
+const graph = new StateGraph(MessagesAnnotation)
+  .addNode("model", callModel)
+  .addEdge(START, "model")
+  .addEdge("model", END)
+  .compile();
+
+function sseChunk(delta: Record<string, unknown>, finishReason: string | null = null) {
+  return `data: ${JSON.stringify({
+    id: "langgraph-chat",
+    object: "chat.completion.chunk",
+    model: modelName,
+    choices: [{ index: 0, delta, finish_reason: finishReason }],
+  })}\n\n`;
+}
+
+export async function POST(req: Request) {
+  const payload = (await req.json()) as { messages?: unknown };
+  if (!Array.isArray(payload.messages)) {
+    return Response.json({ error: "messages must be an array" }, { status: 400 });
+  }
+
+  const messages: BaseMessageLike[] = [
+    {
+      role: "system",
+      content: generateSystemPrompt({ library: librarySpec, promptOptions }),
+    },
+    ...(payload.messages as BaseMessageLike[]),
+  ];
+  const abortController = new AbortController();
+  const abortFromRequest = () => abortController.abort(req.signal.reason);
+  if (req.signal.aborted) abortFromRequest();
+  else req.signal.addEventListener("abort", abortFromRequest, { once: true });
+
+  let iterator: AsyncIterator<unknown>;
+  let first: IteratorResult<unknown>;
+  try {
+    const events = (await graph.stream(
+      { messages },
+      { streamMode: "messages", signal: abortController.signal },
+    )) as AsyncIterable<unknown>;
+    iterator = events[Symbol.asyncIterator]();
+    // Start the provider request before returning HTTP 200.
+    first = await iterator.next();
+  } catch (error) {
+    req.signal.removeEventListener("abort", abortFromRequest);
+    return providerError(error);
+  }
+
+  const encoder = new TextEncoder();
+  const enqueueEvent = (
+    controller: ReadableStreamDefaultController<Uint8Array>,
+    event: unknown,
+  ) => {
+    if (!Array.isArray(event)) return;
+    const message = event[0] as { type?: string; text?: unknown } | undefined;
+    if (message?.type === "ai" && typeof message.text === "string" && message.text) {
+      controller.enqueue(encoder.encode(sseChunk({ content: message.text })));
+    }
+  };
+
+  let cancelled = false;
+  const body = new ReadableStream<Uint8Array>({
+    async start(controller) {
+      try {
+        controller.enqueue(encoder.encode(sseChunk({ role: "assistant" })));
+        if (!first.done) enqueueEvent(controller, first.value);
+        for (;;) {
+          const next = await iterator.next();
+          if (next.done) break;
+          enqueueEvent(controller, next.value);
+        }
+
+        controller.enqueue(encoder.encode(sseChunk({}, "stop")));
+        controller.enqueue(encoder.encode("data: [DONE]\n\n"));
+        controller.close();
+      } catch (error) {
+        if (!cancelled) controller.error(error);
+      } finally {
+        req.signal.removeEventListener("abort", abortFromRequest);
+      }
+    },
+    async cancel(reason) {
+      cancelled = true;
+      abortController.abort(reason);
+      await iterator.return?.();
+    },
+  });
+
+  return new Response(body, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+    },
+  });
+}
+
+function providerError(error: unknown): Response {
+  const e = error as { status?: number; statusCode?: number; message?: string };
+  return Response.json(
+    { error: e.message ?? "Provider request failed" },
+    { status: e.status ?? e.statusCode ?? 500 },
+  );
+}
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel.ts b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel.ts
new file mode 100644
index 000000000..3c39dc3cd
--- /dev/null
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel.ts
@@ -0,0 +1,253 @@
+import librarySpec from "@/generated/spec.json";
+import { promptOptions } from "@/lib/prompt-options";
+import { createOpenAI } from "@ai-sdk/openai";
+import { generateSystemPrompt } from "@openuidev/lang-core";
+import { streamText, type ModelMessage } from "ai";
+
+export const runtime = "nodejs";
+
+const modelName = process.env.OPENAI_MODEL ?? "gpt-5.2";
+const openai = createOpenAI({
+  baseURL: process.env.OPENAI_BASE_URL,
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+function sseChunk(delta: Record<string, unknown>, finishReason: string | null = null) {
+  return `data: ${JSON.stringify({
+    id: "vercel-ai-chat",
+    object: "chat.completion.chunk",
+    model: modelName,
+    choices: [{ index: 0, delta, finish_reason: finishReason }],
+  })}\n\n`;
+}
+
+type UserModelMessage = Extract<ModelMessage, { role: "user" }>;
+type AssistantModelMessage = Extract<ModelMessage, { role: "assistant" }>;
+
+function textContent(content: unknown): string {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+
+  return content
+    .map((part) => {
+      if (part && typeof part === "object" && "text" in part) {
+        return typeof part.text === "string" ? part.text : "";
+      }
+      return "";
+    })
+    .join("");
+}
+
+function imageSource(value: string): string | URL {
+  try {
+    return new URL(value);
+  } catch {
+    return value;
+  }
+}
+
+function toUserContent(content: unknown): UserModelMessage["content"] {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+
+  const parts: Exclude<UserModelMessage["content"], string> = [];
+  for (const part of content) {
+    if (!part || typeof part !== "object" || !("type" in part)) continue;
+    if (part.type === "text" && "text" in part && typeof part.text === "string") {
+      parts.push({ type: "text", text: part.text });
+    } else if (
+      part.type === "image_url" &&
+      "image_url" in part &&
+      part.image_url &&
+      typeof part.image_url === "object" &&
+      "url" in part.image_url &&
+      typeof part.image_url.url === "string"
+    ) {
+      parts.push({ type: "image", image: imageSource(part.image_url.url) });
+    }
+  }
+  return parts;
+}
+
+function toolInput(value: unknown): unknown {
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value) as unknown;
+  } catch {
+    return value;
+  }
+}
+
+function toAssistantContent(message: Record<string, unknown>): AssistantModelMessage["content"] {
+  const parts: Exclude<AssistantModelMessage["content"], string> = [];
+  const text = textContent(message.content);
+  if (text) parts.push({ type: "text", text });
+
+  if (Array.isArray(message.tool_calls)) {
+    for (const toolCall of message.tool_calls) {
+      if (!toolCall || typeof toolCall !== "object") continue;
+      if (!("id" in toolCall) || typeof toolCall.id !== "string") continue;
+      if (
+        !("function" in toolCall) ||
+        !toolCall.function ||
+        typeof toolCall.function !== "object"
+      ) {
+        continue;
+      }
+      if (!("name" in toolCall.function) || typeof toolCall.function.name !== "string") continue;
+
+      parts.push({
+        type: "tool-call",
+        toolCallId: toolCall.id,
+        toolName: toolCall.function.name,
+        input: toolInput("arguments" in toolCall.function ? toolCall.function.arguments : {}),
+      });
+    }
+  }
+
+  return parts.length ? parts : text;
+}
+
+function toModelMessages(messages: unknown[]): ModelMessage[] {
+  const toolNames = new Map<string, string>();
+  for (const message of messages) {
+    if (!message || typeof message !== "object" || !("tool_calls" in message)) continue;
+    if (!Array.isArray(message.tool_calls)) continue;
+    for (const toolCall of message.tool_calls) {
+      if (!toolCall || typeof toolCall !== "object") continue;
+      if (!("id" in toolCall) || typeof toolCall.id !== "string") continue;
+      if (
+        !("function" in toolCall) ||
+        !toolCall.function ||
+        typeof toolCall.function !== "object"
+      ) {
+        continue;
+      }
+      if ("name" in toolCall.function && typeof toolCall.function.name === "string") {
+        toolNames.set(toolCall.id, toolCall.function.name);
+      }
+    }
+  }
+
+  const result: ModelMessage[] = [];
+  for (const message of messages) {
+    if (!message || typeof message !== "object" || !("role" in message)) continue;
+    if (message.role === "user") {
+      result.push({
+        role: "user",
+        content: toUserContent("content" in message ? message.content : ""),
+      });
+      continue;
+    }
+    if (message.role === "assistant") {
+      result.push({ role: "assistant", content: toAssistantContent(message) });
+      continue;
+    }
+    if (message.role === "system" || message.role === "developer") {
+      result.push({
+        role: "system",
+        content: textContent("content" in message ? message.content : ""),
+      });
+      continue;
+    }
+    if (
+      message.role === "tool" &&
+      "tool_call_id" in message &&
+      typeof message.tool_call_id === "string"
+    ) {
+      result.push({
+        role: "tool",
+        content: [
+          {
+            type: "tool-result",
+            toolCallId: message.tool_call_id,
+            toolName: toolNames.get(message.tool_call_id) ?? "tool",
+            output: {
+              type: "text",
+              value: textContent("content" in message ? message.content : ""),
+            },
+          },
+        ],
+      });
+    }
+  }
+  return result;
+}
+
+export async function POST(req: Request) {
+  const payload = (await req.json()) as { messages?: unknown };
+
+  if (!Array.isArray(payload.messages)) {
+    return Response.json({ error: "messages must be an array" }, { status: 400 });
+  }
+
+  const abortController = new AbortController();
+  const abortFromRequest = () => abortController.abort(req.signal.reason);
+  if (req.signal.aborted) abortFromRequest();
+  else req.signal.addEventListener("abort", abortFromRequest, { once: true });
+
+  let iterator: AsyncIterator<string>;
+  let first: IteratorResult<string>;
+  try {
+    const result = streamText({
+      // Match the default self-hosted route's OpenAI-compatible
+      // Chat Completions contract (many providers do not expose /responses).
+      model: openai.chat(modelName),
+      system: generateSystemPrompt({ library: librarySpec, promptOptions }),
+      messages: toModelMessages(payload.messages),
+      abortSignal: abortController.signal,
+    });
+    iterator = result.textStream[Symbol.asyncIterator]();
+    // Start the provider request before returning HTTP 200.
+    first = await iterator.next();
+  } catch (error) {
+    req.signal.removeEventListener("abort", abortFromRequest);
+    return providerError(error);
+  }
+
+  const encoder = new TextEncoder();
+
+  let cancelled = false;
+  const body = new ReadableStream<Uint8Array>({
+    async start(controller) {
+      try {
+        controller.enqueue(encoder.encode(sseChunk({ role: "assistant" })));
+        if (!first.done) controller.enqueue(encoder.encode(sseChunk({ content: first.value })));
+        for (;;) {
+          const next = await iterator.next();
+          if (next.done) break;
+          controller.enqueue(encoder.encode(sseChunk({ content: next.value })));
+        }
+
+        controller.enqueue(encoder.encode(sseChunk({}, "stop")));
+        controller.enqueue(encoder.encode("data: [DONE]\n\n"));
+        controller.close();
+      } catch (error) {
+        if (!cancelled) controller.error(error);
+      } finally {
+        req.signal.removeEventListener("abort", abortFromRequest);
+      }
+    },
+    async cancel(reason) {
+      cancelled = true;
+      abortController.abort(reason);
+      await iterator.return?.();
+    },
+  });
+
+  return new Response(body, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+    },
+  });
+}
+
+function providerError(error: unknown): Response {
+  const e = error as { status?: number; statusCode?: number; message?: string };
+  return Response.json(
+    { error: e.message ?? "Provider request failed" },
+    { status: e.status ?? e.statusCode ?? 500 },
+  );
+}

From a334bd039da978518bf96db8639e7ea7d1b1643b Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Tue, 4 Aug 2026 15:54:04 +0530
Subject: [PATCH 02/15] chore(cli): refresh template lockfiles

---
 .../templates/openui-cloud/package-lock.json  | 476 +++++++++++-------
 .../openui-self-hosted/package-lock.json      |  18 +-
 2 files changed, 297 insertions(+), 197 deletions(-)

diff --git a/packages/openui-cli/src/templates/openui-cloud/package-lock.json b/packages/openui-cli/src/templates/openui-cloud/package-lock.json
index 15bf6e4ef..31dbe5c46 100644
--- a/packages/openui-cli/src/templates/openui-cloud/package-lock.json
+++ b/packages/openui-cli/src/templates/openui-cloud/package-lock.json
@@ -638,9 +638,9 @@
       }
     },
     "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
-      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.3.tgz",
+      "integrity": "sha512-RMnFX7YQsMoh7lWfcM4NEHHymBX/rLuKNPVM84XE9ONPcaSCDgE7CHIHpSgPcO2xcRthgBy1HfNO319mwhIAkg==",
       "cpu": [
         "arm64"
       ],
@@ -650,19 +650,19 @@
         "darwin"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+        "@img/sharp-libvips-darwin-arm64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
-      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.3.tgz",
+      "integrity": "sha512-Xo+5uFBtLN0BKqieTxiFzFPQAUlBbbH5iBKyRX/z1JrbnYsHTfKJnUfL8+p2TPXr1pXqao4eeL4Rl144uDpK9w==",
       "cpu": [
         "x64"
       ],
@@ -672,19 +672,38 @@
         "darwin"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.2.4"
+        "@img/sharp-libvips-darwin-x64": "1.3.2"
+      }
+    },
+    "node_modules/@img/sharp-freebsd-wasm32": {
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.3.tgz",
+      "integrity": "sha512-lUxcqWIj2wMQ9BrwNjngcr1gWUr5xgaGThBRqPPalIC2n67Cqj1uPh8NnA/ZhAg8hUbKl+kVHKwgUIwe6ZYPrg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.3"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
-      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.2.tgz",
+      "integrity": "sha512-9J6ypZFpQBj4YnePGoq/S38w6nz+vqg5WZLrLGY4YuSemdMq47GMLBPO42MzwdGwpg/agZ7xzZcFHa48xlywfg==",
       "cpu": [
         "arm64"
       ],
@@ -698,9 +717,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
-      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.2.tgz",
+      "integrity": "sha512-m2pW1n6cns9VaubNwsZ+c3CRYjxNQWgJ5gPlnL1nbBcpkBvFm6SCFN5o0psFHI8w9n11NKhFkeEDns98tiqbEw==",
       "cpu": [
         "x64"
       ],
@@ -714,12 +733,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
-      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.2.tgz",
+      "integrity": "sha512-1eMLzy92I4J6rmi4mAT8yC3HxOtniyGELlzGbNMLLeqe052ahFQ0h6LFq+lh5DsDIdYViIDst08abvSbcEdLXQ==",
       "cpu": [
         "arm"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -730,12 +752,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
-      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.2.tgz",
+      "integrity": "sha512-dqVSFynCox4C/J8kT16V7SIFAns0IjgLwkvYT7p8LQVmJ5OS5b6tI9IGflxTeuBS//zXeFIUbwt5dwxyZ17cnA==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -746,12 +771,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
-      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.2.tgz",
+      "integrity": "sha512-3z0NHDxD6n5I9gc05U1eW1AyRm+Gznzq3naMrthPNqE6oYykcogW0l/jfpJdjYnuNl8R7yI9pNbE1XiUeyq0Aw==",
       "cpu": [
         "ppc64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -762,12 +790,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-riscv64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
-      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.2.tgz",
+      "integrity": "sha512-bsb4rI+NldGOsXuej2r8OdSS8+zXDVaCWxyWrcv6kneTOlgAHtZABRzBBCwdsPiD90J4myNJuHpg6kA20ImW/w==",
       "cpu": [
         "riscv64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -778,12 +809,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
-      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.2.tgz",
+      "integrity": "sha512-/ABshyj8gCpyIrNXnHn4LorDJ0HHm1VhXPBlxZ8zAtfVPAaSafXPGn+sUSIRiwaSBy0mmFjSjiXI5mkcwdChKQ==",
       "cpu": [
         "s390x"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -794,12 +828,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
-      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.2.tgz",
+      "integrity": "sha512-ITPEtgffGJ0S6G9dRyw/366tJQqFRcHWPHhC+Stpg3Z8AEMrDrTr2lhdz4f/Y/HMbRh//7Z5mBzEpVdi62Oc3w==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -810,12 +847,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
-      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.2.tgz",
+      "integrity": "sha512-zE9EdiUzUmg5mDT5a1rk5fYJ6GWPloTwWBYDS14naqHsL+EaMpDj1AWnpLgh3u0YCORv2Tt50wrcrpYqkP97Kw==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -826,12 +866,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
-      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.2.tgz",
+      "integrity": "sha512-m0lrLiUt+lBYnCFr8qV/65yMR4E/c7/wf78I5eKTdkEakFAlZ9QlzEM3QIhhAwVeUhLAHLcCq7a7Vszq/oFNZQ==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -842,204 +885,244 @@
       }
     },
     "node_modules/@img/sharp-linux-arm": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
-      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.3.tgz",
+      "integrity": "sha512-affVWCTLooy8TSxbDx2qkzuDeaWLNVBA+P//FNBirHsXpP2fuBhk5AuboYUnrDnzoXes8GFjpTx0SBFOCRg+FA==",
       "cpu": [
         "arm"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.2.4"
+        "@img/sharp-libvips-linux-arm": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
-      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.3.tgz",
+      "integrity": "sha512-QgKDspHPnrU+GQ55XPhGwyhC8acLVOOSyAvo1oVfFmrIXLkDNmGWzAfDZ4xK8oSA1qBQrALcHX0G5UZni/SuFQ==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.2.4"
+        "@img/sharp-libvips-linux-arm64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
-      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.3.tgz",
+      "integrity": "sha512-sMd8rDxmpLOwv/7N44klFjOD5DUO7FLdjiXDI0hoxYaf7Ar262dQIEkosE98bps+5HPLtp/EvNqeqQtOycP/IA==",
       "cpu": [
         "ppc64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+        "@img/sharp-libvips-linux-ppc64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linux-riscv64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
-      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.3.tgz",
+      "integrity": "sha512-0Eob78yjlYPfL5vMNWAW55l3R9Y6BQS/gOfe0ZcP9mEz9ohhKSt4im1hayiknXgf8AWrFqMvJcKIdmLmEe7yeQ==",
       "cpu": [
         "riscv64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+        "@img/sharp-libvips-linux-riscv64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
-      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.3.tgz",
+      "integrity": "sha512-KgAxQ0DxpNOq1rG2t5cgTgShJFGSuU7XO45cqC+1NVOuZnP6tlgZRuSYOfNupGkHID0o3cJOsw4DVeJpMovcGw==",
       "cpu": [
         "s390x"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.2.4"
+        "@img/sharp-libvips-linux-s390x": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
-      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.3.tgz",
+      "integrity": "sha512-8pqvxubL2PGdhlPy6GLqzDYMUjyRmKAwKHYKixpdJYBUK7PJ0C029XdsnpFIdgRZG68fZiGdHVWcKPvtiPB4cA==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.2.4"
+        "@img/sharp-libvips-linux-x64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
-      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.3.tgz",
+      "integrity": "sha512-Vz0iQjzzcSX3HCbfwFfCSG/9SCIqyO0mH2sXyiHaAYfBk0cRsCWXRyQYX0ovCK/PAQBbTzQ0dsPQHh5MAFL59w==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
-      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.3.tgz",
+      "integrity": "sha512-6O1NPKcDVj9QEdg7Hx549EX8U0rp6yXQERqru6yRN7fGBn32UvIRJUlWnk+8xDCiG76hXVBbX82NZ/ZKr0euIg==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.2"
       }
     },
     "node_modules/@img/sharp-wasm32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
-      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.3.tgz",
+      "integrity": "sha512-cZ0XkcYGpHZkqW6iCkqTcmUC0CD9DhD5d/qeZlZkfRBn6GnHniZXLUo5+9xw8Iv76YE6LQFN9YNBlKREcCG76w==",
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.11.1"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-webcontainers-wasm32": {
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.3.tgz",
+      "integrity": "sha512-2rnq7bX3NzeR2T4YWgz8qiG4h3TSdMe+vN1iQXpJleSJ3SM5zQ8Fy2SyyXAWlbxpEZ2Y+Z4u1BePgJEYbSy80Q==",
       "cpu": [
         "wasm32"
       ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "@emnapi/runtime": "^1.7.0"
+        "@img/sharp-wasm32": "0.35.3"
       },
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
-      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.3.tgz",
+      "integrity": "sha512-4bPwFdMbeC4JQ8L8LOyWp6nsHcboP5fxkp6iPOXz2Vg49R42TuMs2whkJ5OAP4/Ul035qOzy0AecOF9VOscn4w==",
       "cpu": [
         "arm64"
       ],
@@ -1049,16 +1132,16 @@
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
-      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.3.tgz",
+      "integrity": "sha512-r53mXsBN6lFUDiST764SvgwUdHAqM4rPAiDzAmf4fLoB6X/rkfyTrLCg6+g17wJJiCmB3JYgHuUldCWUIRFSXw==",
       "cpu": [
         "ia32"
       ],
@@ -1068,16 +1151,16 @@
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": "^20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@img/sharp-win32-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
-      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.3.tgz",
+      "integrity": "sha512-D4y1vNeZrIIJCN+uHaWVtH86B+aCrdMYYjicy9pXHvbGZeGYLLSd3wdVuC37FxVXlU1ARsk84eKWfWMXGYEqvA==",
       "cpu": [
         "x64"
       ],
@@ -1087,7 +1170,7 @@
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
@@ -1175,9 +1258,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.2.12",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.12.tgz",
-      "integrity": "sha512-d0Z5Bc13Fa4nR8pFAKx2jay2yhJM16vlfHbTzYnUQAxlNb6B6lmn4hjt69lYNt4kRtyYP6gEM49lPRHNbIyneg==",
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.3.0.tgz",
+      "integrity": "sha512-o9r1S0BNiNreHP9Vs+Qnqd9kviDkJh8xIACY7UFZSmiGbbQRzPBBosvHzAU4TULHOIuOj/18RSsyz2qrREmIFw==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -1191,9 +1274,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.2.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.12.tgz",
-      "integrity": "sha512-0W1R0teHWJrqKX0FH20IzzIWAOuGtBxPGuObrxy1lE8hQvCFj49KE8a3WUg0D7sq6rn6zkM4c7YGUnhudBS6oA==",
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.3.0.tgz",
+      "integrity": "sha512-55hpqq18bEVAlxedlTt3tFqZmKg2nUXT1kn1G/BGEy0R13h3LwtwHPVzzjG6P4LLeOHE32PFDQUVaJEWvBEZBw==",
       "cpu": [
         "arm64"
       ],
@@ -1207,9 +1290,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.2.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.12.tgz",
-      "integrity": "sha512-Hy5Ls099+aFUmOLmIgPfLqNi6iCwhL3uQCssz5rWk+5Nkc6TUKCE83DY5BbNylfm3+mfwcSFnLRfrZDJhVxdtw==",
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.3.0.tgz",
+      "integrity": "sha512-SOi96kSaF5T+0wW4koiM1bWzSPwjzTesC1p3df+FjdOi5LIQkBK/blxh7HdoKnNuI4PURF1OO7TZqtfnbWDSgw==",
       "cpu": [
         "x64"
       ],
@@ -1223,12 +1306,15 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.2.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.12.tgz",
-      "integrity": "sha512-+YqU2h1cQkHsGfvjAsrSmst8UIFBibBGm5x3Xgel8NLMiDQtNOM4sM2GOEMvG5YiOBNeN/Ykk8cQC2S0Xrqljg==",
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.3.0.tgz",
+      "integrity": "sha512-P0gZAoPMF4dyTRzhmkV4PrqVzSOB6t4mC1oI3c4dqijJ+OVEVx5clIXAKR4/uQpsqw2KKM/0D5tVumcR2r5blg==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1239,12 +1325,15 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.2.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.12.tgz",
-      "integrity": "sha512-0qjhiYBaKAqF63LA1ZWAAnKTzFUguAaZiRa5etMLGGPj/B6uEVjtIZldIzFEp3wHlB0koK6aTzqPtSdplTCjoA==",
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.3.0.tgz",
+      "integrity": "sha512-tXXGKJw0m37O0eKJARVTX/TheKPhz0QFVtVVZXmOig+9YKLQOSP6hvf2pxv5DO7CLEJyTHx3Pg043CDQkv1G4Q==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1255,12 +1344,15 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.2.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.12.tgz",
-      "integrity": "sha512-7A3q26W+h7gnA15uqBToNuDqBEFZZcqh0mW2mn4AJh/G5pdg2RVE3n4slzLEliASZFG3NmsbEzng/x2Sh09mBg==",
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.3.0.tgz",
+      "integrity": "sha512-pjGxK5EY7yWml78ALejFkWmgHsU7wbFQrISiugpH6FbUJhgEvw3xFZ/EBAtLl7QtL0WdQKiG9eWJ3mOKGTukHw==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1271,12 +1363,15 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.2.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.12.tgz",
-      "integrity": "sha512-qSjL/uppm+cbh21s72Ss8gkiOhQ4dExWHNGOWy6eZV7STj5WsKehgxT61beSsOj+YYQuTplL376lOCdMQU5T8w==",
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.3.0.tgz",
+      "integrity": "sha512-sjo++Xx+lomlPs3HRsHWhVDyGG6ms1kGW5EtHLERdII8AyG1i+f6aq68xHREO6AEMlhjTNEWBSmfJfqm9orf7g==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1287,9 +1382,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.2.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.12.tgz",
-      "integrity": "sha512-X6hzsOUJac/e7AWSbn9gQ9nzHld1xWP5iyjHpYWvud8pufB679O1xg4JDyKr8Xd69Jvd+kM2Der6uftiZCmjYA==",
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.3.0.tgz",
+      "integrity": "sha512-C5JSgiO54wURdaxdEUIXqkz04uMqC9UmPX1gtDrV/5Tf1UowdWYI8uA5hfFbPolTlp0q4KZ60xlHePNibf0VIw==",
       "cpu": [
         "arm64"
       ],
@@ -1303,9 +1398,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.2.12",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.12.tgz",
-      "integrity": "sha512-F6fakeHuFTLOPt0bslQJdf+xtT+WIP9DVn/m4y1w1mRnVPyh3D/cNvzlRkxM444xfm+IvvYNSOrKiA2CDJ0Uxw==",
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.3.0.tgz",
+      "integrity": "sha512-fDOggsweNb5SSw0ZKVk6U+gxSyGFFlIBY/LBc1r8GUj4u/6t6oArL+Pmkg0MBnsgR+KkdsURilVH4F3GXUGepA==",
       "cpu": [
         "x64"
       ],
@@ -1436,9 +1531,9 @@
       }
     },
     "node_modules/@openuidev/react-ui": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/@openuidev/react-ui/-/react-ui-0.13.2.tgz",
-      "integrity": "sha512-gIx/zLTALqB7YdHLJ5EBIzEKmWW+MCYVvqU6uhIt5OGwkSEGzH3Ccua4wesxLy2xLGahKye+N6yo0u3+EEzWfg==",
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/@openuidev/react-ui/-/react-ui-0.13.3.tgz",
+      "integrity": "sha512-8BFGrBaTQravEmsUq3qfpl2j+qfAU2VV7J9FjdF0yof9t2GzquuqeAZBGcD+rH3kOafF0DKqdOL37x216hM0zg==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react-dom": "^2.1.2",
@@ -3431,18 +3526,18 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.2.17",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
-      "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+      "version": "19.2.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
+      "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
-      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-Bsc+QHgp+P/F02XDzNCY9jnZNCUuLki36KT7VKrTXXLdHf+vHMNZnW1rVu5DNW/rCK+fya3DATySbLM4yhtKUw==",
       "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
@@ -8817,9 +8912,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.16",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz",
-      "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==",
+      "version": "3.3.17",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.17.tgz",
+      "integrity": "sha512-xQLf0A3HOMlgHq0n247/LRuAOYmB7dXJ/DvAxGvsSBij45XtBSmQycu+F8ODbHwns/XyFZagyL1+J0Offw1E0g==",
       "funding": [
         {
           "type": "github",
@@ -8858,16 +8953,16 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.2.12",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.2.12.tgz",
-      "integrity": "sha512-iD59eYQWmbFcEbX7v/acG5DRym9iw1DdaPoD0WTA920naWsE25wShzJW4+UvAs8MK9EC2kBfIH6vtto1H1PHGw==",
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.3.0.tgz",
+      "integrity": "sha512-NEdGOzH+08eTXMUp9UYkA99Nhi5N6Thrhc1jgFOQgfgnGK/dA2hRwBpXep+exdFQrnwlRf/3Wixyp8lLBUpE2A==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.2.12",
+        "@next/env": "16.3.0",
         "@swc/helpers": "0.5.15",
         "baseline-browser-mapping": "^2.9.19",
         "caniuse-lite": "^1.0.30001579",
-        "postcss": "8.4.31",
+        "postcss": "8.5.23",
         "styled-jsx": "5.1.6"
       },
       "bin": {
@@ -8877,15 +8972,15 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.2.12",
-        "@next/swc-darwin-x64": "16.2.12",
-        "@next/swc-linux-arm64-gnu": "16.2.12",
-        "@next/swc-linux-arm64-musl": "16.2.12",
-        "@next/swc-linux-x64-gnu": "16.2.12",
-        "@next/swc-linux-x64-musl": "16.2.12",
-        "@next/swc-win32-arm64-msvc": "16.2.12",
-        "@next/swc-win32-x64-msvc": "16.2.12",
-        "sharp": "^0.34.5"
+        "@next/swc-darwin-arm64": "16.3.0",
+        "@next/swc-darwin-x64": "16.3.0",
+        "@next/swc-linux-arm64-gnu": "16.3.0",
+        "@next/swc-linux-arm64-musl": "16.3.0",
+        "@next/swc-linux-x64-gnu": "16.3.0",
+        "@next/swc-linux-x64-musl": "16.3.0",
+        "@next/swc-win32-arm64-msvc": "16.3.0",
+        "@next/swc-win32-x64-msvc": "16.3.0",
+        "sharp": "^0.35.3"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -9328,9 +9423,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.5.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.23.tgz",
+      "integrity": "sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg==",
       "funding": [
         {
           "type": "opencollective",
@@ -9347,9 +9442,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.16",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -10293,48 +10388,53 @@
       }
     },
     "node_modules/sharp": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
-      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
-      "hasInstallScript": true,
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.3.tgz",
+      "integrity": "sha512-ej0zVHuZGHCiABXcNxeYhpRnPNPAcvbG8RMdBAhDAxLKkCRVSpK3Iyu7qbqw3JMzoj0REeM6f3tJLtVwl0023Q==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "@img/colour": "^1.0.0",
+        "@img/colour": "^1.1.0",
         "detect-libc": "^2.1.2",
-        "semver": "^7.7.3"
+        "semver": "^7.8.5"
       },
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">=20.9.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.34.5",
-        "@img/sharp-darwin-x64": "0.34.5",
-        "@img/sharp-libvips-darwin-arm64": "1.2.4",
-        "@img/sharp-libvips-darwin-x64": "1.2.4",
-        "@img/sharp-libvips-linux-arm": "1.2.4",
-        "@img/sharp-libvips-linux-arm64": "1.2.4",
-        "@img/sharp-libvips-linux-ppc64": "1.2.4",
-        "@img/sharp-libvips-linux-riscv64": "1.2.4",
-        "@img/sharp-libvips-linux-s390x": "1.2.4",
-        "@img/sharp-libvips-linux-x64": "1.2.4",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
-        "@img/sharp-linux-arm": "0.34.5",
-        "@img/sharp-linux-arm64": "0.34.5",
-        "@img/sharp-linux-ppc64": "0.34.5",
-        "@img/sharp-linux-riscv64": "0.34.5",
-        "@img/sharp-linux-s390x": "0.34.5",
-        "@img/sharp-linux-x64": "0.34.5",
-        "@img/sharp-linuxmusl-arm64": "0.34.5",
-        "@img/sharp-linuxmusl-x64": "0.34.5",
-        "@img/sharp-wasm32": "0.34.5",
-        "@img/sharp-win32-arm64": "0.34.5",
-        "@img/sharp-win32-ia32": "0.34.5",
-        "@img/sharp-win32-x64": "0.34.5"
+        "@img/sharp-darwin-arm64": "0.35.3",
+        "@img/sharp-darwin-x64": "0.35.3",
+        "@img/sharp-freebsd-wasm32": "0.35.3",
+        "@img/sharp-libvips-darwin-arm64": "1.3.2",
+        "@img/sharp-libvips-darwin-x64": "1.3.2",
+        "@img/sharp-libvips-linux-arm": "1.3.2",
+        "@img/sharp-libvips-linux-arm64": "1.3.2",
+        "@img/sharp-libvips-linux-ppc64": "1.3.2",
+        "@img/sharp-libvips-linux-riscv64": "1.3.2",
+        "@img/sharp-libvips-linux-s390x": "1.3.2",
+        "@img/sharp-libvips-linux-x64": "1.3.2",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.2",
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.2",
+        "@img/sharp-linux-arm": "0.35.3",
+        "@img/sharp-linux-arm64": "0.35.3",
+        "@img/sharp-linux-ppc64": "0.35.3",
+        "@img/sharp-linux-riscv64": "0.35.3",
+        "@img/sharp-linux-s390x": "0.35.3",
+        "@img/sharp-linux-x64": "0.35.3",
+        "@img/sharp-linuxmusl-arm64": "0.35.3",
+        "@img/sharp-linuxmusl-x64": "0.35.3",
+        "@img/sharp-webcontainers-wasm32": "0.35.3",
+        "@img/sharp-win32-arm64": "0.35.3",
+        "@img/sharp-win32-ia32": "0.35.3",
+        "@img/sharp-win32-x64": "0.35.3"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
       }
     },
     "node_modules/sharp/node_modules/semver": {
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/package-lock.json b/packages/openui-cli/src/templates/openui-self-hosted/package-lock.json
index a210b9651..8413e9abe 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/package-lock.json
+++ b/packages/openui-cli/src/templates/openui-self-hosted/package-lock.json
@@ -1397,9 +1397,9 @@
       }
     },
     "node_modules/@openuidev/react-ui": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/@openuidev/react-ui/-/react-ui-0.13.2.tgz",
-      "integrity": "sha512-gIx/zLTALqB7YdHLJ5EBIzEKmWW+MCYVvqU6uhIt5OGwkSEGzH3Ccua4wesxLy2xLGahKye+N6yo0u3+EEzWfg==",
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/@openuidev/react-ui/-/react-ui-0.13.3.tgz",
+      "integrity": "sha512-8BFGrBaTQravEmsUq3qfpl2j+qfAU2VV7J9FjdF0yof9t2GzquuqeAZBGcD+rH3kOafF0DKqdOL37x216hM0zg==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react-dom": "^2.1.2",
@@ -2674,18 +2674,18 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.2.17",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
-      "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+      "version": "19.2.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
+      "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
-      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-Bsc+QHgp+P/F02XDzNCY9jnZNCUuLki36KT7VKrTXXLdHf+vHMNZnW1rVu5DNW/rCK+fya3DATySbLM4yhtKUw==",
       "devOptional": true,
       "license": "MIT",
       "peerDependencies": {

From 63d48691b57684451bc5fec78edec2d75e550e14 Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Wed, 5 Aug 2026 13:52:28 +0530
Subject: [PATCH 03/15] fix(cli): keep cloud transport for framework tools

---
 docs/content/docs/api-reference/cli.mdx       |  12 +-
 packages/openui-cli/README.md                 |  12 +-
 .../openui-cli/src/commands/create-app.ts     |  11 +-
 packages/openui-cli/src/index.ts              |   4 +-
 .../openui-cloud/_backend-routes/langgraph.ts | 205 ++++++++++--------
 .../openui-cloud/_backend-routes/vercel.ts    | 168 +++++++-------
 .../openui-self-hosted/package-lock.json      |  12 +-
 7 files changed, 235 insertions(+), 189 deletions(-)

diff --git a/docs/content/docs/api-reference/cli.mdx b/docs/content/docs/api-reference/cli.mdx
index f27c22eb5..a425daf82 100644
--- a/docs/content/docs/api-reference/cli.mdx
+++ b/docs/content/docs/api-reference/cli.mdx
@@ -84,13 +84,13 @@ In non-interactive mode, dependencies are installed without starting the long-ru
 
 **Backend frameworks**
 
-| Value       | OpenUI Cloud route                           | Self-hosted route                          |
-| ----------- | -------------------------------------------- | ------------------------------------------ |
-| `none`      | Direct OpenAI SDK Responses proxy            | Direct OpenAI SDK Chat Completions proxy   |
-| `langgraph` | LangGraph workflow calling OpenUI Cloud      | LangGraph `StateGraph` using your provider |
-| `vercel`    | Vercel AI SDK transport calling OpenUI Cloud | Vercel AI SDK `streamText()` route         |
+| Value       | OpenUI Cloud route                                  | Self-hosted route                          |
+| ----------- | --------------------------------------------------- | ------------------------------------------ |
+| `none`      | Direct OpenAI SDK Responses proxy                   | Direct OpenAI SDK Chat Completions proxy   |
+| `langgraph` | OpenAI SDK proxy + LangGraph app-tool execution     | LangGraph `StateGraph` using your provider |
+| `vercel`    | OpenAI SDK proxy + Vercel AI SDK app-tool execution | Vercel AI SDK `streamText()` route         |
 
-The CLI replaces `src/app/api/chat/route.ts` and adds the selected framework's dependencies. Cloud framework routes preserve the raw Responses SSE contract, managed conversations, artifacts, and built-in tools. A Cloud framework selection changes orchestration, not the model provider: choose self-hosted to use your own provider key.
+The CLI replaces `src/app/api/chat/route.ts` and adds the selected framework's dependencies. Every Cloud route keeps the OpenAI SDK pointed at OpenUI Cloud, preserving the raw Responses stream and managed conversation storage. Artifacts, web search, image search, and configured MCP tools still execute in Cloud; selecting LangGraph or Vercel AI SDK only changes how application-owned function tools are defined and executed on your server. Choose self-hosted to use your own model provider key.
 
 **Agent skill**
 
diff --git a/packages/openui-cli/README.md b/packages/openui-cli/README.md
index 715d0cc2c..05f8c2985 100644
--- a/packages/openui-cli/README.md
+++ b/packages/openui-cli/README.md
@@ -106,13 +106,13 @@ What it does:
 
 #### Backend frameworks
 
-| Value       | OpenUI Cloud route                                | Self-hosted route                          |
-| ----------- | ------------------------------------------------- | ------------------------------------------ |
-| `none`      | Direct OpenAI SDK Responses proxy                 | Direct OpenAI SDK Chat Completions proxy   |
-| `langgraph` | LangGraph workflow calling OpenUI Cloud           | LangGraph `StateGraph` using your provider |
-| `vercel`    | Vercel AI SDK Responses transport to OpenUI Cloud | Vercel AI SDK `streamText()` route         |
+| Value       | OpenUI Cloud route                                  | Self-hosted route                          |
+| ----------- | --------------------------------------------------- | ------------------------------------------ |
+| `none`      | Direct OpenAI SDK Responses proxy                   | Direct OpenAI SDK Chat Completions proxy   |
+| `langgraph` | OpenAI SDK proxy + LangGraph app-tool execution     | LangGraph `StateGraph` using your provider |
+| `vercel`    | OpenAI SDK proxy + Vercel AI SDK app-tool execution | Vercel AI SDK `streamText()` route         |
 
-The CLI replaces `src/app/api/chat/route.ts` and adds the dependencies for the selected framework. Cloud combinations still call OpenUI Cloud and preserve its Responses SSE stream, conversation storage, artifacts, and built-in tools. Selecting a Cloud framework changes the orchestration layer; it does not configure a user-owned provider key. Choose `openui-self-hosted` when you want to bring your own provider.
+The CLI replaces `src/app/api/chat/route.ts` and adds the dependencies for the selected framework. Every Cloud combination keeps the OpenAI SDK pointed at OpenUI Cloud, preserving the raw Responses stream and managed conversation storage. Artifacts, web search, image search, and configured MCP tools still execute in Cloud; selecting LangGraph or Vercel AI SDK only changes how application-owned function tools are defined and executed on your server. It does not configure a user-owned model provider. Choose `openui-self-hosted` when you want to bring your own provider.
 
 #### Template-specific `.env`
 
diff --git a/packages/openui-cli/src/commands/create-app.ts b/packages/openui-cli/src/commands/create-app.ts
index fa7220147..d1d89d1ac 100644
--- a/packages/openui-cli/src/commands/create-app.ts
+++ b/packages/openui-cli/src/commands/create-app.ts
@@ -38,7 +38,8 @@ const backendDependencies: Record<
       "@langchain/langgraph": "^1.4.5",
     },
     vercel: {
-      "@ai-sdk/openai": "^3.0.65",
+      ai: "^6.0.191",
+      zod: "^4.3.6",
     },
   },
   "openui-self-hosted": {
@@ -639,9 +640,13 @@ function getStartedMessage(o: {
 
   const frameworkNote =
     o.backendFramework === "langgraph"
-      ? "The generated API route uses LangGraph."
+      ? o.template === "openui-cloud"
+        ? "The generated route keeps OpenUI Cloud as the Responses backend and uses LangGraph for app-owned tools."
+        : "The generated API route uses LangGraph."
       : o.backendFramework === "vercel"
-        ? "The generated API route uses the Vercel AI SDK."
+        ? o.template === "openui-cloud"
+          ? "The generated route keeps OpenUI Cloud as the Responses backend and uses the Vercel AI SDK for app-owned tools."
+          : "The generated API route uses the Vercel AI SDK."
         : "";
 
   return `${skillMessage}
diff --git a/packages/openui-cli/src/index.ts b/packages/openui-cli/src/index.ts
index 8ece6f7ae..c4d5dc7de 100644
--- a/packages/openui-cli/src/index.ts
+++ b/packages/openui-cli/src/index.ts
@@ -78,8 +78,8 @@ Templates:
 
 Backend frameworks:
   none       Direct OpenAI SDK route (default).
-  langgraph  LangGraph orchestration around the selected backend.
-  vercel     Vercel AI SDK integration with the selected backend.
+  langgraph  LangGraph tools with the selected backend.
+  vercel     Vercel AI SDK tools with the selected backend.
 `,
   )
   .action(
diff --git a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
index 806cd09f6..fa9e36f66 100644
--- a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
+++ b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
@@ -1,83 +1,99 @@
 import { requiredEnv } from "@/lib/env";
 import { resolveRequestedModel } from "@/lib/models";
-import { runFunctionToolLoop } from "@/lib/tool-loop";
-import { executeGetWeather, getWeatherTool } from "@/lib/tools/get-weather";
-import {
-  Annotation,
-  END,
-  START,
-  StateGraph,
-  type LangGraphRunnableConfig,
-} from "@langchain/langgraph";
+import { runFunctionToolLoop, type FunctionToolExecutor } from "@/lib/tool-loop";
+import { executeGetWeather } from "@/lib/tools/get-weather";
+import { AIMessage, ToolMessage } from "@langchain/core/messages";
+import { tool } from "@langchain/core/tools";
+import { convertToOpenAIFunction } from "@langchain/core/utils/function_calling";
+import { ToolNode } from "@langchain/langgraph/prebuilt";
 import { artifactTool, generateSystemPrompt } from "@openuidev/thesys-server";
 import { NextResponse } from "next/server";
 import OpenAI from "openai";
 import type {
+  FunctionTool,
   ResponseCreateParamsNonStreaming,
   ResponseInputItem,
   Tool,
 } from "openai/resources/responses/responses";
+import { z } from "zod";
 
 export const runtime = "nodejs";
 
-const CloudState = Annotation.Root({
-  threadId: Annotation<string>(),
-  input: Annotation<ResponseInputItem[]>(),
-  model: Annotation<string>(),
-});
-
-async function callCloud(
-  state: typeof CloudState.State,
-  config: LangGraphRunnableConfig,
-): Promise<Record<string, never>> {
-  if (!config.writer) throw new Error("LangGraph custom stream writer is unavailable");
-
-  const client = new OpenAI({
-    baseURL: "https://api.thesys.dev/v1/embed",
-    apiKey: requiredEnv("THESYS_API_KEY"),
-  });
-  const functionTools = {
-    [getWeatherTool.name]: executeGetWeather,
-  };
-  const createParams: ResponseCreateParamsNonStreaming = {
-    model: state.model,
-    conversation: state.threadId,
-    input: state.input,
-    store: true,
-    tools: [
-      artifactTool({ artifacts: ["slides", "report"] }) as unknown as Tool,
-      { type: "web_search" },
-      { type: "image_search" } as unknown as Tool,
-      getWeatherTool,
-    ],
-    instructions: generateSystemPrompt(),
-  };
-
-  const firstStream = (await client.responses.create(
-    { ...createParams, stream: true },
-    { signal: config.signal },
-  )) as unknown as AsyncIterable<Record<string, unknown>>;
+/**
+ * App-owned tools are defined with LangChain and executed by LangGraph.
+ * Add your own tools here; OpenUI Cloud's built-in tools stay in createParams.
+ */
+const getWeather = tool(
+  async ({ location }, config) =>
+    executeGetWeather(JSON.stringify({ location }), { signal: config.signal }),
+  {
+    name: "get_weather",
+    description:
+      "Get the current weather for a city or place name. Use whenever the user " +
+      "asks about weather, temperature, rain, or what to wear.",
+    schema: z.object({
+      location: z.string().min(1).describe("City or place name, e.g. Berlin."),
+    }),
+  },
+);
 
-  await runFunctionToolLoop({
-    client,
-    createParams,
-    firstStream,
-    tools: functionTools,
-    enqueue: (event) => config.writer?.(event),
-    signal: config.signal,
-  });
-  return {};
+const appTools = [getWeather];
+const appToolNames = new Set<string>();
+for (const appTool of appTools) {
+  if (appTool.name.startsWith("thesys_")) {
+    throw new Error(`App tool names cannot use the reserved thesys_ prefix: ${appTool.name}`);
+  }
+  if (appToolNames.has(appTool.name)) {
+    throw new Error(`Duplicate app tool name: ${appTool.name}`);
+  }
+  appToolNames.add(appTool.name);
 }
+const appToolNode = new ToolNode(appTools);
+const appToolDefinitions = appTools.map(
+  (appTool) =>
+    ({
+      type: "function",
+      ...convertToOpenAIFunction(appTool, { strict: false }),
+    }) as FunctionTool,
+);
 
-const graph = new StateGraph(CloudState)
-  .addNode("cloud", callCloud)
-  .addEdge(START, "cloud")
-  .addEdge("cloud", END)
-  .compile();
+// Bridge OpenUI Cloud Responses function calls into LangGraph's ToolNode.
+const functionTools = Object.fromEntries(
+  appTools.map((appTool) => [
+    appTool.name,
+    async (argsJson: string, ctx: { callId: string; signal?: AbortSignal }) => {
+      const args = JSON.parse(argsJson || "{}") as Record<string, unknown>;
+      const result = (await appToolNode.invoke(
+        {
+          messages: [
+            new AIMessage({
+              content: "",
+              tool_calls: [
+                {
+                  type: "tool_call",
+                  id: ctx.callId,
+                  name: appTool.name,
+                  args,
+                },
+              ],
+            }),
+          ],
+        },
+        { signal: ctx.signal },
+      )) as { messages?: unknown[] };
+      const output = result.messages?.at(-1);
+      if (!ToolMessage.isInstance(output)) {
+        throw new Error(`LangGraph did not return a result for ${appTool.name}`);
+      }
+      return typeof output.content === "string" ? output.content : JSON.stringify(output.content);
+    },
+  ]),
+) as Record<string, FunctionToolExecutor>;
 
 /**
- * LangGraph owns orchestration; OpenUI Cloud remains the Responses provider.
- * Custom stream mode preserves every Cloud event for openAIResponsesAdapter.
+ * OpenUI Cloud remains the OpenAI-compatible Responses provider and owns its
+ * conversations, artifacts, search, and MCP tools. LangGraph is used only for
+ * application-owned function tools declared above.
  */
 export async function POST(req: Request) {
   const {
@@ -102,49 +118,68 @@ export async function POST(req: Request) {
   if (req.signal.aborted) abortFromRequest();
   else req.signal.addEventListener("abort", abortFromRequest, { once: true });
 
-  let iterator: AsyncIterator<Record<string, unknown>>;
-  let first: IteratorResult<Record<string, unknown>>;
+  const client = new OpenAI({
+    baseURL: "https://api.thesys.dev/v1/embed",
+    apiKey: requiredEnv("THESYS_API_KEY"),
+  });
+  const createParams: ResponseCreateParamsNonStreaming = {
+    model,
+    conversation: threadId,
+    input: messages.slice(-1),
+    store: true,
+    tools: [
+      // These tools execute inside OpenUI Cloud.
+      artifactTool({ artifacts: ["slides", "report"] }) as unknown as Tool,
+      { type: "web_search" },
+      { type: "image_search" } as unknown as Tool,
+      // These tools execute in this application through LangGraph.
+      ...appToolDefinitions,
+    ],
+    instructions: generateSystemPrompt(),
+  };
+
+  let stream: AsyncIterable<Record<string, unknown>>;
   try {
-    const events = (await graph.stream(
-      { threadId, input: messages.slice(-1), model },
-      { streamMode: "custom", signal: abortController.signal },
-    )) as AsyncIterable<Record<string, unknown>>;
-    iterator = events[Symbol.asyncIterator]();
-    // Start the graph before committing a 200 response so upstream HTTP errors
-    // still reach the browser with their original status.
-    first = await iterator.next();
+    stream = (await client.responses.create(
+      { ...createParams, stream: true },
+      { signal: abortController.signal },
+    )) as unknown as AsyncIterable<Record<string, unknown>>;
   } catch (err) {
     req.signal.removeEventListener("abort", abortFromRequest);
     return upstreamError(err);
   }
 
   const encoder = new TextEncoder();
-  const encode = (event: Record<string, unknown>) =>
-    encoder.encode(`data: ${JSON.stringify(event)}\n\n`);
   let cancelled = false;
   const body = new ReadableStream<Uint8Array>({
     async start(controller) {
+      const enqueue = (event: Record<string, unknown>) => {
+        if (!cancelled) controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
+      };
       try {
-        if (!first.done) controller.enqueue(encode(first.value));
-        for (;;) {
-          const next = await iterator.next();
-          if (next.done) break;
-          controller.enqueue(encode(next.value));
-        }
+        await runFunctionToolLoop({
+          client,
+          createParams,
+          firstStream: stream,
+          tools: functionTools,
+          enqueue,
+          signal: abortController.signal,
+        });
       } catch (err) {
         if (cancelled) return;
-        controller.enqueue(
-          encode({ type: "error", message: err instanceof Error ? err.message : String(err) }),
-        );
+        enqueue({
+          type: "error",
+          message: err instanceof Error ? err.message : String(err),
+        });
       } finally {
         req.signal.removeEventListener("abort", abortFromRequest);
         if (!cancelled) controller.close();
       }
     },
-    async cancel(reason) {
+    cancel(reason) {
       cancelled = true;
+      req.signal.removeEventListener("abort", abortFromRequest);
       abortController.abort(reason);
-      await iterator.return?.();
     },
   });
 
diff --git a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts
index e8b1a9111..aaf8d799d 100644
--- a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts
+++ b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts
@@ -1,98 +1,99 @@
 import { requiredEnv } from "@/lib/env";
 import { resolveRequestedModel } from "@/lib/models";
-import { runFunctionToolLoop } from "@/lib/tool-loop";
-import { executeGetWeather, getWeatherTool } from "@/lib/tools/get-weather";
-import { createOpenAI } from "@ai-sdk/openai";
+import { runFunctionToolLoop, type FunctionToolExecutor } from "@/lib/tool-loop";
+import { executeGetWeather } from "@/lib/tools/get-weather";
 import { artifactTool, generateSystemPrompt } from "@openuidev/thesys-server";
+import { asSchema, tool, type ToolSet } from "ai";
 import { NextResponse } from "next/server";
-import type OpenAI from "openai";
+import OpenAI from "openai";
 import type {
+  FunctionTool,
   ResponseCreateParamsNonStreaming,
   ResponseInputItem,
   Tool,
 } from "openai/resources/responses/responses";
+import { z } from "zod";
 
 export const runtime = "nodejs";
 
-type CloudCreateParams = Omit<ResponseCreateParamsNonStreaming, "stream"> & {
-  stream?: boolean;
-};
-
-type ProviderChunk = {
-  type: string;
-  rawValue?: unknown;
-};
+/**
+ * App-owned tools are defined with the Vercel AI SDK and execute on this
+ * server. Add your own tools here; OpenUI Cloud's built-ins stay separate.
+ */
+const appTools = {
+  get_weather: tool({
+    description:
+      "Get the current weather for a city or place name. Use whenever the user " +
+      "asks about weather, temperature, rain, or what to wear.",
+    inputSchema: z.object({
+      location: z.string().min(1).describe("City or place name, e.g. Berlin."),
+    }),
+    execute: async ({ location }, { abortSignal }) =>
+      executeGetWeather(JSON.stringify({ location }), { signal: abortSignal }),
+  }),
+} satisfies ToolSet;
 
 /**
- * Use the AI SDK's documented custom fetch hook to pass through OpenUI Cloud's
- * Responses extensions. The provider natively handles Responses SSE, while the
- * hook preserves exact ResponseInputItem values plus artifact/image_search tools
- * that are not yet represented by @ai-sdk/openai's typed tool registry.
+ * The AI SDK normally owns the model transport as well as its tool loop. Here
+ * OpenUI Cloud must remain the Responses transport, so this adapter exposes AI
+ * SDK tools as Responses declarations and local executors for our shared loop.
  */
-async function createResponsesStream(
-  createParams: CloudCreateParams,
-  signal?: AbortSignal,
-): Promise<AsyncIterable<Record<string, unknown>>> {
-  const cloud = createOpenAI({
-    name: "openui-cloud",
-    baseURL: "https://api.thesys.dev/v1/embed",
-    apiKey: requiredEnv("THESYS_API_KEY"),
-    fetch: async (input, init) => {
-      if (!init || typeof init.body !== "string") {
-        throw new Error("Expected a JSON Responses request body");
-      }
-      const providerBody = JSON.parse(init.body) as Record<string, unknown>;
-      return fetch(input, {
-        ...init,
-        body: JSON.stringify({ ...providerBody, ...createParams, stream: true }),
+async function prepareAppTools(tools: ToolSet): Promise<{
+  definitions: FunctionTool[];
+  executors: Record<string, FunctionToolExecutor>;
+}> {
+  const definitions: FunctionTool[] = [];
+  const executors: Record<string, FunctionToolExecutor> = {};
+
+  for (const [name, appTool] of Object.entries(tools)) {
+    if (name.startsWith("thesys_")) {
+      throw new Error(`App tool names cannot use the reserved thesys_ prefix: ${name}`);
+    }
+    if (appTool.type && appTool.type !== "function") {
+      throw new Error(`Only application function tools are supported here: ${name}`);
+    }
+    if (appTool.needsApproval) {
+      throw new Error(`Tool approval is not configured for: ${name}`);
+    }
+    const execute = appTool.execute;
+    if (!execute) throw new Error(`Tool ${name} must provide an execute function`);
+
+    const schema = asSchema(appTool.inputSchema);
+    definitions.push({
+      type: "function",
+      name,
+      description: appTool.description,
+      parameters: (await schema.jsonSchema) as Record<string, unknown>,
+      strict: appTool.strict ?? false,
+    });
+
+    executors[name] = async (argsJson, { callId, signal }) => {
+      const input = JSON.parse(argsJson || "{}") as unknown;
+      const validation = schema.validate
+        ? await schema.validate(input)
+        : ({ success: true, value: input } as const);
+      if (!validation.success) throw validation.error;
+
+      const output = await execute(validation.value, {
+        toolCallId: callId,
+        messages: [],
+        abortSignal: signal,
       });
-    },
-  });
-
-  const result = await cloud.responses(String(createParams.model)).doStream({
-    // The transport hook replaces this placeholder with createParams.input.
-    prompt: [{ role: "user", content: [{ type: "text", text: "" }] }],
-    includeRawChunks: true,
-    abortSignal: signal,
-  });
-
-  return rawResponseEvents(result.stream as ReadableStream<ProviderChunk>);
-}
-
-async function* rawResponseEvents(
-  stream: ReadableStream<ProviderChunk>,
-): AsyncIterable<Record<string, unknown>> {
-  const reader = stream.getReader();
-  let completed = false;
-  try {
-    for (;;) {
-      const { done, value } = await reader.read();
-      if (done) {
-        completed = true;
-        return;
-      }
-      if (value.type === "raw" && typeof value.rawValue === "object" && value.rawValue !== null) {
-        yield value.rawValue as Record<string, unknown>;
+      if (output !== null && typeof output === "object" && Symbol.asyncIterator in output) {
+        throw new Error(`Streaming tool results are not supported for: ${name}`);
       }
-    }
-  } finally {
-    if (!completed) await reader.cancel().catch(() => undefined);
-    reader.releaseLock();
+      if (typeof output === "string") return output;
+      return JSON.stringify(output) ?? String(output);
+    };
   }
-}
 
-function createCloudClient(): OpenAI {
-  return {
-    responses: {
-      create: (params: CloudCreateParams, options?: { signal?: AbortSignal }) =>
-        createResponsesStream(params, options?.signal),
-    },
-  } as unknown as OpenAI;
+  return { definitions, executors };
 }
 
 /**
- * Vercel AI SDK owns the Responses transport; OpenUI Cloud still owns model
- * routing, conversations, server-side tools, artifacts, and billing.
+ * OpenUI Cloud remains the OpenAI-compatible Responses provider and owns its
+ * conversations, artifacts, search, and MCP tools. The Vercel AI SDK is used
+ * only for application-owned function tools declared above.
  */
 export async function POST(req: Request) {
   const {
@@ -117,20 +118,24 @@ export async function POST(req: Request) {
   if (req.signal.aborted) abortFromRequest();
   else req.signal.addEventListener("abort", abortFromRequest, { once: true });
 
-  const client = createCloudClient();
-  const functionTools = {
-    [getWeatherTool.name]: executeGetWeather,
-  };
+  const client = new OpenAI({
+    baseURL: "https://api.thesys.dev/v1/embed",
+    apiKey: requiredEnv("THESYS_API_KEY"),
+  });
+  const { definitions: appToolDefinitions, executors: functionTools } =
+    await prepareAppTools(appTools);
   const createParams: ResponseCreateParamsNonStreaming = {
     model,
     conversation: threadId,
     input: messages.slice(-1),
     store: true,
     tools: [
+      // These tools execute inside OpenUI Cloud.
       artifactTool({ artifacts: ["slides", "report"] }) as unknown as Tool,
       { type: "web_search" },
       { type: "image_search" } as unknown as Tool,
-      getWeatherTool,
+      // These tools execute in this application through the Vercel AI SDK.
+      ...appToolDefinitions,
     ],
     instructions: generateSystemPrompt(),
   };
@@ -151,7 +156,7 @@ export async function POST(req: Request) {
   const body = new ReadableStream<Uint8Array>({
     async start(controller) {
       const enqueue = (event: Record<string, unknown>) => {
-        controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
+        if (!cancelled) controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
       };
       try {
         await runFunctionToolLoop({
@@ -175,6 +180,7 @@ export async function POST(req: Request) {
     },
     cancel(reason) {
       cancelled = true;
+      req.signal.removeEventListener("abort", abortFromRequest);
       abortController.abort(reason);
     },
   });
@@ -196,11 +202,11 @@ function upstreamError(err: unknown): Response {
   const e = err as {
     status?: number;
     statusCode?: number;
-    data?: unknown;
+    error?: unknown;
     message?: string;
   };
   return NextResponse.json(
-    { error: e.data ?? { message: e.message ?? "upstream error" } },
+    { error: e.error ?? { message: e.message ?? "upstream error" } },
     { status: e.status ?? e.statusCode ?? 502 },
   );
 }
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/package-lock.json b/packages/openui-cli/src/templates/openui-self-hosted/package-lock.json
index 656560591..2b1246cbb 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/package-lock.json
+++ b/packages/openui-cli/src/templates/openui-self-hosted/package-lock.json
@@ -2675,18 +2675,18 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.2.17",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
-      "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+      "version": "19.2.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
+      "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
-      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-Bsc+QHgp+P/F02XDzNCY9jnZNCUuLki36KT7VKrTXXLdHf+vHMNZnW1rVu5DNW/rCK+fya3DATySbLM4yhtKUw==",
       "devOptional": true,
       "license": "MIT",
       "peerDependencies": {

From ef5a81239c6a311ffb8dd92196950f64e26c48e5 Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Wed, 5 Aug 2026 16:01:32 +0530
Subject: [PATCH 04/15] feat(cli): add backend diagnostic tool

---
 .../openui-cli/src/commands/create-app.ts     |  4 +--
 .../openui-cloud/_backend-routes/langgraph.ts | 27 +++++++++++--------
 .../openui-cloud/_backend-routes/vercel.ts    | 20 ++++++++------
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/packages/openui-cli/src/commands/create-app.ts b/packages/openui-cli/src/commands/create-app.ts
index d1d89d1ac..343469731 100644
--- a/packages/openui-cli/src/commands/create-app.ts
+++ b/packages/openui-cli/src/commands/create-app.ts
@@ -641,11 +641,11 @@ function getStartedMessage(o: {
   const frameworkNote =
     o.backendFramework === "langgraph"
       ? o.template === "openui-cloud"
-        ? "The generated route keeps OpenUI Cloud as the Responses backend and uses LangGraph for app-owned tools."
+        ? 'The generated route keeps OpenUI Cloud as the Responses backend and uses LangGraph for app-owned tools.\nAsk "Can you test the backend?" to run the included diagnostic tool.'
         : "The generated API route uses LangGraph."
       : o.backendFramework === "vercel"
         ? o.template === "openui-cloud"
-          ? "The generated route keeps OpenUI Cloud as the Responses backend and uses the Vercel AI SDK for app-owned tools."
+          ? 'The generated route keeps OpenUI Cloud as the Responses backend and uses the Vercel AI SDK for app-owned tools.\nAsk "Can you test the backend?" to run the included diagnostic tool.'
           : "The generated API route uses the Vercel AI SDK."
         : "";
 
diff --git a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
index fa9e36f66..d41959daf 100644
--- a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
+++ b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
@@ -1,7 +1,6 @@
 import { requiredEnv } from "@/lib/env";
 import { resolveRequestedModel } from "@/lib/models";
 import { runFunctionToolLoop, type FunctionToolExecutor } from "@/lib/tool-loop";
-import { executeGetWeather } from "@/lib/tools/get-weather";
 import { AIMessage, ToolMessage } from "@langchain/core/messages";
 import { tool } from "@langchain/core/tools";
 import { convertToOpenAIFunction } from "@langchain/core/utils/function_calling";
@@ -23,21 +22,27 @@ export const runtime = "nodejs";
  * App-owned tools are defined with LangChain and executed by LangGraph.
  * Add your own tools here; OpenUI Cloud's built-in tools stay in createParams.
  */
-const getWeather = tool(
-  async ({ location }, config) =>
-    executeGetWeather(JSON.stringify({ location }), { signal: config.signal }),
+const testBackend = tool(
+  async () =>
+    JSON.stringify({
+      ok: true,
+      tool: "test_backend",
+      framework: "langgraph",
+      execution: "app-owned",
+      verificationCode: "OPENUI_APP_TOOL_EXECUTION_OK",
+      checkedAt: new Date().toISOString(),
+      message: "The app-owned LangGraph ToolNode executed successfully.",
+    }),
   {
-    name: "get_weather",
+    name: "test_backend",
     description:
-      "Get the current weather for a city or place name. Use whenever the user " +
-      "asks about weather, temperature, rain, or what to wear.",
-    schema: z.object({
-      location: z.string().min(1).describe("City or place name, e.g. Berlin."),
-    }),
+      'Call whenever the user asks "Can you test the backend?" or asks to verify app-owned ' +
+      "tool execution. This tool must be called; do not answer from memory.",
+    schema: z.object({}),
   },
 );
 
-const appTools = [getWeather];
+const appTools = [testBackend];
 const appToolNames = new Set<string>();
 for (const appTool of appTools) {
   if (appTool.name.startsWith("thesys_")) {
diff --git a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts
index aaf8d799d..9f204c350 100644
--- a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts
+++ b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts
@@ -1,7 +1,6 @@
 import { requiredEnv } from "@/lib/env";
 import { resolveRequestedModel } from "@/lib/models";
 import { runFunctionToolLoop, type FunctionToolExecutor } from "@/lib/tool-loop";
-import { executeGetWeather } from "@/lib/tools/get-weather";
 import { artifactTool, generateSystemPrompt } from "@openuidev/thesys-server";
 import { asSchema, tool, type ToolSet } from "ai";
 import { NextResponse } from "next/server";
@@ -21,15 +20,20 @@ export const runtime = "nodejs";
  * server. Add your own tools here; OpenUI Cloud's built-ins stay separate.
  */
 const appTools = {
-  get_weather: tool({
+  test_backend: tool({
     description:
-      "Get the current weather for a city or place name. Use whenever the user " +
-      "asks about weather, temperature, rain, or what to wear.",
-    inputSchema: z.object({
-      location: z.string().min(1).describe("City or place name, e.g. Berlin."),
+      'Call whenever the user asks "Can you test the backend?" or asks to verify app-owned ' +
+      "tool execution. This tool must be called; do not answer from memory.",
+    inputSchema: z.object({}),
+    execute: async () => ({
+      ok: true,
+      tool: "test_backend",
+      framework: "vercel-ai-sdk",
+      execution: "app-owned",
+      verificationCode: "OPENUI_APP_TOOL_EXECUTION_OK",
+      checkedAt: new Date().toISOString(),
+      message: "The app-owned Vercel AI SDK tool executor ran successfully.",
     }),
-    execute: async ({ location }, { abortSignal }) =>
-      executeGetWeather(JSON.stringify({ location }), { signal: abortSignal }),
   }),
 } satisfies ToolSet;
 

From c2b54e8527e29d74c8b413899cb00d77c5f1c47f Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Wed, 5 Aug 2026 16:40:38 +0530
Subject: [PATCH 05/15] fix(cli): restore weather tool and AI SDK name

---
 packages/openui-cli/README.md                 | 14 +++++-----
 .../openui-cli/src/commands/create-app.ts     | 12 ++++-----
 packages/openui-cli/src/index.ts              |  8 +++---
 packages/openui-cli/src/lib/create-types.ts   |  2 +-
 packages/openui-cli/src/lib/utils.ts          |  6 +++--
 .../openui-cloud/_backend-routes/langgraph.ts | 27 ++++++++-----------
 .../{vercel.ts => vercel-ai-sdk.ts}           | 20 ++++++--------
 .../{vercel.ts => vercel-ai-sdk.ts}           |  2 +-
 8 files changed, 43 insertions(+), 48 deletions(-)
 rename packages/openui-cli/src/templates/openui-cloud/_backend-routes/{vercel.ts => vercel-ai-sdk.ts} (92%)
 rename packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/{vercel.ts => vercel-ai-sdk.ts} (99%)

diff --git a/packages/openui-cli/README.md b/packages/openui-cli/README.md
index 05f8c2985..002cd2f31 100644
--- a/packages/openui-cli/README.md
+++ b/packages/openui-cli/README.md
@@ -44,9 +44,9 @@ Choose a backend framework directly (the default is `none`, which uses the OpenA
 
 ```bash
 npx @openuidev/cli@latest create --template openui-cloud --backend-framework langgraph
-npx @openuidev/cli@latest create --template openui-cloud --backend-framework vercel
+npx @openuidev/cli@latest create --template openui-cloud --backend-framework vercel-ai-sdk
 npx @openuidev/cli@latest create --template openui-self-hosted --backend-framework langgraph
-npx @openuidev/cli@latest create --template openui-self-hosted --backend-framework vercel
+npx @openuidev/cli@latest create --template openui-self-hosted --backend-framework vercel-ai-sdk
 ```
 
 Generate a prompt from a library file:
@@ -75,7 +75,7 @@ Options:
 
 - `-n, --name <string>`: Project name (interactive default: `openui-agent`)
 - `-t, --template <template>`: AI backend — `openui-cloud` (managed) or `openui-self-hosted` (bring your provider)
-- `--backend-framework <framework>`: API route implementation — `none`, `langgraph`, or `vercel`
+- `--backend-framework <framework>`: API route implementation — `none`, `langgraph`, or `vercel-ai-sdk`
 - `--skill`: Install the OpenUI agent skill for AI coding assistants
 - `--no-skill`: Skip installing the OpenUI agent skill
 - `--no-install`: Scaffold without running the package install
@@ -110,10 +110,12 @@ What it does:
 | ----------- | --------------------------------------------------- | ------------------------------------------ |
 | `none`      | Direct OpenAI SDK Responses proxy                   | Direct OpenAI SDK Chat Completions proxy   |
 | `langgraph` | OpenAI SDK proxy + LangGraph app-tool execution     | LangGraph `StateGraph` using your provider |
-| `vercel`    | OpenAI SDK proxy + Vercel AI SDK app-tool execution | Vercel AI SDK `streamText()` route         |
+| `vercel-ai-sdk` | OpenAI SDK proxy + Vercel AI SDK app-tool execution | Vercel AI SDK `streamText()` route         |
 
 The CLI replaces `src/app/api/chat/route.ts` and adds the dependencies for the selected framework. Every Cloud combination keeps the OpenAI SDK pointed at OpenUI Cloud, preserving the raw Responses stream and managed conversation storage. Artifacts, web search, image search, and configured MCP tools still execute in Cloud; selecting LangGraph or Vercel AI SDK only changes how application-owned function tools are defined and executed on your server. It does not configure a user-owned model provider. Choose `openui-self-hosted` when you want to bring your own provider.
 
+Every Cloud route includes `get_weather` as its example app-owned function tool. The LangGraph and Vercel AI SDK variants define and execute that tool through the selected framework while leaving Cloud-owned tools unchanged.
+
 #### Template-specific `.env`
 
 - **OpenUI Cloud** — obtains an OpenUI Cloud API key and writes `THESYS_API_KEY` plus `DEMO_USER_ID=demo-user` to `.env`. The key is resolved by, in order:
@@ -131,10 +133,10 @@ Examples:
 openui create
 openui create --name my-app --template openui-self-hosted
 openui create --name my-app --template openui-self-hosted --backend-framework langgraph
-openui create --name my-app --template openui-self-hosted --backend-framework vercel
+openui create --name my-app --template openui-self-hosted --backend-framework vercel-ai-sdk
 openui create --name my-app --template openui-cloud --auth oauth
 openui create --name my-app --template openui-cloud --backend-framework langgraph --auth oauth
-openui create --name my-app --template openui-cloud --backend-framework vercel --auth oauth
+openui create --name my-app --template openui-cloud --backend-framework vercel-ai-sdk --auth oauth
 openui create --name my-app --template openui-cloud --api-key tk_your_key
 openui create --name my-app --template openui-self-hosted
 openui create --name my-app --template openui-cloud --immediate
diff --git a/packages/openui-cli/src/commands/create-app.ts b/packages/openui-cli/src/commands/create-app.ts
index 343469731..46b3d3f17 100644
--- a/packages/openui-cli/src/commands/create-app.ts
+++ b/packages/openui-cli/src/commands/create-app.ts
@@ -37,7 +37,7 @@ const backendDependencies: Record<
       "@langchain/core": "^1.2.1",
       "@langchain/langgraph": "^1.4.5",
     },
-    vercel: {
+    "vercel-ai-sdk": {
       ai: "^6.0.191",
       zod: "^4.3.6",
     },
@@ -49,7 +49,7 @@ const backendDependencies: Record<
       "@langchain/openai": "^1.5.2",
       zod: "^4.0.0",
     },
-    vercel: {
+    "vercel-ai-sdk": {
       "@ai-sdk/openai": "^3.0.65",
       ai: "^6.0.191",
       zod: "^4.3.6",
@@ -239,7 +239,7 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
                     name: "No framework — OpenAI SDK (default)",
                   },
                   { value: "langgraph", name: "LangGraph" },
-                  { value: "vercel", name: "Vercel AI SDK" },
+                  { value: "vercel-ai-sdk", name: "Vercel AI SDK" },
                 ],
               },
               required: true,
@@ -641,11 +641,11 @@ function getStartedMessage(o: {
   const frameworkNote =
     o.backendFramework === "langgraph"
       ? o.template === "openui-cloud"
-        ? 'The generated route keeps OpenUI Cloud as the Responses backend and uses LangGraph for app-owned tools.\nAsk "Can you test the backend?" to run the included diagnostic tool.'
+        ? 'The generated route keeps OpenUI Cloud as the Responses backend and uses LangGraph for app-owned tools.\nAsk "What\'s the weather in Berlin?" to exercise the included app-owned weather tool.'
         : "The generated API route uses LangGraph."
-      : o.backendFramework === "vercel"
+      : o.backendFramework === "vercel-ai-sdk"
         ? o.template === "openui-cloud"
-          ? 'The generated route keeps OpenUI Cloud as the Responses backend and uses the Vercel AI SDK for app-owned tools.\nAsk "Can you test the backend?" to run the included diagnostic tool.'
+          ? 'The generated route keeps OpenUI Cloud as the Responses backend and uses the Vercel AI SDK for app-owned tools.\nAsk "What\'s the weather in Berlin?" to exercise the included app-owned weather tool.'
           : "The generated API route uses the Vercel AI SDK."
         : "";
 
diff --git a/packages/openui-cli/src/index.ts b/packages/openui-cli/src/index.ts
index c4d5dc7de..28c7e2114 100644
--- a/packages/openui-cli/src/index.ts
+++ b/packages/openui-cli/src/index.ts
@@ -56,7 +56,7 @@ program
     "-t, --template <template>",
     "AI backend: openui-cloud (recommended default) | openui-self-hosted (infrastructure control)",
   )
-  .option("--backend-framework <framework>", "Backend route: none | langgraph | vercel")
+  .option("--backend-framework <framework>", "Backend route: none | langgraph | vercel-ai-sdk")
   .option("--api-key <key>", "OpenUI Cloud API key (cloud template; skips sign-in)")
   .option("--auth <method>", "Cloud auth method: oauth | skip (manual is deprecated)")
   .option("--skill", "Install the OpenUI agent skill for AI coding assistants")
@@ -77,9 +77,9 @@ Templates:
                       and persistence is a requirement.
 
 Backend frameworks:
-  none       Direct OpenAI SDK route (default).
-  langgraph  LangGraph tools with the selected backend.
-  vercel     Vercel AI SDK tools with the selected backend.
+  none           Direct OpenAI SDK route (default).
+  langgraph      LangGraph tools with the selected backend.
+  vercel-ai-sdk  Vercel AI SDK tools with the selected backend.
 `,
   )
   .action(
diff --git a/packages/openui-cli/src/lib/create-types.ts b/packages/openui-cli/src/lib/create-types.ts
index f5c21fb65..1b8939856 100644
--- a/packages/openui-cli/src/lib/create-types.ts
+++ b/packages/openui-cli/src/lib/create-types.ts
@@ -2,7 +2,7 @@ import type { CloudAuthMethod, ResolvedAuthMethod } from "../auth/mint";
 
 export type TemplateName = "openui-self-hosted" | "openui-cloud";
 
-export type BackendFramework = "none" | "langgraph" | "vercel";
+export type BackendFramework = "none" | "langgraph" | "vercel-ai-sdk";
 
 export interface CreateAppOptions {
   name?: string;
diff --git a/packages/openui-cli/src/lib/utils.ts b/packages/openui-cli/src/lib/utils.ts
index 154a35f35..fbdaec959 100644
--- a/packages/openui-cli/src/lib/utils.ts
+++ b/packages/openui-cli/src/lib/utils.ts
@@ -46,10 +46,12 @@ export function normalizeBackendFramework(framework?: string): BackendFramework
   const value = framework.toLowerCase();
   if (value === "none" || value === "no-framework") return "none";
   if (value === "langgraph" || value === "lang-graph") return "langgraph";
-  if (value === "vercel" || value === "vercel-ai-sdk" || value === "ai-sdk") return "vercel";
+  if (value === "vercel" || value === "vercel-ai-sdk" || value === "ai-sdk") {
+    return "vercel-ai-sdk";
+  }
   throw new CreateError(
     "bad_args",
-    `unknown backend framework "${framework}". Use: none | langgraph | vercel.`,
+    `unknown backend framework "${framework}". Use: none | langgraph | vercel-ai-sdk.`,
   );
 }
 
diff --git a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
index d41959daf..fa9e36f66 100644
--- a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
+++ b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
@@ -1,6 +1,7 @@
 import { requiredEnv } from "@/lib/env";
 import { resolveRequestedModel } from "@/lib/models";
 import { runFunctionToolLoop, type FunctionToolExecutor } from "@/lib/tool-loop";
+import { executeGetWeather } from "@/lib/tools/get-weather";
 import { AIMessage, ToolMessage } from "@langchain/core/messages";
 import { tool } from "@langchain/core/tools";
 import { convertToOpenAIFunction } from "@langchain/core/utils/function_calling";
@@ -22,27 +23,21 @@ export const runtime = "nodejs";
  * App-owned tools are defined with LangChain and executed by LangGraph.
  * Add your own tools here; OpenUI Cloud's built-in tools stay in createParams.
  */
-const testBackend = tool(
-  async () =>
-    JSON.stringify({
-      ok: true,
-      tool: "test_backend",
-      framework: "langgraph",
-      execution: "app-owned",
-      verificationCode: "OPENUI_APP_TOOL_EXECUTION_OK",
-      checkedAt: new Date().toISOString(),
-      message: "The app-owned LangGraph ToolNode executed successfully.",
-    }),
+const getWeather = tool(
+  async ({ location }, config) =>
+    executeGetWeather(JSON.stringify({ location }), { signal: config.signal }),
   {
-    name: "test_backend",
+    name: "get_weather",
     description:
-      'Call whenever the user asks "Can you test the backend?" or asks to verify app-owned ' +
-      "tool execution. This tool must be called; do not answer from memory.",
-    schema: z.object({}),
+      "Get the current weather for a city or place name. Use whenever the user " +
+      "asks about weather, temperature, rain, or what to wear.",
+    schema: z.object({
+      location: z.string().min(1).describe("City or place name, e.g. Berlin."),
+    }),
   },
 );
 
-const appTools = [testBackend];
+const appTools = [getWeather];
 const appToolNames = new Set<string>();
 for (const appTool of appTools) {
   if (appTool.name.startsWith("thesys_")) {
diff --git a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel-ai-sdk.ts
similarity index 92%
rename from packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts
rename to packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel-ai-sdk.ts
index 9f204c350..aaf8d799d 100644
--- a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel.ts
+++ b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel-ai-sdk.ts
@@ -1,6 +1,7 @@
 import { requiredEnv } from "@/lib/env";
 import { resolveRequestedModel } from "@/lib/models";
 import { runFunctionToolLoop, type FunctionToolExecutor } from "@/lib/tool-loop";
+import { executeGetWeather } from "@/lib/tools/get-weather";
 import { artifactTool, generateSystemPrompt } from "@openuidev/thesys-server";
 import { asSchema, tool, type ToolSet } from "ai";
 import { NextResponse } from "next/server";
@@ -20,20 +21,15 @@ export const runtime = "nodejs";
  * server. Add your own tools here; OpenUI Cloud's built-ins stay separate.
  */
 const appTools = {
-  test_backend: tool({
+  get_weather: tool({
     description:
-      'Call whenever the user asks "Can you test the backend?" or asks to verify app-owned ' +
-      "tool execution. This tool must be called; do not answer from memory.",
-    inputSchema: z.object({}),
-    execute: async () => ({
-      ok: true,
-      tool: "test_backend",
-      framework: "vercel-ai-sdk",
-      execution: "app-owned",
-      verificationCode: "OPENUI_APP_TOOL_EXECUTION_OK",
-      checkedAt: new Date().toISOString(),
-      message: "The app-owned Vercel AI SDK tool executor ran successfully.",
+      "Get the current weather for a city or place name. Use whenever the user " +
+      "asks about weather, temperature, rain, or what to wear.",
+    inputSchema: z.object({
+      location: z.string().min(1).describe("City or place name, e.g. Berlin."),
     }),
+    execute: async ({ location }, { abortSignal }) =>
+      executeGetWeather(JSON.stringify({ location }), { signal: abortSignal }),
   }),
 } satisfies ToolSet;
 
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel.ts b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel-ai-sdk.ts
similarity index 99%
rename from packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel.ts
rename to packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel-ai-sdk.ts
index 3c39dc3cd..9238d3f89 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel.ts
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel-ai-sdk.ts
@@ -14,7 +14,7 @@ const openai = createOpenAI({
 
 function sseChunk(delta: Record<string, unknown>, finishReason: string | null = null) {
   return `data: ${JSON.stringify({
-    id: "vercel-ai-chat",
+    id: "vercel-ai-sdk-chat",
     object: "chat.completion.chunk",
     model: modelName,
     choices: [{ index: 0, delta, finish_reason: finishReason }],

From be3a53e7ea6686772d5072d30dabe89774bdb89f Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Wed, 5 Aug 2026 17:14:22 +0530
Subject: [PATCH 06/15] fix(cli): block dev start without api key

---
 packages/openui-cli/README.md                 |  3 +-
 .../openui-cli/src/commands/create-app.ts     | 49 +++++++++++++------
 2 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/packages/openui-cli/README.md b/packages/openui-cli/README.md
index 002cd2f31..20fa0544e 100644
--- a/packages/openui-cli/README.md
+++ b/packages/openui-cli/README.md
@@ -79,7 +79,7 @@ Options:
 - `--skill`: Install the OpenUI agent skill for AI coding assistants
 - `--no-skill`: Skip installing the OpenUI agent skill
 - `--no-install`: Scaffold without running the package install
-- `-i, --immediate`: Start the development server after installing dependencies
+- `-i, --immediate`: Start the development server after installing dependencies; the CLI refuses to start when the template's required API key is unavailable
 - `--no-immediate`: Install dependencies without starting the development server
 - `--no-interactive`: Fail instead of prompting for missing required input
 - `--api-key <key>`: (cloud template) OpenUI Cloud API key; skips sign-in
@@ -96,6 +96,7 @@ What it does:
 - asks whether to start the development server after dependency installation (default: yes); answering no preserves the install-and-exit behavior
 - installs dependencies automatically using the detected package manager (unless `--no-install`)
 - in non-interactive mode, installs dependencies without starting the server unless overridden with `--immediate`
+- before an immediate start, requires `THESYS_API_KEY` for OpenUI Cloud or `OPENAI_API_KEY` for self-hosted to be available
 - optionally installs the OpenUI agent skill for AI coding assistants
 - writes a `.env` file tailored to the template (see below)
 
diff --git a/packages/openui-cli/src/commands/create-app.ts b/packages/openui-cli/src/commands/create-app.ts
index 46b3d3f17..9891ad8b8 100644
--- a/packages/openui-cli/src/commands/create-app.ts
+++ b/packages/openui-cli/src/commands/create-app.ts
@@ -84,6 +84,10 @@ function buildAppId(name: string): string {
   return `${slug}-${Math.random().toString(36).slice(2, 8)}`;
 }
 
+function requiredApiKeyEnv(template: TemplateName): "THESYS_API_KEY" | "OPENAI_API_KEY" {
+  return template === "openui-cloud" ? "THESYS_API_KEY" : "OPENAI_API_KEY";
+}
+
 function rewritePackageJson(
   projectDir: string,
   name: string,
@@ -309,6 +313,9 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
     options.noInstall,
     interactive,
   );
+  const apiKeyEnv = requiredApiKeyEnv(template);
+  const apiKeyAvailable = envResult.envWritten || Boolean(process.env[apiKeyEnv]?.trim());
+  const devStartBlockedByMissingApiKey = immediateResolution.immediate && !apiKeyAvailable;
   telemetry.capture("cli_immediate_selected", {
     immediate: immediateResolution.immediate,
     dependency_install_requested: immediateResolution.installDependencies,
@@ -424,7 +431,8 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
   }
 
   const devCmd = packageManager.runCmd;
-  const startDev = immediateResolution.immediate && dependencyInstalled;
+  const startDev =
+    immediateResolution.immediate && dependencyInstalled && !devStartBlockedByMissingApiKey;
 
   telemetry.capture("cli_create_succeeded", {
     ...createFunnelProps("create_succeeded"),
@@ -444,11 +452,26 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
       skillInstalled: installSkill,
       envWritten: envResult.envWritten,
       startDev,
+      devStartBlockedByMissingApiKey,
       installCmd,
       dependencyInstalled,
     }),
   );
 
+  if (devStartBlockedByMissingApiKey) {
+    telemetry.capture("cli_dev_command_skipped", {
+      skip_reason: "missing_api_key",
+      required_env: apiKeyEnv,
+    });
+    console.error(
+      `Error: Development server not started because ${apiKeyEnv} is missing.\n` +
+        `Set ${apiKeyEnv}=… in ${name}/.env, then run:\n\n` +
+        `> cd ${name}\n> ${devCmd} run dev\n`,
+    );
+    process.exitCode = 1;
+    return;
+  }
+
   if (!startDev) {
     telemetry.capture("cli_dev_command_skipped", {
       skip_reason: options.noInstall ? "dependencies_not_installed" : "not_immediate",
@@ -614,6 +637,7 @@ function getStartedMessage(o: {
   skillInstalled: boolean;
   envWritten: boolean;
   startDev: boolean;
+  devStartBlockedByMissingApiKey: boolean;
   installCmd: string;
   dependencyInstalled: boolean;
 }): string {
@@ -632,11 +656,13 @@ function getStartedMessage(o: {
 
   const nextStep = o.startDev
     ? `Starting the development server in "${o.name}"...\n\n> ${o.devCmd} run dev`
-    : [
-        `> cd ${o.name}`,
-        ...(o.dependencyInstalled ? [] : [`> ${o.installCmd}`]),
-        `> ${o.devCmd} run dev`,
-      ].join("\n");
+    : o.devStartBlockedByMissingApiKey
+      ? ""
+      : [
+          `> cd ${o.name}`,
+          ...(o.dependencyInstalled ? [] : [`> ${o.installCmd}`]),
+          `> ${o.devCmd} run dev`,
+        ].join("\n");
 
   const frameworkNote =
     o.backendFramework === "langgraph"
@@ -649,12 +675,7 @@ function getStartedMessage(o: {
           : "The generated API route uses the Vercel AI SDK."
         : "";
 
-  return `${skillMessage}
-Done!
-
-${envNote}
-${frameworkNote ? `\n${frameworkNote}\n` : ""}
-
-${nextStep}
-`;
+  return `${[skillMessage.trim(), "Done!", envNote, frameworkNote, nextStep]
+    .filter(Boolean)
+    .join("\n\n")}\n`;
 }

From 534e108226e46ea3eef358440f4bd4ba29c1e817 Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Wed, 5 Aug 2026 18:21:18 +0530
Subject: [PATCH 07/15] fix(cli): use native framework streams

---
 docs/content/docs/api-reference/cli.mdx       |  18 +-
 packages/openui-cli/README.md                 |  10 +-
 .../openui-cli/src/commands/create-app.ts     |  36 +-
 .../_backend-pages/langgraph.tsx              |  25 ++
 .../_backend-pages/vercel-ai-sdk-adapter.ts   | 344 ++++++++++++++++++
 .../_backend-pages/vercel-ai-sdk.tsx          |  21 ++
 .../_backend-routes/langgraph.ts              |  78 +---
 .../_backend-routes/vercel-ai-sdk.ts          | 243 +------------
 8 files changed, 456 insertions(+), 319 deletions(-)
 create mode 100644 packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/langgraph.tsx
 create mode 100644 packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk-adapter.ts
 create mode 100644 packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx

diff --git a/docs/content/docs/api-reference/cli.mdx b/docs/content/docs/api-reference/cli.mdx
index b0fb69690..8b3f8d74f 100644
--- a/docs/content/docs/api-reference/cli.mdx
+++ b/docs/content/docs/api-reference/cli.mdx
@@ -57,7 +57,7 @@ openui create [options]
 | --------------------------------- | ---------------------------------------------------------------- |
 | `-n, --name <string>`             | Project name (interactive default: `openui-agent`)               |
 | `-t, --template <template>`       | AI backend: `openui-cloud` (recommended) or `openui-self-hosted` |
-| `--backend-framework <framework>` | API route: `none`, `langgraph`, or `vercel`                      |
+| `--backend-framework <framework>` | Backend integration: `none`, `langgraph`, or `vercel-ai-sdk`     |
 | `--api-key <key>`                 | OpenUI Cloud API key; skips sign-in for the Cloud setup          |
 | `--auth <method>`                 | Cloud auth method: `oauth` or `skip`; `manual` is deprecated     |
 | `--skill`                         | Install the OpenUI agent skill for AI coding assistants          |
@@ -84,13 +84,13 @@ In non-interactive mode, dependencies are installed without starting the long-ru
 
 **Backend frameworks**
 
-| Value       | OpenUI Cloud route                                  | Self-hosted route                          |
-| ----------- | --------------------------------------------------- | ------------------------------------------ |
-| `none`      | Direct OpenAI SDK Responses proxy                   | Direct OpenAI SDK Chat Completions proxy   |
-| `langgraph` | OpenAI SDK proxy + LangGraph app-tool execution     | LangGraph `StateGraph` using your provider |
-| `vercel`    | OpenAI SDK proxy + Vercel AI SDK app-tool execution | Vercel AI SDK `streamText()` route         |
+| Value           | OpenUI Cloud route                                  | Self-hosted route                          |
+| --------------- | --------------------------------------------------- | ------------------------------------------ |
+| `none`          | Direct OpenAI SDK Responses proxy                   | Direct OpenAI SDK Chat Completions proxy   |
+| `langgraph`     | OpenAI SDK proxy + LangGraph app-tool execution     | LangGraph `StateGraph` using your provider |
+| `vercel-ai-sdk` | OpenAI SDK proxy + Vercel AI SDK app-tool execution | Vercel AI SDK `streamText()` route         |
 
-The CLI replaces `src/app/api/chat/route.ts` and adds the selected framework's dependencies. Every Cloud route keeps the OpenAI SDK pointed at OpenUI Cloud, preserving the raw Responses stream and managed conversation storage. Artifacts, web search, image search, and configured MCP tools still execute in Cloud; selecting LangGraph or Vercel AI SDK only changes how application-owned function tools are defined and executed on your server. Choose self-hosted to use your own model provider key.
+The CLI replaces `src/app/api/chat/route.ts` and adds the selected framework's dependencies. Self-hosted framework selections also switch `src/app/page.tsx` to the framework's frontend message format and stream adapter, so the route can return the native LangGraph or Vercel AI SDK stream. Every Cloud route keeps the OpenAI SDK pointed at OpenUI Cloud, preserving the raw Responses stream and managed conversation storage. Artifacts, web search, image search, and configured MCP tools still execute in Cloud; selecting LangGraph or Vercel AI SDK only changes how application-owned function tools are defined and executed on your server. Choose self-hosted to use your own model provider key.
 
 **Agent skill**
 
@@ -112,6 +112,7 @@ pnpx @openuidev/cli@latest create --name my-app --template openui-cloud --immedi
 # Select a backend framework explicitly
 pnpx @openuidev/cli@latest create --name my-app --template openui-cloud --backend-framework langgraph
 pnpx @openuidev/cli@latest create --name my-app --template openui-self-hosted --backend-framework langgraph
+pnpx @openuidev/cli@latest create --name my-app --template openui-self-hosted --backend-framework vercel-ai-sdk
 
 # Non-interactive
 pnpx @openuidev/cli@latest create --no-interactive --name my-app --template openui-cloud --auth skip
@@ -132,6 +133,7 @@ bunx @openuidev/cli@latest create --name my-app --template openui-self-hosted
 # Select a backend framework explicitly
 bunx @openuidev/cli@latest create --name my-app --template openui-cloud --backend-framework langgraph
 bunx @openuidev/cli@latest create --name my-app --template openui-self-hosted --backend-framework langgraph
+bunx @openuidev/cli@latest create --name my-app --template openui-self-hosted --backend-framework vercel-ai-sdk
 
 # Non-interactive
 bunx @openuidev/cli@latest create --no-interactive --name my-app --template openui-cloud --auth skip
@@ -152,6 +154,7 @@ yarn dlx @openuidev/cli@latest create --name my-app --template openui-self-hoste
 # Select a backend framework explicitly
 yarn dlx @openuidev/cli@latest create --name my-app --template openui-cloud --backend-framework langgraph
 yarn dlx @openuidev/cli@latest create --name my-app --template openui-self-hosted --backend-framework langgraph
+yarn dlx @openuidev/cli@latest create --name my-app --template openui-self-hosted --backend-framework vercel-ai-sdk
 
 # Non-interactive
 yarn dlx @openuidev/cli@latest create --no-interactive --name my-app --template openui-cloud --auth skip
@@ -172,6 +175,7 @@ npx @openuidev/cli@latest create --name my-app --template openui-self-hosted
 # Select a backend framework explicitly
 npx @openuidev/cli@latest create --name my-app --template openui-cloud --backend-framework langgraph
 npx @openuidev/cli@latest create --name my-app --template openui-self-hosted --backend-framework langgraph
+npx @openuidev/cli@latest create --name my-app --template openui-self-hosted --backend-framework vercel-ai-sdk
 
 # Non-interactive
 npx @openuidev/cli@latest create --no-interactive --name my-app --template openui-cloud --auth skip
diff --git a/packages/openui-cli/README.md b/packages/openui-cli/README.md
index 20fa0544e..7f18289cf 100644
--- a/packages/openui-cli/README.md
+++ b/packages/openui-cli/README.md
@@ -107,13 +107,13 @@ What it does:
 
 #### Backend frameworks
 
-| Value       | OpenUI Cloud route                                  | Self-hosted route                          |
-| ----------- | --------------------------------------------------- | ------------------------------------------ |
-| `none`      | Direct OpenAI SDK Responses proxy                   | Direct OpenAI SDK Chat Completions proxy   |
-| `langgraph` | OpenAI SDK proxy + LangGraph app-tool execution     | LangGraph `StateGraph` using your provider |
+| Value           | OpenUI Cloud route                                  | Self-hosted route                          |
+| --------------- | --------------------------------------------------- | ------------------------------------------ |
+| `none`          | Direct OpenAI SDK Responses proxy                   | Direct OpenAI SDK Chat Completions proxy   |
+| `langgraph`     | OpenAI SDK proxy + LangGraph app-tool execution     | LangGraph `StateGraph` using your provider |
 | `vercel-ai-sdk` | OpenAI SDK proxy + Vercel AI SDK app-tool execution | Vercel AI SDK `streamText()` route         |
 
-The CLI replaces `src/app/api/chat/route.ts` and adds the dependencies for the selected framework. Every Cloud combination keeps the OpenAI SDK pointed at OpenUI Cloud, preserving the raw Responses stream and managed conversation storage. Artifacts, web search, image search, and configured MCP tools still execute in Cloud; selecting LangGraph or Vercel AI SDK only changes how application-owned function tools are defined and executed on your server. It does not configure a user-owned model provider. Choose `openui-self-hosted` when you want to bring your own provider.
+The CLI replaces `src/app/api/chat/route.ts` and adds the dependencies for the selected framework. Self-hosted framework selections also switch `src/app/page.tsx` to the matching frontend message format and stream adapter, allowing LangGraph and the Vercel AI SDK to use their native streaming protocols instead of emulating OpenAI Chat Completions. Every Cloud combination keeps the OpenAI SDK pointed at OpenUI Cloud, preserving the raw Responses stream and managed conversation storage. Artifacts, web search, image search, and configured MCP tools still execute in Cloud; selecting LangGraph or Vercel AI SDK only changes how application-owned function tools are defined and executed on your server. It does not configure a user-owned model provider. Choose `openui-self-hosted` when you want to bring your own provider.
 
 Every Cloud route includes `get_weather` as its example app-owned function tool. The LangGraph and Vercel AI SDK variants define and execute that tool through the selected framework while leaving Cloud-owned tools unchanged.
 
diff --git a/packages/openui-cli/src/commands/create-app.ts b/packages/openui-cli/src/commands/create-app.ts
index 9891ad8b8..0e3854a1b 100644
--- a/packages/openui-cli/src/commands/create-app.ts
+++ b/packages/openui-cli/src/commands/create-app.ts
@@ -47,12 +47,10 @@ const backendDependencies: Record<
       "@langchain/core": "^1.2.1",
       "@langchain/langgraph": "^1.4.5",
       "@langchain/openai": "^1.5.2",
-      zod: "^4.0.0",
     },
     "vercel-ai-sdk": {
       "@ai-sdk/openai": "^3.0.65",
       ai: "^6.0.191",
-      zod: "^4.3.6",
     },
   },
 };
@@ -162,20 +160,42 @@ function rewritePackageJson(
   }
 }
 
-function applyBackendRoute(projectDir: string, backendFramework: BackendFramework) {
+function applyBackendFiles(projectDir: string, backendFramework: BackendFramework) {
   const routeOptionsDir = path.join(projectDir, "_backend-routes");
+  const pageOptionsDir = path.join(projectDir, "_backend-pages");
   if (backendFramework !== "none") {
-    const source = path.join(routeOptionsDir, `${backendFramework}.ts`);
-    const destination = path.join(projectDir, "src", "app", "api", "chat", "route.ts");
-    if (!fs.existsSync(source)) {
+    const routeSource = path.join(routeOptionsDir, `${backendFramework}.ts`);
+    const routeDestination = path.join(projectDir, "src", "app", "api", "chat", "route.ts");
+    if (!fs.existsSync(routeSource)) {
       throw new CreateError(
         "template_missing",
         `Backend route "${backendFramework}" not found. Rebuild the CLI with \`pnpm build\`.`,
       );
     }
-    fs.copyFileSync(source, destination);
+    fs.copyFileSync(routeSource, routeDestination);
+
+    // Self-hosted framework routes speak their native wire protocols, so their
+    // matching stream adapter and message format are selected on the frontend.
+    // Cloud keeps the Responses adapter because Responses remains its transport.
+    if (fs.existsSync(pageOptionsDir)) {
+      const pageSource = path.join(pageOptionsDir, `${backendFramework}.tsx`);
+      if (!fs.existsSync(pageSource)) {
+        throw new CreateError(
+          "template_missing",
+          `Backend page "${backendFramework}" not found. Rebuild the CLI with \`pnpm build\`.`,
+        );
+      }
+      fs.copyFileSync(pageSource, path.join(projectDir, "src", "app", "page.tsx"));
+
+      const adapterName = `${backendFramework}-adapter.ts`;
+      const adapterSource = path.join(pageOptionsDir, adapterName);
+      if (fs.existsSync(adapterSource)) {
+        fs.copyFileSync(adapterSource, path.join(projectDir, "src", "app", adapterName));
+      }
+    }
   }
   fs.rmSync(routeOptionsDir, { recursive: true, force: true });
+  fs.rmSync(pageOptionsDir, { recursive: true, force: true });
 }
 
 export async function runCreateApp(options: CreateAppOptions): Promise<void> {
@@ -334,7 +354,7 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
       filter: (src) => shouldCopyTemplatePath(templateDir, src),
     });
     restoreDotfiles(targetDir);
-    applyBackendRoute(targetDir, backendFramework);
+    applyBackendFiles(targetDir, backendFramework);
     rewritePackageJson(targetDir, name, packageManager.name, template, backendFramework);
     // npm ci requires the copied package-lock; other managers resolve from package.json.
     // Framework routes add dependencies at scaffold time, so their npm lock
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/langgraph.tsx b/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/langgraph.tsx
new file mode 100644
index 000000000..71c6faf0b
--- /dev/null
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/langgraph.tsx
@@ -0,0 +1,25 @@
+"use client";
+import "@openuidev/react-ui/components.css";
+import "@openuidev/react-ui/styles/index.css";
+
+import {
+  AgentInterface,
+  fetchLLM,
+  langGraphAdapter,
+  langGraphMessageFormat,
+} from "@openuidev/react-ui";
+import { openuiLibrary } from "@openuidev/react-ui/genui-lib";
+
+const llm = fetchLLM({
+  url: "/api/chat",
+  streamAdapter: langGraphAdapter(),
+  messageFormat: langGraphMessageFormat,
+});
+
+export default function Home() {
+  return (
+    <div style={{ height: "100vh", width: "100vw", overflow: "hidden" }}>
+      <AgentInterface llm={llm} componentLibrary={openuiLibrary} agentName="OpenUI Self Hosted" />
+    </div>
+  );
+}
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk-adapter.ts b/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk-adapter.ts
new file mode 100644
index 000000000..058989d04
--- /dev/null
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk-adapter.ts
@@ -0,0 +1,344 @@
+import {
+  EventType,
+  type Message,
+  type MessageFormat,
+  type StreamProtocolAdapter,
+} from "@openuidev/react-ui";
+import {
+  DefaultChatTransport,
+  type DynamicToolUIPart,
+  type UIMessage,
+  type UIMessageChunk,
+} from "ai";
+
+function serialize(value: unknown): string {
+  if (typeof value === "string") return value;
+  return JSON.stringify(value) ?? String(value);
+}
+
+function parseToolInput(value: string): unknown {
+  try {
+    return JSON.parse(value) as unknown;
+  } catch {
+    return value;
+  }
+}
+
+function toUserParts(content: unknown): UIMessage["parts"] {
+  if (typeof content === "string") return [{ type: "text", text: content }];
+  if (!Array.isArray(content)) return [];
+
+  return content.flatMap((part): UIMessage["parts"] => {
+    if (!part || typeof part !== "object") return [];
+    const value = part as Record<string, unknown>;
+    if (value.type === "text" && typeof value.text === "string") {
+      return [{ type: "text", text: value.text }];
+    }
+
+    if (value.type === "binary") {
+      const mediaType =
+        typeof value.mimeType === "string" ? value.mimeType : "application/octet-stream";
+      const url =
+        typeof value.url === "string"
+          ? value.url
+          : typeof value.data === "string"
+            ? `data:${mediaType};base64,${value.data}`
+            : undefined;
+      if (!url) return [];
+      return [
+        {
+          type: "file",
+          mediaType,
+          url,
+          ...(typeof value.filename === "string" ? { filename: value.filename } : {}),
+        },
+      ];
+    }
+
+    const source = value.source;
+    if (!source || typeof source !== "object") return [];
+    const sourceValue = source as Record<string, unknown>;
+    if (typeof sourceValue.value !== "string") return [];
+    const mediaType =
+      typeof sourceValue.mimeType === "string"
+        ? sourceValue.mimeType
+        : value.type === "image"
+          ? "image/*"
+          : value.type === "audio"
+            ? "audio/*"
+            : "application/octet-stream";
+    const url =
+      sourceValue.type === "data"
+        ? `data:${mediaType};base64,${sourceValue.value}`
+        : sourceValue.value;
+    return [{ type: "file", mediaType, url }];
+  });
+}
+
+function toVercelMessages(messages: Message[]): UIMessage[] {
+  const toolResults = new Map(
+    messages
+      .filter((message) => message.role === "tool")
+      .map((message) => [message.toolCallId, message] as const),
+  );
+  const result: UIMessage[] = [];
+
+  for (const message of messages) {
+    if (message.role === "user") {
+      result.push({ id: message.id, role: "user", parts: toUserParts(message.content) });
+      continue;
+    }
+
+    if (message.role === "assistant") {
+      const parts: UIMessage["parts"] = [];
+      if (message.content || !message.toolCalls?.length) {
+        parts.push({ type: "text", text: message.content ?? "" });
+      }
+      for (const toolCall of message.toolCalls ?? []) {
+        const input = parseToolInput(toolCall.function.arguments);
+        const toolResult = toolResults.get(toolCall.id);
+        let part: DynamicToolUIPart;
+        if (toolResult?.error) {
+          part = {
+            type: "dynamic-tool",
+            toolName: toolCall.function.name,
+            toolCallId: toolCall.id,
+            state: "output-error",
+            input,
+            errorText: toolResult.error,
+          };
+        } else if (toolResult) {
+          part = {
+            type: "dynamic-tool",
+            toolName: toolCall.function.name,
+            toolCallId: toolCall.id,
+            state: "output-available",
+            input,
+            output: toolResult.content,
+          };
+        } else {
+          part = {
+            type: "dynamic-tool",
+            toolName: toolCall.function.name,
+            toolCallId: toolCall.id,
+            state: "input-available",
+            input,
+          };
+        }
+        parts.push(part);
+      }
+      result.push({ id: message.id, role: "assistant", parts });
+      continue;
+    }
+
+    if (message.role === "system" || message.role === "developer") {
+      result.push({
+        id: message.id,
+        role: "system",
+        parts: [{ type: "text", text: message.content }],
+      });
+    }
+  }
+
+  return result;
+}
+
+function fromVercelMessages(data: unknown): Message[] {
+  if (!Array.isArray(data)) return [];
+  const result: Message[] = [];
+
+  for (const value of data) {
+    if (!value || typeof value !== "object") continue;
+    const message = value as UIMessage;
+    const text = message.parts
+      .filter((part) => part.type === "text")
+      .map((part) => part.text)
+      .join("");
+
+    if (message.role === "user") {
+      result.push({ id: message.id, role: "user", content: text });
+      continue;
+    }
+    if (message.role === "system") {
+      result.push({ id: message.id, role: "system", content: text });
+      continue;
+    }
+
+    const toolParts = message.parts.filter(
+      (part): part is DynamicToolUIPart => part.type === "dynamic-tool",
+    );
+    result.push({
+      id: message.id,
+      role: "assistant",
+      content: text,
+      toolCalls: toolParts.map((part) => ({
+        id: part.toolCallId,
+        type: "function",
+        function: {
+          name: part.toolName,
+          arguments: "input" in part ? serialize(part.input) : "",
+        },
+      })),
+    });
+
+    for (const part of toolParts) {
+      if (part.state === "output-available") {
+        result.push({
+          id: `tool-result-${part.toolCallId}`,
+          role: "tool",
+          toolCallId: part.toolCallId,
+          content: serialize(part.output),
+        });
+      } else if (part.state === "output-error") {
+        result.push({
+          id: `tool-result-${part.toolCallId}`,
+          role: "tool",
+          toolCallId: part.toolCallId,
+          content: part.errorText,
+          error: part.errorText,
+        });
+      }
+    }
+  }
+
+  return result;
+}
+
+export const vercelAIMessageFormat: MessageFormat = {
+  toApi: toVercelMessages,
+  fromApi: fromVercelMessages,
+};
+
+class UIMessageStreamParser extends DefaultChatTransport<UIMessage> {
+  parseBody(body: ReadableStream<Uint8Array>): ReadableStream<UIMessageChunk> {
+    return this.processResponseStream(body);
+  }
+}
+
+async function* readChunks(stream: ReadableStream<UIMessageChunk>) {
+  const reader = stream.getReader();
+  try {
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) return;
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+
+export const vercelAIAdapter = (): StreamProtocolAdapter => ({
+  async *parse(response) {
+    if (!response.body) throw new Error("No response body");
+
+    // Let the AI SDK decode and validate its native SSE protocol. This adapter
+    // only projects typed UIMessage chunks into the events AgentInterface uses.
+    const chunks = new UIMessageStreamParser().parseBody(response.body);
+    const startedTools = new Set<string>();
+    const streamedToolArgs = new Set<string>();
+
+    for await (const chunk of readChunks(chunks)) {
+      switch (chunk.type) {
+        case "text-start":
+          yield {
+            type: EventType.TEXT_MESSAGE_START,
+            messageId: chunk.id,
+            role: "assistant",
+          };
+          break;
+        case "text-delta":
+          yield {
+            type: EventType.TEXT_MESSAGE_CONTENT,
+            messageId: chunk.id,
+            delta: chunk.delta,
+          };
+          break;
+        case "text-end":
+          yield { type: EventType.TEXT_MESSAGE_END, messageId: chunk.id };
+          break;
+        case "tool-input-start":
+          startedTools.add(chunk.toolCallId);
+          yield {
+            type: EventType.TOOL_CALL_START,
+            toolCallId: chunk.toolCallId,
+            toolCallName: chunk.toolName,
+          };
+          break;
+        case "tool-input-delta":
+          streamedToolArgs.add(chunk.toolCallId);
+          yield {
+            type: EventType.TOOL_CALL_ARGS,
+            toolCallId: chunk.toolCallId,
+            delta: chunk.inputTextDelta,
+          };
+          break;
+        case "tool-input-available":
+        case "tool-input-error": {
+          if (!startedTools.has(chunk.toolCallId)) {
+            startedTools.add(chunk.toolCallId);
+            yield {
+              type: EventType.TOOL_CALL_START,
+              toolCallId: chunk.toolCallId,
+              toolCallName: chunk.toolName,
+            };
+          }
+          if (!streamedToolArgs.has(chunk.toolCallId)) {
+            yield {
+              type: EventType.TOOL_CALL_ARGS,
+              toolCallId: chunk.toolCallId,
+              delta: serialize(chunk.input),
+            };
+          }
+          yield { type: EventType.TOOL_CALL_END, toolCallId: chunk.toolCallId };
+          if (chunk.type === "tool-input-error") {
+            yield {
+              type: EventType.TOOL_CALL_RESULT,
+              messageId: `tool-result-${chunk.toolCallId}`,
+              toolCallId: chunk.toolCallId,
+              content: chunk.errorText,
+              role: "tool",
+              isError: true,
+              error: chunk.errorText,
+            };
+          }
+          break;
+        }
+        case "tool-output-available":
+          yield {
+            type: EventType.TOOL_CALL_RESULT,
+            messageId: `tool-result-${chunk.toolCallId}`,
+            toolCallId: chunk.toolCallId,
+            content: serialize(chunk.output),
+            role: "tool",
+          };
+          break;
+        case "tool-output-error":
+          yield {
+            type: EventType.TOOL_CALL_RESULT,
+            messageId: `tool-result-${chunk.toolCallId}`,
+            toolCallId: chunk.toolCallId,
+            content: chunk.errorText,
+            role: "tool",
+            isError: true,
+            error: chunk.errorText,
+          };
+          break;
+        case "tool-output-denied":
+          yield {
+            type: EventType.TOOL_CALL_RESULT,
+            messageId: `tool-result-${chunk.toolCallId}`,
+            toolCallId: chunk.toolCallId,
+            content: "Tool execution was denied",
+            role: "tool",
+            isError: true,
+            error: "Tool execution was denied",
+          };
+          break;
+        case "error":
+          yield { type: EventType.RUN_ERROR, message: chunk.errorText };
+          break;
+      }
+    }
+  },
+});
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx b/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx
new file mode 100644
index 000000000..907fbc3a4
--- /dev/null
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx
@@ -0,0 +1,21 @@
+"use client";
+import "@openuidev/react-ui/components.css";
+import "@openuidev/react-ui/styles/index.css";
+
+import { AgentInterface, fetchLLM } from "@openuidev/react-ui";
+import { openuiLibrary } from "@openuidev/react-ui/genui-lib";
+import { vercelAIAdapter, vercelAIMessageFormat } from "./vercel-ai-sdk-adapter";
+
+const llm = fetchLLM({
+  url: "/api/chat",
+  streamAdapter: vercelAIAdapter(),
+  messageFormat: vercelAIMessageFormat,
+});
+
+export default function Home() {
+  return (
+    <div style={{ height: "100vh", width: "100vw", overflow: "hidden" }}>
+      <AgentInterface llm={llm} componentLibrary={openuiLibrary} agentName="OpenUI Self Hosted" />
+    </div>
+  );
+}
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts
index ed7770cc7..ee72992f2 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts
@@ -7,9 +7,8 @@ import { generateSystemPrompt } from "@openuidev/lang-core";
 
 export const runtime = "nodejs";
 
-const modelName = process.env.OPENAI_MODEL ?? "gpt-5.2";
 const model = new ChatOpenAI({
-  model: modelName,
+  model: process.env.OPENAI_MODEL ?? "gpt-5.2",
   streaming: true,
   configuration: process.env.OPENAI_BASE_URL ? { baseURL: process.env.OPENAI_BASE_URL } : undefined,
 });
@@ -24,15 +23,6 @@ const graph = new StateGraph(MessagesAnnotation)
   .addEdge("model", END)
   .compile();
 
-function sseChunk(delta: Record<string, unknown>, finishReason: string | null = null) {
-  return `data: ${JSON.stringify({
-    id: "langgraph-chat",
-    object: "chat.completion.chunk",
-    model: modelName,
-    choices: [{ index: 0, delta, finish_reason: finishReason }],
-  })}\n\n`;
-}
-
 export async function POST(req: Request) {
   const payload = (await req.json()) as { messages?: unknown };
   if (!Array.isArray(payload.messages)) {
@@ -46,71 +36,27 @@ export async function POST(req: Request) {
     },
     ...(payload.messages as BaseMessageLike[]),
   ];
-  const abortController = new AbortController();
-  const abortFromRequest = () => abortController.abort(req.signal.reason);
-  if (req.signal.aborted) abortFromRequest();
-  else req.signal.addEventListener("abort", abortFromRequest, { once: true });
 
-  let iterator: AsyncIterator<unknown>;
-  let first: IteratorResult<unknown>;
+  // LangGraph owns the wire format. The frontend consumes these named SSE
+  // events with langGraphAdapter(), so no OpenAI compatibility layer is needed.
+  let stream: ReadableStream<Uint8Array>;
   try {
-    const events = (await graph.stream(
+    stream = await graph.stream(
       { messages },
-      { streamMode: "messages", signal: abortController.signal },
-    )) as AsyncIterable<unknown>;
-    iterator = events[Symbol.asyncIterator]();
-    // Start the provider request before returning HTTP 200.
-    first = await iterator.next();
+      {
+        streamMode: "messages",
+        encoding: "text/event-stream",
+        signal: req.signal,
+      },
+    );
   } catch (error) {
-    req.signal.removeEventListener("abort", abortFromRequest);
     return providerError(error);
   }
 
-  const encoder = new TextEncoder();
-  const enqueueEvent = (
-    controller: ReadableStreamDefaultController<Uint8Array>,
-    event: unknown,
-  ) => {
-    if (!Array.isArray(event)) return;
-    const message = event[0] as { type?: string; text?: unknown } | undefined;
-    if (message?.type === "ai" && typeof message.text === "string" && message.text) {
-      controller.enqueue(encoder.encode(sseChunk({ content: message.text })));
-    }
-  };
-
-  let cancelled = false;
-  const body = new ReadableStream<Uint8Array>({
-    async start(controller) {
-      try {
-        controller.enqueue(encoder.encode(sseChunk({ role: "assistant" })));
-        if (!first.done) enqueueEvent(controller, first.value);
-        for (;;) {
-          const next = await iterator.next();
-          if (next.done) break;
-          enqueueEvent(controller, next.value);
-        }
-
-        controller.enqueue(encoder.encode(sseChunk({}, "stop")));
-        controller.enqueue(encoder.encode("data: [DONE]\n\n"));
-        controller.close();
-      } catch (error) {
-        if (!cancelled) controller.error(error);
-      } finally {
-        req.signal.removeEventListener("abort", abortFromRequest);
-      }
-    },
-    async cancel(reason) {
-      cancelled = true;
-      abortController.abort(reason);
-      await iterator.return?.();
-    },
-  });
-
-  return new Response(body, {
+  return new Response(stream, {
     headers: {
       "Content-Type": "text/event-stream",
       "Cache-Control": "no-cache, no-transform",
-      Connection: "keep-alive",
     },
   });
 }
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel-ai-sdk.ts b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel-ai-sdk.ts
index 9238d3f89..55d2d9c82 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel-ai-sdk.ts
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel-ai-sdk.ts
@@ -2,252 +2,29 @@ import librarySpec from "@/generated/spec.json";
 import { promptOptions } from "@/lib/prompt-options";
 import { createOpenAI } from "@ai-sdk/openai";
 import { generateSystemPrompt } from "@openuidev/lang-core";
-import { streamText, type ModelMessage } from "ai";
+import { convertToModelMessages, streamText, type UIMessage } from "ai";
 
 export const runtime = "nodejs";
 
-const modelName = process.env.OPENAI_MODEL ?? "gpt-5.2";
 const openai = createOpenAI({
   baseURL: process.env.OPENAI_BASE_URL,
   apiKey: process.env.OPENAI_API_KEY,
 });
 
-function sseChunk(delta: Record<string, unknown>, finishReason: string | null = null) {
-  return `data: ${JSON.stringify({
-    id: "vercel-ai-sdk-chat",
-    object: "chat.completion.chunk",
-    model: modelName,
-    choices: [{ index: 0, delta, finish_reason: finishReason }],
-  })}\n\n`;
-}
-
-type UserModelMessage = Extract<ModelMessage, { role: "user" }>;
-type AssistantModelMessage = Extract<ModelMessage, { role: "assistant" }>;
-
-function textContent(content: unknown): string {
-  if (typeof content === "string") return content;
-  if (!Array.isArray(content)) return "";
-
-  return content
-    .map((part) => {
-      if (part && typeof part === "object" && "text" in part) {
-        return typeof part.text === "string" ? part.text : "";
-      }
-      return "";
-    })
-    .join("");
-}
-
-function imageSource(value: string): string | URL {
-  try {
-    return new URL(value);
-  } catch {
-    return value;
-  }
-}
-
-function toUserContent(content: unknown): UserModelMessage["content"] {
-  if (typeof content === "string") return content;
-  if (!Array.isArray(content)) return "";
-
-  const parts: Exclude<UserModelMessage["content"], string> = [];
-  for (const part of content) {
-    if (!part || typeof part !== "object" || !("type" in part)) continue;
-    if (part.type === "text" && "text" in part && typeof part.text === "string") {
-      parts.push({ type: "text", text: part.text });
-    } else if (
-      part.type === "image_url" &&
-      "image_url" in part &&
-      part.image_url &&
-      typeof part.image_url === "object" &&
-      "url" in part.image_url &&
-      typeof part.image_url.url === "string"
-    ) {
-      parts.push({ type: "image", image: imageSource(part.image_url.url) });
-    }
-  }
-  return parts;
-}
-
-function toolInput(value: unknown): unknown {
-  if (typeof value !== "string") return value;
-  try {
-    return JSON.parse(value) as unknown;
-  } catch {
-    return value;
-  }
-}
-
-function toAssistantContent(message: Record<string, unknown>): AssistantModelMessage["content"] {
-  const parts: Exclude<AssistantModelMessage["content"], string> = [];
-  const text = textContent(message.content);
-  if (text) parts.push({ type: "text", text });
-
-  if (Array.isArray(message.tool_calls)) {
-    for (const toolCall of message.tool_calls) {
-      if (!toolCall || typeof toolCall !== "object") continue;
-      if (!("id" in toolCall) || typeof toolCall.id !== "string") continue;
-      if (
-        !("function" in toolCall) ||
-        !toolCall.function ||
-        typeof toolCall.function !== "object"
-      ) {
-        continue;
-      }
-      if (!("name" in toolCall.function) || typeof toolCall.function.name !== "string") continue;
-
-      parts.push({
-        type: "tool-call",
-        toolCallId: toolCall.id,
-        toolName: toolCall.function.name,
-        input: toolInput("arguments" in toolCall.function ? toolCall.function.arguments : {}),
-      });
-    }
-  }
-
-  return parts.length ? parts : text;
-}
-
-function toModelMessages(messages: unknown[]): ModelMessage[] {
-  const toolNames = new Map<string, string>();
-  for (const message of messages) {
-    if (!message || typeof message !== "object" || !("tool_calls" in message)) continue;
-    if (!Array.isArray(message.tool_calls)) continue;
-    for (const toolCall of message.tool_calls) {
-      if (!toolCall || typeof toolCall !== "object") continue;
-      if (!("id" in toolCall) || typeof toolCall.id !== "string") continue;
-      if (
-        !("function" in toolCall) ||
-        !toolCall.function ||
-        typeof toolCall.function !== "object"
-      ) {
-        continue;
-      }
-      if ("name" in toolCall.function && typeof toolCall.function.name === "string") {
-        toolNames.set(toolCall.id, toolCall.function.name);
-      }
-    }
-  }
-
-  const result: ModelMessage[] = [];
-  for (const message of messages) {
-    if (!message || typeof message !== "object" || !("role" in message)) continue;
-    if (message.role === "user") {
-      result.push({
-        role: "user",
-        content: toUserContent("content" in message ? message.content : ""),
-      });
-      continue;
-    }
-    if (message.role === "assistant") {
-      result.push({ role: "assistant", content: toAssistantContent(message) });
-      continue;
-    }
-    if (message.role === "system" || message.role === "developer") {
-      result.push({
-        role: "system",
-        content: textContent("content" in message ? message.content : ""),
-      });
-      continue;
-    }
-    if (
-      message.role === "tool" &&
-      "tool_call_id" in message &&
-      typeof message.tool_call_id === "string"
-    ) {
-      result.push({
-        role: "tool",
-        content: [
-          {
-            type: "tool-result",
-            toolCallId: message.tool_call_id,
-            toolName: toolNames.get(message.tool_call_id) ?? "tool",
-            output: {
-              type: "text",
-              value: textContent("content" in message ? message.content : ""),
-            },
-          },
-        ],
-      });
-    }
-  }
-  return result;
-}
-
 export async function POST(req: Request) {
-  const payload = (await req.json()) as { messages?: unknown };
-
+  const payload = (await req.json()) as { messages?: UIMessage[] };
   if (!Array.isArray(payload.messages)) {
     return Response.json({ error: "messages must be an array" }, { status: 400 });
   }
 
-  const abortController = new AbortController();
-  const abortFromRequest = () => abortController.abort(req.signal.reason);
-  if (req.signal.aborted) abortFromRequest();
-  else req.signal.addEventListener("abort", abortFromRequest, { once: true });
-
-  let iterator: AsyncIterator<string>;
-  let first: IteratorResult<string>;
-  try {
-    const result = streamText({
-      // Match the default self-hosted route's OpenAI-compatible
-      // Chat Completions contract (many providers do not expose /responses).
-      model: openai.chat(modelName),
-      system: generateSystemPrompt({ library: librarySpec, promptOptions }),
-      messages: toModelMessages(payload.messages),
-      abortSignal: abortController.signal,
-    });
-    iterator = result.textStream[Symbol.asyncIterator]();
-    // Start the provider request before returning HTTP 200.
-    first = await iterator.next();
-  } catch (error) {
-    req.signal.removeEventListener("abort", abortFromRequest);
-    return providerError(error);
-  }
-
-  const encoder = new TextEncoder();
-
-  let cancelled = false;
-  const body = new ReadableStream<Uint8Array>({
-    async start(controller) {
-      try {
-        controller.enqueue(encoder.encode(sseChunk({ role: "assistant" })));
-        if (!first.done) controller.enqueue(encoder.encode(sseChunk({ content: first.value })));
-        for (;;) {
-          const next = await iterator.next();
-          if (next.done) break;
-          controller.enqueue(encoder.encode(sseChunk({ content: next.value })));
-        }
-
-        controller.enqueue(encoder.encode(sseChunk({}, "stop")));
-        controller.enqueue(encoder.encode("data: [DONE]\n\n"));
-        controller.close();
-      } catch (error) {
-        if (!cancelled) controller.error(error);
-      } finally {
-        req.signal.removeEventListener("abort", abortFromRequest);
-      }
-    },
-    async cancel(reason) {
-      cancelled = true;
-      abortController.abort(reason);
-      await iterator.return?.();
-    },
-  });
-
-  return new Response(body, {
-    headers: {
-      "Content-Type": "text/event-stream",
-      "Cache-Control": "no-cache, no-transform",
-      Connection: "keep-alive",
-    },
+  const result = streamText({
+    model: openai.chat(process.env.OPENAI_MODEL ?? "gpt-5.2"),
+    system: generateSystemPrompt({ library: librarySpec, promptOptions }),
+    messages: await convertToModelMessages(payload.messages),
+    abortSignal: req.signal,
   });
-}
 
-function providerError(error: unknown): Response {
-  const e = error as { status?: number; statusCode?: number; message?: string };
-  return Response.json(
-    { error: e.message ?? "Provider request failed" },
-    { status: e.status ?? e.statusCode ?? 500 },
-  );
+  // Preserve the AI SDK's native UIMessage stream. The frontend adapter uses
+  // the AI SDK itself to decode it before mapping chunks into OpenUI events.
+  return result.toUIMessageStreamResponse();
 }

From 08db96d09f0494cfd69625bc261bcc67cd18ef0a Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Wed, 5 Aug 2026 19:24:30 +0530
Subject: [PATCH 08/15] feat(react-headless): add Vercel AI SDK adapter

---
 .../agent/reference/adapters-and-formats.mdx  |  39 +-
 .../docs/agent/reference/self-hosting.mdx     |   1 +
 packages/react-headless/README.md             |  22 +-
 packages/react-headless/package.json          |  10 +-
 packages/react-headless/src/index.ts          |   2 +
 .../adapters/__tests__/vercel-ai-sdk.test.ts  | 342 +++++++++++
 .../src/stream/adapters/index.ts              |   1 +
 .../src/stream/adapters/vercel-ai-sdk.ts      | 188 ++++++
 .../vercel-ai-message-format.test.ts          | 547 ++++++++++++++++++
 .../src/stream/formats/index.ts               |   1 +
 .../formats/vercel-ai-message-format.ts       | 440 ++++++++++++++
 pnpm-lock.yaml                                |   3 +
 12 files changed, 1591 insertions(+), 5 deletions(-)
 create mode 100644 packages/react-headless/src/stream/adapters/__tests__/vercel-ai-sdk.test.ts
 create mode 100644 packages/react-headless/src/stream/adapters/vercel-ai-sdk.ts
 create mode 100644 packages/react-headless/src/stream/formats/__tests__/vercel-ai-message-format.test.ts
 create mode 100644 packages/react-headless/src/stream/formats/vercel-ai-message-format.ts

diff --git a/docs/content/docs/agent/reference/adapters-and-formats.mdx b/docs/content/docs/agent/reference/adapters-and-formats.mdx
index a20d8caa1..ebcf00c9f 100644
--- a/docs/content/docs/agent/reference/adapters-and-formats.mdx
+++ b/docs/content/docs/agent/reference/adapters-and-formats.mdx
@@ -34,15 +34,17 @@ import {
   openAIAdapter,
   openAIReadableStreamAdapter,
   openAIResponsesAdapter,
+  vercelAIAdapter,
   langGraphAdapter,
   openAIMessageFormat,
   openAIConversationMessageFormat,
+  vercelAIMessageFormat,
   langGraphMessageFormat,
   identityMessageFormat,
 } from "@openuidev/react-ui";
 ```
 
-<Callout type="warn">All five stream adapters are **factory functions** — always call them with `()`. `streamAdapter: openAIAdapter()` is correct; a bare `streamAdapter: openAIAdapter` is wrong.</Callout>
+<Callout type="warn">All six stream adapters are **factory functions** — always call them with `()`. `streamAdapter: openAIAdapter()` is correct; a bare `streamAdapter: openAIAdapter` is wrong.</Callout>
 
 ## The two channels
 
@@ -349,9 +351,9 @@ interface StreamProtocolAdapter {
 }
 ```
 
-`fetchLLM` calls `parse` on the `Response` your route returns and consumes the yielded AG-UI events. All five bundled adapters are factories you call to get an instance — `agUIAdapter()`, `openAIAdapter()`, `openAIReadableStreamAdapter()`, `openAIResponsesAdapter()`, `langGraphAdapter()`; only `langGraphAdapter()` accepts options.
+`fetchLLM` calls `parse` on the `Response` your route returns and consumes the yielded AG-UI events. All six bundled adapters are factories you call to get an instance — `agUIAdapter()`, `openAIAdapter()`, `openAIReadableStreamAdapter()`, `openAIResponsesAdapter()`, `vercelAIAdapter()`, `langGraphAdapter()`; only `langGraphAdapter()` accepts options.
 
-<Callout type="info">A malformed line in the stream is logged to the console and skipped — it does not abort the whole stream. Provider-level failures should be surfaced as a `RUN_ERROR` event (the OpenAI Responses and LangGraph adapters do this for their error events).</Callout>
+<Callout type="info">The line-oriented adapters log and skip malformed lines. `vercelAIAdapter()` delegates validation to the Vercel AI SDK and rejects invalid UIMessage chunks. Provider-level failures should be surfaced as a `RUN_ERROR` event (the OpenAI Responses, Vercel AI SDK, and LangGraph adapters do this for their error events).</Callout>
 
 ### Selection guide
 
@@ -362,6 +364,7 @@ Start from your provider and how the route streams its reply. The stream adapter
 | OpenAI **Chat Completions** SSE (`data: {…}` lines)                     | `openAIAdapter()`               | `openAIMessageFormat`                |
 | OpenAI SDK `stream.toReadableStream()` (NDJSON, no `data:` prefix)      | `openAIReadableStreamAdapter()` | `openAIMessageFormat`                |
 | OpenAI **Responses / Conversations** API SSE                           | `openAIResponsesAdapter()`      | `openAIConversationMessageFormat`    |
+| **Vercel AI SDK v6** UIMessage SSE (`toUIMessageStreamResponse()`)      | `vercelAIAdapter()`             | `vercelAIMessageFormat`              |
 | **LangGraph** named-event SSE (`event: messages\ndata: …`)             | `langGraphAdapter()`            | `langGraphMessageFormat`             |
 | Already AG-UI events (your route emits AG-UI SSE directly)             | `agUIAdapter()`                 | `identityMessageFormat` (default)    |
 
@@ -427,6 +430,25 @@ const llm = fetchLLM({
 - **What it handles:** `response.output_item.added` (assistant message start, `function_call` start, and server-side `function_call_output` → `TOOL_CALL_RESULT`), `response.output_text.delta` / `.done` for text, `response.function_call_arguments.delta` / `.done` for tool-call arguments (mapping `item_id` → `call_id`), and `error` / `response.failed` → `RUN_ERROR`. Lifecycle/metadata events (`response.created`, `response.completed`, etc.) are ignored.
 - **When to use:** You call the newer Responses or Conversations API rather than Chat Completions. Pair with `openAIConversationMessageFormat`.
 
+### `vercelAIAdapter`
+
+```ts
+import { fetchLLM, vercelAIAdapter, vercelAIMessageFormat } from "@openuidev/react-ui";
+
+const llm = fetchLLM({
+  url: "/api/chat",
+  streamAdapter: vercelAIAdapter(),
+  messageFormat: vercelAIMessageFormat,
+});
+```
+
+- **Wire shape:** Vercel AI SDK v6 UIMessage SSE, as returned by `result.toUIMessageStreamResponse()`.
+- **What it handles:** streamed text, streamed or complete tool input, successful, failed, or denied tool output, and SDK error chunks. The adapter delegates SSE decoding and chunk validation to the Vercel AI SDK, then projects the validated chunks into AG-UI events.
+- **Current scope:** reasoning, sources, assistant files, custom data, metadata, and tool-approval-request chunks have no equivalent in the current AgentInterface stream processor and are ignored. Approval-gated tools therefore need a custom flow today.
+- **When to use:** Your route uses Vercel AI SDK `streamText()` and returns its UIMessage stream response. Pair with `vercelAIMessageFormat` so the route receives `UIMessage[]` that can be passed to `convertToModelMessages()`.
+
+<Callout type="info">Install `ai@^6` alongside `@openuidev/react-ui` or `@openuidev/react-headless` when using this integration. It is an optional peer dependency, so apps using other adapters do not need the Vercel AI SDK.</Callout>
+
 ### `langGraphAdapter`
 
 ```ts
@@ -518,6 +540,17 @@ import { openAIConversationMessageFormat } from "@openuidev/react-ui";
 - **Conversions:** assistant messages are *flattened* into sibling items — a text `message` plus one `function_call` item per tool call; tool results become `function_call_output` items. Inbound, adjacent assistant `message` + `function_call` items are regrouped into one `AssistantMessage`, and Conversations-specific content parts (`reasoning_text`, `summary_text`, `refusal`, …) are folded into text.
 - **When to use:** Pair with `openAIResponsesAdapter()`.
 
+### `vercelAIMessageFormat`
+
+```ts
+import { vercelAIMessageFormat } from "@openuidev/react-ui";
+```
+
+- **Shape:** Vercel AI SDK v6 `UIMessage[]`, whose content is represented as typed `parts`.
+- **Conversions:** text and file inputs become UIMessage parts; AG-UI tool calls become `dynamic-tool` parts; separate AG-UI tool-result messages are folded into the matching tool part as an available or errored output. Inbound conversion accepts both `dynamic-tool` and statically named `tool-*` parts and expands completed outputs back into separate tool messages. (`developer` maps to `system`.)
+- **Lossy fields:** this integration does not currently preserve reasoning, sources, custom data, assistant files, approvals, or provider metadata when converting stored messages.
+- **When to use:** Pair with `vercelAIAdapter()` and pass the received messages to Vercel AI SDK's `convertToModelMessages()` in your route.
+
 ### `langGraphMessageFormat`
 
 ```ts
diff --git a/docs/content/docs/agent/reference/self-hosting.mdx b/docs/content/docs/agent/reference/self-hosting.mdx
index a34ae837e..8fad92a11 100644
--- a/docs/content/docs/agent/reference/self-hosting.mdx
+++ b/docs/content/docs/agent/reference/self-hosting.mdx
@@ -48,6 +48,7 @@ Your route always receives a JSON body of `{ threadId, messages }` and returns a
 | OpenAI Chat Completions, NDJSON from `stream.toReadableStream()` | `openAIReadableStreamAdapter()` | `openAIMessageFormat` |
 | OpenAI Chat Completions, raw SSE (`data: {…}\n\n`, `data: [DONE]`) | `openAIAdapter()` | `openAIMessageFormat` |
 | OpenAI **Responses / Conversations** API stream | `openAIResponsesAdapter()` | `openAIConversationMessageFormat` |
+| Vercel AI SDK v6 UIMessage stream from `toUIMessageStreamResponse()` | `vercelAIAdapter()` | `vercelAIMessageFormat` |
 | LangGraph stream (named SSE events) | `langGraphAdapter()` | `langGraphMessageFormat` |
 | A backend that already emits AG-UI events | `agUIAdapter()` | depends on what your route expects |
 
diff --git a/packages/react-headless/README.md b/packages/react-headless/README.md
index 046526c15..0af453a73 100644
--- a/packages/react-headless/README.md
+++ b/packages/react-headless/README.md
@@ -18,13 +18,19 @@ pnpm add @openuidev/react-headless
 
 **Peer dependencies:** `react >=19.0.0`, `react-dom >=19.0.0`, `zustand ^4.5.5`
 
+The Vercel AI SDK integration has one optional peer dependency:
+
+```bash
+npm install ai@^6
+```
+
 ## Overview
 
 Use `@openuidev/react-headless` when you want OpenUI's chat behavior without OpenUI's visual components:
 
 - **`ChatProvider`** manages threads, messages, and streaming state through a Zustand store.
 - **Selector hooks** expose thread and thread-list state without coupling you to a layout.
-- **Streaming adapters** parse SSE or SDK responses from OpenAI, AG-UI, or custom backends.
+- **Streaming adapters** parse SSE or SDK responses from OpenAI, Vercel AI SDK, AG-UI, or custom backends.
 - **Message formats** convert between your API shape and OpenUI's internal AG-UI shape.
 
 ## Quick Start
@@ -179,6 +185,19 @@ const llm = fetchLLM({ url: "/api/chat", streamAdapter: openAIAdapter() });
 | `openAIAdapter()` | Parses OpenAI Chat Completions streaming (`ChatCompletionChunk`) |
 | `openAIResponsesAdapter()` | Parses OpenAI Responses API streaming (`ResponseStreamEvent`) |
 | `openAIReadableStreamAdapter()` | Parses OpenAI SDK's `Stream.toReadableStream()` NDJSON output |
+| `vercelAIAdapter()` | Parses Vercel AI SDK v6 UIMessage streams from `toUIMessageStreamResponse()` |
+
+For a Vercel AI SDK route, use its stream adapter and message format together:
+
+```tsx
+import { fetchLLM, vercelAIAdapter, vercelAIMessageFormat } from "@openuidev/react-headless";
+
+const llm = fetchLLM({
+  url: "/api/chat",
+  streamAdapter: vercelAIAdapter(),
+  messageFormat: vercelAIMessageFormat,
+});
+```
 
 ### Custom adapter
 
@@ -213,6 +232,7 @@ const llm = fetchLLM({
 | `identityMessageFormat` | Default format when messages are already AG-UI shaped |
 | `openAIMessageFormat` | Converts to/from OpenAI `ChatCompletionMessageParam[]` |
 | `openAIConversationMessageFormat` | Converts to/from OpenAI Responses API `ResponseInputItem[]` |
+| `vercelAIMessageFormat` | Converts to/from Vercel AI SDK v6 `UIMessage[]` |
 
 ### Custom format
 
diff --git a/packages/react-headless/package.json b/packages/react-headless/package.json
index 221c39c3a..f2cec3ce8 100644
--- a/packages/react-headless/package.json
+++ b/packages/react-headless/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@openuidev/react-headless",
   "version": "0.9.6",
-  "description": "Headless React primitives for AI chat — state management, streaming adapters for OpenAI and AG-UI, message format converters, and thread management for OpenUI generative UI apps",
+  "description": "Headless React primitives for AI chat — state management, streaming adapters for OpenAI, Vercel AI SDK, and AG-UI, message format converters, and thread management for OpenUI generative UI apps",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -39,11 +39,18 @@
     "ci": "pnpm run lint:check && pnpm run format:check"
   },
   "peerDependencies": {
+    "ai": "^6.0.0",
     "react": "catalog:",
     "zustand": "catalog:"
   },
+  "peerDependenciesMeta": {
+    "ai": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/react": "catalog:",
+    "ai": "^6.0.236",
     "openai": "^6.22.0",
     "vitest": "^4.1.0"
   },
@@ -57,6 +64,7 @@
     "generative-ui",
     "llm",
     "openai",
+    "vercel-ai-sdk",
     "zustand",
     "state-management",
     "sse",
diff --git a/packages/react-headless/src/index.ts b/packages/react-headless/src/index.ts
index 6866ab82c..c5e02383f 100644
--- a/packages/react-headless/src/index.ts
+++ b/packages/react-headless/src/index.ts
@@ -29,11 +29,13 @@ export {
   openAIAdapter,
   openAIReadableStreamAdapter,
   openAIResponsesAdapter,
+  vercelAIAdapter,
 } from "./stream/adapters";
 export {
   langGraphMessageFormat,
   openAIConversationMessageFormat,
   openAIMessageFormat,
+  vercelAIMessageFormat,
 } from "./stream/formats";
 export { processStreamedMessage } from "./stream/processStreamedMessage";
 
diff --git a/packages/react-headless/src/stream/adapters/__tests__/vercel-ai-sdk.test.ts b/packages/react-headless/src/stream/adapters/__tests__/vercel-ai-sdk.test.ts
new file mode 100644
index 000000000..57d5eda9f
--- /dev/null
+++ b/packages/react-headless/src/stream/adapters/__tests__/vercel-ai-sdk.test.ts
@@ -0,0 +1,342 @@
+import { describe, expect, it, vi } from "vitest";
+import { vercelAIAdapter } from "../../../index";
+import { EventType, type AGUIEvent } from "../../../types";
+
+function sse(chunk: unknown): string {
+  return `data: ${JSON.stringify(chunk)}\n\n`;
+}
+
+function makeResponse(body: string, fragmentEveryByte = false): Response {
+  const bytes = new TextEncoder().encode(body);
+  const stream = new ReadableStream<Uint8Array>({
+    start(controller) {
+      if (fragmentEveryByte) {
+        for (const byte of bytes) controller.enqueue(Uint8Array.of(byte));
+      } else {
+        controller.enqueue(bytes);
+      }
+      controller.close();
+    },
+  });
+
+  return new Response(stream, {
+    headers: { "Content-Type": "text/event-stream" },
+  });
+}
+
+async function collect(iterable: AsyncIterable<AGUIEvent>): Promise<AGUIEvent[]> {
+  const events: AGUIEvent[] = [];
+  for await (const event of iterable) events.push(event);
+  return events;
+}
+
+async function parse(body: string): Promise<AGUIEvent[]> {
+  return collect(vercelAIAdapter().parse(makeResponse(body)));
+}
+
+describe("vercelAIAdapter", () => {
+  it("maps text start, delta, and end chunks", async () => {
+    const events = await parse(
+      sse({ type: "text-start", id: "text-1" }) +
+        sse({ type: "text-delta", id: "text-1", delta: "Hello" }) +
+        sse({ type: "text-delta", id: "text-1", delta: " world" }) +
+        sse({ type: "text-end", id: "text-1" }),
+    );
+
+    expect(events).toEqual([
+      {
+        type: EventType.TEXT_MESSAGE_START,
+        messageId: "text-1",
+        role: "assistant",
+      },
+      {
+        type: EventType.TEXT_MESSAGE_CONTENT,
+        messageId: "text-1",
+        delta: "Hello",
+      },
+      {
+        type: EventType.TEXT_MESSAGE_CONTENT,
+        messageId: "text-1",
+        delta: " world",
+      },
+      {
+        type: EventType.TEXT_MESSAGE_END,
+        messageId: "text-1",
+      },
+    ]);
+  });
+
+  it("maps streamed tool input without repeating the completed input", async () => {
+    const events = await parse(
+      sse({ type: "tool-input-start", toolCallId: "tool-1", toolName: "weather" }) +
+        sse({
+          type: "tool-input-delta",
+          toolCallId: "tool-1",
+          inputTextDelta: '{"city":"',
+        }) +
+        sse({ type: "tool-input-delta", toolCallId: "tool-1", inputTextDelta: 'Paris"}' }) +
+        sse({
+          type: "tool-input-available",
+          toolCallId: "tool-1",
+          toolName: "weather",
+          input: { city: "Paris" },
+        }),
+    );
+
+    expect(events).toEqual([
+      {
+        type: EventType.TOOL_CALL_START,
+        toolCallId: "tool-1",
+        toolCallName: "weather",
+      },
+      {
+        type: EventType.TOOL_CALL_ARGS,
+        toolCallId: "tool-1",
+        delta: '{"city":"',
+      },
+      {
+        type: EventType.TOOL_CALL_ARGS,
+        toolCallId: "tool-1",
+        delta: 'Paris"}',
+      },
+      {
+        type: EventType.TOOL_CALL_END,
+        toolCallId: "tool-1",
+      },
+    ]);
+  });
+
+  it("synthesizes a complete tool lifecycle for non-streamed input", async () => {
+    const events = await parse(
+      sse({
+        type: "tool-input-available",
+        toolCallId: "tool-2",
+        toolName: "search",
+        input: { query: "OpenUI" },
+      }),
+    );
+
+    expect(events).toEqual([
+      {
+        type: EventType.TOOL_CALL_START,
+        toolCallId: "tool-2",
+        toolCallName: "search",
+      },
+      {
+        type: EventType.TOOL_CALL_ARGS,
+        toolCallId: "tool-2",
+        delta: '{"query":"OpenUI"}',
+      },
+      {
+        type: EventType.TOOL_CALL_END,
+        toolCallId: "tool-2",
+      },
+    ]);
+  });
+
+  it("does not duplicate synthesized args or end events for repeated available input", async () => {
+    const available = {
+      type: "tool-input-available",
+      toolCallId: "tool-duplicate",
+      toolName: "search",
+      input: { query: "OpenUI" },
+    };
+    const events = await parse(sse(available) + sse(available));
+
+    expect(events).toEqual([
+      {
+        type: EventType.TOOL_CALL_START,
+        toolCallId: "tool-duplicate",
+        toolCallName: "search",
+      },
+      {
+        type: EventType.TOOL_CALL_ARGS,
+        toolCallId: "tool-duplicate",
+        delta: '{"query":"OpenUI"}',
+      },
+      {
+        type: EventType.TOOL_CALL_END,
+        toolCallId: "tool-duplicate",
+      },
+    ]);
+  });
+
+  it("maps successful tool output", async () => {
+    const events = await parse(
+      sse({
+        type: "tool-output-available",
+        toolCallId: "tool-3",
+        output: { temperature: 18, unit: "C" },
+      }),
+    );
+
+    expect(events).toEqual([
+      {
+        type: EventType.TOOL_CALL_RESULT,
+        messageId: "tool-result-tool-3",
+        toolCallId: "tool-3",
+        content: '{"temperature":18,"unit":"C"}',
+        role: "tool",
+      },
+    ]);
+  });
+
+  it("maps tool input errors to an ended call and errored result", async () => {
+    const events = await parse(
+      sse({
+        type: "tool-input-error",
+        toolCallId: "tool-4",
+        toolName: "weather",
+        input: { city: 42 },
+        errorText: "city must be a string",
+      }),
+    );
+
+    expect(events).toEqual([
+      {
+        type: EventType.TOOL_CALL_START,
+        toolCallId: "tool-4",
+        toolCallName: "weather",
+      },
+      {
+        type: EventType.TOOL_CALL_ARGS,
+        toolCallId: "tool-4",
+        delta: '{"city":42}',
+      },
+      {
+        type: EventType.TOOL_CALL_END,
+        toolCallId: "tool-4",
+      },
+      {
+        type: EventType.TOOL_CALL_RESULT,
+        messageId: "tool-result-tool-4",
+        toolCallId: "tool-4",
+        content: "city must be a string",
+        role: "tool",
+        isError: true,
+        error: "city must be a string",
+      },
+    ]);
+  });
+
+  it("maps tool output errors", async () => {
+    const events = await parse(
+      sse({
+        type: "tool-output-error",
+        toolCallId: "tool-5",
+        errorText: "weather service unavailable",
+      }),
+    );
+
+    expect(events).toEqual([
+      {
+        type: EventType.TOOL_CALL_RESULT,
+        messageId: "tool-result-tool-5",
+        toolCallId: "tool-5",
+        content: "weather service unavailable",
+        role: "tool",
+        isError: true,
+        error: "weather service unavailable",
+      },
+    ]);
+  });
+
+  it("preserves the error signal when tool output error text is empty", async () => {
+    const events = await parse(
+      sse({
+        type: "tool-output-error",
+        toolCallId: "tool-empty-error",
+        errorText: "",
+      }),
+    );
+
+    expect(events).toEqual([
+      {
+        type: EventType.TOOL_CALL_RESULT,
+        messageId: "tool-result-tool-empty-error",
+        toolCallId: "tool-empty-error",
+        content: "",
+        role: "tool",
+        isError: true,
+        error: "",
+      },
+    ]);
+  });
+
+  it("maps denied tool output to an errored result", async () => {
+    const events = await parse(sse({ type: "tool-output-denied", toolCallId: "tool-6" }));
+
+    expect(events).toEqual([
+      {
+        type: EventType.TOOL_CALL_RESULT,
+        messageId: "tool-result-tool-6",
+        toolCallId: "tool-6",
+        content: "Tool execution was denied",
+        role: "tool",
+        isError: true,
+        error: "Tool execution was denied",
+      },
+    ]);
+  });
+
+  it("handles SSE and multibyte text fragmented across response chunks", async () => {
+    const body =
+      sse({ type: "text-start", id: "text-fragmented" }) +
+      sse({ type: "text-delta", id: "text-fragmented", delta: "Hello 🌍" }) +
+      sse({ type: "text-end", id: "text-fragmented" });
+
+    const events = await collect(vercelAIAdapter().parse(makeResponse(body, true)));
+
+    expect(events).toEqual([
+      {
+        type: EventType.TEXT_MESSAGE_START,
+        messageId: "text-fragmented",
+        role: "assistant",
+      },
+      {
+        type: EventType.TEXT_MESSAGE_CONTENT,
+        messageId: "text-fragmented",
+        delta: "Hello 🌍",
+      },
+      {
+        type: EventType.TEXT_MESSAGE_END,
+        messageId: "text-fragmented",
+      },
+    ]);
+  });
+
+  it("maps AI SDK error chunks to RUN_ERROR", async () => {
+    const events = await parse(sse({ type: "error", errorText: "The model stream failed" }));
+
+    expect(events).toEqual([
+      {
+        type: EventType.RUN_ERROR,
+        message: "The model stream failed",
+      },
+    ]);
+  });
+
+  it("rejects invalid UIMessage chunks using the AI SDK parser", async () => {
+    await expect(
+      parse(sse({ type: "text-delta", id: "text-invalid", delta: 42 })),
+    ).rejects.toThrow();
+  });
+
+  it("reports the optional peer clearly when a bundler replaces it with an empty module", async () => {
+    vi.doMock("ai", () => ({}));
+
+    try {
+      await expect(collect(vercelAIAdapter().parse(makeResponse("")))).rejects.toThrow(
+        'vercelAIAdapter requires the optional peer dependency "ai" (Vercel AI SDK v6).',
+      );
+    } finally {
+      vi.doUnmock("ai");
+    }
+  });
+
+  it("throws when the response has no body", async () => {
+    await expect(collect(vercelAIAdapter().parse(new Response(null)))).rejects.toThrow(
+      "No response body",
+    );
+  });
+});
diff --git a/packages/react-headless/src/stream/adapters/index.ts b/packages/react-headless/src/stream/adapters/index.ts
index 9bfda1a25..21411ca7d 100644
--- a/packages/react-headless/src/stream/adapters/index.ts
+++ b/packages/react-headless/src/stream/adapters/index.ts
@@ -3,3 +3,4 @@ export * from "./langgraph";
 export * from "./openai-completions";
 export * from "./openai-readable-stream";
 export * from "./openai-responses";
+export * from "./vercel-ai-sdk";
diff --git a/packages/react-headless/src/stream/adapters/vercel-ai-sdk.ts b/packages/react-headless/src/stream/adapters/vercel-ai-sdk.ts
new file mode 100644
index 000000000..9d2915216
--- /dev/null
+++ b/packages/react-headless/src/stream/adapters/vercel-ai-sdk.ts
@@ -0,0 +1,188 @@
+import type { UIMessage, UIMessageChunk } from "ai";
+import { AGUIEvent, EventType, StreamProtocolAdapter } from "../../types";
+
+const MISSING_AI_SDK_MESSAGE =
+  'vercelAIAdapter requires the optional peer dependency "ai" (Vercel AI SDK v6).';
+const TOOL_EXECUTION_DENIED_MESSAGE = "Tool execution was denied";
+
+function serialize(value: unknown): string {
+  if (typeof value === "string") return value;
+  return JSON.stringify(value) ?? String(value);
+}
+
+async function parseUIMessageStream(
+  body: ReadableStream<Uint8Array>,
+): Promise<ReadableStream<UIMessageChunk>> {
+  let DefaultChatTransport: typeof import("ai").DefaultChatTransport;
+
+  try {
+    ({ DefaultChatTransport } = await import("ai"));
+  } catch (cause) {
+    throw new Error(MISSING_AI_SDK_MESSAGE, { cause });
+  }
+
+  // Some bundlers replace a missing optional peer with an empty module rather
+  // than rejecting the dynamic import. Keep that path on the same actionable
+  // error instead of failing later with "Class extends undefined".
+  if (typeof DefaultChatTransport !== "function") {
+    throw new Error(MISSING_AI_SDK_MESSAGE);
+  }
+
+  class UIMessageStreamParser extends DefaultChatTransport<UIMessage> {
+    parseBody(stream: ReadableStream<Uint8Array>): ReadableStream<UIMessageChunk> {
+      return this.processResponseStream(stream);
+    }
+  }
+
+  return new UIMessageStreamParser().parseBody(body);
+}
+
+async function* readChunks(stream: ReadableStream<UIMessageChunk>): AsyncIterable<UIMessageChunk> {
+  const reader = stream.getReader();
+  try {
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) return;
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+
+function toolResult(toolCallId: string, content: string, error?: string): AGUIEvent {
+  return {
+    type: EventType.TOOL_CALL_RESULT,
+    messageId: `tool-result-${toolCallId}`,
+    toolCallId,
+    content,
+    role: "tool",
+    ...(error !== undefined ? { isError: true, error } : {}),
+  } as AGUIEvent;
+}
+
+/**
+ * Adapter for Vercel AI SDK v6 UIMessage streams, such as responses returned by
+ * `toUIMessageStreamResponse()`.
+ *
+ * The AI SDK is loaded only when parsing begins so it can remain an optional
+ * peer dependency for consumers that use other stream adapters. Its
+ * `DefaultChatTransport` performs the native SSE decoding and chunk validation;
+ * this adapter only maps validated UIMessage chunks to AG-UI events.
+ */
+export const vercelAIAdapter = (): StreamProtocolAdapter => ({
+  async *parse(response): AsyncIterable<AGUIEvent> {
+    if (!response.body) throw new Error("No response body");
+
+    const chunks = await parseUIMessageStream(response.body);
+    const startedTools = new Set<string>();
+    const streamedToolArgs = new Set<string>();
+    const endedTools = new Set<string>();
+
+    for await (const chunk of readChunks(chunks)) {
+      switch (chunk.type) {
+        case "text-start":
+          yield {
+            type: EventType.TEXT_MESSAGE_START,
+            messageId: chunk.id,
+            role: "assistant",
+          };
+          break;
+
+        case "text-delta":
+          yield {
+            type: EventType.TEXT_MESSAGE_CONTENT,
+            messageId: chunk.id,
+            delta: chunk.delta,
+          };
+          break;
+
+        case "text-end":
+          yield {
+            type: EventType.TEXT_MESSAGE_END,
+            messageId: chunk.id,
+          };
+          break;
+
+        case "tool-input-start":
+          if (!startedTools.has(chunk.toolCallId)) {
+            startedTools.add(chunk.toolCallId);
+            yield {
+              type: EventType.TOOL_CALL_START,
+              toolCallId: chunk.toolCallId,
+              toolCallName: chunk.toolName,
+            };
+          }
+          break;
+
+        case "tool-input-delta":
+          if (chunk.inputTextDelta) {
+            streamedToolArgs.add(chunk.toolCallId);
+            yield {
+              type: EventType.TOOL_CALL_ARGS,
+              toolCallId: chunk.toolCallId,
+              delta: chunk.inputTextDelta,
+            };
+          }
+          break;
+
+        case "tool-input-available":
+        case "tool-input-error": {
+          if (!startedTools.has(chunk.toolCallId)) {
+            startedTools.add(chunk.toolCallId);
+            yield {
+              type: EventType.TOOL_CALL_START,
+              toolCallId: chunk.toolCallId,
+              toolCallName: chunk.toolName,
+            };
+          }
+
+          if (!streamedToolArgs.has(chunk.toolCallId)) {
+            streamedToolArgs.add(chunk.toolCallId);
+            yield {
+              type: EventType.TOOL_CALL_ARGS,
+              toolCallId: chunk.toolCallId,
+              delta: serialize(chunk.input),
+            };
+          }
+
+          if (!endedTools.has(chunk.toolCallId)) {
+            endedTools.add(chunk.toolCallId);
+            yield {
+              type: EventType.TOOL_CALL_END,
+              toolCallId: chunk.toolCallId,
+            };
+          }
+
+          if (chunk.type === "tool-input-error") {
+            yield toolResult(chunk.toolCallId, chunk.errorText, chunk.errorText);
+          }
+          break;
+        }
+
+        case "tool-output-available":
+          yield toolResult(chunk.toolCallId, serialize(chunk.output));
+          break;
+
+        case "tool-output-error":
+          yield toolResult(chunk.toolCallId, chunk.errorText, chunk.errorText);
+          break;
+
+        case "tool-output-denied":
+          yield toolResult(
+            chunk.toolCallId,
+            TOOL_EXECUTION_DENIED_MESSAGE,
+            TOOL_EXECUTION_DENIED_MESSAGE,
+          );
+          break;
+
+        case "error":
+          yield {
+            type: EventType.RUN_ERROR,
+            message: chunk.errorText,
+          };
+          break;
+      }
+    }
+  },
+});
diff --git a/packages/react-headless/src/stream/formats/__tests__/vercel-ai-message-format.test.ts b/packages/react-headless/src/stream/formats/__tests__/vercel-ai-message-format.test.ts
new file mode 100644
index 000000000..9668316b2
--- /dev/null
+++ b/packages/react-headless/src/stream/formats/__tests__/vercel-ai-message-format.test.ts
@@ -0,0 +1,547 @@
+import { describe, expect, it } from "vitest";
+import { vercelAIMessageFormat } from "../../../index";
+import type { Message } from "../../../types";
+
+describe("vercelAIMessageFormat", () => {
+  describe("toApi", () => {
+    it("converts user text to a UIMessage text part", () => {
+      expect(
+        vercelAIMessageFormat.toApi([{ id: "user-1", role: "user", content: "Hello" }]),
+      ).toEqual([{ id: "user-1", role: "user", parts: [{ type: "text", text: "Hello" }] }]);
+    });
+
+    it("converts AG-UI multimodal content to UIMessage file parts", () => {
+      const messages: Message[] = [
+        {
+          id: "user-1",
+          role: "user",
+          content: [
+            { type: "text", text: "Describe these" },
+            {
+              type: "binary",
+              mimeType: "image/png",
+              data: "iVBORw0KGgo=",
+              filename: "chart.png",
+            },
+            {
+              type: "binary",
+              mimeType: "application/pdf",
+              url: "https://example.com/report.pdf",
+              filename: "report.pdf",
+            },
+            {
+              type: "audio",
+              source: { type: "data", value: "YXVkaW8=", mimeType: "audio/mpeg" },
+            },
+            {
+              type: "video",
+              source: { type: "url", value: "https://example.com/demo.mp4" },
+            },
+          ],
+        },
+      ];
+
+      expect(vercelAIMessageFormat.toApi(messages)).toEqual([
+        {
+          id: "user-1",
+          role: "user",
+          parts: [
+            { type: "text", text: "Describe these" },
+            {
+              type: "file",
+              mediaType: "image/png",
+              url: "data:image/png;base64,iVBORw0KGgo=",
+              filename: "chart.png",
+            },
+            {
+              type: "file",
+              mediaType: "application/pdf",
+              url: "https://example.com/report.pdf",
+              filename: "report.pdf",
+            },
+            {
+              type: "file",
+              mediaType: "audio/mpeg",
+              url: "data:audio/mpeg;base64,YXVkaW8=",
+            },
+            {
+              type: "file",
+              mediaType: "video/*",
+              url: "https://example.com/demo.mp4",
+            },
+          ],
+        },
+      ]);
+    });
+
+    it("converts assistant text", () => {
+      expect(
+        vercelAIMessageFormat.toApi([
+          { id: "assistant-1", role: "assistant", content: "The answer is 42." },
+        ]),
+      ).toEqual([
+        {
+          id: "assistant-1",
+          role: "assistant",
+          parts: [{ type: "text", text: "The answer is 42." }],
+        },
+      ]);
+    });
+
+    it("folds separate AG-UI tool results into dynamic tool parts", () => {
+      const messages: Message[] = [
+        {
+          id: "assistant-1",
+          role: "assistant",
+          content: "Checking the weather.",
+          toolCalls: [
+            {
+              id: "call-1",
+              type: "function",
+              function: { name: "weather", arguments: '{"city":"Delhi"}' },
+            },
+            {
+              id: "call-2",
+              type: "function",
+              function: { name: "clock", arguments: "not-json" },
+            },
+          ],
+        },
+        {
+          id: "result-1",
+          role: "tool",
+          toolCallId: "call-1",
+          content: '{"temperature":31}',
+        },
+      ];
+
+      expect(vercelAIMessageFormat.toApi(messages)).toEqual([
+        {
+          id: "assistant-1",
+          role: "assistant",
+          parts: [
+            { type: "text", text: "Checking the weather." },
+            {
+              type: "dynamic-tool",
+              toolName: "weather",
+              toolCallId: "call-1",
+              state: "output-available",
+              input: { city: "Delhi" },
+              output: '{"temperature":31}',
+            },
+            {
+              type: "dynamic-tool",
+              toolName: "clock",
+              toolCallId: "call-2",
+              state: "input-available",
+              input: "not-json",
+            },
+          ],
+        },
+      ]);
+    });
+
+    it("maps AG-UI tool errors to output-error parts", () => {
+      const messages: Message[] = [
+        {
+          id: "assistant-1",
+          role: "assistant",
+          toolCalls: [
+            {
+              id: "call-1",
+              type: "function",
+              function: { name: "weather", arguments: "{}" },
+            },
+          ],
+        },
+        {
+          id: "result-1",
+          role: "tool",
+          toolCallId: "call-1",
+          content: "upstream failed",
+          error: "Weather service unavailable",
+        },
+      ];
+
+      expect(vercelAIMessageFormat.toApi(messages)).toEqual([
+        {
+          id: "assistant-1",
+          role: "assistant",
+          parts: [
+            {
+              type: "dynamic-tool",
+              toolName: "weather",
+              toolCallId: "call-1",
+              state: "output-error",
+              input: {},
+              errorText: "Weather service unavailable",
+            },
+          ],
+        },
+      ]);
+    });
+
+    it("maps system and developer messages to the UIMessage system role", () => {
+      expect(
+        vercelAIMessageFormat.toApi([
+          { id: "system-1", role: "system", content: "System instructions" },
+          { id: "developer-1", role: "developer", content: "Developer instructions" },
+        ]),
+      ).toEqual([
+        {
+          id: "system-1",
+          role: "system",
+          parts: [{ type: "text", text: "System instructions" }],
+        },
+        {
+          id: "developer-1",
+          role: "system",
+          parts: [{ type: "text", text: "Developer instructions" }],
+        },
+      ]);
+    });
+  });
+
+  describe("fromApi", () => {
+    it("converts user text and file parts to AG-UI content", () => {
+      expect(
+        vercelAIMessageFormat.fromApi([
+          {
+            id: "user-1",
+            role: "user",
+            parts: [
+              { type: "text", text: "Read this" },
+              {
+                type: "file",
+                mediaType: "image/png",
+                filename: "image.png",
+                url: "data:image/png;base64,aW1hZ2U=",
+              },
+              {
+                type: "file",
+                mediaType: "application/pdf",
+                filename: "report.pdf",
+                url: "https://example.com/report.pdf",
+              },
+            ],
+          },
+        ]),
+      ).toEqual([
+        {
+          id: "user-1",
+          role: "user",
+          content: [
+            { type: "text", text: "Read this" },
+            {
+              type: "binary",
+              mimeType: "image/png",
+              filename: "image.png",
+              data: "aW1hZ2U=",
+            },
+            {
+              type: "binary",
+              mimeType: "application/pdf",
+              filename: "report.pdf",
+              url: "https://example.com/report.pdf",
+            },
+          ],
+        },
+      ]);
+    });
+
+    it("converts dynamic and static tool parts, including results and errors", () => {
+      const messages = vercelAIMessageFormat.fromApi([
+        {
+          id: "assistant-1",
+          role: "assistant",
+          parts: [
+            { type: "text", text: "Done" },
+            {
+              type: "dynamic-tool",
+              toolName: "weather",
+              toolCallId: "call-1",
+              state: "output-available",
+              input: { city: "Delhi" },
+              output: { temperature: 31 },
+            },
+            {
+              type: "tool-search",
+              toolCallId: "call-2",
+              state: "output-error",
+              input: { query: "OpenUI" },
+              errorText: "Search failed",
+            },
+            {
+              type: "tool-email",
+              toolCallId: "call-3",
+              state: "input-available",
+              input: { to: "user@example.com" },
+            },
+          ],
+        },
+      ]);
+
+      expect(messages).toEqual([
+        {
+          id: "assistant-1",
+          role: "assistant",
+          content: "Done",
+          toolCalls: [
+            {
+              id: "call-1",
+              type: "function",
+              function: { name: "weather", arguments: '{"city":"Delhi"}' },
+            },
+            {
+              id: "call-2",
+              type: "function",
+              function: { name: "search", arguments: '{"query":"OpenUI"}' },
+            },
+            {
+              id: "call-3",
+              type: "function",
+              function: { name: "email", arguments: '{"to":"user@example.com"}' },
+            },
+          ],
+        },
+        {
+          id: "tool-result-call-1",
+          role: "tool",
+          toolCallId: "call-1",
+          content: '{"temperature":31}',
+        },
+        {
+          id: "tool-result-call-2",
+          role: "tool",
+          toolCallId: "call-2",
+          content: "Search failed",
+          error: "Search failed",
+        },
+      ]);
+    });
+
+    it("preserves multi-step assistant, tool-result, assistant ordering", () => {
+      expect(
+        vercelAIMessageFormat.fromApi([
+          {
+            id: "assistant-1",
+            role: "assistant",
+            parts: [
+              { type: "step-start" },
+              { type: "text", text: "Let me search." },
+              {
+                type: "dynamic-tool",
+                toolName: "search",
+                toolCallId: "call-1",
+                state: "output-available",
+                input: { query: "OpenUI" },
+                output: { hits: 1 },
+              },
+              { type: "step-start" },
+              { type: "text", text: "I found the answer." },
+            ],
+          },
+        ]),
+      ).toEqual([
+        {
+          id: "assistant-1",
+          role: "assistant",
+          content: "Let me search.",
+          toolCalls: [
+            {
+              id: "call-1",
+              type: "function",
+              function: { name: "search", arguments: '{"query":"OpenUI"}' },
+            },
+          ],
+        },
+        {
+          id: "tool-result-call-1",
+          role: "tool",
+          toolCallId: "call-1",
+          content: '{"hits":1}',
+        },
+        {
+          id: "assistant-1-segment-2",
+          role: "assistant",
+          content: "I found the answer.",
+        },
+      ]);
+    });
+
+    it("splits consecutive text parts while grouping consecutive tools with their segment", () => {
+      expect(
+        vercelAIMessageFormat.fromApi([
+          {
+            id: "assistant-1",
+            role: "assistant",
+            parts: [
+              { type: "text", text: "First section." },
+              { type: "text", text: "Second section." },
+              {
+                type: "tool-weather",
+                toolCallId: "call-1",
+                state: "output-available",
+                input: { city: "Delhi" },
+                output: { temperature: 31 },
+              },
+              {
+                type: "dynamic-tool",
+                toolName: "clock",
+                toolCallId: "call-2",
+                state: "output-available",
+                input: { timezone: "Asia/Kolkata" },
+                output: "12:00",
+              },
+              { type: "text", text: "Final section." },
+            ],
+          },
+        ]),
+      ).toEqual([
+        {
+          id: "assistant-1",
+          role: "assistant",
+          content: "First section.",
+        },
+        {
+          id: "assistant-1-segment-2",
+          role: "assistant",
+          content: "Second section.",
+          toolCalls: [
+            {
+              id: "call-1",
+              type: "function",
+              function: { name: "weather", arguments: '{"city":"Delhi"}' },
+            },
+            {
+              id: "call-2",
+              type: "function",
+              function: { name: "clock", arguments: '{"timezone":"Asia/Kolkata"}' },
+            },
+          ],
+        },
+        {
+          id: "tool-result-call-1",
+          role: "tool",
+          toolCallId: "call-1",
+          content: '{"temperature":31}',
+        },
+        {
+          id: "tool-result-call-2",
+          role: "tool",
+          toolCallId: "call-2",
+          content: "12:00",
+        },
+        {
+          id: "assistant-1-segment-3",
+          role: "assistant",
+          content: "Final section.",
+        },
+      ]);
+    });
+
+    it("round-trips supported AG-UI messages with documented normalization", () => {
+      const messages: Message[] = [
+        { id: "system-1", role: "system", content: "Be helpful" },
+        {
+          id: "user-1",
+          role: "user",
+          content: [
+            { type: "text", text: "Inspect" },
+            {
+              type: "binary",
+              mimeType: "image/png",
+              data: "aW1hZ2U=",
+              filename: "image.png",
+            },
+          ],
+        },
+        {
+          id: "assistant-1",
+          role: "assistant",
+          content: "I inspected it.",
+          toolCalls: [
+            {
+              id: "call-1",
+              type: "function",
+              function: { name: "inspect", arguments: '{"detailed":true}' },
+            },
+          ],
+        },
+        {
+          id: "result-1",
+          role: "tool",
+          toolCallId: "call-1",
+          content: '{"safe":true}',
+        },
+      ];
+
+      expect(vercelAIMessageFormat.fromApi(vercelAIMessageFormat.toApi(messages))).toEqual([
+        messages[0],
+        messages[1],
+        messages[2],
+        {
+          id: "tool-result-call-1",
+          role: "tool",
+          toolCallId: "call-1",
+          content: '{"safe":true}',
+        },
+      ]);
+    });
+
+    it("returns an empty list for a non-array payload", () => {
+      expect(vercelAIMessageFormat.fromApi(null)).toEqual([]);
+      expect(vercelAIMessageFormat.fromApi({ messages: [] })).toEqual([]);
+    });
+
+    it("skips malformed messages and malformed parts without throwing", () => {
+      expect(
+        vercelAIMessageFormat.fromApi([
+          null,
+          "message",
+          { id: 123, role: "user", parts: [] },
+          { id: "missing-parts", role: "assistant" },
+          { id: "unknown-role", role: "tool", parts: [] },
+          {
+            id: "user-1",
+            role: "user",
+            parts: [
+              null,
+              { type: "text", text: 42 },
+              { type: "file", mediaType: "image/png" },
+              { type: "text", text: "valid" },
+            ],
+          },
+          {
+            id: "assistant-1",
+            role: "assistant",
+            parts: [
+              { type: "dynamic-tool", toolName: "", toolCallId: "bad", state: "input-available" },
+              { type: "tool-", toolCallId: "bad-2", state: "input-available" },
+              { type: "tool-valid", toolCallId: 123, state: "input-available" },
+              {
+                type: "tool-valid",
+                toolCallId: "call-1",
+                state: "output-error",
+                input: {},
+              },
+            ],
+          },
+        ]),
+      ).toEqual([
+        { id: "user-1", role: "user", content: "valid" },
+        {
+          id: "assistant-1",
+          role: "assistant",
+          toolCalls: [
+            {
+              id: "call-1",
+              type: "function",
+              function: { name: "valid", arguments: "{}" },
+            },
+          ],
+        },
+      ]);
+    });
+  });
+});
diff --git a/packages/react-headless/src/stream/formats/index.ts b/packages/react-headless/src/stream/formats/index.ts
index 1d627b7b6..0741c77bb 100644
--- a/packages/react-headless/src/stream/formats/index.ts
+++ b/packages/react-headless/src/stream/formats/index.ts
@@ -1,3 +1,4 @@
 export * from "./langgraph-message-format";
 export * from "./openai-conversation-message-format";
 export * from "./openai-message-format";
+export * from "./vercel-ai-message-format";
diff --git a/packages/react-headless/src/stream/formats/vercel-ai-message-format.ts b/packages/react-headless/src/stream/formats/vercel-ai-message-format.ts
new file mode 100644
index 000000000..601265056
--- /dev/null
+++ b/packages/react-headless/src/stream/formats/vercel-ai-message-format.ts
@@ -0,0 +1,440 @@
+import type { DynamicToolUIPart, UIMessage } from "ai";
+import type { InputContent, Message, ToolCall, ToolMessage, UserMessage } from "../../types";
+import type { MessageFormat } from "../../types/messageFormat";
+
+type UnknownRecord = Record<string, unknown> & {
+  data?: unknown;
+  errorText?: unknown;
+  filename?: unknown;
+  id?: unknown;
+  input?: unknown;
+  mediaType?: unknown;
+  mimeType?: unknown;
+  output?: unknown;
+  parts?: unknown;
+  role?: unknown;
+  source?: unknown;
+  state?: unknown;
+  text?: unknown;
+  toolCallId?: unknown;
+  toolName?: unknown;
+  type?: unknown;
+  url?: unknown;
+  value?: unknown;
+};
+
+type ValidUIMessage = UnknownRecord & {
+  id: string;
+  role: "system" | "user" | "assistant";
+  parts: unknown[];
+};
+
+function isRecord(value: unknown): value is UnknownRecord {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function serialize(value: unknown): string {
+  if (typeof value === "string") return value;
+
+  try {
+    return JSON.stringify(value) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function parseToolInput(value: string): unknown {
+  try {
+    return JSON.parse(value) as unknown;
+  } catch {
+    return value;
+  }
+}
+
+function dataUrl(mediaType: string, data: string): string {
+  return `data:${mediaType};base64,${data}`;
+}
+
+function mediaTypeForPart(part: UnknownRecord, source: UnknownRecord): string {
+  if (typeof source.mimeType === "string") return source.mimeType;
+
+  switch (part.type) {
+    case "image":
+      return "image/*";
+    case "audio":
+      return "audio/*";
+    case "video":
+      return "video/*";
+    default:
+      return "application/octet-stream";
+  }
+}
+
+function toUserParts(content: UserMessage["content"]): UIMessage["parts"] {
+  if (typeof content === "string") {
+    return [{ type: "text", text: content }];
+  }
+
+  if (!Array.isArray(content)) return [];
+
+  return content.flatMap((part): UIMessage["parts"] => {
+    if (!isRecord(part)) return [];
+
+    if (part.type === "text" && typeof part.text === "string") {
+      return [{ type: "text", text: part.text }];
+    }
+
+    if (part.type === "binary") {
+      const mediaType =
+        typeof part.mimeType === "string" ? part.mimeType : "application/octet-stream";
+      const url =
+        typeof part.url === "string"
+          ? part.url
+          : typeof part.data === "string"
+            ? dataUrl(mediaType, part.data)
+            : undefined;
+
+      if (!url) return [];
+
+      return [
+        {
+          type: "file",
+          mediaType,
+          url,
+          ...(typeof part.filename === "string" ? { filename: part.filename } : {}),
+        },
+      ];
+    }
+
+    switch (part.type) {
+      case "image":
+      case "audio":
+      case "video":
+      case "document": {
+        if (!isRecord(part.source) || typeof part.source.value !== "string") return [];
+
+        const mediaType = mediaTypeForPart(part, part.source);
+        const url =
+          part.source.type === "data"
+            ? dataUrl(mediaType, part.source.value)
+            : part.source.type === "url"
+              ? part.source.value
+              : undefined;
+
+        return url ? [{ type: "file", mediaType, url }] : [];
+      }
+      default:
+        return [];
+    }
+  });
+}
+
+function toToolPart(toolCall: ToolCall, result: ToolMessage | undefined): DynamicToolUIPart {
+  const input = parseToolInput(toolCall.function.arguments);
+
+  if (result?.error) {
+    return {
+      type: "dynamic-tool",
+      toolName: toolCall.function.name,
+      toolCallId: toolCall.id,
+      state: "output-error",
+      input,
+      errorText: result.error,
+    };
+  }
+
+  if (result) {
+    return {
+      type: "dynamic-tool",
+      toolName: toolCall.function.name,
+      toolCallId: toolCall.id,
+      state: "output-available",
+      input,
+      output: result.content,
+    };
+  }
+
+  return {
+    type: "dynamic-tool",
+    toolName: toolCall.function.name,
+    toolCallId: toolCall.id,
+    state: "input-available",
+    input,
+  };
+}
+
+function toVercelMessages(messages: Message[]): UIMessage[] {
+  const toolResults = new Map<string, ToolMessage>();
+
+  for (const message of messages) {
+    if (message.role === "tool") toolResults.set(message.toolCallId, message);
+  }
+
+  const result: UIMessage[] = [];
+
+  for (const message of messages) {
+    switch (message.role) {
+      case "user":
+        result.push({ id: message.id, role: "user", parts: toUserParts(message.content) });
+        break;
+
+      case "assistant": {
+        const parts: UIMessage["parts"] = [];
+
+        if (message.content !== undefined) {
+          parts.push({ type: "text", text: message.content });
+        }
+
+        for (const toolCall of message.toolCalls ?? []) {
+          parts.push(toToolPart(toolCall, toolResults.get(toolCall.id)));
+        }
+
+        result.push({ id: message.id, role: "assistant", parts });
+        break;
+      }
+
+      case "system":
+      case "developer":
+        result.push({
+          id: message.id,
+          role: "system",
+          parts: [{ type: "text", text: message.content }],
+        });
+        break;
+
+      // Vercel UIMessage has no standalone tool-result, reasoning, or activity role.
+      // Tool results were folded into their matching assistant parts above.
+      default:
+        break;
+    }
+  }
+
+  return result;
+}
+
+function validUIMessage(value: unknown): value is ValidUIMessage {
+  return (
+    isRecord(value) &&
+    typeof value.id === "string" &&
+    (value.role === "system" || value.role === "user" || value.role === "assistant") &&
+    Array.isArray(value.parts)
+  );
+}
+
+function textFromParts(parts: unknown[]): string {
+  return parts
+    .filter(
+      (part): part is UnknownRecord & { type: "text"; text: string } =>
+        isRecord(part) && part.type === "text" && typeof part.text === "string",
+    )
+    .map((part) => part.text)
+    .join("");
+}
+
+function binaryFromFilePart(part: UnknownRecord): InputContent | undefined {
+  if (part.type !== "file" || typeof part.mediaType !== "string" || typeof part.url !== "string") {
+    return undefined;
+  }
+
+  const base64Prefix = `data:${part.mediaType};base64,`;
+  const source = part.url.startsWith(base64Prefix)
+    ? { data: part.url.slice(base64Prefix.length) }
+    : { url: part.url };
+
+  return {
+    type: "binary",
+    mimeType: part.mediaType,
+    ...source,
+    ...(typeof part.filename === "string" ? { filename: part.filename } : {}),
+  };
+}
+
+function fromVercelUser(message: ValidUIMessage): UserMessage {
+  const contentParts: InputContent[] = [];
+  let hasFile = false;
+
+  for (const part of message.parts) {
+    if (!isRecord(part)) continue;
+
+    if (part.type === "text" && typeof part.text === "string") {
+      contentParts.push({ type: "text", text: part.text });
+      continue;
+    }
+
+    const binary = binaryFromFilePart(part);
+    if (binary) {
+      hasFile = true;
+      contentParts.push(binary);
+    }
+  }
+
+  return {
+    id: message.id,
+    role: "user",
+    content: hasFile ? contentParts : textFromParts(message.parts),
+  };
+}
+
+function toolName(part: UnknownRecord): string | undefined {
+  if (part.type === "dynamic-tool") {
+    return typeof part.toolName === "string" && part.toolName.length > 0
+      ? part.toolName
+      : undefined;
+  }
+
+  if (typeof part.type !== "string" || !part.type.startsWith("tool-")) return undefined;
+  const name = part.type.slice("tool-".length);
+  return name || undefined;
+}
+
+function hasOwn(record: UnknownRecord, key: string): boolean {
+  return Object.prototype.hasOwnProperty.call(record, key);
+}
+
+function toolResultFromPart(part: UnknownRecord): ToolMessage | undefined {
+  if (typeof part.toolCallId !== "string") return undefined;
+
+  if (part.state === "output-available" && hasOwn(part, "output")) {
+    return {
+      id: `tool-result-${part.toolCallId}`,
+      role: "tool",
+      toolCallId: part.toolCallId,
+      content: serialize(part.output),
+    };
+  }
+
+  if (part.state === "output-error" && typeof part.errorText === "string") {
+    return {
+      id: `tool-result-${part.toolCallId}`,
+      role: "tool",
+      toolCallId: part.toolCallId,
+      content: part.errorText,
+      error: part.errorText,
+    };
+  }
+
+  if (part.state === "output-denied") {
+    const error = "Tool execution was denied";
+    return {
+      id: `tool-result-${part.toolCallId}`,
+      role: "tool",
+      toolCallId: part.toolCallId,
+      content: error,
+      error,
+    };
+  }
+
+  return undefined;
+}
+
+function appendAssistantSegments(message: ValidUIMessage, result: Message[]): void {
+  let segmentIndex = 0;
+  let segmentStarted = false;
+  let text = "";
+  let toolCalls: ToolCall[] = [];
+  let toolResults: ToolMessage[] = [];
+
+  const hasBody = () => text.length > 0 || toolCalls.length > 0;
+
+  const flush = (force = false) => {
+    if (!force && !segmentStarted) return;
+
+    segmentIndex += 1;
+    result.push({
+      id: segmentIndex === 1 ? message.id : `${message.id}-segment-${segmentIndex}`,
+      role: "assistant",
+      ...(text ? { content: text } : {}),
+      ...(toolCalls.length ? { toolCalls } : {}),
+    });
+    result.push(...toolResults);
+
+    text = "";
+    toolCalls = [];
+    toolResults = [];
+    segmentStarted = false;
+  };
+
+  for (const value of message.parts) {
+    if (!isRecord(value)) continue;
+
+    if (value.type === "text" && typeof value.text === "string") {
+      // Each accumulated TextUIPart corresponds to a text-start item in the
+      // native stream. processStreamedMessage starts a new assistant message
+      // when a new text item follows existing text or tool calls, so mirror
+      // that boundary when rebuilding history from a final UIMessage.
+      if (hasBody()) flush();
+      segmentStarted = true;
+      text += value.text;
+      continue;
+    }
+
+    const name = toolName(value);
+    if (!name || typeof value.toolCallId !== "string") continue;
+
+    segmentStarted = true;
+    toolCalls.push({
+      id: value.toolCallId,
+      type: "function",
+      function: {
+        name,
+        arguments: hasOwn(value, "input") ? serialize(value.input) : "",
+      },
+    });
+
+    const toolResult = toolResultFromPart(value);
+    if (toolResult) toolResults.push(toolResult);
+  }
+
+  // AI SDK permits an assistant UIMessage with no parts. Preserve it as one
+  // empty assistant rather than dropping the source message entirely.
+  flush(segmentIndex === 0);
+}
+
+function fromVercelMessages(data: unknown): Message[] {
+  if (!Array.isArray(data)) return [];
+
+  const result: Message[] = [];
+
+  for (const value of data) {
+    if (!validUIMessage(value)) continue;
+    const message = value;
+
+    if (message.role === "user") {
+      result.push(fromVercelUser(message));
+      continue;
+    }
+
+    const text = textFromParts(message.parts);
+
+    if (message.role === "system") {
+      result.push({ id: message.id, role: "system", content: text });
+      continue;
+    }
+
+    appendAssistantSegments(message, result);
+  }
+
+  return result;
+}
+
+/**
+ * Converts messages between AG-UI and Vercel AI SDK v6 `UIMessage` format.
+ *
+ * AG-UI tool-result messages are folded into the matching assistant tool part,
+ * because `UIMessage` represents a tool invocation and its result as one part.
+ * Outbound tool calls use `dynamic-tool` parts because AG-UI messages do not
+ * carry the static tool schema needed to select a `tool-${name}` part. Inbound
+ * conversion accepts both dynamic and static tool parts.
+ *
+ * Vercel `UIMessage` has no developer role, so both AG-UI system and developer
+ * messages map to its system role.
+ */
+export const vercelAIMessageFormat: MessageFormat = {
+  toApi(messages: Message[]): UIMessage[] {
+    return toVercelMessages(messages);
+  },
+
+  fromApi(data: unknown): Message[] {
+    return fromVercelMessages(data);
+  },
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9c1404a3a..e8e2fad35 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1888,6 +1888,9 @@ importers:
       '@types/react':
         specifier: 'catalog:'
         version: 19.2.17
+      ai:
+        specifier: ^6.0.236
+        version: 6.0.236(zod@4.4.3)
       openai:
         specifier: ^6.22.0
         version: 6.49.0(@aws-sdk/credential-provider-node@3.972.73)(@smithy/signature-v4@5.6.11)(ws@8.21.1)(zod@4.4.3)

From ccabb3798b56e60ab6462093393221728386173b Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Wed, 5 Aug 2026 20:06:09 +0530
Subject: [PATCH 09/15] fix(react-headless): preserve Vercel AI stream
 semantics

---
 docs/content/docs/api-reference/index.mdx     |   2 +-
 .../docs/api-reference/react-headless.mdx     |   8 +
 packages/react-headless/README.md             |   4 +
 .../vercel-ai-sdk.integration.test.ts         | 140 ++++++++++++++++++
 .../adapters/__tests__/vercel-ai-sdk.test.ts  |  62 ++++++++
 .../src/stream/adapters/vercel-ai-sdk.ts      |  30 ++++
 .../vercel-ai-message-format.test.ts          | 132 +++++++++++++++++
 .../formats/vercel-ai-message-format.ts       |  36 ++++-
 .../src/stream/processStreamedMessage.ts      |  69 ++++++---
 9 files changed, 459 insertions(+), 24 deletions(-)
 create mode 100644 packages/react-headless/src/stream/__tests__/vercel-ai-sdk.integration.test.ts

diff --git a/docs/content/docs/api-reference/index.mdx b/docs/content/docs/api-reference/index.mdx
index 68e40ef49..4c195d281 100644
--- a/docs/content/docs/api-reference/index.mdx
+++ b/docs/content/docs/api-reference/index.mdx
@@ -9,7 +9,7 @@ The OpenUI SDK is split into packages that build on each other:
 
 - **`@openuidev/react-lang`** — React runtime. Define component libraries with Zod schemas, generate system prompts, parse OpenUI Lang, and render streamed output to React. This is the foundation for React integrations.
 
-- **`@openuidev/react-headless`** — Headless chat state management. Provides `ChatProvider`, thread/message hooks, streaming protocol adapters (OpenAI, AG-UI), and message format converters. Use this when you want full control over your chat UI.
+- **`@openuidev/react-headless`** — Headless chat state management. Provides `ChatProvider`, thread/message hooks, streaming protocol adapters (OpenAI, Vercel AI SDK, AG-UI), and message format converters. Use this when you want full control over your chat UI.
 
 - **`@openuidev/react-ui`** — `AgentInterface`, a ready-to-use artifact chat surface with thread history, plus two built-in component libraries (general-purpose and chat-optimized). Depends on both packages above. Use this for the fastest path to a working chat interface.
 
diff --git a/docs/content/docs/api-reference/react-headless.mdx b/docs/content/docs/api-reference/react-headless.mdx
index 22b2906bf..f191562fd 100644
--- a/docs/content/docs/api-reference/react-headless.mdx
+++ b/docs/content/docs/api-reference/react-headless.mdx
@@ -15,9 +15,11 @@ import {
   openAIAdapter,
   openAIResponsesAdapter,
   openAIReadableStreamAdapter,
+  vercelAIAdapter,
   agUIAdapter,
   openAIMessageFormat,
   openAIConversationMessageFormat,
+  vercelAIMessageFormat,
   identityMessageFormat,
   processStreamedMessage,
   MessageProvider,
@@ -105,6 +107,7 @@ Adapters referenced in integration guides:
 function openAIAdapter(): StreamProtocolAdapter; // OpenAI Chat Completions stream
 function openAIResponsesAdapter(): StreamProtocolAdapter; // OpenAI Responses stream
 function openAIReadableStreamAdapter(): StreamProtocolAdapter; // OpenAI ReadableStream
+function vercelAIAdapter(): StreamProtocolAdapter; // Vercel AI SDK v6 UIMessage stream
 function agUIAdapter(): StreamProtocolAdapter; // AG-UI protocol stream
 ```
 
@@ -123,6 +126,7 @@ Converters referenced in integration guides:
 ```ts
 const openAIMessageFormat: MessageFormat; // Chat Completions format
 const openAIConversationMessageFormat: MessageFormat; // Responses/Conversations item format
+const vercelAIMessageFormat: MessageFormat; // Vercel AI SDK v6 UIMessage format
 const identityMessageFormat: MessageFormat; // Pass-through (no conversion)
 ```
 
@@ -135,6 +139,10 @@ interface MessageFormat {
 }
 ```
 
+The Vercel AI SDK integration supports app-executed tools. Provider-executed tools
+(`providerExecuted: true`) are rejected because AG-UI messages cannot preserve
+their assistant-contained result semantics.
+
 ## Message types
 
 ```ts
diff --git a/packages/react-headless/README.md b/packages/react-headless/README.md
index 0af453a73..c79650864 100644
--- a/packages/react-headless/README.md
+++ b/packages/react-headless/README.md
@@ -199,6 +199,10 @@ const llm = fetchLLM({
 });
 ```
 
+This integration supports app-executed tools. Provider-executed tools
+(`providerExecuted: true`, such as provider-hosted built-ins) throw an error because
+the AG-UI message model cannot preserve their assistant-contained result semantics.
+
 ### Custom adapter
 
 Implement the `StreamProtocolAdapter` interface:
diff --git a/packages/react-headless/src/stream/__tests__/vercel-ai-sdk.integration.test.ts b/packages/react-headless/src/stream/__tests__/vercel-ai-sdk.integration.test.ts
new file mode 100644
index 000000000..d7010ef22
--- /dev/null
+++ b/packages/react-headless/src/stream/__tests__/vercel-ai-sdk.integration.test.ts
@@ -0,0 +1,140 @@
+import { convertToModelMessages, type UIMessage } from "ai";
+import { beforeAll, describe, expect, it } from "vitest";
+import type { Message } from "../../types";
+import { vercelAIAdapter } from "../adapters/vercel-ai-sdk";
+import { vercelAIMessageFormat } from "../formats/vercel-ai-message-format";
+import { processStreamedMessage } from "../processStreamedMessage";
+
+beforeAll(() => {
+  const globalWithAnimationFrame = globalThis as unknown as {
+    requestAnimationFrame?: (callback: FrameRequestCallback) => number;
+    cancelAnimationFrame?: (id: number) => void;
+  };
+
+  if (typeof globalWithAnimationFrame.requestAnimationFrame !== "function") {
+    globalWithAnimationFrame.requestAnimationFrame = (callback: FrameRequestCallback) =>
+      setTimeout(() => callback(performance.now()), 0) as unknown as number;
+    globalWithAnimationFrame.cancelAnimationFrame = (id: number) => clearTimeout(id);
+  }
+});
+
+function sse(chunk: unknown): string {
+  return `data: ${JSON.stringify(chunk)}\n\n`;
+}
+
+function responseFromChunks(...chunks: unknown[]): Response {
+  return new Response(chunks.map(sse).join(""), {
+    headers: { "Content-Type": "text/event-stream" },
+  });
+}
+
+describe("Vercel AI SDK stream integration", () => {
+  it("keeps multiple text parts in one model step as one assistant message", async () => {
+    const messages: Message[] = [];
+
+    await processStreamedMessage({
+      response: responseFromChunks(
+        { type: "start-step" },
+        { type: "text-start", id: "text-1" },
+        { type: "text-delta", id: "text-1", delta: "one" },
+        { type: "text-end", id: "text-1" },
+        { type: "text-start", id: "text-2" },
+        { type: "text-delta", id: "text-2", delta: "two" },
+        { type: "text-end", id: "text-2" },
+        { type: "finish-step" },
+      ),
+      adapter: vercelAIAdapter(),
+      createMessage: (message) => messages.push(message),
+      updateMessage: (message) => {
+        const index = messages.findIndex((candidate) => candidate.id === message.id);
+        if (index !== -1) messages[index] = message;
+      },
+    });
+
+    expect(messages).toHaveLength(1);
+    expect(messages[0]).toMatchObject({ role: "assistant", content: "onetwo" });
+
+    expect(
+      vercelAIMessageFormat.fromApi([
+        {
+          id: "assistant-1",
+          role: "assistant",
+          parts: [
+            { type: "step-start" },
+            { type: "text", text: "one" },
+            { type: "text", text: "two" },
+          ],
+        },
+      ]),
+    ).toEqual([{ id: "assistant-1", role: "assistant", content: "onetwo" }]);
+  });
+
+  it("preserves tool-only step order and emits no empty model text blocks", async () => {
+    const messages: Message[] = [];
+
+    await processStreamedMessage({
+      response: responseFromChunks(
+        { type: "start", messageId: "assistant-1" },
+        { type: "start-step" },
+        {
+          type: "tool-input-available",
+          toolCallId: "call-1",
+          toolName: "lookup",
+          input: { id: "first" },
+        },
+        {
+          type: "tool-output-available",
+          toolCallId: "call-1",
+          output: { nextId: "second" },
+        },
+        { type: "finish-step" },
+        { type: "start-step" },
+        {
+          type: "tool-input-available",
+          toolCallId: "call-2",
+          toolName: "lookup",
+          input: { id: "second" },
+        },
+        {
+          type: "tool-output-available",
+          toolCallId: "call-2",
+          output: { value: "done" },
+        },
+        { type: "finish-step" },
+        { type: "finish", finishReason: "stop" },
+      ),
+      adapter: vercelAIAdapter(),
+      createMessage: (message) => messages.push(message),
+      updateMessage: (message) => {
+        const index = messages.findIndex((candidate) => candidate.id === message.id);
+        if (index !== -1) messages[index] = message;
+      },
+    });
+
+    expect(messages.map((message) => message.role)).toEqual([
+      "assistant",
+      "tool",
+      "assistant",
+      "tool",
+    ]);
+
+    const uiMessages = vercelAIMessageFormat.toApi(messages) as UIMessage[];
+    expect(
+      uiMessages.flatMap((message) => message.parts).filter((part) => part.type === "text"),
+    ).toEqual([]);
+
+    const modelMessages = await convertToModelMessages(uiMessages);
+    expect(modelMessages.map((message) => message.role)).toEqual([
+      "assistant",
+      "tool",
+      "assistant",
+      "tool",
+    ]);
+    expect(
+      modelMessages
+        .filter((message) => message.role === "assistant")
+        .flatMap((message) => message.content)
+        .filter((part) => part.type === "text"),
+    ).toEqual([]);
+  });
+});
diff --git a/packages/react-headless/src/stream/adapters/__tests__/vercel-ai-sdk.test.ts b/packages/react-headless/src/stream/adapters/__tests__/vercel-ai-sdk.test.ts
index 57d5eda9f..2fac5c262 100644
--- a/packages/react-headless/src/stream/adapters/__tests__/vercel-ai-sdk.test.ts
+++ b/packages/react-headless/src/stream/adapters/__tests__/vercel-ai-sdk.test.ts
@@ -35,6 +35,38 @@ async function parse(body: string): Promise<AGUIEvent[]> {
 }
 
 describe("vercelAIAdapter", () => {
+  it("maps AI SDK model step boundaries", async () => {
+    const events = await parse(
+      sse({ type: "start-step" }) +
+        sse({ type: "finish-step" }) +
+        sse({ type: "start-step" }) +
+        sse({ type: "finish-step" }),
+    );
+
+    expect(events).toEqual([
+      {
+        type: EventType.STEP_STARTED,
+        stepName: "vercel-ai-step-1",
+        messageBoundary: true,
+      },
+      {
+        type: EventType.STEP_FINISHED,
+        stepName: "vercel-ai-step-1",
+        messageBoundary: true,
+      },
+      {
+        type: EventType.STEP_STARTED,
+        stepName: "vercel-ai-step-2",
+        messageBoundary: true,
+      },
+      {
+        type: EventType.STEP_FINISHED,
+        stepName: "vercel-ai-step-2",
+        messageBoundary: true,
+      },
+    ]);
+  });
+
   it("maps text start, delta, and end chunks", async () => {
     const events = await parse(
       sse({ type: "text-start", id: "text-1" }) +
@@ -316,6 +348,36 @@ describe("vercelAIAdapter", () => {
     ]);
   });
 
+  it("rejects provider-executed tools when the flag arrives with the input", async () => {
+    await expect(
+      parse(
+        sse({
+          type: "tool-input-start",
+          toolCallId: "provider-tool-1",
+          toolName: "web_search",
+          providerExecuted: true,
+        }),
+      ),
+    ).rejects.toThrow(
+      "Vercel AI SDK provider-executed tools are not supported because AG-UI messages cannot preserve providerExecuted semantics.",
+    );
+  });
+
+  it("rejects provider-executed tools when the flag first arrives with the output", async () => {
+    await expect(
+      parse(
+        sse({
+          type: "tool-output-available",
+          toolCallId: "provider-tool-2",
+          output: { results: [] },
+          providerExecuted: true,
+        }),
+      ),
+    ).rejects.toThrow(
+      "Vercel AI SDK provider-executed tools are not supported because AG-UI messages cannot preserve providerExecuted semantics.",
+    );
+  });
+
   it("rejects invalid UIMessage chunks using the AI SDK parser", async () => {
     await expect(
       parse(sse({ type: "text-delta", id: "text-invalid", delta: 42 })),
diff --git a/packages/react-headless/src/stream/adapters/vercel-ai-sdk.ts b/packages/react-headless/src/stream/adapters/vercel-ai-sdk.ts
index 9d2915216..f652a9eeb 100644
--- a/packages/react-headless/src/stream/adapters/vercel-ai-sdk.ts
+++ b/packages/react-headless/src/stream/adapters/vercel-ai-sdk.ts
@@ -3,6 +3,8 @@ import { AGUIEvent, EventType, StreamProtocolAdapter } from "../../types";
 
 const MISSING_AI_SDK_MESSAGE =
   'vercelAIAdapter requires the optional peer dependency "ai" (Vercel AI SDK v6).';
+const PROVIDER_EXECUTED_TOOLS_UNSUPPORTED_MESSAGE =
+  "Vercel AI SDK provider-executed tools are not supported because AG-UI messages cannot preserve providerExecuted semantics.";
 const TOOL_EXECUTION_DENIED_MESSAGE = "Tool execution was denied";
 
 function serialize(value: unknown): string {
@@ -78,9 +80,37 @@ export const vercelAIAdapter = (): StreamProtocolAdapter => ({
     const startedTools = new Set<string>();
     const streamedToolArgs = new Set<string>();
     const endedTools = new Set<string>();
+    let stepIndex = 0;
+    let activeStepName: string | undefined;
 
     for await (const chunk of readChunks(chunks)) {
+      if ("providerExecuted" in chunk && chunk.providerExecuted === true) {
+        throw new Error(PROVIDER_EXECUTED_TOOLS_UNSUPPORTED_MESSAGE);
+      }
+
       switch (chunk.type) {
+        case "start-step":
+          activeStepName = `vercel-ai-step-${++stepIndex}`;
+          yield {
+            type: EventType.STEP_STARTED,
+            stepName: activeStepName,
+            // AG-UI step events can also describe arbitrary progress. Mark
+            // only AI SDK model-step events as assistant message boundaries.
+            messageBoundary: true,
+          } as AGUIEvent;
+          break;
+
+        case "finish-step": {
+          const stepName = activeStepName ?? `vercel-ai-step-${++stepIndex}`;
+          yield {
+            type: EventType.STEP_FINISHED,
+            stepName,
+            messageBoundary: true,
+          } as AGUIEvent;
+          activeStepName = undefined;
+          break;
+        }
+
         case "text-start":
           yield {
             type: EventType.TEXT_MESSAGE_START,
diff --git a/packages/react-headless/src/stream/formats/__tests__/vercel-ai-message-format.test.ts b/packages/react-headless/src/stream/formats/__tests__/vercel-ai-message-format.test.ts
index 9668316b2..fdb9d1339 100644
--- a/packages/react-headless/src/stream/formats/__tests__/vercel-ai-message-format.test.ts
+++ b/packages/react-headless/src/stream/formats/__tests__/vercel-ai-message-format.test.ts
@@ -1,3 +1,4 @@
+import { convertToModelMessages, type UIMessage } from "ai";
 import { describe, expect, it } from "vitest";
 import { vercelAIMessageFormat } from "../../../index";
 import type { Message } from "../../../types";
@@ -88,6 +89,60 @@ describe("vercelAIMessageFormat", () => {
       ]);
     });
 
+    it("omits an empty text part from a tool-only assistant message", () => {
+      expect(
+        vercelAIMessageFormat.toApi([
+          {
+            id: "assistant-tool-only",
+            role: "assistant",
+            content: "",
+            toolCalls: [
+              {
+                id: "call-1",
+                type: "function",
+                function: { name: "weather", arguments: '{"city":"Delhi"}' },
+              },
+            ],
+          },
+        ]),
+      ).toEqual([
+        {
+          id: "assistant-tool-only",
+          role: "assistant",
+          parts: [
+            {
+              type: "dynamic-tool",
+              toolName: "weather",
+              toolCallId: "call-1",
+              state: "input-available",
+              input: { city: "Delhi" },
+            },
+          ],
+        },
+      ]);
+    });
+
+    it("defensively rejects provider-executed metadata on AG-UI-shaped input", () => {
+      const messages = [
+        {
+          id: "assistant-provider-tool",
+          role: "assistant",
+          toolCalls: [
+            {
+              id: "call-provider",
+              type: "function",
+              function: { name: "web_search", arguments: "{}" },
+              providerExecuted: true,
+            },
+          ],
+        },
+      ] as unknown as Message[];
+
+      expect(() => vercelAIMessageFormat.toApi(messages)).toThrow(
+        "Vercel AI SDK provider-executed tools are not supported because AG-UI messages cannot preserve providerExecuted semantics.",
+      );
+    });
+
     it("folds separate AG-UI tool results into dynamic tool parts", () => {
       const messages: Message[] = [
         {
@@ -369,6 +424,83 @@ describe("vercelAIMessageFormat", () => {
       ]);
     });
 
+    it("preserves sequential tool-only step ordering through convertToModelMessages", async () => {
+      const restored = vercelAIMessageFormat.fromApi([
+        {
+          id: "assistant-tool-steps",
+          role: "assistant",
+          parts: [
+            { type: "step-start" },
+            {
+              type: "dynamic-tool",
+              toolName: "lookup",
+              toolCallId: "call-1",
+              state: "output-available",
+              input: { id: "first" },
+              output: { nextId: "second" },
+            },
+            { type: "step-start" },
+            {
+              type: "dynamic-tool",
+              toolName: "lookup",
+              toolCallId: "call-2",
+              state: "output-available",
+              input: { id: "second" },
+              output: { value: "done" },
+            },
+          ],
+        },
+      ]);
+
+      expect(restored.map((message) => message.role)).toEqual([
+        "assistant",
+        "tool",
+        "assistant",
+        "tool",
+      ]);
+
+      const uiMessages = vercelAIMessageFormat.toApi(restored) as UIMessage[];
+      const modelMessages = await convertToModelMessages(uiMessages);
+
+      expect(modelMessages.map((message) => message.role)).toEqual([
+        "assistant",
+        "tool",
+        "assistant",
+        "tool",
+      ]);
+      expect(modelMessages[0]).toMatchObject({
+        role: "assistant",
+        content: [{ type: "tool-call", toolCallId: "call-1" }],
+      });
+      expect(modelMessages[2]).toMatchObject({
+        role: "assistant",
+        content: [{ type: "tool-call", toolCallId: "call-2" }],
+      });
+    });
+
+    it.each(["dynamic-tool", "tool-web_search"])(
+      "rejects provider-executed %s parts instead of changing their model-message role",
+      (type) => {
+        const part = {
+          type,
+          ...(type === "dynamic-tool" ? { toolName: "web_search" } : {}),
+          toolCallId: "call-provider",
+          state: "output-available",
+          input: { query: "OpenUI" },
+          output: { results: [] },
+          providerExecuted: true,
+        };
+
+        expect(() =>
+          vercelAIMessageFormat.fromApi([
+            { id: "assistant-provider-tool", role: "assistant", parts: [part] },
+          ]),
+        ).toThrow(
+          "Vercel AI SDK provider-executed tools are not supported because AG-UI messages cannot preserve providerExecuted semantics.",
+        );
+      },
+    );
+
     it("splits consecutive text parts while grouping consecutive tools with their segment", () => {
       expect(
         vercelAIMessageFormat.fromApi([
diff --git a/packages/react-headless/src/stream/formats/vercel-ai-message-format.ts b/packages/react-headless/src/stream/formats/vercel-ai-message-format.ts
index 601265056..5a9d1315b 100644
--- a/packages/react-headless/src/stream/formats/vercel-ai-message-format.ts
+++ b/packages/react-headless/src/stream/formats/vercel-ai-message-format.ts
@@ -2,6 +2,9 @@ import type { DynamicToolUIPart, UIMessage } from "ai";
 import type { InputContent, Message, ToolCall, ToolMessage, UserMessage } from "../../types";
 import type { MessageFormat } from "../../types/messageFormat";
 
+const PROVIDER_EXECUTED_TOOLS_UNSUPPORTED_MESSAGE =
+  "Vercel AI SDK provider-executed tools are not supported because AG-UI messages cannot preserve providerExecuted semantics.";
+
 type UnknownRecord = Record<string, unknown> & {
   data?: unknown;
   errorText?: unknown;
@@ -12,6 +15,7 @@ type UnknownRecord = Record<string, unknown> & {
   mimeType?: unknown;
   output?: unknown;
   parts?: unknown;
+  providerExecuted?: unknown;
   role?: unknown;
   source?: unknown;
   state?: unknown;
@@ -33,6 +37,10 @@ function isRecord(value: unknown): value is UnknownRecord {
   return value !== null && typeof value === "object" && !Array.isArray(value);
 }
 
+function isProviderExecuted(value: unknown): boolean {
+  return isRecord(value) && value.providerExecuted === true;
+}
+
 function serialize(value: unknown): string {
   if (typeof value === "string") return value;
 
@@ -130,6 +138,10 @@ function toUserParts(content: UserMessage["content"]): UIMessage["parts"] {
 }
 
 function toToolPart(toolCall: ToolCall, result: ToolMessage | undefined): DynamicToolUIPart {
+  if (isProviderExecuted(toolCall) || isProviderExecuted(result)) {
+    throw new Error(PROVIDER_EXECUTED_TOOLS_UNSUPPORTED_MESSAGE);
+  }
+
   const input = parseToolInput(toolCall.function.arguments);
 
   if (result?.error) {
@@ -181,7 +193,7 @@ function toVercelMessages(messages: Message[]): UIMessage[] {
       case "assistant": {
         const parts: UIMessage["parts"] = [];
 
-        if (message.content !== undefined) {
+        if (typeof message.content === "string" && message.content.length > 0) {
           parts.push({ type: "text", text: message.content });
         }
 
@@ -333,6 +345,7 @@ function appendAssistantSegments(message: ValidUIMessage, result: Message[]): vo
   let text = "";
   let toolCalls: ToolCall[] = [];
   let toolResults: ToolMessage[] = [];
+  const hasStepMarkers = message.parts.some((part) => isRecord(part) && part.type === "step-start");
 
   const hasBody = () => text.length > 0 || toolCalls.length > 0;
 
@@ -357,12 +370,15 @@ function appendAssistantSegments(message: ValidUIMessage, result: Message[]): vo
   for (const value of message.parts) {
     if (!isRecord(value)) continue;
 
-    if (value.type === "text" && typeof value.text === "string") {
-      // Each accumulated TextUIPart corresponds to a text-start item in the
-      // native stream. processStreamedMessage starts a new assistant message
-      // when a new text item follows existing text or tool calls, so mirror
-      // that boundary when rebuilding history from a final UIMessage.
+    if (value.type === "step-start") {
       if (hasBody()) flush();
+      continue;
+    }
+
+    if (value.type === "text" && typeof value.text === "string") {
+      // AI SDK step markers are authoritative. Older/custom UIMessage data may
+      // omit them, so retain the previous text-part boundary behavior there.
+      if (!hasStepMarkers && hasBody()) flush();
       segmentStarted = true;
       text += value.text;
       continue;
@@ -371,6 +387,10 @@ function appendAssistantSegments(message: ValidUIMessage, result: Message[]): vo
     const name = toolName(value);
     if (!name || typeof value.toolCallId !== "string") continue;
 
+    if (value.providerExecuted === true) {
+      throw new Error(PROVIDER_EXECUTED_TOOLS_UNSUPPORTED_MESSAGE);
+    }
+
     segmentStarted = true;
     toolCalls.push({
       id: value.toolCallId,
@@ -428,6 +448,10 @@ function fromVercelMessages(data: unknown): Message[] {
  *
  * Vercel `UIMessage` has no developer role, so both AG-UI system and developer
  * messages map to its system role.
+ *
+ * Provider-executed tools are rejected because the AG-UI message model has no
+ * execution-provenance field and therefore cannot preserve their requirement
+ * that results remain in the assistant message.
  */
 export const vercelAIMessageFormat: MessageFormat = {
   toApi(messages: Message[]): UIMessage[] {
diff --git a/packages/react-headless/src/stream/processStreamedMessage.ts b/packages/react-headless/src/stream/processStreamedMessage.ts
index e22f46291..648a4a725 100644
--- a/packages/react-headless/src/stream/processStreamedMessage.ts
+++ b/packages/react-headless/src/stream/processStreamedMessage.ts
@@ -45,6 +45,11 @@ export const processStreamedMessage = async ({
   // The wire message-item id whose text currently streams into currentMessage.
   let currentTextItemId: string | null = null;
 
+  // AI SDK can emit multiple text items inside one stitched model step. When
+  // an adapter marks a step as a message boundary, that step—not each text id—
+  // controls segmentation so live state matches reconstructed UIMessage history.
+  let isInsideMessageBoundaryStep = false;
+
   // Tool messages by toolCallId, so repeated TOOL_CALL_RESULTs for the same
   // call UPDATE one message in place instead of duplicating it.
   const toolMessagesByCallId = new Map<string, ToolMessage>();
@@ -62,6 +67,29 @@ export const processStreamedMessage = async ({
     });
   };
 
+  const hasCurrentMessageBody = () =>
+    (currentMessage.content?.length ?? 0) > 0 || (currentMessage.toolCalls?.length ?? 0) > 0;
+
+  const startNewAssistantMessage = () => {
+    if (!hasCurrentMessageBody()) return;
+
+    if (rafId !== null) {
+      // Flush the pending update so the finished segment's final state lands
+      // before the next segment is created.
+      cancelAnimationFrame(rafId);
+      rafId = null;
+      if (!isFirst) updateMessage(currentMessage);
+    }
+
+    currentMessage = {
+      id: crypto.randomUUID(),
+      role: "assistant",
+      content: "",
+      toolCalls: [],
+    };
+    isFirst = true;
+  };
+
   for await (const event of adapter.parse(response)) {
     switch (event.type) {
       // TEXT_MESSAGE_CHUNK and TEXT_MESSAGE_CONTENT are very similar events but TEXT_MESSAGE_CHUNK
@@ -163,28 +191,35 @@ export const processStreamedMessage = async ({
         // message so the live structure matches what reload reconstructs from
         // storage
         const startId = (event as { messageId?: string }).messageId ?? null;
-        const hasBody =
-          (currentMessage.content?.length ?? 0) > 0 || (currentMessage.toolCalls?.length ?? 0) > 0;
-        if (hasBody && startId !== currentTextItemId) {
-          if (rafId !== null) {
-            // Flush the pending update so the finished segment's final state
-            // lands before the next segment is created.
-            cancelAnimationFrame(rafId);
-            rafId = null;
-            if (!isFirst) updateMessage(currentMessage);
-          }
-          currentMessage = {
-            id: crypto.randomUUID(),
-            role: "assistant",
-            content: "",
-            toolCalls: [],
-          };
-          isFirst = true;
+        if (!isInsideMessageBoundaryStep && startId !== currentTextItemId) {
+          startNewAssistantMessage();
         }
         currentTextItemId = startId;
         break;
       }
 
+      case EventType.STEP_STARTED: {
+        // Vercel AI SDK step markers separate stitched model calls. AG-UI also
+        // uses STEP_STARTED for generic progress, so only split events that an
+        // adapter explicitly identifies as a message boundary.
+        const boundary = event as typeof event & { messageBoundary?: boolean };
+        if (boundary.messageBoundary === true) {
+          startNewAssistantMessage();
+          currentTextItemId = null;
+          isInsideMessageBoundaryStep = true;
+        }
+        // Lifecycle-only events must not create an empty assistant message.
+        continue;
+      }
+
+      case EventType.STEP_FINISHED: {
+        // The next marked STEP_STARTED performs the split. Keeping the current
+        // segment active here also lets the final segment flush normally.
+        const boundary = event as typeof event & { messageBoundary?: boolean };
+        if (boundary.messageBoundary === true) isInsideMessageBoundaryStep = false;
+        continue;
+      }
+
       case EventType.TOOL_CALL_RESULT: {
         // Result landed → no longer executing / in flight.
         clearToolExecuting(event.toolCallId);

From 9dc595c32c24618a10a49ac4f2570cde69e74a55 Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Wed, 5 Aug 2026 21:34:22 +0530
Subject: [PATCH 10/15] fix(cli): use packaged Vercel AI SDK adapter

---
 .../openui-cli/src/commands/create-app.ts     |   7 +-
 .../_backend-pages/vercel-ai-sdk-adapter.ts   | 344 ------------------
 .../_backend-pages/vercel-ai-sdk.tsx          |   8 +-
 3 files changed, 7 insertions(+), 352 deletions(-)
 delete mode 100644 packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk-adapter.ts

diff --git a/packages/openui-cli/src/commands/create-app.ts b/packages/openui-cli/src/commands/create-app.ts
index 0e3854a1b..4f78d34b6 100644
--- a/packages/openui-cli/src/commands/create-app.ts
+++ b/packages/openui-cli/src/commands/create-app.ts
@@ -50,6 +50,7 @@ const backendDependencies: Record<
     },
     "vercel-ai-sdk": {
       "@ai-sdk/openai": "^3.0.65",
+      "@openuidev/react-headless": "^0.9.6",
       ai: "^6.0.191",
     },
   },
@@ -186,12 +187,6 @@ function applyBackendFiles(projectDir: string, backendFramework: BackendFramewor
         );
       }
       fs.copyFileSync(pageSource, path.join(projectDir, "src", "app", "page.tsx"));
-
-      const adapterName = `${backendFramework}-adapter.ts`;
-      const adapterSource = path.join(pageOptionsDir, adapterName);
-      if (fs.existsSync(adapterSource)) {
-        fs.copyFileSync(adapterSource, path.join(projectDir, "src", "app", adapterName));
-      }
     }
   }
   fs.rmSync(routeOptionsDir, { recursive: true, force: true });
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk-adapter.ts b/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk-adapter.ts
deleted file mode 100644
index 058989d04..000000000
--- a/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk-adapter.ts
+++ /dev/null
@@ -1,344 +0,0 @@
-import {
-  EventType,
-  type Message,
-  type MessageFormat,
-  type StreamProtocolAdapter,
-} from "@openuidev/react-ui";
-import {
-  DefaultChatTransport,
-  type DynamicToolUIPart,
-  type UIMessage,
-  type UIMessageChunk,
-} from "ai";
-
-function serialize(value: unknown): string {
-  if (typeof value === "string") return value;
-  return JSON.stringify(value) ?? String(value);
-}
-
-function parseToolInput(value: string): unknown {
-  try {
-    return JSON.parse(value) as unknown;
-  } catch {
-    return value;
-  }
-}
-
-function toUserParts(content: unknown): UIMessage["parts"] {
-  if (typeof content === "string") return [{ type: "text", text: content }];
-  if (!Array.isArray(content)) return [];
-
-  return content.flatMap((part): UIMessage["parts"] => {
-    if (!part || typeof part !== "object") return [];
-    const value = part as Record<string, unknown>;
-    if (value.type === "text" && typeof value.text === "string") {
-      return [{ type: "text", text: value.text }];
-    }
-
-    if (value.type === "binary") {
-      const mediaType =
-        typeof value.mimeType === "string" ? value.mimeType : "application/octet-stream";
-      const url =
-        typeof value.url === "string"
-          ? value.url
-          : typeof value.data === "string"
-            ? `data:${mediaType};base64,${value.data}`
-            : undefined;
-      if (!url) return [];
-      return [
-        {
-          type: "file",
-          mediaType,
-          url,
-          ...(typeof value.filename === "string" ? { filename: value.filename } : {}),
-        },
-      ];
-    }
-
-    const source = value.source;
-    if (!source || typeof source !== "object") return [];
-    const sourceValue = source as Record<string, unknown>;
-    if (typeof sourceValue.value !== "string") return [];
-    const mediaType =
-      typeof sourceValue.mimeType === "string"
-        ? sourceValue.mimeType
-        : value.type === "image"
-          ? "image/*"
-          : value.type === "audio"
-            ? "audio/*"
-            : "application/octet-stream";
-    const url =
-      sourceValue.type === "data"
-        ? `data:${mediaType};base64,${sourceValue.value}`
-        : sourceValue.value;
-    return [{ type: "file", mediaType, url }];
-  });
-}
-
-function toVercelMessages(messages: Message[]): UIMessage[] {
-  const toolResults = new Map(
-    messages
-      .filter((message) => message.role === "tool")
-      .map((message) => [message.toolCallId, message] as const),
-  );
-  const result: UIMessage[] = [];
-
-  for (const message of messages) {
-    if (message.role === "user") {
-      result.push({ id: message.id, role: "user", parts: toUserParts(message.content) });
-      continue;
-    }
-
-    if (message.role === "assistant") {
-      const parts: UIMessage["parts"] = [];
-      if (message.content || !message.toolCalls?.length) {
-        parts.push({ type: "text", text: message.content ?? "" });
-      }
-      for (const toolCall of message.toolCalls ?? []) {
-        const input = parseToolInput(toolCall.function.arguments);
-        const toolResult = toolResults.get(toolCall.id);
-        let part: DynamicToolUIPart;
-        if (toolResult?.error) {
-          part = {
-            type: "dynamic-tool",
-            toolName: toolCall.function.name,
-            toolCallId: toolCall.id,
-            state: "output-error",
-            input,
-            errorText: toolResult.error,
-          };
-        } else if (toolResult) {
-          part = {
-            type: "dynamic-tool",
-            toolName: toolCall.function.name,
-            toolCallId: toolCall.id,
-            state: "output-available",
-            input,
-            output: toolResult.content,
-          };
-        } else {
-          part = {
-            type: "dynamic-tool",
-            toolName: toolCall.function.name,
-            toolCallId: toolCall.id,
-            state: "input-available",
-            input,
-          };
-        }
-        parts.push(part);
-      }
-      result.push({ id: message.id, role: "assistant", parts });
-      continue;
-    }
-
-    if (message.role === "system" || message.role === "developer") {
-      result.push({
-        id: message.id,
-        role: "system",
-        parts: [{ type: "text", text: message.content }],
-      });
-    }
-  }
-
-  return result;
-}
-
-function fromVercelMessages(data: unknown): Message[] {
-  if (!Array.isArray(data)) return [];
-  const result: Message[] = [];
-
-  for (const value of data) {
-    if (!value || typeof value !== "object") continue;
-    const message = value as UIMessage;
-    const text = message.parts
-      .filter((part) => part.type === "text")
-      .map((part) => part.text)
-      .join("");
-
-    if (message.role === "user") {
-      result.push({ id: message.id, role: "user", content: text });
-      continue;
-    }
-    if (message.role === "system") {
-      result.push({ id: message.id, role: "system", content: text });
-      continue;
-    }
-
-    const toolParts = message.parts.filter(
-      (part): part is DynamicToolUIPart => part.type === "dynamic-tool",
-    );
-    result.push({
-      id: message.id,
-      role: "assistant",
-      content: text,
-      toolCalls: toolParts.map((part) => ({
-        id: part.toolCallId,
-        type: "function",
-        function: {
-          name: part.toolName,
-          arguments: "input" in part ? serialize(part.input) : "",
-        },
-      })),
-    });
-
-    for (const part of toolParts) {
-      if (part.state === "output-available") {
-        result.push({
-          id: `tool-result-${part.toolCallId}`,
-          role: "tool",
-          toolCallId: part.toolCallId,
-          content: serialize(part.output),
-        });
-      } else if (part.state === "output-error") {
-        result.push({
-          id: `tool-result-${part.toolCallId}`,
-          role: "tool",
-          toolCallId: part.toolCallId,
-          content: part.errorText,
-          error: part.errorText,
-        });
-      }
-    }
-  }
-
-  return result;
-}
-
-export const vercelAIMessageFormat: MessageFormat = {
-  toApi: toVercelMessages,
-  fromApi: fromVercelMessages,
-};
-
-class UIMessageStreamParser extends DefaultChatTransport<UIMessage> {
-  parseBody(body: ReadableStream<Uint8Array>): ReadableStream<UIMessageChunk> {
-    return this.processResponseStream(body);
-  }
-}
-
-async function* readChunks(stream: ReadableStream<UIMessageChunk>) {
-  const reader = stream.getReader();
-  try {
-    for (;;) {
-      const { done, value } = await reader.read();
-      if (done) return;
-      yield value;
-    }
-  } finally {
-    reader.releaseLock();
-  }
-}
-
-export const vercelAIAdapter = (): StreamProtocolAdapter => ({
-  async *parse(response) {
-    if (!response.body) throw new Error("No response body");
-
-    // Let the AI SDK decode and validate its native SSE protocol. This adapter
-    // only projects typed UIMessage chunks into the events AgentInterface uses.
-    const chunks = new UIMessageStreamParser().parseBody(response.body);
-    const startedTools = new Set<string>();
-    const streamedToolArgs = new Set<string>();
-
-    for await (const chunk of readChunks(chunks)) {
-      switch (chunk.type) {
-        case "text-start":
-          yield {
-            type: EventType.TEXT_MESSAGE_START,
-            messageId: chunk.id,
-            role: "assistant",
-          };
-          break;
-        case "text-delta":
-          yield {
-            type: EventType.TEXT_MESSAGE_CONTENT,
-            messageId: chunk.id,
-            delta: chunk.delta,
-          };
-          break;
-        case "text-end":
-          yield { type: EventType.TEXT_MESSAGE_END, messageId: chunk.id };
-          break;
-        case "tool-input-start":
-          startedTools.add(chunk.toolCallId);
-          yield {
-            type: EventType.TOOL_CALL_START,
-            toolCallId: chunk.toolCallId,
-            toolCallName: chunk.toolName,
-          };
-          break;
-        case "tool-input-delta":
-          streamedToolArgs.add(chunk.toolCallId);
-          yield {
-            type: EventType.TOOL_CALL_ARGS,
-            toolCallId: chunk.toolCallId,
-            delta: chunk.inputTextDelta,
-          };
-          break;
-        case "tool-input-available":
-        case "tool-input-error": {
-          if (!startedTools.has(chunk.toolCallId)) {
-            startedTools.add(chunk.toolCallId);
-            yield {
-              type: EventType.TOOL_CALL_START,
-              toolCallId: chunk.toolCallId,
-              toolCallName: chunk.toolName,
-            };
-          }
-          if (!streamedToolArgs.has(chunk.toolCallId)) {
-            yield {
-              type: EventType.TOOL_CALL_ARGS,
-              toolCallId: chunk.toolCallId,
-              delta: serialize(chunk.input),
-            };
-          }
-          yield { type: EventType.TOOL_CALL_END, toolCallId: chunk.toolCallId };
-          if (chunk.type === "tool-input-error") {
-            yield {
-              type: EventType.TOOL_CALL_RESULT,
-              messageId: `tool-result-${chunk.toolCallId}`,
-              toolCallId: chunk.toolCallId,
-              content: chunk.errorText,
-              role: "tool",
-              isError: true,
-              error: chunk.errorText,
-            };
-          }
-          break;
-        }
-        case "tool-output-available":
-          yield {
-            type: EventType.TOOL_CALL_RESULT,
-            messageId: `tool-result-${chunk.toolCallId}`,
-            toolCallId: chunk.toolCallId,
-            content: serialize(chunk.output),
-            role: "tool",
-          };
-          break;
-        case "tool-output-error":
-          yield {
-            type: EventType.TOOL_CALL_RESULT,
-            messageId: `tool-result-${chunk.toolCallId}`,
-            toolCallId: chunk.toolCallId,
-            content: chunk.errorText,
-            role: "tool",
-            isError: true,
-            error: chunk.errorText,
-          };
-          break;
-        case "tool-output-denied":
-          yield {
-            type: EventType.TOOL_CALL_RESULT,
-            messageId: `tool-result-${chunk.toolCallId}`,
-            toolCallId: chunk.toolCallId,
-            content: "Tool execution was denied",
-            role: "tool",
-            isError: true,
-            error: "Tool execution was denied",
-          };
-          break;
-        case "error":
-          yield { type: EventType.RUN_ERROR, message: chunk.errorText };
-          break;
-      }
-    }
-  },
-});
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx b/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx
index 907fbc3a4..5f5b9cb55 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx
@@ -2,9 +2,13 @@
 import "@openuidev/react-ui/components.css";
 import "@openuidev/react-ui/styles/index.css";
 
-import { AgentInterface, fetchLLM } from "@openuidev/react-ui";
+import {
+  AgentInterface,
+  fetchLLM,
+  vercelAIAdapter,
+  vercelAIMessageFormat,
+} from "@openuidev/react-ui";
 import { openuiLibrary } from "@openuidev/react-ui/genui-lib";
-import { vercelAIAdapter, vercelAIMessageFormat } from "./vercel-ai-sdk-adapter";
 
 const llm = fetchLLM({
   url: "/api/chat",

From a4b47c6207a1e764ee142379e6c3f71c2e1d8b85 Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Thu, 6 Aug 2026 01:00:41 +0530
Subject: [PATCH 11/15] Add OSS framework tool loops

---
 docs/content/docs/api-reference/cli.mdx       |   2 +
 packages/openui-cli/README.md                 |   2 +-
 .../openui-cli/src/commands/create-app.ts     |   7 +-
 .../templates/openui-self-hosted/README.md    |   3 +
 .../_backend-routes/langgraph.ts              |  25 ++-
 .../_backend-routes/vercel-ai-sdk.ts          |  16 +-
 .../src/lib/tools/get-weather.ts              |  74 ++++++++
 .../__tests__/langgraph.integration.test.ts   |  90 +++++++++
 .../adapters/__tests__/langgraph.test.ts      | 128 ++++++++++++-
 .../src/stream/adapters/langgraph.ts          | 173 ++++++++++++++----
 10 files changed, 472 insertions(+), 48 deletions(-)
 create mode 100644 packages/openui-cli/src/templates/openui-self-hosted/src/lib/tools/get-weather.ts
 create mode 100644 packages/react-headless/src/stream/__tests__/langgraph.integration.test.ts

diff --git a/docs/content/docs/api-reference/cli.mdx b/docs/content/docs/api-reference/cli.mdx
index 8b3f8d74f..62dcb5563 100644
--- a/docs/content/docs/api-reference/cli.mdx
+++ b/docs/content/docs/api-reference/cli.mdx
@@ -92,6 +92,8 @@ In non-interactive mode, dependencies are installed without starting the long-ru
 
 The CLI replaces `src/app/api/chat/route.ts` and adds the selected framework's dependencies. Self-hosted framework selections also switch `src/app/page.tsx` to the framework's frontend message format and stream adapter, so the route can return the native LangGraph or Vercel AI SDK stream. Every Cloud route keeps the OpenAI SDK pointed at OpenUI Cloud, preserving the raw Responses stream and managed conversation storage. Artifacts, web search, image search, and configured MCP tools still execute in Cloud; selecting LangGraph or Vercel AI SDK only changes how application-owned function tools are defined and executed on your server. Choose self-hosted to use your own model provider key.
 
+Both self-hosted framework routes include a `get_weather` example backed by Open-Meteo. Ask “What’s the weather in Berlin?” to verify the selected framework’s native multi-step tool loop.
+
 **Agent skill**
 
 When run interactively, `openui create` asks whether to install the OpenUI agent skill. The skill teaches AI coding assistants how to build with OpenUI Lang — covering component definitions, system prompts, the Renderer, and debugging.
diff --git a/packages/openui-cli/README.md b/packages/openui-cli/README.md
index 7f18289cf..16251bf09 100644
--- a/packages/openui-cli/README.md
+++ b/packages/openui-cli/README.md
@@ -115,7 +115,7 @@ What it does:
 
 The CLI replaces `src/app/api/chat/route.ts` and adds the dependencies for the selected framework. Self-hosted framework selections also switch `src/app/page.tsx` to the matching frontend message format and stream adapter, allowing LangGraph and the Vercel AI SDK to use their native streaming protocols instead of emulating OpenAI Chat Completions. Every Cloud combination keeps the OpenAI SDK pointed at OpenUI Cloud, preserving the raw Responses stream and managed conversation storage. Artifacts, web search, image search, and configured MCP tools still execute in Cloud; selecting LangGraph or Vercel AI SDK only changes how application-owned function tools are defined and executed on your server. It does not configure a user-owned model provider. Choose `openui-self-hosted` when you want to bring your own provider.
 
-Every Cloud route includes `get_weather` as its example app-owned function tool. The LangGraph and Vercel AI SDK variants define and execute that tool through the selected framework while leaving Cloud-owned tools unchanged.
+Every Cloud route includes `get_weather` as its example app-owned function tool. The LangGraph and Vercel AI SDK variants define and execute that tool through the selected framework while leaving Cloud-owned tools unchanged. The two self-hosted framework routes include the same weather example and run it through their native multi-step tool loops, making the selected backend directly testable after scaffolding.
 
 #### Template-specific `.env`
 
diff --git a/packages/openui-cli/src/commands/create-app.ts b/packages/openui-cli/src/commands/create-app.ts
index 4f78d34b6..018bed979 100644
--- a/packages/openui-cli/src/commands/create-app.ts
+++ b/packages/openui-cli/src/commands/create-app.ts
@@ -47,11 +47,14 @@ const backendDependencies: Record<
       "@langchain/core": "^1.2.1",
       "@langchain/langgraph": "^1.4.5",
       "@langchain/openai": "^1.5.2",
+      "@openuidev/react-headless": "^0.9.6",
+      zod: "^4.3.6",
     },
     "vercel-ai-sdk": {
       "@ai-sdk/openai": "^3.0.65",
       "@openuidev/react-headless": "^0.9.6",
       ai: "^6.0.191",
+      zod: "^4.3.6",
     },
   },
 };
@@ -683,11 +686,11 @@ function getStartedMessage(o: {
     o.backendFramework === "langgraph"
       ? o.template === "openui-cloud"
         ? 'The generated route keeps OpenUI Cloud as the Responses backend and uses LangGraph for app-owned tools.\nAsk "What\'s the weather in Berlin?" to exercise the included app-owned weather tool.'
-        : "The generated API route uses LangGraph."
+        : 'The generated API route uses LangGraph.\nAsk "What\'s the weather in Berlin?" to exercise its native tool loop.'
       : o.backendFramework === "vercel-ai-sdk"
         ? o.template === "openui-cloud"
           ? 'The generated route keeps OpenUI Cloud as the Responses backend and uses the Vercel AI SDK for app-owned tools.\nAsk "What\'s the weather in Berlin?" to exercise the included app-owned weather tool.'
-          : "The generated API route uses the Vercel AI SDK."
+          : 'The generated API route uses the Vercel AI SDK.\nAsk "What\'s the weather in Berlin?" to exercise its native tool loop.'
         : "";
 
   return `${[skillMessage.trim(), "Done!", envNote, frameworkNote, nextStep]
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/README.md b/packages/openui-cli/src/templates/openui-self-hosted/README.md
index 5daef3995..398446cc7 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/README.md
+++ b/packages/openui-cli/src/templates/openui-self-hosted/README.md
@@ -23,6 +23,9 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 You can start editing the page by modifying `src/app/api/chat/route.ts` and improving your agent
 by adding system prompts or tools.
 
+If you selected LangGraph or the Vercel AI SDK, the generated route includes a `get_weather`
+example. Ask “What’s the weather in Berlin?” to exercise its native tool loop.
+
 ## Learn More
 
 To learn more about OpenUI, take a look at the following resources:
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts
index ee72992f2..15ffc3c0d 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts
@@ -1,9 +1,13 @@
 import librarySpec from "@/generated/spec.json";
 import { promptOptions } from "@/lib/prompt-options";
+import { getWeather, WEATHER_TOOL_DESCRIPTION } from "@/lib/tools/get-weather";
 import type { BaseMessageLike } from "@langchain/core/messages";
+import { tool } from "@langchain/core/tools";
 import { END, MessagesAnnotation, START, StateGraph } from "@langchain/langgraph";
+import { ToolNode, toolsCondition } from "@langchain/langgraph/prebuilt";
 import { ChatOpenAI } from "@langchain/openai";
 import { generateSystemPrompt } from "@openuidev/lang-core";
+import { z } from "zod";
 
 export const runtime = "nodejs";
 
@@ -13,14 +17,31 @@ const model = new ChatOpenAI({
   configuration: process.env.OPENAI_BASE_URL ? { baseURL: process.env.OPENAI_BASE_URL } : undefined,
 });
 
+const getWeatherTool = tool(
+  async ({ location }, config) =>
+    JSON.stringify(await getWeather(location, { signal: config.signal })),
+  {
+    name: "get_weather",
+    description: WEATHER_TOOL_DESCRIPTION,
+    schema: z.object({
+      location: z.string().trim().min(1).describe("City or place name, e.g. Berlin."),
+    }),
+  },
+);
+
+const tools = [getWeatherTool];
+const modelWithTools = model.bindTools(tools);
+
 async function callModel(state: typeof MessagesAnnotation.State) {
-  return { messages: [await model.invoke(state.messages)] };
+  return { messages: [await modelWithTools.invoke(state.messages)] };
 }
 
 const graph = new StateGraph(MessagesAnnotation)
   .addNode("model", callModel)
+  .addNode("tools", new ToolNode(tools))
   .addEdge(START, "model")
-  .addEdge("model", END)
+  .addConditionalEdges("model", toolsCondition, ["tools", END])
+  .addEdge("tools", "model")
   .compile();
 
 export async function POST(req: Request) {
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel-ai-sdk.ts b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel-ai-sdk.ts
index 55d2d9c82..da856d41c 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel-ai-sdk.ts
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel-ai-sdk.ts
@@ -1,8 +1,10 @@
 import librarySpec from "@/generated/spec.json";
 import { promptOptions } from "@/lib/prompt-options";
+import { getWeather, WEATHER_TOOL_DESCRIPTION } from "@/lib/tools/get-weather";
 import { createOpenAI } from "@ai-sdk/openai";
 import { generateSystemPrompt } from "@openuidev/lang-core";
-import { convertToModelMessages, streamText, type UIMessage } from "ai";
+import { convertToModelMessages, stepCountIs, streamText, tool, type UIMessage } from "ai";
+import { z } from "zod";
 
 export const runtime = "nodejs";
 
@@ -11,6 +13,16 @@ const openai = createOpenAI({
   apiKey: process.env.OPENAI_API_KEY,
 });
 
+const tools = {
+  get_weather: tool({
+    description: WEATHER_TOOL_DESCRIPTION,
+    inputSchema: z.object({
+      location: z.string().trim().min(1).describe("City or place name, e.g. Berlin."),
+    }),
+    execute: ({ location }, { abortSignal }) => getWeather(location, { signal: abortSignal }),
+  }),
+};
+
 export async function POST(req: Request) {
   const payload = (await req.json()) as { messages?: UIMessage[] };
   if (!Array.isArray(payload.messages)) {
@@ -21,6 +33,8 @@ export async function POST(req: Request) {
     model: openai.chat(process.env.OPENAI_MODEL ?? "gpt-5.2"),
     system: generateSystemPrompt({ library: librarySpec, promptOptions }),
     messages: await convertToModelMessages(payload.messages),
+    tools,
+    stopWhen: stepCountIs(5),
     abortSignal: req.signal,
   });
 
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/src/lib/tools/get-weather.ts b/packages/openui-cli/src/templates/openui-self-hosted/src/lib/tools/get-weather.ts
new file mode 100644
index 000000000..08a38246b
--- /dev/null
+++ b/packages/openui-cli/src/templates/openui-self-hosted/src/lib/tools/get-weather.ts
@@ -0,0 +1,74 @@
+/** Example app-owned tool: current weather via Open-Meteo (free, no API key). */
+
+export const WEATHER_TOOL_DESCRIPTION =
+  "Get the current weather for a city or place name. Use whenever the user " +
+  "asks about weather, temperature, rain, or what to wear.";
+
+export type WeatherResult =
+  | {
+      place: string;
+      temperature_c: number;
+      conditions: string;
+      wind_kmh: number;
+    }
+  | { error: string };
+
+function describeWeather(code: number): string {
+  if (code === 0) return "clear sky";
+  if (code <= 3) return "partly cloudy";
+  if (code <= 48) return "fog";
+  if (code <= 57) return "drizzle";
+  if (code <= 67) return "rain";
+  if (code <= 77) return "snow";
+  if (code <= 82) return "rain showers";
+  if (code <= 86) return "snow showers";
+  return "thunderstorm";
+}
+
+async function fetchJson<T>(url: URL, signal?: AbortSignal): Promise<T> {
+  const response = await fetch(url, { signal });
+  if (!response.ok) {
+    throw new Error(`Open-Meteo returned ${response.status}`);
+  }
+  return (await response.json()) as T;
+}
+
+export async function getWeather(
+  locationInput: string,
+  options: { signal?: AbortSignal } = {},
+): Promise<WeatherResult> {
+  const location = locationInput.trim();
+  if (!location) return { error: "location is required" };
+
+  try {
+    const geoUrl = new URL("https://geocoding-api.open-meteo.com/v1/search");
+    geoUrl.searchParams.set("name", location);
+    geoUrl.searchParams.set("count", "1");
+    const geo = await fetchJson<{
+      results?: Array<{ name: string; country?: string; latitude: number; longitude: number }>;
+    }>(geoUrl, options.signal);
+    const place = geo.results?.[0];
+    if (!place) return { error: `No place found for "${location}"` };
+
+    const weatherUrl = new URL("https://api.open-meteo.com/v1/forecast");
+    weatherUrl.searchParams.set("latitude", String(place.latitude));
+    weatherUrl.searchParams.set("longitude", String(place.longitude));
+    weatherUrl.searchParams.set("current", "temperature_2m,weather_code,wind_speed_10m");
+    const weather = await fetchJson<{
+      current?: { temperature_2m: number; weather_code: number; wind_speed_10m: number };
+    }>(weatherUrl, options.signal);
+    if (!weather.current) return { error: "No weather data returned" };
+
+    return {
+      place: `${place.name}${place.country ? `, ${place.country}` : ""}`,
+      temperature_c: weather.current.temperature_2m,
+      conditions: describeWeather(weather.current.weather_code),
+      wind_kmh: weather.current.wind_speed_10m,
+    };
+  } catch (error) {
+    if (options.signal?.aborted) throw error;
+    return {
+      error: `Weather lookup failed: ${error instanceof Error ? error.message : String(error)}`,
+    };
+  }
+}
diff --git a/packages/react-headless/src/stream/__tests__/langgraph.integration.test.ts b/packages/react-headless/src/stream/__tests__/langgraph.integration.test.ts
new file mode 100644
index 000000000..e93c78d5e
--- /dev/null
+++ b/packages/react-headless/src/stream/__tests__/langgraph.integration.test.ts
@@ -0,0 +1,90 @@
+import { beforeAll, describe, expect, it } from "vitest";
+import type { Message } from "../../types";
+import { langGraphAdapter } from "../adapters/langgraph";
+import { langGraphMessageFormat } from "../formats/langgraph-message-format";
+import { processStreamedMessage } from "../processStreamedMessage";
+
+beforeAll(() => {
+  const globalWithAnimationFrame = globalThis as unknown as {
+    requestAnimationFrame?: (callback: FrameRequestCallback) => number;
+    cancelAnimationFrame?: (id: number) => void;
+  };
+
+  if (typeof globalWithAnimationFrame.requestAnimationFrame !== "function") {
+    globalWithAnimationFrame.requestAnimationFrame = (callback: FrameRequestCallback) =>
+      setTimeout(() => callback(performance.now()), 0) as unknown as number;
+    globalWithAnimationFrame.cancelAnimationFrame = (id: number) => clearTimeout(id);
+  }
+});
+
+function sse(event: string, data: unknown): string {
+  return `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
+}
+
+describe("LangGraph stream integration", () => {
+  it("keeps a tool-loop turn ordered and valid for the next request", async () => {
+    const messages: Message[] = [];
+    const response = new Response(
+      sse("messages", [
+        {
+          type: "ai",
+          id: "ai-call",
+          content: "",
+          tool_calls: [{ id: "call-1", name: "get_weather", args: { location: "Berlin" } }],
+        },
+        { langgraph_node: "model", langgraph_step: 1 },
+      ]) +
+        sse("messages", [
+          {
+            type: "tool",
+            id: "tool-result",
+            content: '{"temperature_c":21}',
+            tool_call_id: "call-1",
+            status: "success",
+          },
+          { langgraph_node: "tools", langgraph_step: 2 },
+        ]) +
+        sse("messages", [
+          { type: "ai", id: "ai-final", content: "It is 21°C." },
+          { langgraph_node: "model", langgraph_step: 3 },
+        ]) +
+        sse("end", null),
+      { headers: { "Content-Type": "text/event-stream" } },
+    );
+
+    await processStreamedMessage({
+      response,
+      adapter: langGraphAdapter(),
+      createMessage: (message) => messages.push(message),
+      updateMessage: (message) => {
+        const index = messages.findIndex((candidate) => candidate.id === message.id);
+        if (index !== -1) messages[index] = message;
+      },
+    });
+
+    expect(messages.map((message) => message.role)).toEqual(["assistant", "tool", "assistant"]);
+    expect(messages[0]).toMatchObject({
+      role: "assistant",
+      content: "",
+      toolCalls: [
+        {
+          id: "call-1",
+          function: { name: "get_weather", arguments: '{"location":"Berlin"}' },
+        },
+      ],
+    });
+    expect(messages[1]).toMatchObject({
+      role: "tool",
+      toolCallId: "call-1",
+      content: '{"temperature_c":21}',
+    });
+    expect(messages[2]).toMatchObject({ role: "assistant", content: "It is 21°C." });
+
+    messages.push({ id: "next-user", role: "user", content: "How about Paris?" });
+    expect(
+      (langGraphMessageFormat.toApi(messages) as Array<{ type: string }>).map(
+        (message) => message.type,
+      ),
+    ).toEqual(["ai", "tool", "ai", "human"]);
+  });
+});
diff --git a/packages/react-headless/src/stream/adapters/__tests__/langgraph.test.ts b/packages/react-headless/src/stream/adapters/__tests__/langgraph.test.ts
index ac142d338..c83721fef 100644
--- a/packages/react-headless/src/stream/adapters/__tests__/langgraph.test.ts
+++ b/packages/react-headless/src/stream/adapters/__tests__/langgraph.test.ts
@@ -196,8 +196,132 @@ describe("langGraphAdapter", () => {
       expect((toolArgs as any).delta).toBe('{"query":"test"}');
 
       const toolEnd = events.filter((e: any) => e.type === EventType.TOOL_CALL_END);
-      // One from the complete tool_calls handling + one from the "end" event cleanup
-      expect(toolEnd.length).toBeGreaterThanOrEqual(1);
+      expect(toolEnd).toHaveLength(1);
+    });
+
+    it("preserves model → tool result → model ordering across graph steps", async () => {
+      const body =
+        sse("messages", [
+          {
+            type: "ai",
+            id: "ai-call",
+            content: "",
+            tool_calls: [{ id: "call-1", name: "get_weather", args: { location: "Berlin" } }],
+          },
+          { langgraph_node: "model", langgraph_step: 1 },
+        ]) +
+        sse("messages", [
+          {
+            type: "tool",
+            id: "tool-result",
+            content: '{"temperature_c":21}',
+            tool_call_id: "call-1",
+            status: "success",
+          },
+          { langgraph_node: "tools", langgraph_step: 2 },
+        ]) +
+        sse("messages", [
+          { type: "ai", id: "ai-final", content: "It is 21°C." },
+          { langgraph_node: "model", langgraph_step: 3 },
+        ]) +
+        sse("end", null);
+
+      const events = await collect(langGraphAdapter().parse(makeSSEResponse(body)));
+
+      expect(events.map((event: any) => event.type)).toEqual([
+        EventType.TEXT_MESSAGE_START,
+        EventType.TOOL_CALL_START,
+        EventType.TOOL_CALL_ARGS,
+        EventType.TOOL_CALL_END,
+        EventType.TEXT_MESSAGE_END,
+        EventType.TOOL_CALL_RESULT,
+        EventType.TEXT_MESSAGE_START,
+        EventType.TEXT_MESSAGE_CONTENT,
+        EventType.TEXT_MESSAGE_END,
+      ]);
+      expect(events.filter((event: any) => event.type === EventType.TEXT_MESSAGE_START)).toEqual([
+        expect.objectContaining({ messageId: "ai-call" }),
+        expect.objectContaining({ messageId: "ai-final" }),
+      ]);
+      expect(events.find((event: any) => event.type === EventType.TOOL_CALL_RESULT)).toMatchObject({
+        messageId: "tool-result",
+        toolCallId: "call-1",
+        content: '{"temperature_c":21}',
+      });
+    });
+
+    it("closes a streamed tool call once when its ToolMessage arrives", async () => {
+      const body =
+        sse("messages", [
+          {
+            type: "AIMessageChunk",
+            id: "ai-call",
+            content: "",
+            tool_call_chunks: [{ id: "call-1", name: "get_weather", args: '{"', index: 0 }],
+            // LangChain projects partial chunks here too. The projection is
+            // incomplete and must not be consumed alongside the chunks.
+            tool_calls: [{ id: "call-1", name: "get_weather", args: {} }],
+          },
+          { langgraph_node: "model", langgraph_step: 1 },
+        ]) +
+        sse("messages", [
+          {
+            type: "AIMessageChunk",
+            id: "ai-call",
+            content: "",
+            tool_call_chunks: [{ args: 'location":"Berlin"}', index: 0 }],
+          },
+          { langgraph_node: "model", langgraph_step: 1 },
+        ]) +
+        sse("messages", [
+          {
+            type: "ToolMessage",
+            id: "tool-result",
+            content: "done",
+            tool_call_id: "call-1",
+            status: "success",
+          },
+          { langgraph_node: "tools", langgraph_step: 2 },
+        ]) +
+        sse("end", null);
+
+      const events = await collect(langGraphAdapter().parse(makeSSEResponse(body)));
+
+      expect(events.filter((event: any) => event.type === EventType.TOOL_CALL_END)).toHaveLength(1);
+      expect(events.filter((event: any) => event.type === EventType.TOOL_CALL_RESULT)).toHaveLength(
+        1,
+      );
+      expect(
+        events
+          .filter((event: any) => event.type === EventType.TOOL_CALL_ARGS)
+          .map((event: any) => event.delta)
+          .join(""),
+      ).toBe('{"location":"Berlin"}');
+    });
+
+    it("surfaces an errored ToolMessage as an errored tool result", async () => {
+      const body = sse("messages", [
+        {
+          type: "tool",
+          id: "tool-result",
+          content: "lookup failed",
+          tool_call_id: "call-1",
+          status: "error",
+        },
+        { langgraph_node: "tools", langgraph_step: 2 },
+      ]);
+
+      const events = await collect(langGraphAdapter().parse(makeSSEResponse(body)));
+
+      expect(events).toEqual([
+        expect.objectContaining({
+          type: EventType.TOOL_CALL_RESULT,
+          toolCallId: "call-1",
+          content: "lookup failed",
+          isError: true,
+          error: "lookup failed",
+        }),
+      ]);
     });
   });
 
diff --git a/packages/react-headless/src/stream/adapters/langgraph.ts b/packages/react-headless/src/stream/adapters/langgraph.ts
index 3e3f91fdc..646be397d 100644
--- a/packages/react-headless/src/stream/adapters/langgraph.ts
+++ b/packages/react-headless/src/stream/adapters/langgraph.ts
@@ -1,17 +1,16 @@
 import { AGUIEvent, EventType, StreamProtocolAdapter } from "../../types";
 
-/**
- * Represents a LangGraph AI message (or chunk) as received in the
- * `messages` stream mode.
- */
+type LangGraphContent = string | Array<{ type: string; text?: string }>;
+
+/** LangGraph AI message (or chunk) received in `messages` stream mode. */
 interface LangGraphAIMessage {
   id?: string;
   type: "ai" | "AIMessageChunk" | "AIMessage";
-  content: string | Array<{ type: string; text?: string }>;
+  content: LangGraphContent;
   tool_calls?: Array<{
     id: string;
     name: string;
-    args: Record<string, unknown>;
+    args: Record<string, unknown> | string;
   }>;
   tool_call_chunks?: Array<{
     id?: string;
@@ -21,6 +20,17 @@ interface LangGraphAIMessage {
   }>;
 }
 
+/** LangGraph tool result (or chunk) received between model invocations. */
+interface LangGraphToolMessage {
+  id?: string;
+  type: "tool" | "ToolMessage" | "ToolMessageChunk";
+  content: LangGraphContent;
+  tool_call_id: string;
+  status?: "success" | "error";
+}
+
+type LangGraphMessage = LangGraphAIMessage | LangGraphToolMessage;
+
 /**
  * Metadata attached to each message tuple in the `messages` stream mode.
  */
@@ -50,7 +60,7 @@ export interface LangGraphAdapterOptions {
  * LangGraph uses named SSE events (`event: <type>\ndata: <json>\n\n`)
  * rather than the `data:`-only format used by OpenAI. The adapter handles
  * the `messages`, `metadata`, `updates`, and `error` event types and maps
- * them to AG-UI events.
+ * model steps and tool results to ordered AG-UI events.
  *
  * Usage:
  * ```tsx
@@ -66,8 +76,13 @@ export const langGraphAdapter = (options?: LangGraphAdapterOptions): StreamProto
     if (!reader) throw new Error("No response body");
 
     const decoder = new TextDecoder();
-    const messageId = crypto.randomUUID();
-    const toolCallIds: Record<number, string> = {};
+    let fallbackMessageId = crypto.randomUUID();
+    let currentMessageId: string | null = null;
+    let currentGraphStep: number | undefined;
+    const toolCallIdsByIndex = new Map<number, string>();
+    const startedToolCallIds = new Set<string>();
+    const openToolCallIds = new Set<string>();
+    const toolCallArgsSeen = new Set<string>();
     let messageStarted = false;
     let buffer = "";
 
@@ -112,21 +127,73 @@ export const langGraphAdapter = (options?: LangGraphAdapterOptions): StreamProto
           case "messages": {
             // Payload is a tuple: [message_chunk, metadata]
             // or just a message object depending on the stream version.
-            const tuple = parsed as
-              [LangGraphAIMessage, LangGraphMessageMetadata] | LangGraphAIMessage;
-
-            const msg: LangGraphAIMessage = Array.isArray(tuple) ? tuple[0] : tuple;
+            const tuple = parsed as [LangGraphMessage, LangGraphMessageMetadata] | LangGraphMessage;
+            const msg = Array.isArray(tuple) ? tuple[0] : tuple;
+            const metadata = Array.isArray(tuple) ? tuple[1] : undefined;
+
+            if (isToolMessage(msg)) {
+              // A ToolMessage marks the end of the model step that requested
+              // the tool. Close both the call and assistant segment before
+              // emitting its result so live history remains ai → tool → ai.
+              if (openToolCallIds.delete(msg.tool_call_id)) {
+                yield {
+                  type: EventType.TOOL_CALL_END,
+                  toolCallId: msg.tool_call_id,
+                };
+              }
+              if (messageStarted && currentMessageId) {
+                yield {
+                  type: EventType.TEXT_MESSAGE_END,
+                  messageId: currentMessageId,
+                };
+              }
+              messageStarted = false;
+              currentMessageId = null;
+              currentGraphStep = undefined;
+              fallbackMessageId = crypto.randomUUID();
+              toolCallIdsByIndex.clear();
 
-            // Only handle AI messages
-            if (msg.type !== "ai" && msg.type !== "AIMessageChunk" && msg.type !== "AIMessage") {
+              const content = serializeToolContent(msg.content);
+              yield {
+                type: EventType.TOOL_CALL_RESULT,
+                messageId: msg.id ?? `tool-result-${msg.tool_call_id}`,
+                toolCallId: msg.tool_call_id,
+                content,
+                role: "tool",
+                ...(msg.status === "error" ? { isError: true, error: content } : {}),
+              } as AGUIEvent;
               break;
             }
 
-            // Emit TEXT_MESSAGE_START on first AI message chunk
-            if (!messageStarted) {
+            if (!isAIMessage(msg)) break;
+
+            const graphStep = metadata?.langgraph_step;
+            const graphStepChanged =
+              graphStep !== undefined &&
+              currentGraphStep !== undefined &&
+              graphStep !== currentGraphStep;
+            let nextMessageId =
+              msg.id ??
+              (graphStep === undefined ? fallbackMessageId : `langgraph-step-${graphStep}`);
+            if (graphStepChanged && nextMessageId === currentMessageId) {
+              nextMessageId = `${nextMessageId}-step-${graphStep}`;
+            }
+            const isNewModelStep =
+              !messageStarted || nextMessageId !== currentMessageId || graphStepChanged;
+
+            if (isNewModelStep) {
+              if (messageStarted && currentMessageId) {
+                yield {
+                  type: EventType.TEXT_MESSAGE_END,
+                  messageId: currentMessageId,
+                };
+              }
+              currentMessageId = nextMessageId;
+              currentGraphStep = graphStep;
+              toolCallIdsByIndex.clear();
               yield {
                 type: EventType.TEXT_MESSAGE_START,
-                messageId,
+                messageId: currentMessageId,
                 role: "assistant",
               };
               messageStarted = true;
@@ -137,7 +204,7 @@ export const langGraphAdapter = (options?: LangGraphAdapterOptions): StreamProto
             if (textContent) {
               yield {
                 type: EventType.TEXT_MESSAGE_CONTENT,
-                messageId,
+                messageId: currentMessageId!,
                 delta: textContent,
               };
             }
@@ -147,52 +214,62 @@ export const langGraphAdapter = (options?: LangGraphAdapterOptions): StreamProto
               for (const chunk of msg.tool_call_chunks) {
                 const index = chunk.index ?? 0;
 
-                if (chunk.id && !toolCallIds[index]) {
-                  toolCallIds[index] = chunk.id;
+                if (chunk.id) toolCallIdsByIndex.set(index, chunk.id);
+                const toolCallId = chunk.id ?? toolCallIdsByIndex.get(index);
+
+                if (toolCallId && !startedToolCallIds.has(toolCallId)) {
+                  startedToolCallIds.add(toolCallId);
+                  openToolCallIds.add(toolCallId);
                   yield {
                     type: EventType.TOOL_CALL_START,
-                    toolCallId: chunk.id,
+                    toolCallId,
                     toolCallName: chunk.name || "",
                   };
                 }
 
-                if (chunk.args) {
-                  const toolCallId = toolCallIds[index];
-                  if (toolCallId) {
-                    yield {
-                      type: EventType.TOOL_CALL_ARGS,
-                      toolCallId,
-                      delta: chunk.args,
-                    };
-                  }
+                if (chunk.args && toolCallId) {
+                  toolCallArgsSeen.add(toolCallId);
+                  yield {
+                    type: EventType.TOOL_CALL_ARGS,
+                    toolCallId,
+                    delta: chunk.args,
+                  };
                 }
               }
             }
 
-            // Handle complete tool calls (non-streaming, full args at once)
-            if (msg.tool_calls && msg.tool_calls.length > 0) {
+            // Handle complete tool calls only for non-streaming messages.
+            // LangChain chunks can also carry a provisional tool_calls
+            // projection (often with args: {}). tool_call_chunks is the
+            // authoritative source whenever that field is present.
+            if (msg.tool_call_chunks === undefined && msg.tool_calls && msg.tool_calls.length > 0) {
               for (let i = 0; i < msg.tool_calls.length; i++) {
                 const tc = msg.tool_calls[i];
                 if (!tc) continue;
 
                 const toolCallId = tc.id || crypto.randomUUID();
 
-                // Only emit if we haven't already started this tool call
-                // via tool_call_chunks
-                if (!Object.values(toolCallIds).includes(toolCallId)) {
+                if (!startedToolCallIds.has(toolCallId)) {
+                  startedToolCallIds.add(toolCallId);
+                  openToolCallIds.add(toolCallId);
                   yield {
                     type: EventType.TOOL_CALL_START,
                     toolCallId,
                     toolCallName: tc.name,
                   };
+                }
 
+                if (!toolCallArgsSeen.has(toolCallId)) {
                   const argsStr = typeof tc.args === "string" ? tc.args : JSON.stringify(tc.args);
+                  toolCallArgsSeen.add(toolCallId);
                   yield {
                     type: EventType.TOOL_CALL_ARGS,
                     toolCallId,
                     delta: argsStr,
                   };
+                }
 
+                if (openToolCallIds.delete(toolCallId)) {
                   yield {
                     type: EventType.TOOL_CALL_END,
                     toolCallId,
@@ -229,16 +306,17 @@ export const langGraphAdapter = (options?: LangGraphAdapterOptions): StreamProto
             // Stream has ended — close out any open message/tool calls.
             if (messageStarted) {
               // End any open streaming tool calls
-              for (const toolCallId of Object.values(toolCallIds)) {
+              for (const toolCallId of openToolCallIds) {
                 yield {
                   type: EventType.TOOL_CALL_END,
                   toolCallId,
                 };
               }
+              openToolCallIds.clear();
 
               yield {
                 type: EventType.TEXT_MESSAGE_END,
-                messageId,
+                messageId: currentMessageId!,
               };
               messageStarted = false; // Prevent duplicate end in fallback
             }
@@ -256,15 +334,16 @@ export const langGraphAdapter = (options?: LangGraphAdapterOptions): StreamProto
 
     // If stream ended without an explicit "end" event, close out.
     if (messageStarted) {
-      for (const toolCallId of Object.values(toolCallIds)) {
+      for (const toolCallId of openToolCallIds) {
         yield {
           type: EventType.TOOL_CALL_END,
           toolCallId,
         };
       }
+      openToolCallIds.clear();
       yield {
         type: EventType.TEXT_MESSAGE_END,
-        messageId,
+        messageId: currentMessageId!,
       };
     }
   },
@@ -307,3 +386,17 @@ function extractTextContent(content: string | Array<{ type: string; text?: strin
     .map((block) => block.text!)
     .join("");
 }
+
+function serializeToolContent(content: LangGraphContent): string {
+  return typeof content === "string" ? content : JSON.stringify(content);
+}
+
+function isAIMessage(message: LangGraphMessage): message is LangGraphAIMessage {
+  return message.type === "ai" || message.type === "AIMessage" || message.type === "AIMessageChunk";
+}
+
+function isToolMessage(message: LangGraphMessage): message is LangGraphToolMessage {
+  return (
+    message.type === "tool" || message.type === "ToolMessage" || message.type === "ToolMessageChunk"
+  );
+}

From 7fb5227f89596f29ac6bfe36242d7c9be9462e0e Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Thu, 6 Aug 2026 16:27:24 +0530
Subject: [PATCH 12/15] fix(cli): allow lang-core builds with pnpm 11

---
 packages/openui-cli/src/templates/openui-cloud/package.json     | 1 +
 .../openui-cli/src/templates/openui-cloud/pnpm-workspace.yaml   | 2 ++
 .../openui-cli/src/templates/openui-self-hosted/package.json    | 1 +
 .../src/templates/openui-self-hosted/pnpm-workspace.yaml        | 2 ++
 4 files changed, 6 insertions(+)

diff --git a/packages/openui-cli/src/templates/openui-cloud/package.json b/packages/openui-cli/src/templates/openui-cloud/package.json
index 5c0a4e5e5..b3ae57eba 100644
--- a/packages/openui-cli/src/templates/openui-cloud/package.json
+++ b/packages/openui-cli/src/templates/openui-cloud/package.json
@@ -34,6 +34,7 @@
   },
   "pnpm": {
     "onlyBuiltDependencies": [
+      "@openuidev/lang-core",
       "sharp",
       "unrs-resolver"
     ]
diff --git a/packages/openui-cli/src/templates/openui-cloud/pnpm-workspace.yaml b/packages/openui-cli/src/templates/openui-cloud/pnpm-workspace.yaml
index c535106ca..de42ba8ca 100644
--- a/packages/openui-cli/src/templates/openui-cloud/pnpm-workspace.yaml
+++ b/packages/openui-cli/src/templates/openui-cloud/pnpm-workspace.yaml
@@ -3,9 +3,11 @@
 # the same list appears three times: package.json "pnpm" field (<=10.13),
 # onlyBuiltDependencies here (10.14-10.x), allowBuilds here (>=11).
 onlyBuiltDependencies:
+  - "@openuidev/lang-core"
   - sharp
   - unrs-resolver
 allowBuilds:
+  "@openuidev/lang-core": true
   sharp: true
   unrs-resolver: true
 packages: ["."]
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/package.json b/packages/openui-cli/src/templates/openui-self-hosted/package.json
index 3a0af3b9f..b89208a1f 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/package.json
+++ b/packages/openui-cli/src/templates/openui-self-hosted/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "pnpm": {
     "onlyBuiltDependencies": [
+      "@openuidev/lang-core",
       "sharp",
       "unrs-resolver"
     ]
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/pnpm-workspace.yaml b/packages/openui-cli/src/templates/openui-self-hosted/pnpm-workspace.yaml
index 9fc063961..48f4b5587 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/pnpm-workspace.yaml
+++ b/packages/openui-cli/src/templates/openui-self-hosted/pnpm-workspace.yaml
@@ -6,9 +6,11 @@ packages:
 # the same list appears three times: package.json "pnpm" field (<=10.13),
 # onlyBuiltDependencies here (10.14-10.x), allowBuilds here (>=11).
 onlyBuiltDependencies:
+  - "@openuidev/lang-core"
   - sharp
   - unrs-resolver
 allowBuilds:
+  "@openuidev/lang-core": true
   sharp: true
   unrs-resolver: true
 minimumReleaseAgeExclude:

From 0c05ab1300b9999a9b814f328f8bebf915fae11a Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Thu, 6 Aug 2026 17:31:50 +0530
Subject: [PATCH 13/15] fix(cli): import Vercel adapters from React UI

---
 .../openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx b/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx
index ead05d940..5f5b9cb55 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-pages/vercel-ai-sdk.tsx
@@ -2,8 +2,12 @@
 import "@openuidev/react-ui/components.css";
 import "@openuidev/react-ui/styles/index.css";
 
-import { vercelAIAdapter, vercelAIMessageFormat } from "@openuidev/react-headless";
-import { AgentInterface, fetchLLM } from "@openuidev/react-ui";
+import {
+  AgentInterface,
+  fetchLLM,
+  vercelAIAdapter,
+  vercelAIMessageFormat,
+} from "@openuidev/react-ui";
 import { openuiLibrary } from "@openuidev/react-ui/genui-lib";
 
 const llm = fetchLLM({

From ddd5961287cc0fcfc82c9c26a4c2068e856b54db Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Fri, 7 Aug 2026 10:19:14 +0530
Subject: [PATCH 14/15] chore(cli): update template package versions

---
 .../openui-cli/src/commands/create-app.ts     |  6 +-
 .../templates/openui-cloud/package-lock.json  | 24 +++++---
 .../src/templates/openui-cloud/package.json   |  2 +-
 .../openui-self-hosted/package-lock.json      | 55 ++++++++++++++-----
 .../templates/openui-self-hosted/package.json |  2 +-
 5 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/packages/openui-cli/src/commands/create-app.ts b/packages/openui-cli/src/commands/create-app.ts
index 375448012..5289a464a 100644
--- a/packages/openui-cli/src/commands/create-app.ts
+++ b/packages/openui-cli/src/commands/create-app.ts
@@ -30,7 +30,7 @@ const backendDependencies: Record<
       "@langchain/langgraph": "^1.4.9",
     },
     "vercel-ai-sdk": {
-      ai: "^6.0.244",
+      ai: "^6.0.246",
       zod: "^4.4.3",
     },
   },
@@ -43,9 +43,9 @@ const backendDependencies: Record<
       zod: "^4.4.3",
     },
     "vercel-ai-sdk": {
-      "@ai-sdk/openai": "^3.0.90",
+      "@ai-sdk/openai": "^3.0.91",
       "@openuidev/react-headless": "^0.9.6",
-      ai: "^6.0.244",
+      ai: "^6.0.246",
       zod: "^4.4.3",
     },
   },
diff --git a/packages/openui-cli/src/templates/openui-cloud/package-lock.json b/packages/openui-cli/src/templates/openui-cloud/package-lock.json
index a43f0691b..b325f0638 100644
--- a/packages/openui-cli/src/templates/openui-cloud/package-lock.json
+++ b/packages/openui-cli/src/templates/openui-cloud/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@openuidev/lang-core": "0.2.11",
         "@openuidev/react-lang": "^0.2.11",
-        "@openuidev/react-ui": "^0.13.4",
+        "@openuidev/react-ui": "^0.13.5",
         "@openuidev/thesys": "^0.3.1",
         "@openuidev/thesys-server": "0.1.3",
         "lucide-react": "^0.575.0",
@@ -1473,9 +1473,9 @@
       "license": "MIT"
     },
     "node_modules/@openuidev/react-headless": {
-      "version": "0.9.5",
-      "resolved": "https://registry.npmjs.org/@openuidev/react-headless/-/react-headless-0.9.5.tgz",
-      "integrity": "sha512-Jhl9UzAMFYmuK06abHJ22p9ApnMGozH+yv2CsNftbhpR2fRcDDbd0Yhce+ncGJx9GnNy5kHse09e+Ur1zK6xQA==",
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/@openuidev/react-headless/-/react-headless-0.9.6.tgz",
+      "integrity": "sha512-EJO+WkkG9Rk8lTl2QSNK4cTl7D82o/z2saVIOo0CJMDn9Y5g/uqCoUe+v8J56c8EYkoLrrOce2SFsq7w+aWu9A==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -1483,8 +1483,14 @@
         "@openuidev/observability": "^0.0.2"
       },
       "peerDependencies": {
+        "ai": "^6.0.0",
         "react": "^18.3.1 || ^19.0.0",
         "zustand": "^4.5.5"
+      },
+      "peerDependenciesMeta": {
+        "ai": {
+          "optional": true
+        }
       }
     },
     "node_modules/@openuidev/react-lang": {
@@ -1527,9 +1533,9 @@
       }
     },
     "node_modules/@openuidev/react-ui": {
-      "version": "0.13.4",
-      "resolved": "https://registry.npmjs.org/@openuidev/react-ui/-/react-ui-0.13.4.tgz",
-      "integrity": "sha512-MyKrLR8rNwRvPs8cTbBtBc9H20Ik+e9YL3tPLGo73Z1XR8aYXJ1RTI/Towk9ddde/ov0XXb1RAKEmNOeJmMaRw==",
+      "version": "0.13.5",
+      "resolved": "https://registry.npmjs.org/@openuidev/react-ui/-/react-ui-0.13.5.tgz",
+      "integrity": "sha512-6mpCpLKouva4RK+nhBUcl4gMaE/1NOU5yW0bXnSvMFoC5UdFD2vtQOkmmNYG4t3giMHI5lHRMZ6u5RRKGe6ggg==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react-dom": "^2.1.2",
@@ -1564,8 +1570,8 @@
         "tiny-invariant": "^1.3.3"
       },
       "peerDependencies": {
-        "@openuidev/react-headless": "^0.9.5",
-        "@openuidev/react-lang": "^0.2.10",
+        "@openuidev/react-headless": "^0.9.6",
+        "@openuidev/react-lang": "^0.2.11",
         "react": "^18.3.1 || ^19.0.0",
         "react-dom": "^18.0.0 || ^19.0.0",
         "zod": "^3.25.0 || ^4.0.0",
diff --git a/packages/openui-cli/src/templates/openui-cloud/package.json b/packages/openui-cli/src/templates/openui-cloud/package.json
index b3ae57eba..83c0e01b9 100644
--- a/packages/openui-cli/src/templates/openui-cloud/package.json
+++ b/packages/openui-cli/src/templates/openui-cloud/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@openuidev/lang-core": "0.2.11",
     "@openuidev/react-lang": "^0.2.11",
-    "@openuidev/react-ui": "^0.13.4",
+    "@openuidev/react-ui": "^0.13.5",
     "@openuidev/thesys": "^0.3.1",
     "@openuidev/thesys-server": "0.1.3",
     "lucide-react": "^0.575.0",
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/package-lock.json b/packages/openui-cli/src/templates/openui-self-hosted/package-lock.json
index 0a54a125d..7534c1835 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/package-lock.json
+++ b/packages/openui-cli/src/templates/openui-self-hosted/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.1",
       "dependencies": {
         "@openuidev/lang-core": "0.2.11",
-        "@openuidev/react-ui": "^0.13.4",
+        "@openuidev/react-ui": "^0.13.5",
         "next": "^16.3.0",
         "openai": "^6.49.0",
         "react": "19.2.3",
@@ -1491,9 +1491,9 @@
       "peer": true
     },
     "node_modules/@openuidev/react-headless": {
-      "version": "0.9.5",
-      "resolved": "https://registry.npmjs.org/@openuidev/react-headless/-/react-headless-0.9.5.tgz",
-      "integrity": "sha512-Jhl9UzAMFYmuK06abHJ22p9ApnMGozH+yv2CsNftbhpR2fRcDDbd0Yhce+ncGJx9GnNy5kHse09e+Ur1zK6xQA==",
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/@openuidev/react-headless/-/react-headless-0.9.6.tgz",
+      "integrity": "sha512-EJO+WkkG9Rk8lTl2QSNK4cTl7D82o/z2saVIOo0CJMDn9Y5g/uqCoUe+v8J56c8EYkoLrrOce2SFsq7w+aWu9A==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -1501,35 +1501,61 @@
         "@openuidev/observability": "^0.0.2"
       },
       "peerDependencies": {
+        "ai": "^6.0.0",
         "react": "^18.3.1 || ^19.0.0",
         "zustand": "^4.5.5"
+      },
+      "peerDependenciesMeta": {
+        "ai": {
+          "optional": true
+        }
       }
     },
     "node_modules/@openuidev/react-lang": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/@openuidev/react-lang/-/react-lang-0.2.10.tgz",
-      "integrity": "sha512-CLd5rhJwy9hlMQoeySAwnHu8qb3lolSvW+LdZTGu7pVm7ipnXAwaT34qsDFrsUSBEsu73UGNedlId7mRVUV/uw==",
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@openuidev/react-lang/-/react-lang-0.2.11.tgz",
+      "integrity": "sha512-RXyRmFLxRBQ/pNnCq4CYFLl/1SnUvv3O5cnyTaaG6RqtXQ/CLmRiooqCtNY8xqi/cDVt3HJTgrfQOCN2ZhAQbg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@openuidev/lang-core": "^0.2.10",
+        "@openuidev/devtools": "^0.0.4",
+        "@openuidev/lang-core": "^0.2.11",
         "@openuidev/observability": "^0.0.2"
       },
       "peerDependencies": {
         "@modelcontextprotocol/sdk": ">=1.0.0",
-        "react": "^18.3.1 || ^19.0.0",
+        "react": "*",
+        "react-dom": "*",
         "zod": "^3.25.0 || ^4.0.0"
       },
       "peerDependenciesMeta": {
         "@modelcontextprotocol/sdk": {
           "optional": true
+        },
+        "react-dom": {
+          "optional": true
         }
       }
     },
+    "node_modules/@openuidev/react-lang/node_modules/@openuidev/devtools": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@openuidev/devtools/-/devtools-0.0.4.tgz",
+      "integrity": "sha512-DVf5Bu6gpKEfAnETyl/ZOQMyZCi1vapGohNSxaIyZ03jVZ+e5F9fkQJp+5T1ryg0v3vYi3AC0B4NRwEuCbZmmQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "lucide-react": "^0.575.0"
+      },
+      "peerDependencies": {
+        "@openuidev/observability": "^0.0.2",
+        "react": "^18.3.1 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@openuidev/react-ui": {
-      "version": "0.13.4",
-      "resolved": "https://registry.npmjs.org/@openuidev/react-ui/-/react-ui-0.13.4.tgz",
-      "integrity": "sha512-MyKrLR8rNwRvPs8cTbBtBc9H20Ik+e9YL3tPLGo73Z1XR8aYXJ1RTI/Towk9ddde/ov0XXb1RAKEmNOeJmMaRw==",
+      "version": "0.13.5",
+      "resolved": "https://registry.npmjs.org/@openuidev/react-ui/-/react-ui-0.13.5.tgz",
+      "integrity": "sha512-6mpCpLKouva4RK+nhBUcl4gMaE/1NOU5yW0bXnSvMFoC5UdFD2vtQOkmmNYG4t3giMHI5lHRMZ6u5RRKGe6ggg==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react-dom": "^2.1.2",
@@ -1564,8 +1590,8 @@
         "tiny-invariant": "^1.3.3"
       },
       "peerDependencies": {
-        "@openuidev/react-headless": "^0.9.5",
-        "@openuidev/react-lang": "^0.2.10",
+        "@openuidev/react-headless": "^0.9.6",
+        "@openuidev/react-lang": "^0.2.11",
         "react": "^18.3.1 || ^19.0.0",
         "react-dom": "^18.0.0 || ^19.0.0",
         "zod": "^3.25.0 || ^4.0.0",
@@ -6648,7 +6674,6 @@
       "version": "0.575.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.575.0.tgz",
       "integrity": "sha512-VuXgKZrk0uiDlWjGGXmKV6MSk9Yy4l10qgVvzGn2AWBx1Ylt0iBexKOAoA6I7JO3m+M9oeovJd3yYENfkUbOeg==",
-      "dev": true,
       "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
diff --git a/packages/openui-cli/src/templates/openui-self-hosted/package.json b/packages/openui-cli/src/templates/openui-self-hosted/package.json
index b89208a1f..2ed04e79c 100644
--- a/packages/openui-cli/src/templates/openui-self-hosted/package.json
+++ b/packages/openui-cli/src/templates/openui-self-hosted/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@openuidev/lang-core": "0.2.11",
-    "@openuidev/react-ui": "^0.13.4",
+    "@openuidev/react-ui": "^0.13.5",
     "next": "^16.3.0",
     "openai": "^6.49.0",
     "react": "19.2.3",

From 6daa3d3baa7fd42666b08be77eb5e165ece6c88e Mon Sep 17 00:00:00 2001
From: Visharad Kashyap <154831195+vishxrad@users.noreply.github.com>
Date: Fri, 7 Aug 2026 10:51:42 +0530
Subject: [PATCH 15/15] feat(cli): use native cloud framework streams

---
 docs/content/docs/api-reference/cli.mdx       |  12 +-
 packages/openui-cli/README.md                 |  12 +-
 .../openui-cli/src/commands/create-app.ts     |  18 +-
 .../openui-cloud/_backend-pages/langgraph.tsx |  10 +
 .../_backend-pages/vercel-ai-sdk.tsx          |  10 +
 .../openui-cloud/_backend-routes/langgraph.ts | 248 +++++++---------
 .../_backend-routes/vercel-ai-sdk.ts          | 280 ++++++++----------
 .../src/components/cloud-chat.tsx             |  30 +-
 8 files changed, 290 insertions(+), 330 deletions(-)
 create mode 100644 packages/openui-cli/src/templates/openui-cloud/_backend-pages/langgraph.tsx
 create mode 100644 packages/openui-cli/src/templates/openui-cloud/_backend-pages/vercel-ai-sdk.tsx

diff --git a/docs/content/docs/api-reference/cli.mdx b/docs/content/docs/api-reference/cli.mdx
index 9a48cf7e9..cfc6cba85 100644
--- a/docs/content/docs/api-reference/cli.mdx
+++ b/docs/content/docs/api-reference/cli.mdx
@@ -84,13 +84,13 @@ In non-interactive mode, dependencies are installed without starting the long-ru
 
 **Backend frameworks**
 
-| Value           | OpenUI Cloud route                                  | Self-hosted route                          |
-| --------------- | --------------------------------------------------- | ------------------------------------------ |
-| `none`          | Direct OpenAI SDK Responses proxy                   | Direct OpenAI SDK Chat Completions proxy   |
-| `langgraph`     | OpenAI SDK proxy + LangGraph app-tool execution     | LangGraph `StateGraph` using your provider |
-| `vercel-ai-sdk` | OpenAI SDK proxy + Vercel AI SDK app-tool execution | Vercel AI SDK `streamText()` route         |
+| Value           | OpenUI Cloud route                             | Self-hosted route                          |
+| --------------- | ---------------------------------------------- | ------------------------------------------ |
+| `none`          | Direct OpenAI SDK Responses proxy              | Direct OpenAI SDK Chat Completions proxy   |
+| `langgraph`     | LangGraph + ChatOpenAI Responses route         | LangGraph `StateGraph` using your provider |
+| `vercel-ai-sdk` | Vercel AI SDK Responses + `streamText()` route | Vercel AI SDK `streamText()` route         |
 
-The CLI replaces `src/app/api/chat/route.ts` and adds the selected framework's dependencies. Self-hosted framework selections also switch `src/app/page.tsx` to the framework's frontend message format and stream adapter, so the route can return the native LangGraph or Vercel AI SDK stream. Every Cloud route keeps the OpenAI SDK pointed at OpenUI Cloud, preserving the raw Responses stream and managed conversation storage. Artifacts, web search, image search, and configured MCP tools still execute in Cloud; selecting LangGraph or Vercel AI SDK only changes how application-owned function tools are defined and executed on your server. Choose self-hosted to use your own model provider key.
+The CLI replaces `src/app/api/chat/route.ts` and `src/app/page.tsx`, and adds the selected framework's dependencies. LangGraph routes return LangGraph's named-event SSE and use `langGraphAdapter()`; Vercel AI SDK routes return `toUIMessageStreamResponse()` and use `vercelAIAdapter()`. Cloud variants point the selected framework's Responses client at OpenUI Cloud and retain managed conversation storage. Artifacts, web search, image search, and configured MCP tools still execute in Cloud, while only application-owned function tools execute through the selected framework on your server. Choose self-hosted to use your own model provider key.
 
 Both self-hosted framework routes include a `get_weather` example backed by Open-Meteo. Ask “What’s the weather in Berlin?” to verify the selected framework’s native multi-step tool loop.
 
diff --git a/packages/openui-cli/README.md b/packages/openui-cli/README.md
index 632490a03..d68a88d8b 100644
--- a/packages/openui-cli/README.md
+++ b/packages/openui-cli/README.md
@@ -107,13 +107,13 @@ What it does:
 
 #### Backend frameworks
 
-| Value           | OpenUI Cloud route                                  | Self-hosted route                          |
-| --------------- | --------------------------------------------------- | ------------------------------------------ |
-| `none`          | Direct OpenAI SDK Responses proxy                   | Direct OpenAI SDK Chat Completions proxy   |
-| `langgraph`     | OpenAI SDK proxy + LangGraph app-tool execution     | LangGraph `StateGraph` using your provider |
-| `vercel-ai-sdk` | OpenAI SDK proxy + Vercel AI SDK app-tool execution | Vercel AI SDK `streamText()` route         |
+| Value           | OpenUI Cloud route                             | Self-hosted route                          |
+| --------------- | ---------------------------------------------- | ------------------------------------------ |
+| `none`          | Direct OpenAI SDK Responses proxy              | Direct OpenAI SDK Chat Completions proxy   |
+| `langgraph`     | LangGraph + ChatOpenAI Responses route         | LangGraph `StateGraph` using your provider |
+| `vercel-ai-sdk` | Vercel AI SDK Responses + `streamText()` route | Vercel AI SDK `streamText()` route         |
 
-The CLI replaces `src/app/api/chat/route.ts` and adds the dependencies for the selected framework. Self-hosted framework selections also switch `src/app/page.tsx` to the matching frontend message format and stream adapter, allowing LangGraph and the Vercel AI SDK to use their native streaming protocols instead of emulating OpenAI Chat Completions. Every Cloud combination keeps the OpenAI SDK pointed at OpenUI Cloud, preserving the raw Responses stream and managed conversation storage. Artifacts, web search, image search, and configured MCP tools still execute in Cloud; selecting LangGraph or Vercel AI SDK only changes how application-owned function tools are defined and executed on your server. It does not configure a user-owned model provider. Choose `openui-self-hosted` when you want to bring your own provider.
+The CLI replaces `src/app/api/chat/route.ts` and `src/app/page.tsx`, and adds the dependencies for the selected framework. LangGraph selections return LangGraph's named-event SSE and use `langGraphAdapter()`; Vercel AI SDK selections return `toUIMessageStreamResponse()` and use `vercelAIAdapter()`. Cloud variants still point their framework's Responses client at OpenUI Cloud and keep managed conversation storage. Artifacts, web search, image search, and configured MCP tools execute in Cloud; the selected framework executes only application-owned function tools on your server. Choosing a Cloud framework does not configure a user-owned model provider. Choose `openui-self-hosted` when you want to bring your own provider.
 
 Every Cloud route includes `get_weather` as its example app-owned function tool. The LangGraph and Vercel AI SDK variants define and execute that tool through the selected framework while leaving Cloud-owned tools unchanged. The two self-hosted framework routes include the same weather example and run it through their native multi-step tool loops, making the selected backend directly testable after scaffolding.
 
diff --git a/packages/openui-cli/src/commands/create-app.ts b/packages/openui-cli/src/commands/create-app.ts
index 5289a464a..fc423f640 100644
--- a/packages/openui-cli/src/commands/create-app.ts
+++ b/packages/openui-cli/src/commands/create-app.ts
@@ -28,9 +28,13 @@ const backendDependencies: Record<
     langgraph: {
       "@langchain/core": "^1.2.5",
       "@langchain/langgraph": "^1.4.9",
+      "@langchain/openai": "^1.5.6",
+      "@openuidev/react-headless": "^0.9.7",
     },
     "vercel-ai-sdk": {
-      ai: "^6.0.246",
+      "@ai-sdk/openai": "3.0.90",
+      "@openuidev/react-headless": "^0.9.6",
+      ai: "6.0.244",
       zod: "^4.4.3",
     },
   },
@@ -43,9 +47,9 @@ const backendDependencies: Record<
       zod: "^4.4.3",
     },
     "vercel-ai-sdk": {
-      "@ai-sdk/openai": "^3.0.91",
+      "@ai-sdk/openai": "3.0.90",
       "@openuidev/react-headless": "^0.9.6",
-      ai: "^6.0.246",
+      ai: "6.0.244",
       zod: "^4.4.3",
     },
   },
@@ -170,9 +174,8 @@ function applyBackendFiles(projectDir: string, backendFramework: BackendFramewor
     }
     fs.copyFileSync(routeSource, routeDestination);
 
-    // Self-hosted framework routes speak their native wire protocols, so their
-    // matching stream adapter and message format are selected on the frontend.
-    // Cloud keeps the Responses adapter because Responses remains its transport.
+    // Framework routes speak their native wire protocols, so select the
+    // matching frontend stream adapter and message format too.
     if (fs.existsSync(pageOptionsDir)) {
       const pageSource = path.join(pageOptionsDir, `${backendFramework}.tsx`);
       if (!fs.existsSync(pageSource)) {
@@ -183,6 +186,9 @@ function applyBackendFiles(projectDir: string, backendFramework: BackendFramewor
       }
       fs.copyFileSync(pageSource, path.join(projectDir, "src", "app", "page.tsx"));
     }
+
+    // Native framework routes own their tool loop and stream encoding.
+    fs.rmSync(path.join(projectDir, "src", "lib", "tool-loop.ts"), { force: true });
   }
   fs.rmSync(routeOptionsDir, { recursive: true, force: true });
   fs.rmSync(pageOptionsDir, { recursive: true, force: true });
diff --git a/packages/openui-cli/src/templates/openui-cloud/_backend-pages/langgraph.tsx b/packages/openui-cli/src/templates/openui-cloud/_backend-pages/langgraph.tsx
new file mode 100644
index 000000000..ab02276e5
--- /dev/null
+++ b/packages/openui-cli/src/templates/openui-cloud/_backend-pages/langgraph.tsx
@@ -0,0 +1,10 @@
+import "@openuidev/react-ui/components.css";
+import "@openuidev/thesys/styles.css";
+
+import CloudChat from "@/components/cloud-chat";
+
+export const dynamic = "force-dynamic";
+
+export default function Page() {
+  return <CloudChat backend="langgraph" />;
+}
diff --git a/packages/openui-cli/src/templates/openui-cloud/_backend-pages/vercel-ai-sdk.tsx b/packages/openui-cli/src/templates/openui-cloud/_backend-pages/vercel-ai-sdk.tsx
new file mode 100644
index 000000000..ecb87bb94
--- /dev/null
+++ b/packages/openui-cli/src/templates/openui-cloud/_backend-pages/vercel-ai-sdk.tsx
@@ -0,0 +1,10 @@
+import "@openuidev/react-ui/components.css";
+import "@openuidev/thesys/styles.css";
+
+import CloudChat from "@/components/cloud-chat";
+
+export const dynamic = "force-dynamic";
+
+export default function Page() {
+  return <CloudChat backend="vercel-ai-sdk" />;
+}
diff --git a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
index fa9e36f66..203aeeb4c 100644
--- a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
+++ b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/langgraph.ts
@@ -1,38 +1,24 @@
 import { requiredEnv } from "@/lib/env";
 import { resolveRequestedModel } from "@/lib/models";
-import { runFunctionToolLoop, type FunctionToolExecutor } from "@/lib/tool-loop";
-import { executeGetWeather } from "@/lib/tools/get-weather";
-import { AIMessage, ToolMessage } from "@langchain/core/messages";
+import { executeGetWeather, getWeatherTool } from "@/lib/tools/get-weather";
+import { AIMessage, AIMessageChunk, type BaseMessageLike } from "@langchain/core/messages";
 import { tool } from "@langchain/core/tools";
-import { convertToOpenAIFunction } from "@langchain/core/utils/function_calling";
-import { ToolNode } from "@langchain/langgraph/prebuilt";
+import { END, MessagesAnnotation, START, StateGraph } from "@langchain/langgraph";
+import { ToolNode, toolsCondition } from "@langchain/langgraph/prebuilt";
+import { ChatOpenAI } from "@langchain/openai";
 import { artifactTool, generateSystemPrompt } from "@openuidev/thesys-server";
-import { NextResponse } from "next/server";
-import OpenAI from "openai";
-import type {
-  FunctionTool,
-  ResponseCreateParamsNonStreaming,
-  ResponseInputItem,
-  Tool,
-} from "openai/resources/responses/responses";
 import { z } from "zod";
 
 export const runtime = "nodejs";
 
-/**
- * App-owned tools are defined with LangChain and executed by LangGraph.
- * Add your own tools here; OpenUI Cloud's built-in tools stay in createParams.
- */
 const getWeather = tool(
   async ({ location }, config) =>
     executeGetWeather(JSON.stringify({ location }), { signal: config.signal }),
   {
     name: "get_weather",
-    description:
-      "Get the current weather for a city or place name. Use whenever the user " +
-      "asks about weather, temperature, rain, or what to wear.",
+    description: getWeatherTool.description,
     schema: z.object({
-      location: z.string().min(1).describe("City or place name, e.g. Berlin."),
+      location: z.string().trim().min(1).describe("City or place name, e.g. Berlin."),
     }),
   },
 );
@@ -48,53 +34,34 @@ for (const appTool of appTools) {
   }
   appToolNames.add(appTool.name);
 }
-const appToolNode = new ToolNode(appTools);
-const appToolDefinitions = appTools.map(
-  (appTool) =>
-    ({
-      type: "function",
-      ...convertToOpenAIFunction(appTool, { strict: false }),
-    }) as FunctionTool,
-);
 
-// Bridge OpenUI Cloud Responses function calls into LangGraph's ToolNode.
-const functionTools = Object.fromEntries(
-  appTools.map((appTool) => [
-    appTool.name,
-    async (argsJson: string, ctx: { callId: string; signal?: AbortSignal }) => {
-      const args = JSON.parse(argsJson || "{}") as Record<string, unknown>;
-      const result = (await appToolNode.invoke(
-        {
-          messages: [
-            new AIMessage({
-              content: "",
-              tool_calls: [
-                {
-                  type: "tool_call",
-                  id: ctx.callId,
-                  name: appTool.name,
-                  args,
-                },
-              ],
-            }),
-          ],
-        },
-        { signal: ctx.signal },
-      )) as { messages?: unknown[] };
-      const output = result.messages?.at(-1);
-      if (!ToolMessage.isInstance(output)) {
-        throw new Error(`LangGraph did not return a result for ${appTool.name}`);
+/** Hide Cloud-owned function calls from the local graph and UI tool loop. */
+class CloudChatOpenAI extends ChatOpenAI {
+  override async *_streamResponseChunks(...args: Parameters<ChatOpenAI["_streamResponseChunks"]>) {
+    const cloudToolIndexes = new Set<number>();
+    const cloudToolCallIds = new Set<string>();
+
+    for await (const chunk of super._streamResponseChunks(...args)) {
+      if (AIMessageChunk.isInstance(chunk.message) && chunk.message.tool_call_chunks) {
+        chunk.message.tool_call_chunks = chunk.message.tool_call_chunks.filter((toolCall) => {
+          if (toolCall.name && !appToolNames.has(toolCall.name)) {
+            if (toolCall.index !== undefined) cloudToolIndexes.add(toolCall.index);
+            if (toolCall.id) cloudToolCallIds.add(toolCall.id);
+            return false;
+          }
+          if (toolCall.index !== undefined && cloudToolIndexes.has(toolCall.index)) return false;
+          if (toolCall.id && cloudToolCallIds.has(toolCall.id)) return false;
+          return true;
+        });
+        chunk.message.tool_calls = chunk.message.tool_calls?.filter((toolCall) =>
+          appToolNames.has(toolCall.name),
+        );
       }
-      return typeof output.content === "string" ? output.content : JSON.stringify(output.content);
-    },
-  ]),
-) as Record<string, FunctionToolExecutor>;
-
-/**
- * OpenUI Cloud remains the OpenAI-compatible Responses provider and owns its
- * conversations, artifacts, search, and MCP tools. LangGraph is used only for
- * application-owned function tools declared above.
- */
+      yield chunk;
+    }
+  }
+}
+
 export async function POST(req: Request) {
   const {
     threadId,
@@ -102,109 +69,100 @@ export async function POST(req: Request) {
     model: requestedModel,
   } = (await req.json()) as {
     threadId?: string;
-    messages?: ResponseInputItem[];
+    messages?: BaseMessageLike[];
     model?: unknown;
   };
 
   if (!threadId) return badRequest("threadId is required — create the conversation first");
   if (!Array.isArray(messages) || messages.length === 0) {
-    return badRequest("messages must be a non-empty ResponseInputItem[]");
+    return badRequest("messages must be a non-empty LangChain message array");
   }
   const model = resolveRequestedModel(requestedModel);
   if (!model) return badRequest("model is not available in this agent");
 
-  const abortController = new AbortController();
-  const abortFromRequest = () => abortController.abort(req.signal.reason);
-  if (req.signal.aborted) abortFromRequest();
-  else req.signal.addEventListener("abort", abortFromRequest, { once: true });
-
-  const client = new OpenAI({
-    baseURL: "https://api.thesys.dev/v1/embed",
+  const chatModel = new CloudChatOpenAI({
+    model,
     apiKey: requiredEnv("THESYS_API_KEY"),
+    streaming: true,
+    useResponsesApi: true,
+    configuration: { baseURL: "https://api.thesys.dev/v1/embed" },
+    modelKwargs: {
+      conversation: threadId,
+      store: true,
+      instructions: generateSystemPrompt(),
+    },
   });
-  const createParams: ResponseCreateParamsNonStreaming = {
-    model,
-    conversation: threadId,
-    input: messages.slice(-1),
-    store: true,
-    tools: [
-      // These tools execute inside OpenUI Cloud.
-      artifactTool({ artifacts: ["slides", "report"] }) as unknown as Tool,
-      { type: "web_search" },
-      { type: "image_search" } as unknown as Tool,
-      // These tools execute in this application through LangGraph.
-      ...appToolDefinitions,
-    ],
-    instructions: generateSystemPrompt(),
-  };
 
-  let stream: AsyncIterable<Record<string, unknown>>;
-  try {
-    stream = (await client.responses.create(
-      { ...createParams, stream: true },
-      { signal: abortController.signal },
-    )) as unknown as AsyncIterable<Record<string, unknown>>;
-  } catch (err) {
-    req.signal.removeEventListener("abort", abortFromRequest);
-    return upstreamError(err);
+  const cloudTools = [
+    artifactTool({ artifacts: ["slides", "report"] }),
+    { type: "web_search" as const },
+    { type: "image_search" as const },
+  ];
+  const modelWithTools = chatModel.bindTools([...cloudTools, ...appTools] as Parameters<
+    typeof chatModel.bindTools
+  >[0]);
+
+  async function callModel(state: typeof MessagesAnnotation.State) {
+    // Cloud stores the conversation, so each graph step sends only its new
+    // user message or ToolMessage instead of replaying stored history.
+    const response = await modelWithTools.invoke(state.messages.slice(-1));
+    const localToolCalls = response.tool_calls?.filter((call) => appToolNames.has(call.name));
+
+    // Cloud-owned calls have already run upstream. Keep only app calls in graph
+    // state so ToolNode cannot execute or answer a Cloud-owned call.
+    return {
+      messages: [
+        new AIMessage({
+          id: response.id,
+          content: response.content,
+          additional_kwargs: response.additional_kwargs,
+          response_metadata: response.response_metadata,
+          tool_calls: localToolCalls,
+          usage_metadata: response.usage_metadata,
+        }),
+      ],
+    };
   }
 
-  const encoder = new TextEncoder();
-  let cancelled = false;
-  const body = new ReadableStream<Uint8Array>({
-    async start(controller) {
-      const enqueue = (event: Record<string, unknown>) => {
-        if (!cancelled) controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
-      };
-      try {
-        await runFunctionToolLoop({
-          client,
-          createParams,
-          firstStream: stream,
-          tools: functionTools,
-          enqueue,
-          signal: abortController.signal,
-        });
-      } catch (err) {
-        if (cancelled) return;
-        enqueue({
-          type: "error",
-          message: err instanceof Error ? err.message : String(err),
-        });
-      } finally {
-        req.signal.removeEventListener("abort", abortFromRequest);
-        if (!cancelled) controller.close();
-      }
-    },
-    cancel(reason) {
-      cancelled = true;
-      req.signal.removeEventListener("abort", abortFromRequest);
-      abortController.abort(reason);
-    },
-  });
+  const graph = new StateGraph(MessagesAnnotation)
+    .addNode("model", callModel)
+    .addNode("tools", new ToolNode(appTools))
+    .addEdge(START, "model")
+    .addConditionalEdges("model", toolsCondition, ["tools", END])
+    .addEdge("tools", "model")
+    .compile();
+
+  let stream: ReadableStream<Uint8Array>;
+  try {
+    stream = await graph.stream(
+      { messages: messages.slice(-1) },
+      {
+        streamMode: "messages",
+        encoding: "text/event-stream",
+        signal: req.signal,
+      },
+    );
+  } catch (error) {
+    return providerError(error);
+  }
 
-  return new Response(body, {
+  // LangGraph owns named-event SSE encoding for this variant.
+  return new Response(stream, {
     headers: {
       "Content-Type": "text/event-stream",
       "Cache-Control": "no-cache, no-transform",
-      Connection: "keep-alive",
     },
   });
 }
 
 function badRequest(message: string): Response {
-  return NextResponse.json({ error: { message } }, { status: 400 });
+  return Response.json({ error: { message } }, { status: 400 });
 }
 
-function upstreamError(err: unknown): Response {
-  const e = err as {
-    status?: number;
-    statusCode?: number;
-    error?: unknown;
-    message?: string;
-  };
-  return NextResponse.json(
-    { error: e.error ?? { message: e.message ?? "upstream error" } },
-    { status: e.status ?? e.statusCode ?? 502 },
+function providerError(error: unknown): Response {
+  const e = error as { status?: number; statusCode?: number; message?: string };
+  return Response.json(
+    { error: { message: e.message ?? "Provider request failed" } },
+    { status: e.status ?? e.statusCode ?? 500 },
   );
 }
diff --git a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel-ai-sdk.ts b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel-ai-sdk.ts
index aaf8d799d..a96150ace 100644
--- a/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel-ai-sdk.ts
+++ b/packages/openui-cli/src/templates/openui-cloud/_backend-routes/vercel-ai-sdk.ts
@@ -1,100 +1,113 @@
 import { requiredEnv } from "@/lib/env";
 import { resolveRequestedModel } from "@/lib/models";
-import { runFunctionToolLoop, type FunctionToolExecutor } from "@/lib/tool-loop";
-import { executeGetWeather } from "@/lib/tools/get-weather";
+import { executeGetWeather, getWeatherTool } from "@/lib/tools/get-weather";
+import { createOpenAI } from "@ai-sdk/openai";
 import { artifactTool, generateSystemPrompt } from "@openuidev/thesys-server";
-import { asSchema, tool, type ToolSet } from "ai";
-import { NextResponse } from "next/server";
-import OpenAI from "openai";
-import type {
-  FunctionTool,
-  ResponseCreateParamsNonStreaming,
-  ResponseInputItem,
-  Tool,
-} from "openai/resources/responses/responses";
+import {
+  convertToModelMessages,
+  stepCountIs,
+  streamText,
+  tool,
+  wrapLanguageModel,
+  type LanguageModelMiddleware,
+  type UIMessage,
+} from "ai";
 import { z } from "zod";
 
 export const runtime = "nodejs";
 
-/**
- * App-owned tools are defined with the Vercel AI SDK and execute on this
- * server. Add your own tools here; OpenUI Cloud's built-ins stay separate.
- */
 const appTools = {
   get_weather: tool({
-    description:
-      "Get the current weather for a city or place name. Use whenever the user " +
-      "asks about weather, temperature, rain, or what to wear.",
+    description: getWeatherTool.description,
     inputSchema: z.object({
-      location: z.string().min(1).describe("City or place name, e.g. Berlin."),
+      location: z.string().trim().min(1).describe("City or place name, e.g. Berlin."),
     }),
-    execute: async ({ location }, { abortSignal }) =>
+    execute: ({ location }, { abortSignal }) =>
       executeGetWeather(JSON.stringify({ location }), { signal: abortSignal }),
   }),
-} satisfies ToolSet;
+};
+
+const appToolNames = new Set(Object.keys(appTools));
+for (const appToolName of appToolNames) {
+  if (appToolName.startsWith("thesys_")) {
+    throw new Error(`App tool names cannot use the reserved thesys_ prefix: ${appToolName}`);
+  }
+}
+
+type WrapStreamArgs = Parameters<NonNullable<LanguageModelMiddleware["wrapStream"]>>[0];
+type ModelStreamResult = Awaited<ReturnType<WrapStreamArgs["doStream"]>>;
+type ModelStreamPart =
+  ModelStreamResult["stream"] extends ReadableStream<infer Part> ? Part : never;
 
 /**
- * The AI SDK normally owns the model transport as well as its tool loop. Here
- * OpenUI Cloud must remain the Responses transport, so this adapter exposes AI
- * SDK tools as Responses declarations and local executors for our shared loop.
+ * OpenUI Cloud runs artifacts, search, and MCP calls itself. Keep those calls
+ * out of the AI SDK's local tool runner; only appTools are executed here.
  */
-async function prepareAppTools(tools: ToolSet): Promise<{
-  definitions: FunctionTool[];
-  executors: Record<string, FunctionToolExecutor>;
-}> {
-  const definitions: FunctionTool[] = [];
-  const executors: Record<string, FunctionToolExecutor> = {};
-
-  for (const [name, appTool] of Object.entries(tools)) {
-    if (name.startsWith("thesys_")) {
-      throw new Error(`App tool names cannot use the reserved thesys_ prefix: ${name}`);
-    }
-    if (appTool.type && appTool.type !== "function") {
-      throw new Error(`Only application function tools are supported here: ${name}`);
-    }
-    if (appTool.needsApproval) {
-      throw new Error(`Tool approval is not configured for: ${name}`);
-    }
-    const execute = appTool.execute;
-    if (!execute) throw new Error(`Tool ${name} must provide an execute function`);
-
-    const schema = asSchema(appTool.inputSchema);
-    definitions.push({
-      type: "function",
-      name,
-      description: appTool.description,
-      parameters: (await schema.jsonSchema) as Record<string, unknown>,
-      strict: appTool.strict ?? false,
-    });
-
-    executors[name] = async (argsJson, { callId, signal }) => {
-      const input = JSON.parse(argsJson || "{}") as unknown;
-      const validation = schema.validate
-        ? await schema.validate(input)
-        : ({ success: true, value: input } as const);
-      if (!validation.success) throw validation.error;
-
-      const output = await execute(validation.value, {
-        toolCallId: callId,
-        messages: [],
-        abortSignal: signal,
-      });
-      if (output !== null && typeof output === "object" && Symbol.asyncIterator in output) {
-        throw new Error(`Streaming tool results are not supported for: ${name}`);
-      }
-      if (typeof output === "string") return output;
-      return JSON.stringify(output) ?? String(output);
+const appToolsOnly: LanguageModelMiddleware = {
+  specificationVersion: "v3",
+  wrapStream: async ({ doStream }) => {
+    const result = await doStream();
+    const cloudToolCallIds = new Set<string>();
+
+    return {
+      ...result,
+      stream: result.stream.pipeThrough(
+        new TransformStream<ModelStreamPart, ModelStreamPart>({
+          transform(part, controller) {
+            if (part.type === "tool-input-start") {
+              if (part.providerExecuted === true || !appToolNames.has(part.toolName)) {
+                cloudToolCallIds.add(part.id);
+                return;
+              }
+            }
+
+            if (
+              (part.type === "tool-input-delta" || part.type === "tool-input-end") &&
+              cloudToolCallIds.has(part.id)
+            ) {
+              return;
+            }
+
+            if (part.type === "tool-call") {
+              if (
+                part.providerExecuted === true ||
+                cloudToolCallIds.has(part.toolCallId) ||
+                !appToolNames.has(part.toolName)
+              ) {
+                cloudToolCallIds.add(part.toolCallId);
+                return;
+              }
+            }
+
+            if (part.type === "tool-result" && cloudToolCallIds.has(part.toolCallId)) {
+              return;
+            }
+
+            controller.enqueue(part);
+          },
+        }),
+      ),
     };
+  },
+};
+
+/** Add Cloud-managed tool declarations after the AI SDK prepares its request. */
+const cloudFetch: typeof fetch = async (input, init) => {
+  const url = input instanceof Request ? input.url : String(input);
+  if (!url.endsWith("/responses") || typeof init?.body !== "string") {
+    return fetch(input, init);
   }
 
-  return { definitions, executors };
-}
+  const body = JSON.parse(init.body) as { tools?: unknown[] };
+  body.tools = [
+    artifactTool({ artifacts: ["slides", "report"] }),
+    { type: "image_search" },
+    ...(body.tools ?? []),
+  ];
+
+  return fetch(input, { ...init, body: JSON.stringify(body) });
+};
 
-/**
- * OpenUI Cloud remains the OpenAI-compatible Responses provider and owns its
- * conversations, artifacts, search, and MCP tools. The Vercel AI SDK is used
- * only for application-owned function tools declared above.
- */
 export async function POST(req: Request) {
   const {
     threadId,
@@ -102,111 +115,50 @@ export async function POST(req: Request) {
     model: requestedModel,
   } = (await req.json()) as {
     threadId?: string;
-    messages?: ResponseInputItem[];
+    messages?: UIMessage[];
     model?: unknown;
   };
 
   if (!threadId) return badRequest("threadId is required — create the conversation first");
   if (!Array.isArray(messages) || messages.length === 0) {
-    return badRequest("messages must be a non-empty ResponseInputItem[]");
+    return badRequest("messages must be a non-empty UIMessage[]");
   }
   const model = resolveRequestedModel(requestedModel);
   if (!model) return badRequest("model is not available in this agent");
 
-  const abortController = new AbortController();
-  const abortFromRequest = () => abortController.abort(req.signal.reason);
-  if (req.signal.aborted) abortFromRequest();
-  else req.signal.addEventListener("abort", abortFromRequest, { once: true });
-
-  const client = new OpenAI({
+  const openai = createOpenAI({
     baseURL: "https://api.thesys.dev/v1/embed",
     apiKey: requiredEnv("THESYS_API_KEY"),
+    fetch: cloudFetch,
+  });
+  const cloudModel = wrapLanguageModel({
+    model: openai.responses(model),
+    middleware: appToolsOnly,
   });
-  const { definitions: appToolDefinitions, executors: functionTools } =
-    await prepareAppTools(appTools);
-  const createParams: ResponseCreateParamsNonStreaming = {
-    model,
-    conversation: threadId,
-    input: messages.slice(-1),
-    store: true,
-    tools: [
-      // These tools execute inside OpenUI Cloud.
-      artifactTool({ artifacts: ["slides", "report"] }) as unknown as Tool,
-      { type: "web_search" },
-      { type: "image_search" } as unknown as Tool,
-      // These tools execute in this application through the Vercel AI SDK.
-      ...appToolDefinitions,
-    ],
-    instructions: generateSystemPrompt(),
-  };
-
-  let stream: AsyncIterable<Record<string, unknown>>;
-  try {
-    stream = (await client.responses.create(
-      { ...createParams, stream: true },
-      { signal: abortController.signal },
-    )) as unknown as AsyncIterable<Record<string, unknown>>;
-  } catch (err) {
-    req.signal.removeEventListener("abort", abortFromRequest);
-    return upstreamError(err);
-  }
 
-  const encoder = new TextEncoder();
-  let cancelled = false;
-  const body = new ReadableStream<Uint8Array>({
-    async start(controller) {
-      const enqueue = (event: Record<string, unknown>) => {
-        if (!cancelled) controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
-      };
-      try {
-        await runFunctionToolLoop({
-          client,
-          createParams,
-          firstStream: stream,
-          tools: functionTools,
-          enqueue,
-          signal: abortController.signal,
-        });
-      } catch (err) {
-        if (cancelled) return;
-        enqueue({
-          type: "error",
-          message: err instanceof Error ? err.message : String(err),
-        });
-      } finally {
-        req.signal.removeEventListener("abort", abortFromRequest);
-        if (!cancelled) controller.close();
-      }
+  const result = streamText({
+    model: cloudModel,
+    messages: await convertToModelMessages(messages.slice(-1)),
+    tools: {
+      ...appTools,
+      web_search: openai.tools.webSearch({}),
     },
-    cancel(reason) {
-      cancelled = true;
-      req.signal.removeEventListener("abort", abortFromRequest);
-      abortController.abort(reason);
+    stopWhen: stepCountIs(5),
+    prepareStep: ({ messages: stepMessages }) => ({ messages: stepMessages.slice(-1) }),
+    providerOptions: {
+      openai: {
+        conversation: threadId,
+        store: true,
+        instructions: generateSystemPrompt(),
+      },
     },
+    abortSignal: req.signal,
   });
 
-  return new Response(body, {
-    headers: {
-      "Content-Type": "text/event-stream",
-      "Cache-Control": "no-cache, no-transform",
-      Connection: "keep-alive",
-    },
-  });
+  // The AI SDK owns UIMessage SSE encoding for this variant.
+  return result.toUIMessageStreamResponse();
 }
 
 function badRequest(message: string): Response {
-  return NextResponse.json({ error: { message } }, { status: 400 });
-}
-
-function upstreamError(err: unknown): Response {
-  const e = err as {
-    status?: number;
-    statusCode?: number;
-    error?: unknown;
-    message?: string;
-  };
-  return NextResponse.json(
-    { error: e.error ?? { message: e.message ?? "upstream error" } },
-    { status: e.status ?? e.statusCode ?? 502 },
-  );
+  return Response.json({ error: { message } }, { status: 400 });
 }
diff --git a/packages/openui-cli/src/templates/openui-cloud/src/components/cloud-chat.tsx b/packages/openui-cli/src/templates/openui-cloud/src/components/cloud-chat.tsx
index d9d3de206..8ec84ed19 100644
--- a/packages/openui-cli/src/templates/openui-cloud/src/components/cloud-chat.tsx
+++ b/packages/openui-cli/src/templates/openui-cloud/src/components/cloud-chat.tsx
@@ -8,9 +8,13 @@ import {
   ModelSwitcher,
   defineArtifactCategories,
   fetchLLM,
+  langGraphAdapter,
+  langGraphMessageFormat,
   openAIConversationMessageFormat,
   openAIResponsesAdapter,
   useSystemThemeMode,
+  vercelAIAdapter,
+  vercelAIMessageFormat,
 } from "@openuidev/react-ui";
 import {
   chatLibrary,
@@ -33,13 +37,33 @@ const { artifactRenderers, artifactCategories } = defineArtifactCategories([
   },
 ]);
 
-export default function CloudChat() {
+const transports = {
+  responses: {
+    streamAdapter: openAIResponsesAdapter(),
+    messageFormat: openAIConversationMessageFormat,
+  },
+  langgraph: {
+    streamAdapter: langGraphAdapter(),
+    messageFormat: langGraphMessageFormat,
+  },
+  "vercel-ai-sdk": {
+    streamAdapter: vercelAIAdapter(),
+    messageFormat: vercelAIMessageFormat,
+  },
+} as const;
+
+export default function CloudChat({
+  backend = "responses",
+}: {
+  backend?: keyof typeof transports;
+}) {
   const mode = useSystemThemeMode();
   const [selectedModel, setSelectedModel] = usePersistedModel();
+  const { streamAdapter, messageFormat } = transports[backend];
   const llm = fetchLLM({
     url: "/api/chat",
-    streamAdapter: openAIResponsesAdapter(),
-    messageFormat: openAIConversationMessageFormat,
+    streamAdapter,
+    messageFormat,
     body: { model: selectedModel },
   });