Suggested OpenUI Cloud Fixes & Refactor

docs/content/docs/agent/getting-started/quickstart.mdx

@@ -9,12 +9,21 @@ The CLI scaffolds a complete Next.js app: a streaming chat with a sidebar, threa
 
 Run the create command and answer the prompts. One prompt asks **OpenUI Cloud or self-hosted?** Your choice decides which backend the scaffold wires up.
 
-<Tabs groupId="pkg" items={["npx", "pnpm", "yarn", "bun"]} persist>
-  <Tab value="npx">```npx @openuidev/cli@latest create ```</Tab>
-  <Tab value="pnpm">```pnpm dlx @openuidev/cli@latest create ```</Tab>
-  <Tab value="yarn">```yarn dlx @openuidev/cli@latest create ```</Tab>
-  <Tab value="bun">```bunx @openuidev/cli@latest create ```</Tab>
-</Tabs>
+```bash tab="pnpx" tab-group="pkg"
+pnpx @openuidev/cli@latest create
+```
+
+```bash tab="bun" tab-group="pkg"
+bunx @openuidev/cli@latest create
+```
+
+```bash tab="yarn" tab-group="pkg"
+yarn dlx @openuidev/cli@latest create
+```
+
+```bash tab="npm" tab-group="pkg"
+npx @openuidev/cli@latest create
+```
 
 When it finishes, move into the project:
 
@@ -53,12 +62,21 @@ The key stays on the server. The browser only ever talks to your route, never th
 
 Start the dev server:
 
