From 92faf00628ea05e090c3bcf476c9ed46b7d3340f 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] feat(cli): scaffold selected backend framework

---
 docs/content/docs/api-reference/cli.mdx       |  51 +++--
 packages/openui-cli/README.md                 |  30 ++-
 packages/openui-cli/package.json              |   2 +-
 .../openui-cli/src/commands/create-app.ts     | 153 ++++++++++---
 packages/openui-cli/src/index.ts              |  10 +-
 .../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 +-
 .../_backend-routes/langgraph.ts              |  76 +++++++
 .../_backend-routes/vercel.ts                 | 204 ++++++++++++++++++
 10 files changed, 500 insertions(+), 46 deletions(-)
 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 d5ba4c163..6857ef5a7 100644
--- a/docs/content/docs/api-reference/cli.mdx
+++ b/docs/content/docs/api-reference/cli.mdx
@@ -53,23 +53,24 @@ openui create [options]
 
 **Options**
 
-| Flag                        | Description                                                 |
-| --------------------------- | ----------------------------------------------------------- |
-| `-n, --name <string>`       | Project name (directory to create)                          |
-| `-t, --template <template>` | AI setup/template: `openui-cloud` or `openui-self-hosted`   |
-| `--api-key <key>`           | OpenUI Cloud API key; skips sign-in for the Cloud setup     |
-| `--auth <method>`           | Cloud auth method: `oauth`, `manual`, or `skip`             |
-| `--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            |
-| `--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. It asks you to choose your AI setup: **OpenUI Cloud** is the fastest setup with free hosted models, while **OpenAI-compatible provider** uses your own key and self-hosts the AI route in the generated app. Pass `--no-interactive` in CI or scripted environments to surface missing required flags as errors instead.
+| Flag                              | Description                                                 |
+| --------------------------------- | ----------------------------------------------------------- |
+| `-n, --name <string>`             | Project name (directory to create)                          |
+| `-t, --template <template>`       | AI setup/template: `openui-cloud` or `openui-self-hosted`   |
+| `--backend-framework <framework>` | Self-hosted backend: `none`, `langgraph`, or `vercel`       |
+| `--api-key <key>`                 | OpenUI Cloud API key; skips sign-in for the Cloud setup     |
+| `--auth <method>`                 | Cloud auth method: `oauth`, `manual`, or `skip`             |
+| `--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            |
+| `--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. It asks you to choose your AI setup: **OpenUI Cloud** is the fastest setup with free hosted models, while **self-hosted** uses your own key and runs the AI route in the generated app. Self-hosted then offers the **OpenAI SDK** (default), **LangGraph**, or **Vercel AI SDK**. Cloud skips this prompt because it provides the managed backend. Pass `--no-interactive` in CI or scripted environments to surface missing required flags as errors instead; self-hosted defaults to `none` when the flag is omitted.
 
 **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
@@ -77,7 +78,15 @@ When run interactively (default), the CLI prompts for any missing options. It as
 6. Auto-detects your package manager (npm, pnpm, yarn, bun)
 7. Installs dependencies
 
-The generated project includes a `generate:prompt` script that runs `openui generate` as part of `dev` and `build`.
+**Self-hosted backends**
+
+| Value       | Generated backend                    |
+| ----------- | ------------------------------------ |
+| `none`      | The default OpenAI SDK chat route    |
+| `langgraph` | A LangGraph `StateGraph` route       |
+| `vercel`    | A Vercel AI SDK `streamText()` route |
+
+All three choices share the same frontend. The CLI replaces only `src/app/api/chat/route.ts` and the backend dependencies; every route emits the OpenAI-compatible NDJSON stream consumed by that frontend. Passing `langgraph` or `vercel` without `--template` selects `openui-self-hosted`. Combining either with `openui-cloud` is an error because Cloud already supplies the backend.
 
 **Agent skill**
 
@@ -95,6 +104,9 @@ pnpx @openuidev/cli@latest create
 pnpx @openuidev/cli@latest create --name my-app --template openui-cloud
 pnpx @openuidev/cli@latest create --name my-app --template openui-self-hosted
 
