OpenUI

https://github.com/thesysdev/openui
Admin
OpenUI is a full-stack generative UI framework with a compact streaming-first language, React...
Tokens:728,410
Snippets:4,464
Trust Score:8.2
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install and run the example

Source: https://github.com/thesysdev/openui/blob/main/examples/miscellaneous/supabase/README.md

Navigate to the standalone example directory, install dependencies with pnpm (ignoring the workspace), and start the development server.

```bash
cd examples/miscellaneous/supabase
pnpm install --ignore-workspace
pnpm dev
```

--------------------------------

### Setup and run commands

Source: https://github.com/thesysdev/openui/blob/main/examples/agent-frameworks/mastra/README.md

Commands to set up and run the example: generate an OpenUI Cloud API key into .env.local, install dependencies from the example directory, and start the dev server. After running pnpm dev, open http://localhost:3000 to see the chat interface.

```bash
pnpm generate:apiKey
```

```bash
pnpm install --ignore-workspace
```

```bash
pnpm dev
```

--------------------------------

### Setup commands for the Handsontable example

Source: https://github.com/thesysdev/openui/blob/main/examples/miscellaneous/handsontable/README.md

Commands to set up and run the example project. Requires Node.js 18+ and an OpenUI Cloud API key. Copy the environment template, set THESYS_API_KEY, install dependencies with pnpm, and start the dev server.

```bash
cd examples/miscellaneous/handsontable

# Copy the environment template and add your API key
cp env.example .env
# Edit .env and set THESYS_API_KEY=sk-th-...

# Install dependencies
pnpm install --ignore-workspace

# Start the dev server
pnpm dev
```

--------------------------------

### Install dependencies with npm ci

Source: https://github.com/thesysdev/openui/blob/main/examples/cookbooks/booking-assistant/README.md

Run this in the standalone example directory to install dependencies. Requires Node.js 22.13+ and npm.

```bash
npm ci
```

--------------------------------

### Setup commands for autofix example

Source: https://github.com/thesysdev/openui/blob/main/examples/miscellaneous/autofix/README.md

Install dependencies and copy environment template. Requires pnpm and an existing .env.example file.

```bash
cd examples/miscellaneous/autofix
pnpm install --ignore-workspace
cp .env.example .env.local
```

--------------------------------

### Install every example from repository root with pnpm examples:install

Source: https://github.com/thesysdev/openui/blob/main/examples/README.md

Repository maintainers can install all applications under examples/ from the repository root using this script.

```bash
pnpm examples:install
```

--------------------------------

### Install dependencies and run the example with npm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/vercel-eve.mdx

Use npm to install workspace dependencies, enter the example directory, configure the OpenUI Gateway by copying .env.example to .env and setting THESYS_API_KEY, then start Next.js and the embedded Eve development server. Requires Node.js 24 and THESYS_API_KEY; optional OPENUI_MODEL override, default model is google/gemini-3.6-flash-free.

```bash
# 1. Install workspace dependencies.
npm install

# 2. Enter the example.
cd examples/agent-frameworks/vercel-eve

# 3. Configure OpenUI Gateway.
cp .env.example .env
# Edit .env and set THESYS_API_KEY.

# 4. Start Next.js and the embedded Eve development server.
npm run dev
```

--------------------------------

### Verify the example

Source: https://github.com/thesysdev/openui/blob/main/examples/agent-frameworks/google-adk/README.md

Run the verification command to check the example setup.

```bash
pnpm verify
```

--------------------------------

### Install dependencies for the example

Source: https://github.com/thesysdev/openui/blob/main/examples/agent-frameworks/google-adk/README.md

Install dependencies from the example directory using pnpm with --ignore-workspace flag.

```bash
pnpm install --ignore-workspace
```

--------------------------------

### Install dependencies for the Grok Build example

Source: https://github.com/thesysdev/openui/blob/main/examples/harnesses/grok-build/README.md

Enter the example directory and install dependencies with pnpm, ignoring the workspace.

```bash
cd examples/harnesses/grok-build
pnpm install --ignore-workspace
```

--------------------------------

### Install dependencies and run the example with bun

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/vercel-eve.mdx

Use bun to install workspace dependencies, enter the example directory, configure the OpenUI Gateway by copying .env.example to .env and setting THESYS_API_KEY, then start Next.js and the embedded Eve development server. Requires Node.js 24 and THESYS_API_KEY; optional OPENUI_MODEL override, default model is google/gemini-3.6-flash-free.

```bash
# 1. Install workspace dependencies.
bun install

# 2. Enter the example.
cd examples/agent-frameworks/vercel-eve

# 3. Configure OpenUI Gateway.
cp .env.example .env
# Edit .env and set THESYS_API_KEY.

# 4. Start Next.js and the embedded Eve development server.
bun dev
```

--------------------------------

### Install and run documentation site

Source: https://github.com/thesysdev/openui/blob/main/docs/README.md

Commands to install dependencies from the workspace root and start or build the documentation development server using pnpm filters.

```bash
# Install from workspace root
pnpm install

# Start the documentation development server
pnpm --filter @openuidev/docs dev

# Build the documentation site for production
pnpm --filter @openuidev/docs build
```

--------------------------------

### Install dependencies and run the example with yarn

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/vercel-eve.mdx

Use yarn to install workspace dependencies, enter the example directory, configure the OpenUI Gateway by copying .env.example to .env and setting THESYS_API_KEY, then start Next.js and the embedded Eve development server. Requires Node.js 24 and THESYS_API_KEY; optional OPENUI_MODEL override, default model is google/gemini-3.6-flash-free.