-<Tabs groupId="pkg" items={["npx", "pnpm", "yarn", "bun"]} persist>
-  <Tab value="npx">```bash npm run dev ```</Tab>
-  <Tab value="pnpm">```bash pnpm dev ```</Tab>
-  <Tab value="yarn">```bash yarn dev ```</Tab>
-  <Tab value="bun">```bash bun dev ```</Tab>
-</Tabs>
+```bash tab="pnpm" tab-group="pkg"
+pnpm dev
+```
+
+```bash tab="bun" tab-group="pkg"
+bun dev
+```
+
+```bash tab="yarn" tab-group="pkg"
+yarn dev
+```
+
+```bash tab="npm" tab-group="pkg"
+npm run dev
+```
 
 Open [http://localhost:3000](http://localhost:3000) and send a message. The response streams in token by token, and the assistant can render rich, interactive components inline.
 

docs/content/docs/api-reference/cli.mdx

@@ -7,17 +7,42 @@ A command-line tool for scaffolding OpenUI chat apps and generating system promp
 
 ## Installation
 
-```bash
-# Run without installing
+Run without installing:
+
+```bash tab="pnpx" tab-group="pkg"
+pnpx @openuidev/cli@latest <command>
+```
+
+```bash tab="bun" tab-group="pkg"
+bunx @openuidev/cli@latest <command>
+```
+
+```bash tab="yarn" tab-group="pkg"
+yarn dlx @openuidev/cli@latest <command>
+```
+
+```bash tab="npm" tab-group="pkg"
 npx @openuidev/cli@latest <command>
+```
 
-# Or install globally
-npm install -g @openuidev/cli
+Or install globally:
+
+```bash tab="pnpm" tab-group="pkg"
 pnpm add -g @openuidev/cli
-yarn global add @openuidev/cli
+```
+
+```bash tab="bun" tab-group="pkg"
 bun add -g @openuidev/cli
 ```
 
+```bash tab="yarn" tab-group="pkg"
+yarn global add @openuidev/cli
+```
+
+```bash tab="npm" tab-group="pkg"
+npm install -g @openuidev/cli
+```
+
 ## `openui create`
 
 Scaffolds a new Next.js app pre-configured with OpenUI Chat.

docs/content/docs/api-reference/react-email.mdx

@@ -7,12 +7,20 @@ Use this package for LLM-driven email template generation with 44 email building
 
 ## Install
 
-```bash tab="npm"
-npm install @openuidev/react-email @openuidev/react-lang @react-email/render
+```bash tab="pnpm" tab-group="pkg"
+pnpm add @openuidev/react-email @openuidev/react-lang @react-email/render
 ```
 
-```bash tab="pnpm"
-pnpm add @openuidev/react-email @openuidev/react-lang @react-email/render
+```bash tab="bun" tab-group="pkg"
+bun add @openuidev/react-email @openuidev/react-lang @react-email/render
+```
+
+```bash tab="yarn" tab-group="pkg"
+yarn add @openuidev/react-email @openuidev/react-lang @react-email/render
+```
+
+```bash tab="npm" tab-group="pkg"
+npm install @openuidev/react-email @openuidev/react-lang @react-email/render
 ```
 
 ## `emailLibrary`

docs/content/docs/api-reference/react-ui.mdx

@@ -113,7 +113,19 @@ import {
 
 Generate the system prompt at build time with the CLI:
 
-```bash
+```bash tab="pnpx" tab-group="pkg"
+pnpx @openuidev/cli@latest generate ./src/library.ts --out src/generated/system-prompt.txt
+```
+
+```bash tab="bun" tab-group="pkg"
+bunx @openuidev/cli@latest generate ./src/library.ts --out src/generated/system-prompt.txt
+```
+
+```bash tab="yarn" tab-group="pkg"
+yarn dlx @openuidev/cli@latest generate ./src/library.ts --out src/generated/system-prompt.txt
+```
+
+```bash tab="npm" tab-group="pkg"
 npx @openuidev/cli@latest generate ./src/library.ts --out src/generated/system-prompt.txt
 ```
 

docs/content/docs/openui-lang/examples/dashboard.mdx

@@ -82,12 +82,36 @@ await client.connect(new StreamableHTTPClientTransport(new URL("/api/mcp")));
 
 ## Try it
 
-```bash
+```bash tab="pnpm" tab-group="pkg"
 git clone https://github.com/thesysdev/openui.git
 cd openui/examples/openui-dashboard
 pnpm install
 echo "OPENAI_API_KEY=sk-your-key" > .env.local
 pnpm dev
 ```
 
+```bash tab="bun" tab-group="pkg"
+git clone https://github.com/thesysdev/openui.git
+cd openui/examples/openui-dashboard
+bun install
+echo "OPENAI_API_KEY=sk-your-key" > .env.local
+bun dev
+```
+
+```bash tab="yarn" tab-group="pkg"
+git clone https://github.com/thesysdev/openui.git
+cd openui/examples/openui-dashboard
+yarn install
+echo "OPENAI_API_KEY=sk-your-key" > .env.local
+yarn dev
+```
+
+```bash tab="npm" tab-group="pkg"
+git clone https://github.com/thesysdev/openui.git
+cd openui/examples/openui-dashboard
+npm install
+echo "OPENAI_API_KEY=sk-your-key" > .env.local
+npm run dev
+```
+
 Ask it to build a PostHog analytics dashboard, a ticket tracker, or a server monitoring view.

docs/content/docs/openui-lang/examples/harnesses/pi-agent-harness.mdx

@@ -155,9 +155,23 @@ examples/harnesses/pi-agent-harness/
 
 From the repo root, install workspace deps once, then run the example pointed at a project:
 
-```bash
+```bash tab="pnpm" tab-group="pkg"
 pnpm install
+```
 
+```bash tab="bun" tab-group="pkg"
+bun install
+```
+
+```bash tab="yarn" tab-group="pkg"
+yarn install
+```
+
+```bash tab="npm" tab-group="pkg"
+npm install
+```
+
+```bash
 cd examples/harnesses/pi-agent-harness
 cp .env.example .env          # set a provider API key (skip if you have a pi login)
 pnpm dev -- /path/to/your/project

docs/content/docs/openui-lang/examples/harnesses/vercel-eve.mdx

@@ -152,7 +152,7 @@ examples/harnesses/vercel-eve/
 
 Eve 0.11 requires Node.js 24. From the repository root, follow these steps:
 
-```bash
+```bash tab="pnpm" tab-group="pkg"
 # 1. Install workspace dependencies.
 pnpm install
 
@@ -167,12 +167,72 @@ cp .env.example .env
 pnpm dev
 ```
 
+```bash tab="bun" tab-group="pkg"
+# 1. Install workspace dependencies.
+bun install
+
+# 2. Enter the example.
+cd examples/harnesses/vercel-eve
+
+# 3. Configure an OpenAI-compatible model provider.
+cp .env.example .env
+# Edit .env and set LLM_API_KEY.
+
+# 4. Start Next.js and the embedded Eve development server.
+bun dev
+```
+
+```bash tab="yarn" tab-group="pkg"
+# 1. Install workspace dependencies.
+yarn install
+
+# 2. Enter the example.
+cd examples/harnesses/vercel-eve
+
+# 3. Configure an OpenAI-compatible model provider.
+cp .env.example .env
+# Edit .env and set LLM_API_KEY.
+
+# 4. Start Next.js and the embedded Eve development server.
+yarn dev
+```
+
+```bash tab="npm" tab-group="pkg"
+# 1. Install workspace dependencies.
+npm install
+
+# 2. Enter the example.
+cd examples/harnesses/vercel-eve
+
+# 3. Configure an OpenAI-compatible model provider.
+cp .env.example .env
+# Edit .env and set LLM_API_KEY.
+
+# 4. Start Next.js and the embedded Eve development server.
+npm run dev
+```
+
 Open [http://localhost:3000](http://localhost:3000) and start a conversation. `OPENAI_API_KEY`,
 `OPENAI_MODEL`, and `OPENAI_BASE_URL` are accepted as aliases for the `LLM_*` variables.
 
 The repository scripts also expose Eve directly when you need to build or run the agent separately:
 
-```bash
+```bash tab="pnpm" tab-group="pkg"
 pnpm eve:build
 pnpm eve:start
 ```
+
+```bash tab="bun" tab-group="pkg"
+bun eve:build
+bun eve:start
+```
+
+```bash tab="yarn" tab-group="pkg"
+yarn eve:build
+yarn eve:start
+```
+
+```bash tab="npm" tab-group="pkg"
+npm run eve:build
+npm run eve:start
+```

docs/content/docs/openui-lang/examples/langgraph-chat.mdx

@@ -158,26 +158,68 @@ This example runs **two processes**, so use two terminals. Run these commands fr
 
 1. Install dependencies and create a `.env` from the template:
 
-```bash
+```bash tab="pnpm" tab-group="pkg"
 cd examples/langgraph-chat
 pnpm install
 cp .env.example .env
 ```
 
+```bash tab="bun" tab-group="pkg"
+cd examples/langgraph-chat
+bun install
+cp .env.example .env
+```
+
+```bash tab="yarn" tab-group="pkg"
+cd examples/langgraph-chat
+yarn install
+cp .env.example .env
+```
+
+```bash tab="npm" tab-group="pkg"
+cd examples/langgraph-chat
+npm install
+cp .env.example .env
+```
+
 Add your `OPENAI_API_KEY` to `.env`. It is read by the **LangGraph server** (which runs the LLM), so it belongs next to `langgraph.json`. The Next.js app only needs the `LANGGRAPH_*` variables, which already default to the local server.
 
 2. **Terminal 1: LangGraph server** (generates the OpenUI prompt, then hot-reloads the graph on `:2024`):
 
-```bash
+```bash tab="pnpm" tab-group="pkg"
 pnpm langgraph:dev
 ```
 
+```bash tab="yarn" tab-group="pkg"
+yarn langgraph:dev
+```
+
+```bash tab="bun" tab-group="pkg"
+bun langgraph:dev
+```
+
+```bash tab="npm" tab-group="pkg"
+npm langgraph:dev
+```
+
 3. **Terminal 2: Next.js app**:
 
-```bash
+```bash tab="pnpm" tab-group="pkg"
 pnpm dev
 ```
 
+```bash tab="bun" tab-group="pkg"
+bun dev
+```
+
+```bash tab="yarn" tab-group="pkg"
+yarn dev
+```
+
+```bash tab="npm" tab-group="pkg"
+npm run dev
+```
+
 Open [http://localhost:3000](http://localhost:3000) and try a starter such as "Weather in Tokyo" or "AAPL stock price".
 
 ## Deploy to LangGraph Platform