+# Select a backend framework explicitly
+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
 
@@ -111,6 +123,9 @@ 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-self-hosted --backend-framework langgraph
+
 # Non-interactive
 bunx @openuidev/cli@latest create --no-interactive --name my-app --template openui-cloud --auth skip
 
@@ -127,6 +142,9 @@ 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-self-hosted --backend-framework langgraph
+
 # Non-interactive
 yarn dlx @openuidev/cli@latest create --no-interactive --name my-app --template openui-cloud --auth skip
 
@@ -143,6 +161,9 @@ 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-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 3fa1afed6..e92a71e49 100644
--- a/packages/openui-cli/README.md
+++ b/packages/openui-cli/README.md
@@ -10,7 +10,7 @@ Command-line tools for starting OpenUI projects and generating model instruction
 It currently supports two workflows:
 
 - scaffolding a new OpenUI app from one of two templates:
-  - **OpenUI Chat** — a Next.js app where you bring your own model key (OpenAI)
+  - **Self-hosted** — a Next.js app where you bring your own model key and choose the OpenAI SDK, LangGraph, or Vercel AI SDK backend
   - **OpenUI Cloud** — a Next.js app backed by OpenUI Cloud for managed conversations, artifacts, and streaming
 - generating a system prompt or JSON Schema from a `createLibrary()` export
 
@@ -39,6 +39,13 @@ npx @openuidev/cli@latest create --template openui-self-hosted
 npx @openuidev/cli@latest create --template openui-cloud
 ```
 
+Choose a self-hosted backend directly (the default is `none`, which uses the OpenAI SDK):
+
+```bash
+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
@@ -55,7 +62,7 @@ npx @openuidev/cli@latest generate ./src/library.ts --json-schema
 
 ### `openui create`
 
-Scaffolds a new Next.js app from the **OpenUI Chat** or **OpenUI Cloud** template.
+Scaffolds a new Next.js app using **OpenUI Cloud** or a **self-hosted** backend.
 
 ```bash
 openui create [options]
@@ -65,6 +72,7 @@ Options:
 
 - `-n, --name <string>`: Project name
 - `-t, --template <template>`: Template to scaffold — `openui-self-hosted` or `openui-cloud`
+- `--backend-framework <framework>`: Self-hosted backend — `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
@@ -77,15 +85,29 @@ What it does:
 
 - prompts for the project name if you do not pass `--name`
 - prompts for the template if you do not pass `--template`
+- prompts for a backend framework after you choose self-hosted; non-interactive usage defaults to `none`
+- skips the backend prompt for OpenUI Cloud because Cloud provides the managed backend
 - copies the bundled template into a new directory
 - rewrites monorepo-local dependencies (`workspace:`, `file:`, `catalog:`) in the generated `package.json` to `latest`
 - installs dependencies automatically using the detected package manager (unless `--no-install`)
 - optionally installs the OpenUI agent skill for AI coding assistants
 - writes a `.env` file tailored to the template (see below)
 
+#### Self-hosted backends
+
+| Value       | Generated backend                    |
+| ----------- | ------------------------------------ |
+| `none`      | The default OpenAI SDK chat route    |
+| `langgraph` | A LangGraph `StateGraph` route       |
+| `vercel`    | A Vercel AI SDK `streamText()` route |
+
+The frontend is shared by all three choices. The CLI replaces only `src/app/api/chat/route.ts` and the backend dependencies; each route emits the OpenAI-compatible NDJSON stream expected by the shared frontend.
+
+Passing `langgraph` or `vercel` without `--template` selects `openui-self-hosted`. OpenUI Cloud cannot be combined with either because it already supplies the backend.
+
 #### Template-specific `.env`
 
-- **OpenUI Chat** — prompts for your OpenAI API key and writes `OPENAI_API_KEY` to `.env` (interactive mode only). Leave blank to skip.
+- **Self-hosted** — prompts for your OpenAI API key and writes `OPENAI_API_KEY` to `.env` (interactive mode only). Leave blank to skip.
 - **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:
   - `--api-key <key>` if provided
   - the `--auth` method, otherwise an interactive prompt offering:
@@ -99,6 +121,8 @@ 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 --api-key tk_your_key
 openui create --name my-app --no-skill --no-install
diff --git a/packages/openui-cli/package.json b/packages/openui-cli/package.json
index 5beddc695..77bf982d1 100644
--- a/packages/openui-cli/package.json
+++ b/packages/openui-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openuidev/cli",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "CLI for OpenUI — scaffold generative UI chat apps and generate LLM system prompts from component libraries",
   "bin": {
     "openui": "dist/index.js"
diff --git a/packages/openui-cli/src/commands/create-app.ts b/packages/openui-cli/src/commands/create-app.ts
index cf21ade50..9e5aacb8d 100644
--- a/packages/openui-cli/src/commands/create-app.ts
+++ b/packages/openui-cli/src/commands/create-app.ts
@@ -5,12 +5,31 @@ 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 } from "../lib/detect-package-manager";
 import { runSkillInstall, shouldInstallSkill } from "../lib/install-skill";
 import { resolveArgs } from "../lib/resolve-args";
 import { CreateError, telemetry } from "../lib/telemetry";
 
+const backendDependencies: Record<Exclude<BackendFramework, "none">, Record<string, string>> = {
+  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;
@@ -19,7 +38,7 @@ function shouldCopyTemplatePath(templateDir: string, src: string): boolean {
   return !["node_modules", ".next", ".turbo", "dist"].includes(top);
 }
 
-function rewritePackageJson(projectDir: string, name: string) {
+function rewritePackageJson(projectDir: string, name: string, 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.
@@ -33,6 +52,12 @@ function rewritePackageJson(projectDir: string, name: string) {
     devDependencies?: Record<string, string>;
   };
   pkg.name = name;
+  if (backendFramework !== "none") {
+    pkg.dependencies ??= {};
+    delete pkg.dependencies["openai"];
+    Object.assign(pkg.dependencies, backendDependencies[backendFramework]);
+  }
+
   for (const section of ["dependencies", "devDependencies"] as const) {
     const deps = pkg[section];
     if (!deps) continue;
@@ -55,6 +80,22 @@ function rewritePackageJson(projectDir: string, name: string) {
   fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
 }
 
+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();
@@ -65,47 +106,98 @@ 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),
   });
 
-  const args = await resolveArgs(
+  const baseArgs = await resolveArgs(
     {
       name: options.name
         ? { value: options.name }
         : { prompt: { type: "input", message: "Project name?" }, required: true },
-      template: options.template
-        ? { value: options.template }
-        : {
-            prompt: {
-              type: "select",
-              message: "Choose your AI setup",
-              choices: [
-                {
-                  value: "openui-cloud",
-                  name: "OpenUI Cloud — fastest setup with free hosted models (recommended)",
-                },
-                {
-                  value: "openui-self-hosted",
-                  name: "OpenAI-compatible provider — use your own key and self-host the AI route",
-                },
-              ],
+      template:
+        options.template || (options.backendFramework && options.backendFramework !== "none")
+          ? { value: options.template ?? "openui-self-hosted" }
+          : {
+              prompt: {
+                type: "select",
+                message: "Choose your AI setup",
+                choices: [
+                  {
+                    value: "openui-cloud",
+                    name: "OpenUI Cloud — fastest setup with free hosted models (recommended)",
+                  },
+                  {
+                    value: "openui-self-hosted",
+                    name: "Self-hosted — use OpenAI SDK, LangGraph, or Vercel AI SDK",
+                  },
+                ],
+              },
+              required: true,
             },
-            required: true,
-          },
     },
     interactive,
   );
 
-  const { name, template } = args as { name: string; template: TemplateName };
+  const { name, template } = baseArgs as { name: string; template: TemplateName };
+
+  let backendFramework: BackendFramework;
+  if (template === "openui-cloud") {
+    if (options.backendFramework && options.backendFramework !== "none") {
+      throw new CreateError(
+        "bad_args",
+        `--backend-framework ${options.backendFramework} is only supported with --template openui-self-hosted. OpenUI Cloud already provides the managed backend.`,
+      );
+    }
+    backendFramework = "none";
+  } else {
+    const frameworkArgs = await resolveArgs(
+      {
+        backendFramework:
+          options.backendFramework || !interactive
+            ? { value: options.backendFramework ?? "none" }
+            : {
+                prompt: {
+                  type: "select",
+                  message: "Choose your backend framework",
+                  choices: [
+                    {
+                      value: "none",
+                      name: "OpenAI SDK (no agent framework, default)",
+                    },
+                    { value: "langgraph", name: "LangGraph" },
+                    { value: "vercel", name: "Vercel AI SDK" },
+                  ],
+                },
+                required: true,
+              },
+      },
+      interactive,
+    );
+    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:
+      template === "openui-cloud"
+        ? "not_applicable"
+        : options.backendFramework
+          ? "flag"
+          : interactive
+            ? "prompt"
+            : "default",
+  });
 
   const targetDir = path.resolve(process.cwd(), name);
   if (fs.existsSync(targetDir)) {
@@ -149,7 +241,10 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
       recursive: true,
       filter: (src) => shouldCopyTemplatePath(templateDir, src),
     });
-    rewritePackageJson(targetDir, name);
+    if (template === "openui-self-hosted") {
+      applyBackendRoute(targetDir, backendFramework);
+    }
+    rewritePackageJson(targetDir, name, backendFramework);
   } catch (err) {
     captureScaffoldFailed();
     throw err;
@@ -235,6 +330,7 @@ export async function runCreateApp(options: CreateAppOptions): Promise<void> {
       name,
       devCmd,
       template,
+      backendFramework,
       skillInstalled: installSkill,
       envWritten: envResult.envWritten,
     }),