```bash
# 1. Install workspace dependencies.
yarn install

# 2. Enter the example.
cd examples/agent-frameworks/vercel-eve

# 3. Configure OpenUI Gateway.
cp .env.example .env
# Edit .env and set THESYS_API_KEY.

# 4. Start Next.js and the embedded Eve development server.
yarn dev
```

--------------------------------

### Install dependencies and run the example with pnpm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/vercel-eve.mdx

Use pnpm to install workspace dependencies, enter the example directory, configure the OpenUI Gateway by copying .env.example to .env and setting THESYS_API_KEY, then start Next.js and the embedded Eve development server. Requires Node.js 24 and THESYS_API_KEY; optional OPENUI_MODEL override, default model is google/gemini-3.6-flash-free.

```bash
# 1. Install workspace dependencies.
pnpm install

# 2. Enter the example.
cd examples/agent-frameworks/vercel-eve

# 3. Configure OpenUI Gateway.
cp .env.example .env
# Edit .env and set THESYS_API_KEY.

# 4. Start Next.js and the embedded Eve development server.
pnpm dev
```

--------------------------------

### Clone and install dependencies

Source: https://github.com/thesysdev/openui/blob/main/examples/miscellaneous/react-email/README.md

Clone the repository, enter the standalone example directory, and install dependencies with pnpm.

```bash
git clone https://github.com/thesysdev/openui.git
cd openui/examples/miscellaneous/react-email
pnpm install --ignore-workspace
```

--------------------------------

### Clone and install the example

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/cookbooks/document-comparison.mdx

Clones the openui repository, changes into the document-comparison example directory, and installs dependencies with npm. Requires Node.js 22.13 or newer and npm.

```bash
git clone https://github.com/thesysdev/openui.git
cd openui/examples/cookbooks/document-comparison
npm ci
```

--------------------------------

### Build and start production server

Source: https://github.com/thesysdev/openui/blob/main/examples/harnesses/pi/README.md

Build the example and start the production server. The build does not require a workspace; the agent runs at request time.

```bash
pnpm build && pnpm start
```

--------------------------------

### Run the Pi example

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/pi.mdx

Change to the example directory, copy the environment file, set THESYS_API_KEY, and start the dev server with a target project path. Then open http://localhost:3000 and try prompts like 'Summarize the files in this project as a card'.

```bash
cd examples/harnesses/pi
cp .env.example .env          # set THESYS_API_KEY
pnpm dev -- /path/to/your/project
```

--------------------------------

### Run the Vercel AI SDK example app

Source: https://github.com/thesysdev/openui/blob/main/docs/content/integrations/vercel-ai-sdk.mdx

Commands to install dependencies, generate an API key, and start the dev server for the example. Requires pnpm and writes THESYS_API_KEY to .env.local.

```bash
cd examples/agent-frameworks/vercel-ai-sdk
pnpm install --ignore-workspace
pnpm generate:apiKey   # writes THESYS_API_KEY to .env.local
pnpm dev
```

--------------------------------

### Clone and install the booking-assistant example

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/cookbooks/booking-assistant.mdx

Prerequisites: Node.js 22.13 or newer and npm. Clones the openui repository, changes into the booking-assistant example directory, and installs dependencies with npm ci.

```bash
git clone https://github.com/thesysdev/openui.git
cd openui/examples/cookbooks/booking-assistant
npm ci
```

--------------------------------

### Start the frontend

Source: https://github.com/thesysdev/openui/blob/main/examples/app-frameworks/fastapi/README.md

Commands to install dependencies, generate the spec, and start the Vite dev server.

```bash
cd frontend
pnpm install --ignore-workspace
pnpm generate
pnpm dev
```

--------------------------------

### Install dependencies for vercel-eve example

Source: https://github.com/thesysdev/openui/blob/main/examples/agent-frameworks/vercel-eve/README.md

Enter the standalone example directory and install dependencies with pnpm, ignoring the workspace.

```bash
cd examples/agent-frameworks/vercel-eve
pnpm install --ignore-workspace
```

--------------------------------

### Run the Google ADK example

Source: https://github.com/thesysdev/openui/blob/main/docs/content/integrations/ag-ui.mdx

Commands to install dependencies and start the Google ADK example that produces the AG-UI stream shown in the screenshot. `pnpm generate:apiKey` writes THESYS_API_KEY to .env.local.

```bash
cd examples/agent-frameworks/google-adk
pnpm install --ignore-workspace
pnpm generate:apiKey   # writes THESYS_API_KEY to .env.local
pnpm dev
```

--------------------------------

### Start the backend with pip

Source: https://github.com/thesysdev/openui/blob/main/examples/app-frameworks/fastapi/README.md

Alternative commands to install dependencies and run the backend using pip.

```bash
pip install fastapi openai python-dotenv uvicorn
uvicorn app.main:app --reload
```

--------------------------------

### Quick setup with npx ctx7 setup

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/mcp/index.mdx

Authenticates via OAuth, generates an API key, and installs the appropriate skill. Use --cursor, --claude, or --opencode to target a specific agent.

```bash
npx ctx7 setup
```

--------------------------------

### Start the Grok Build example

Source: https://github.com/thesysdev/openui/blob/main/examples/harnesses/grok-build/README.md

Copy the environment file and start the dev server with a project path. Running without a path prompts for the workspace interactively. Set GROK_BUILD_CWD to skip the prompt.

```bash
cp .env.example .env.local
pnpm dev -- /absolute/path/to/your/project
```

--------------------------------

### Run the development server with npm (npm run dev)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/agent/getting-started/quickstart.mdx

Start the Next.js development server after scaffolding. Open http://localhost:3000 to request an interface such as a comparison table or interactive form.

```bash
npm run dev
```

--------------------------------

### Run the langgraph-platform example

Source: https://github.com/thesysdev/openui/blob/main/docs/content/integrations/langchain-langgraph.mdx

Install dependencies, configure the environment, and start the LangGraph server and Next.js app. Requires a THESYS_API_KEY in the .env file.

```bash
cd examples/agent-frameworks/langgraph-platform
pnpm install --ignore-workspace
cp .env.example .env   # add your THESYS_API_KEY
pnpm dev               # LangGraph server on :2024, app on :3000
```

--------------------------------

### Install dependencies for backend and chat-app

Source: https://github.com/thesysdev/openui/blob/main/examples/app-frameworks/react-native/README.md

Run from the react-native/ example directory to install each standalone application without a workspace.

```bash
(cd backend && pnpm install --ignore-workspace)
(cd chat-app && pnpm install --ignore-workspace)
```

--------------------------------

### Clone and prepare the example project

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/cookbooks/conversational-analytics.mdx

Clones the OpenUI repository, installs dependencies, and runs the data preparation script. Requires Node.js 22.13 or newer and npm.

```bash
git clone https://github.com/thesysdev/openui.git
cd openui/examples/cookbooks/conversational-analytics
npm ci
npm run prepare:data
```

--------------------------------

### Install dependencies (pnpm, bun, yarn, npm)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/vercel-ai-sdk.mdx

Install dependencies for the example project. Run from the example directory. Four package manager variants are shown as tabs.

```bash
cd examples/agent-frameworks/vercel-ai-sdk
pnpm install
```

```bash
cd examples/agent-frameworks/vercel-ai-sdk
bun install
```

```bash
cd examples/agent-frameworks/vercel-ai-sdk
yarn install
```

```bash
cd examples/agent-frameworks/vercel-ai-sdk
npm install
```

--------------------------------

### Verify all examples sequentially with pnpm examples:verify

Source: https://github.com/thesysdev/openui/blob/main/examples/README.md

Runs verification for every example sequentially against the pinned published OpenUI packages.

```bash
pnpm examples:verify
```

--------------------------------

### Run the development server with pnpm (pnpm dev)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/agent/getting-started/quickstart.mdx

Start the Next.js development server after scaffolding. Open http://localhost:3000 to request an interface such as a comparison table or interactive form.

```bash
pnpm dev
```

--------------------------------

### Install dependencies and prepare data

Source: https://github.com/thesysdev/openui/blob/main/examples/cookbooks/conversational-analytics/README.md

Run these commands to install dependencies and prepare the SQLite data snapshot. Requires Node.js 22.13+ and npm.

```bash
npm ci
npm run prepare:data
```

--------------------------------

### Install Dependencies

Source: https://github.com/thesysdev/openui/blob/main/examples/design-systems/shadcn/README.md

Run these commands to install dependencies for the shadcn example. Requires Node.js 18+ and a package manager like pnpm, npm, or Bun.

```bash
cd examples/design-systems/shadcn
pnpm install --ignore-workspace
```

--------------------------------

### Start the backend server

Source: https://github.com/thesysdev/openui/blob/main/examples/app-frameworks/react-native/README.md

Starts the Next.js API server; the API will be available at http://localhost:3000.

```bash
(cd backend && pnpm dev)
```

--------------------------------

### Start the mobile app

Source: https://github.com/thesysdev/openui/blob/main/examples/app-frameworks/react-native/README.md

Starts the Expo dev server for the chat-app.

```bash
(cd chat-app && pnpm start)
```

--------------------------------

### Verify the example

Source: https://github.com/thesysdev/openui/blob/main/examples/agent-frameworks/vercel-eve/README.md

Run the verification command for the example.

```bash
pnpm verify
```

--------------------------------

### Create .env from template

Source: https://github.com/thesysdev/openui/blob/main/examples/agent-frameworks/langgraph-platform/README.md

Copy the .env.example file to .env to start configuration.

```bash
cp .env.example .env
```

--------------------------------

### Install dependencies with npm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/openui-lang/examples/miscellaneous/react-email.mdx

Use npm to install dependencies for the React Email example. Run from the examples/miscellaneous/react-email directory.

```bash
cd examples/miscellaneous/react-email
npm install
```

--------------------------------

### Install dependencies with bun

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/openui-lang/examples/miscellaneous/react-email.mdx

Use bun to install dependencies for the React Email example. Run from the examples/miscellaneous/react-email directory.

```bash
cd examples/miscellaneous/react-email
bun install
```

--------------------------------

### Generate Thesys API key with npm run generate:apiKey

Source: https://github.com/thesysdev/openui/blob/main/examples/cookbooks/booking-assistant/README.md

Mints a THESYS_API_KEY into .env.local. Alternatively, create a key in the Thesys Console and add it manually.

```bash
npm run generate:apiKey
```

--------------------------------

### Run npm run verify

Source: https://github.com/thesysdev/openui/blob/main/examples/cookbooks/booking-assistant/README.md

Runs the verify script which generates the component specification and performs a production build with type checking. No credentials or network calls to trivago are required.

```bash
npm run verify
```

--------------------------------

### Install @openuidev/observability-cloud with bun

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/reliability/installation.mdx

Install the Observability SDK using bun. Required when not using Gateway or Autofix, or to capture additional parsing/rendering signals.

```bash
bun add @openuidev/observability-cloud
```

--------------------------------

### Install workspace dependencies with bun

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/pi.mdx

Install dependencies from the repo root using bun. Required before running the example.

```bash
bun install
```

--------------------------------

### Install dependencies with yarn

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/openui-lang/examples/miscellaneous/react-email.mdx

Use yarn to install dependencies for the React Email example. Run from the examples/miscellaneous/react-email directory.

```bash
cd examples/miscellaneous/react-email
yarn install
```

--------------------------------

### Install dependencies with pnpm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/openui-lang/examples/miscellaneous/react-email.mdx