@@ -306,6 +402,7 @@ function getStartedMessage(o: {
   name: string;
   devCmd: string;
   template: TemplateName;
+  backendFramework: BackendFramework;
   skillInstalled: boolean;
   envWritten: boolean;
 }): string {
@@ -322,10 +419,18 @@ function getStartedMessage(o: {
         ? "✅ .env created with your API key."
         : "Add your API key to .env:\nOPENAI_API_KEY=sk-your-key-here";
 
+  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` : ""}
 
 > cd ${o.name}
 > ${o.devCmd} run dev
diff --git a/packages/openui-cli/src/index.ts b/packages/openui-cli/src/index.ts
index 813696898..168276d9a 100644
--- a/packages/openui-cli/src/index.ts
+++ b/packages/openui-cli/src/index.ts
@@ -10,7 +10,12 @@ import { 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();
 
@@ -46,6 +51,7 @@ program
   .description("Scaffold a new Next.js app with OpenUI Cloud or your provider")
   .option("-n, --name <string>", "Project name")
   .option("-t, --template <template>", "AI setup: openui-cloud | openui-self-hosted")
+  .option("--backend-framework <framework>", "Self-hosted backend: none | langgraph | vercel")
   .option("--api-key <key>", "OpenUI Cloud API key (cloud template; skips sign-in)")
   .option("--auth <method>", "Cloud auth method: oauth | manual | skip")
   .option("--skill", "Install the OpenUI agent skill for AI coding assistants")
@@ -56,6 +62,7 @@ program
     async (options: {
       name?: string;
       template?: string;
+      backendFramework?: string;
       apiKey?: string;
       auth?: string;
       skill?: boolean;
@@ -66,6 +73,7 @@ program
         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 4f57050b5..1091bb046 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 50e7b880f..2e17a2fb8 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";
 
 export function handleCliError(
@@ -37,6 +37,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-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..cb1e1cf4f
--- /dev/null
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/langgraph.ts
@@ -0,0 +1,76 @@
+import type { BaseMessageLike } from "@langchain/core/messages";
+import { END, MessagesAnnotation, START, StateGraph } from "@langchain/langgraph";
+import { ChatOpenAI } from "@langchain/openai";
+
+export const runtime = "nodejs";
+
+const modelName = process.env.OPENAI_MODEL ?? "gpt-5.2";
+const model = new ChatOpenAI({ model: modelName, streaming: true });
+
+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 ndjsonChunk(delta: Record<string, unknown>, finishReason: string | null = null) {
+  return `${JSON.stringify({
+    id: "langgraph-chat",
+    object: "chat.completion.chunk",
+    model: modelName,
+    choices: [{ index: 0, delta, finish_reason: finishReason }],
+  })}\n`;
+}
+
+export async function POST(req: Request) {
+  const payload = (await req.json()) as {
+    systemPrompt?: unknown;
+    messages?: unknown;
+  };
+
+  if (typeof payload.systemPrompt !== "string" || !Array.isArray(payload.messages)) {
+    return Response.json({ error: "Invalid chat request" }, { status: 400 });
+  }
+
+  const messages: BaseMessageLike[] = [
+    { role: "system", content: payload.systemPrompt },
+    ...(payload.messages as BaseMessageLike[]),
+  ];
+  const encoder = new TextEncoder();
+
+  const body = new ReadableStream<Uint8Array>({
+    async start(controller) {
+      try {
+        controller.enqueue(encoder.encode(ndjsonChunk({ role: "assistant" })));
+
+        const stream = await graph.stream(
+          { messages },
+          { streamMode: "messages", signal: req.signal },
+        );
+
+        for await (const [message] of stream) {
+          if (message.type === "ai" && message.text) {
+            controller.enqueue(encoder.encode(ndjsonChunk({ content: message.text })));
+          }
+        }
+
+        controller.enqueue(encoder.encode(ndjsonChunk({}, "stop")));
+        controller.close();
+      } catch (error) {
+        controller.error(error);
+      }
+    },
+  });
+
+  return new Response(body, {
+    headers: {
+      "Content-Type": "application/x-ndjson",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+    },
+  });
+}
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..a54913dfd
--- /dev/null
+++ b/packages/openui-cli/src/templates/openui-self-hosted/_backend-routes/vercel.ts
@@ -0,0 +1,204 @@
+import { openai } from "@ai-sdk/openai";
+import { streamText, type ModelMessage } from "ai";
+
+export const runtime = "nodejs";
+
+const modelName = process.env.OPENAI_MODEL ?? "gpt-5.2";
+
+function ndjsonChunk(delta: Record<string, unknown>, finishReason: string | null = null) {
+  return `${JSON.stringify({
+    id: "vercel-ai-chat",
+    object: "chat.completion.chunk",
+    model: modelName,
+    choices: [{ index: 0, delta, finish_reason: finishReason }],
+  })}\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 {
+    systemPrompt?: unknown;
+    messages?: unknown;
+  };
+
+  if (typeof payload.systemPrompt !== "string" || !Array.isArray(payload.messages)) {
+    return Response.json({ error: "Invalid chat request" }, { status: 400 });
+  }
+
+  const result = streamText({
+    model: openai(modelName),
+    system: payload.systemPrompt,
+    messages: toModelMessages(payload.messages),
+    abortSignal: req.signal,
+  });
+  const encoder = new TextEncoder();
+
+  const body = new ReadableStream<Uint8Array>({
+    async start(controller) {
+      try {
+        controller.enqueue(encoder.encode(ndjsonChunk({ role: "assistant" })));
+
+        for await (const text of result.textStream) {
+          controller.enqueue(encoder.encode(ndjsonChunk({ content: text })));
+        }
+
+        controller.enqueue(encoder.encode(ndjsonChunk({}, "stop")));
+        controller.close();
+      } catch (error) {
+        controller.error(error);
+      }
+    },
+  });
+
+  return new Response(body, {
+    headers: {
+      "Content-Type": "application/x-ndjson",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+    },
+  });
+}