Use pnpm to install dependencies for the React Email example. Run from the examples/miscellaneous/react-email directory.

```bash
cd examples/miscellaneous/react-email
pnpm install
```

--------------------------------

### Install workspace dependencies with pnpm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/pi.mdx

Install dependencies from the repo root using pnpm. Required before running the example.

```bash
pnpm install
```

--------------------------------

### Install workspace dependencies with npm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/pi.mdx

Install dependencies from the repo root using npm. Required before running the example.

```bash
npm install
```

--------------------------------

### Install @openuidev/observability-cloud with npm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/reliability/installation.mdx

Install the Observability SDK using npm. Required when not using Gateway or Autofix, or to capture additional parsing/rendering signals.

```bash
npm install @openuidev/observability-cloud
```

--------------------------------

### Install @openuidev/observability-cloud with npm

Source: https://github.com/thesysdev/openui/blob/main/packages/observability-cloud/README.md

Install the SDK package using npm.

```bash
npm i @openuidev/observability-cloud
```

--------------------------------

### Install @openuidev/observability-cloud with pnpm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/reliability/installation.mdx

Install the Observability SDK using pnpm. Required when not using Gateway or Autofix, or to capture additional parsing/rendering signals.

```bash
pnpm add @openuidev/observability-cloud
```

--------------------------------

### create examples with bun (bunx)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/cli.mdx

Shows common `create` invocations using bun: prompting for missing values, selecting a backend framework or example, and non-interactive runs that end with `generate-api-key`. `--example` cannot be combined with `--backend-framework`.

```bash
# Prompt for anything not passed
bunx @openuidev/cli@latest create

# Pick a backend framework, or start from an example
bunx @openuidev/cli@latest create --name my-app --backend-framework vercel-ai-sdk
bunx @openuidev/cli@latest create --name my-app --example shadcn

# Never prompt, then add the key
bunx @openuidev/cli@latest create --no-interactive --name my-app
cd my-app && bunx @openuidev/cli@latest generate-api-key
```

--------------------------------

### Install workspace dependencies with yarn

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/pi.mdx

Install dependencies from the repo root using yarn. Required before running the example.

```bash
yarn install
```

--------------------------------

### Install @openuidev/observability-cloud with yarn

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/reliability/installation.mdx

Install the Observability SDK using yarn. Required when not using Gateway or Autofix, or to capture additional parsing/rendering signals.

```bash
yarn add @openuidev/observability-cloud
```

--------------------------------

### Install dependencies and copy environment template (bun)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/langgraph.mdx

Run these commands from examples/agent-frameworks/langgraph-platform to install dependencies and copy the environment template. Use bun for this package manager variant.

```bash
bun install
cp .env.example .env
```

--------------------------------

### Install @openuidev/server with bun

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/server.mdx

Install the package using bun.

```bash
bun add @openuidev/server
```

--------------------------------

### openui create usage examples

Source: https://github.com/thesysdev/openui/blob/main/packages/openui-cli/README.md

Shows various ways to use the create command: default, current directory, custom name and backend framework, example scaffolding, and non-interactive mode.

```bash
openui create
openui create .
openui create --name my-app --backend-framework vercel-ai-sdk
openui create --name my-app --example shadcn
openui create --no-interactive --name my-app
```

--------------------------------

### Configure backend environment file

Source: https://github.com/thesysdev/openui/blob/main/examples/app-frameworks/react-native/README.md

Copy the example environment file to .env.local for the backend.

```bash
cp backend/env.example backend/.env.local
```

--------------------------------

### Start the backend with uv

Source: https://github.com/thesysdev/openui/blob/main/examples/app-frameworks/fastapi/README.md

Command to run the FastAPI backend using uv.

```bash
cd backend
uv run uvicorn app.main:app --reload
```

--------------------------------

### Install dependencies and copy environment template (npm)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/langgraph.mdx

Run these commands from examples/agent-frameworks/langgraph-platform to install dependencies and copy the environment template. Use npm for this package manager variant.

```bash
npm install
cp .env.example .env
```

--------------------------------

### Create the app with npx @openuidev/cli

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/openui-lang/quickstart.mdx

Run this command to scaffold a new OpenUI Gateway project named recipe-remix. Requires Node.js 20 or later. The CLI signs you in, creates the project, installs dependencies, starts the agent, and opens it in your browser.

```bash
npx @openuidev/cli@latest create --name recipe-remix
```

--------------------------------

### Install dependencies with pnpm, npm, or bun

Source: https://github.com/thesysdev/openui/blob/main/examples/app-frameworks/angular/README.md

Run from the examples/app-frameworks/angular directory. Use --ignore-workspace with pnpm to avoid workspace linking; npm ci and bun install are alternatives.

```bash
cd examples/app-frameworks/angular
pnpm install --ignore-workspace
# or: npm ci
# or: bun install
```

--------------------------------

### Install dependencies and copy environment template (yarn)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/langgraph.mdx

Run these commands from examples/agent-frameworks/langgraph-platform to install dependencies and copy the environment template. Use yarn for this package manager variant.

```bash
yarn install
cp .env.example .env
```

--------------------------------

### Copy environment file

Source: https://github.com/thesysdev/openui/blob/main/examples/miscellaneous/react-email/README.md

Copy the example environment file to .env.local for configuration.

```bash
cp .env.example .env.local
```

--------------------------------

### Install and sign in to Grok Build

Source: https://github.com/thesysdev/openui/blob/main/docs/content/integrations/grok-build.mdx

Sets up the grok CLI and runs the harness. Requires grok login or XAI_API_KEY in non-interactive environments. Installs dependencies and starts the dev server with a project path.

```bash
grok login
grok --version
# For a non-interactive environment, set XAI_API_KEY instead.

cd examples/harnesses/grok-build
pnpm install --ignore-workspace
cp .env.example .env.local
pnpm dev -- /absolute/path/to/your/project
```

--------------------------------

### Generate OpenUI Cloud API key

Source: https://github.com/thesysdev/openui/blob/main/examples/agent-frameworks/google-adk/README.md

Run this command to mint an OpenUI Cloud key into .env.local. This is the first step in getting started.

```bash
pnpm generate:apiKey
```

--------------------------------

### generateSystemPrompt with cloud and promptOptions

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/openui-lang/system-prompts.mdx

Gateway accepts preamble, examples, and additionalRules. This example passes a preamble to customize the system prompt for a specific use case.

```ts
const instructions = generateSystemPrompt({
  cloud: true,
  library: librarySpec,
  promptOptions: { preamble: "You build dashboards for Acme." },
});
```

--------------------------------

### create examples with pnpm (pnpx)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/cli.mdx

Shows common `create` invocations using pnpm: prompting for missing values, selecting a backend framework or example, and non-interactive runs that end with `generate-api-key`. `--example` cannot be combined with `--backend-framework`.

```bash
# Prompt for anything not passed
pnpx @openuidev/cli@latest create

# Pick a backend framework, or start from an example
pnpx @openuidev/cli@latest create --name my-app --backend-framework vercel-ai-sdk
pnpx @openuidev/cli@latest create --name my-app --example shadcn

# Never prompt, then add the key
pnpx @openuidev/cli@latest create --no-interactive --name my-app
cd my-app && pnpx @openuidev/cli@latest generate-api-key
```

--------------------------------

### Start dev server (pnpm, bun, yarn, npm)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/vercel-ai-sdk.mdx

Start the development server. Four package manager variants are shown as tabs.

```bash
pnpm dev
```

```bash
bun dev
```

```bash
yarn dev
```

```bash
npm run dev
```

--------------------------------

### Install dependencies and copy environment template (pnpm)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/langgraph.mdx

Run these commands from examples/agent-frameworks/langgraph-platform to install dependencies and copy the environment template. Use pnpm for this package manager variant.

```bash
pnpm install
cp .env.example .env
```

--------------------------------

### Install @openuidev/assistant-ui with bun

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/assistant-ui.mdx

Installs the package and its peer dependencies using bun. Requires zustand version ^4.5.5.

```bash
bun add @openuidev/assistant-ui @assistant-ui/react @openuidev/react-ui @openuidev/react-lang @openuidev/react-headless react react-dom zod zustand@^4.5.5
```

--------------------------------

### create examples with yarn (yarn dlx)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/cli.mdx

Shows common `create` invocations using yarn: prompting for missing values, selecting a backend framework or example, and non-interactive runs that end with `generate-api-key`. `--example` cannot be combined with `--backend-framework`.

```bash
# Prompt for anything not passed
yarn dlx @openuidev/cli@latest create

# Pick a backend framework, or start from an example
yarn dlx @openuidev/cli@latest create --name my-app --backend-framework vercel-ai-sdk
yarn dlx @openuidev/cli@latest create --name my-app --example shadcn

# Never prompt, then add the key
yarn dlx @openuidev/cli@latest create --no-interactive --name my-app
cd my-app && yarn dlx @openuidev/cli@latest generate-api-key
```

--------------------------------

### Install @openuidev/server with yarn

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/server.mdx

Install the package using yarn.

```bash
yarn add @openuidev/server
```

--------------------------------

### openui deploy usage examples

Source: https://github.com/thesysdev/openui/blob/main/packages/openui-cli/README.md

Shows deployment examples: default, with --prod flag passed through to Vercel, and with --skip-env and a --force flag passed through.

```bash
openui deploy
openui deploy ./my-app --prod
openui deploy --skip-env -- --force
```

--------------------------------

### Install @openuidev/assistant-ui with npm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/assistant-ui.mdx

Installs the package and its peer dependencies using npm. Requires zustand version ^4.5.5.

```bash
npm install @openuidev/assistant-ui @assistant-ui/react @openuidev/react-ui @openuidev/react-lang @openuidev/react-headless react react-dom zod zustand@^4.5.5
```

--------------------------------

### Install @openuidev/server with npm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/server.mdx

Install the package using npm.

```bash
npm install @openuidev/server
```

--------------------------------

### Install @openuidev/assistant-ui with yarn

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/assistant-ui.mdx

Installs the package and its peer dependencies using yarn. Requires zustand version ^4.5.5.

```bash
yarn add @openuidev/assistant-ui @assistant-ui/react @openuidev/react-ui @openuidev/react-lang @openuidev/react-headless react react-dom zod zustand@^4.5.5
```

--------------------------------

### useNav example: GoToSettings component

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/agent/reference/hooks.mdx

Example component using useNav to read the current path and navigate to the 'settings' route. Demonstrates the navigate function and button rendering.

```tsx
function GoToSettings() {
  const { path, navigate } = useNav();
  return <button onClick={() => navigate("settings")}>Settings</button>;
}
```

--------------------------------

### Install OpenUI Agent Skill via skills CLI

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/mcp/index.mdx

Installs the OpenUI Agent Skill from the thesysdev/skills repository. Recommended installation method for AI coding assistants that support the agentskills.io standard.

```bash
npx skills add thesysdev/skills --skill openui
```

--------------------------------

### Install @openuidev/assistant-ui with pnpm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/assistant-ui.mdx

Installs the package and its peer dependencies using pnpm. Requires zustand version ^4.5.5.

```bash
pnpm add @openuidev/assistant-ui @assistant-ui/react @openuidev/react-ui @openuidev/react-lang @openuidev/react-headless react react-dom zod zustand@^4.5.5
```

--------------------------------

### Quick example: openuiLibrary.prompt

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/openui-lang/prompts.mdx

Imports openuiLibrary and openuiPromptOptions from @openuidev/react-ui, then creates a system prompt using openuiLibrary.prompt(openuiPromptOptions). This is a legacy example; refer to the System Prompts page for current documentation.

```ts
import { openuiLibrary, openuiPromptOptions } from "@openuidev/react-ui";

const systemPrompt = openuiLibrary.prompt(openuiPromptOptions);
```

--------------------------------

### Install CLI globally (bun)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/cli.mdx

Install the CLI globally using bun.

```bash
bun add -g @openuidev/cli
```

--------------------------------

### Install @openuidev/langchain

Source: https://github.com/thesysdev/openui/blob/main/packages/langchain/README.md

Install the core package. The server helpers communicate with LangGraph over HTTP and do not load the LangGraph runtime.

```bash
npm install @openuidev/langchain
```

--------------------------------

### Install OpenUI packages with bun

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/ui-generation.mdx

Install the required packages for UI generation: @openuidev/react-lang, @openuidev/react-ui, and @openuidev/lang-core. Use this tab when your package manager is bun.

```bash
bun add @openuidev/react-lang @openuidev/react-ui @openuidev/lang-core
```

--------------------------------

### openuiExamples

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/react-ui.mdx

Example configurations for the general-purpose library.

```APIDOC
## openuiExamples

### Description
Example configurations for the general-purpose library.

### Import
```ts
import { openuiExamples } from "@openuidev/react-ui/genui-lib";
```
```

--------------------------------

### Deploy a Vercel preview with bun (bunx @openuidev/cli@latest deploy)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/agent/getting-started/quickstart.mdx

Deploy a Vercel preview from the project directory. Use the bun package manager variant.

```bash
bunx @openuidev/cli@latest deploy
```

--------------------------------

### Set API key and run dev server

Source: https://github.com/thesysdev/openui/blob/main/examples/harnesses/pi/README.md

Copy the .env.example file to .env and set THESYS_API_KEY. Then run the dev server, optionally pointing the agent at a project directory.

```bash
cp .env.example .env   # set THESYS_API_KEY

# Point the agent at the project you want it to work on:
pnpm dev -- /path/to/your/project
```

--------------------------------

### Start the Angular development server

Source: https://github.com/thesysdev/openui/blob/main/examples/app-frameworks/angular/README.md

Runs the dev command that generates the Cloud library configuration, starts the loopback-only Cloud proxy on port 4300, and starts Angular with an /api proxy. Open http://127.0.0.1:4200. Only the backend reads the key; browser requests contain conversation messages. The proxy calls https://api.thesys.dev/v1/embed/chat/completions.

```bash
pnpm dev
# or: npm run dev
# or: bun run dev
```

--------------------------------

### Prepare documents and start the app

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/cookbooks/document-comparison.mdx

Runs the document preparation script and starts the development server. The first run downloads about 83 MB of PDFs and embeds 1,564 passages for about a cent. Open localhost:3000 to try a starter question. The default model is openai/gpt-5.5; use OPENUI_MODEL to select another supported Gateway model.

```bash
npm run prepare:documents
npm run dev
```

--------------------------------

### Install dependencies with pnpm, bun, yarn, npm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/openui-lang/examples/design-systems/shadcn.mdx

Run from examples/design-systems/shadcn. Each command installs dependencies using the respective package manager.

```bash
cd examples/design-systems/shadcn
pnpm install
```

```bash
cd examples/design-systems/shadcn
bun install
```

```bash
cd examples/design-systems/shadcn
yarn install
```

```bash
cd examples/design-systems/shadcn
npm install
```

--------------------------------

### Deploy a Vercel preview with npm (npx @openuidev/cli@latest deploy)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/agent/getting-started/quickstart.mdx

Deploy a Vercel preview from the project directory. Use the npm package manager variant.

```bash
npx @openuidev/cli@latest deploy
```

--------------------------------

### Deploy a Vercel preview with pnpm (pnpx @openuidev/cli@latest deploy)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/agent/getting-started/quickstart.mdx

Deploy a Vercel preview from the project directory. Use the pnpm package manager variant.

```bash
pnpx @openuidev/cli@latest deploy
```

--------------------------------

### Deploy a Vercel preview with yarn (yarn dlx @openuidev/cli@latest deploy)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/agent/getting-started/quickstart.mdx

Deploy a Vercel preview from the project directory. Use the yarn package manager variant.

```bash
yarn dlx @openuidev/cli@latest deploy
```

--------------------------------

### Install OpenUI packages with npm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/ui-generation.mdx

Install the required packages for UI generation: @openuidev/react-lang, @openuidev/react-ui, and @openuidev/lang-core. Use this tab when your package manager is npm.

```bash
npm install @openuidev/react-lang @openuidev/react-ui @openuidev/lang-core
```

--------------------------------

### Install @openuidev/langchain with pnpm, bun, yarn, or npm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/langchain.mdx

Install the @openuidev/langchain package using the package manager of your choice. These commands are presented as interchangeable options in the source's tab group.

```bash
pnpm add @openuidev/langchain
```

```bash
bun add @openuidev/langchain
```

```bash
yarn add @openuidev/langchain
```

```bash
npm install @openuidev/langchain
```

--------------------------------

### useThreadList usage example

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/agent/reference/hooks.mdx

Example component that uses useThreadList to get the number of threads and display a count. It re-renders only when the thread count changes, making it suitable for a custom thread switcher or sidebar.

```tsx
function ThreadCount() {
  const count = useThreadList((s) => s.threads.length);
  return <span>{count} chats</span>;
}
```

--------------------------------

### Install OpenUI packages with pnpm

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/ui-generation.mdx

Install the required packages for UI generation: @openuidev/react-lang, @openuidev/react-ui, and @openuidev/lang-core. Use this tab when your package manager is pnpm.

```bash
pnpm add @openuidev/react-lang @openuidev/react-ui @openuidev/lang-core
```

--------------------------------

### Start LangGraph server and Next.js app (bun)

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/build-agents/frameworks/langgraph.mdx

Starts the LangGraph server and Next.js app together after adding THESYS_API_KEY to .env. The LangGraph process uses this key when it calls OpenUI Gateway. Use bun for this package manager variant.

```bash
bun dev
```

--------------------------------

### Install OpenUI Lang packages for React, backend, LangChain, and other runtimes

Source: https://github.com/thesysdev/openui/blob/main/README.md

Install the OpenUI Lang packages for React, framework-agnostic backend, LangChain/LangGraph, and Vue/Svelte/Angular runtimes, plus the A2UI protocol with Zod.

```bash
```bash
# React app with OpenUI rendering and prebuilt components
npm install @openuidev/react-lang @openuidev/react-ui

# Framework-agnostic backend or Edge prompt generation
npm install @openuidev/lang-core

# LangChain/LangGraph agent and server integration
npm install @openuidev/langchain @langchain/langgraph

# Vue, Svelte, or Angular runtime
npm install @openuidev/vue-lang
npm install @openuidev/svelte-lang
npm install @openuidev/angular-lang

# A2UI protocol with OpenUI Lang component payloads
npm install @openuidev/a2ui zod
```
```

--------------------------------

### useThread usage example

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/agent/reference/hooks.mdx

Example component that uses useThread to get isRunning and cancelMessage from the current thread state. It renders a Stop button only when a reply is in flight, allowing the user to cancel the in-flight message.

```tsx
function StopButton() {
  const isRunning = useThread((s) => s.isRunning);
  const cancelMessage = useThread((s) => s.cancelMessage);
  if (!isRunning) return null;
  return <button onClick={cancelMessage}>Stop</button>;
}
```

--------------------------------

### Verify and deploy commands

Source: https://github.com/thesysdev/openui/blob/main/examples/miscellaneous/autofix/README.md

Run lint and production build with pnpm verify, then deploy with pnpm deploy.

```bash
pnpm verify   # lint + production build
pnpm deploy   # openui deploy
```

--------------------------------

### OpenUI Quickstart with React and TypeScript

Source: https://github.com/thesysdev/openui/blob/main/spec/overview.md

Shows how to generate a system prompt from an OpenUI library and render the model's streamed text using the Renderer component. The server sends the system prompt, and the client renders the response while it streams.

```tsx
// Server: send this as the system prompt.
import { generateSystemPrompt } from "@openuidev/lang-core";
import { openuiLibrary, openuiPromptOptions } from "@openuidev/react-ui";

const systemPrompt = generateSystemPrompt({
  library: openuiLibrary.toSpec(),
  promptOptions: openuiPromptOptions,
});

// Client: render the model's text while it streams.
import { Renderer } from "@openuidev/react-lang";

<Renderer library={openuiLibrary} response={text} isStreaming={isStreaming} />
```

--------------------------------

### autofix.completions.stream

Source: https://github.com/thesysdev/openui/blob/main/packages/server/README.md

Wraps a Chat Completions stream and returns an SSE response for the frontend. Use `toResponse()` to get the SSE response.

```APIDOC
## autofix.completions.stream

### Description
Wraps a Chat Completions stream and returns an SSE response for the frontend. Use `toResponse()` to get the SSE response.

### Method
stream

### Endpoint
autofix.completions.stream

### Parameters
#### Request Body
- **stream** (Stream) - Required - The source stream from the Chat Completions API.
- **messages** (array) - Optional - The conversation messages.
- **signal** (AbortSignal) - Optional - An abort signal.

### Request Example
```ts
return autofix.completions
  .stream({ stream: source, messages, signal: request.signal })
  .toResponse();
```

### Response
Returns an SSE `Response` for the frontend `openAIAdapter()`.
```

--------------------------------

### CustomPreview component using useArtifactRenderer

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/agent/reference/hooks.mdx

Example component that uses useArtifactRenderer to get a renderer by toolName and calls its preview method with props and controls. Returns null if no renderer is found.

```tsx
// `controls` is the same { isActive, isStreaming, open, close, toggle }
// object the framework passes to a renderer's preview/actual.
function CustomPreview({ toolName, props, controls }) {
  const renderer = useArtifactRenderer(toolName);
  if (!renderer) return null;
  return renderer.preview(props, controls);
}
```

--------------------------------

### autofix.ai.stream

Source: https://github.com/thesysdev/openui/blob/main/packages/server/README.md

Wraps a Vercel AI SDK stream and returns an SSE response for the frontend. Use `toResponse()` to get the UI message SSE protocol response.

```APIDOC
## autofix.ai.stream

### Description
Wraps a Vercel AI SDK stream and returns an SSE response for the frontend. Use `toResponse()` to get the UI message SSE protocol response.

### Method
stream

### Endpoint
autofix.ai.stream

### Parameters
#### Request Body
- **stream** (UIMessageStream) - Required - The stream from `toUIMessageStream({ stream: result.stream })`.
- **signal** (AbortSignal) - Optional - An abort signal.

### Request Example
```ts
return autofix.ai
  .stream({
    stream: toUIMessageStream({ stream: result.stream }),
    signal,
  })
  .toResponse();
```

### Response
Returns an SSE `Response` using the UI message SSE protocol used by `useChat`.
```

--------------------------------

### Observability.init(options)

Source: https://github.com/thesysdev/openui/blob/main/packages/observability-cloud/README.md

Initializes the SDK with your client API key and optional configuration. Safe to call from shared client/server code; it is a no-op when window is not defined.

```APIDOC
## Observability.init(options)

### Description
Initializes the SDK with your client API key and optional configuration. Safe to call from shared client/server code; it is a no-op when window is not defined.

### Method
init

### Parameters
#### options (object) - Required
- **apiKey** (string) - Required - Your client API key (`pk-th-…`).
- **capture** ("full" | "minimal") - Optional - Default: `"full"`. `"full"` logs complete event data for the richest debugging in the console. `"minimal"` is a privacy-first mode that strips event data that may include PII.
- **sampleRate** (number) - Optional - Default: `1`. Fraction of renders to send, `0`–`1`. Sampling is deterministic per render, so all events for one render are kept or dropped together.
- **endpoint** (string) - Optional - Default: `https://ingest.thesys.dev/v1/events`. Override the ingest URL (testing).
- **debug** (boolean) - Optional - Default: `false`. Log SDK diagnostics to the console.

### Request Example
```typescript
import * as Observability from "@openuidev/observability-cloud";

Observability.init({ apiKey: "pk-th-…" });
```

### Response
#### Success Response
No response body. Calling `init` again with the same options is a no-op; calling it with different options replaces the previous configuration.
```

--------------------------------

### generate examples with bun

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/cli.mdx

Run `generate` via bun (`bunx`) to print the prompt, write it with `--out`, output only the spec or JSON schema, or specify export names.

```bash
# Print the system prompt to stdout
bunx @openuidev/cli@latest generate ./src/library.ts

# Write the prompt and its .spec.json alongside it
bunx @openuidev/cli@latest generate ./src/library.ts --out ./src/generated/system-prompt.txt

# Output only the spec or the JSON schema
bunx @openuidev/cli@latest generate ./src/library.ts --spec
bunx @openuidev/cli@latest generate ./src/library.ts --json-schema

# Explicit export names
bunx @openuidev/cli@latest generate ./src/library.ts --export myLibrary --prompt-options myOptions
```

--------------------------------

### Using prepareInput to customize run input

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/langchain.mdx

Example of passing prepareInput to createLangChainStreamResponse. Uses the last message, threadId, and model from the request body. If prepareInput throws, the helper returns a 400 response without starting a run.

```TypeScript
return createLangChainStreamResponse(request, {
  apiUrl: process.env.LANGGRAPH_API_URL ?? "http://localhost:2024",
  assistantId: "agent",
  prepareInput: ({ messages, requestBody }) => ({
    messages: messages.slice(-1),
    conversationId: requestBody.threadId,
    model: requestBody.model,
  }),
});
```

--------------------------------

### Project structure tree

Source: https://github.com/thesysdev/openui/blob/main/examples/app-frameworks/vue/README.md

Shows the file layout of the example project, including root components, lib, server, and assets directories.

```text
app.vue                        # Root component (renders NuxtPage)
nuxt.config.ts                 # Nuxt config (ssr: false, Tailwind CSS, Nitro bundling)
pages/
└── index.vue                  # Chat UI with AI SDK Chat class + OpenUI Renderer
components/
├── ChatHeader.vue             # Top bar with title
├── ChatInput.vue              # Message input + send/stop buttons
├── UserMessage.vue            # Renders user message parts
├── AssistantMessage.vue       # Renders assistant message with OpenUI Renderer
├── LoadingIndicator.vue       # Animated loading dots
├── WelcomeScreen.vue          # Start page with example prompts
└── openui/                    # Vue component renderers for openui-lang output
    ├── Stack.vue
    ├── Card.vue
    ├── TextContent.vue
    ├── Button.vue
    └── Chart.vue
lib/
├── define-library.ts          # Shared schemas (server cannot import .vue files)
├── library.ts                 # Vue renderers wired onto those schemas
└── tools.ts                   # AI tool definitions (weather, stocks, math, search)
server/
└── api/chat.post.ts           # AI SDK streaming endpoint
assets/
└── app.css                    # Tailwind CSS entry point
```

--------------------------------

### Context composables: useIsStreaming and useIsQueryLoading

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/api-reference/vue-lang.mdx

Call composables in <script setup> of a component rendered inside Renderer. useOpenUI() throws when used outside a renderer. This example disables a button while streaming or query loading.

```vue
<script setup lang="ts">
import { useIsQueryLoading, useIsStreaming } from "@openuidev/vue-lang";

const isStreaming = useIsStreaming();
const isQueryLoading = useIsQueryLoading();
</script>

<template>
  <button :disabled="isStreaming || isQueryLoading">Submit</button>
</template>
```

--------------------------------

### Call a model with generateSystemPrompt and OpenAI gateway

Source: https://github.com/thesysdev/openui/blob/main/docs/content/docs/getting-started.mdx

Generates a system prompt from the library specification and sends it with the user's message to the Thesys gateway. Requires an API key stored in .env. The gateway repairs invalid OpenUI Lang as the response streams.

```ts
import OpenAI from "openai";
import { generateSystemPrompt } from "@openuidev/lang-core";
import library from "./lib/openui.spec.json";

const gateway = new OpenAI({
  apiKey: process.env.THESYS_API_KEY,
  baseURL: "https://api.thesys.dev/v1/embed",
});

const completion = await gateway.chat.completions.create({
  model: "openai/gpt-5",
  messages: [
    { role: "system", content: generateSystemPrompt({ cloud: true, library }) },
    { role: "user", content: "Compare quarterly revenue by region." },
  ],
  stream: true,
});
```

--------------------------------

### Install dependencies with pnpm

Source: https://github.com/thesysdev/openui/blob/main/CONTRIBUTING.md

Installs all dependencies for the pnpm workspace.

```sh
pnpm install
```
Tokens:
Raw