OpenUI

https://www.openui.com/docs
Admin
OpenUI is a generative UI framework that integrates AI-powered chat interfaces with React...
Tokens:243,582
Snippets:1,770
Trust Score:6.4
Update:1 day ago
Show doc for...
Tokens:
Raw
### Quick setup with npx ctx7 setup

Source: https://www.openui.com/docs/mcp

The fastest way to get started — 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
```

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

### Setup and run the Vercel Eve example

Source: https://www.openui.com/docs/build-agents/frameworks/vercel-eve

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 with pnpm dev. 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
```

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

### Run the Pi example with pnpm

Source: https://www.openui.com/docs/build-agents/frameworks/pi

Changes to the Pi example directory, copies the .env.example to .env to set THESYS_API_KEY, and starts the dev server with a project path.

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

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

### Install dependencies and copy environment template

Source: https://www.openui.com/docs/build-agents/frameworks/langgraph

Run these commands from the example directory to install dependencies and copy the environment template. The commands are shown for pnpm, but the page also lists bun, yarn, and npm as alternatives.

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

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

### Create command examples

Source: https://www.openui.com/docs/api-reference/cli

Examples of using `create` with various options: prompting for missing values, specifying a backend framework or example, and non-interactive mode followed by key generation.

```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
```

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

### Install dependencies with pnpm

Source: https://www.openui.com/docs/build-agents/frameworks/vercel-ai-sdk

Installs dependencies for the example project using pnpm.

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

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

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

Source: https://www.openui.com/docs/openui-lang/quickstart

Run this command to create a new OpenUI Gateway project named 'recipe-remix'. 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

Source: https://www.openui.com/docs/openui-lang/examples/design-systems/shadcn

Run these commands from the examples/design-systems/shadcn directory to install dependencies using pnpm.

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

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

### Install dependencies with pnpm

Source: https://www.openui.com/docs/openui-lang/examples/miscellaneous/react-email

Run these commands from the examples/miscellaneous/react-email directory to install dependencies using pnpm.

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

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

### Install OpenUI component library

Source: https://www.openui.com/docs/api-reference/a2ui

Installs the built-in OpenUI component library package.

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

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

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

Source: https://www.openui.com/docs/api-reference/assistant-ui

Install the package and its peer dependencies using pnpm. This command is shown in the Install section.

```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
```

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

### Project layout for vercel-ai-sdk example

Source: https://www.openui.com/docs/build-agents/frameworks/vercel-ai-sdk

Shows the file structure of the example project, listing the key files and their roles.

```text
examples/agent-frameworks/vercel-ai-sdk/
|- src/app/page.tsx           # AgentInterface with the Vercel AI stream adapter
|- src/app/api/chat/route.ts  # streamText() through OpenUI Gateway
|- src/lib/cloud-prompt.ts    # Generated OpenUI Lang instructions
|- src/lib/tools.ts           # Vercel AI SDK tool() definitions
|- src/library.ts             # Component library used to generate the prompt spec
```

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

### Installation

Source: https://www.openui.com/docs/api-reference/a2ui

Install the framework-neutral client and its Zod peer, plus optional renderer and component library peers.

```APIDOC
## Installation

Install the framework-neutral client and its Zod peer:

```bash
npm install @openuidev/a2ui zod
```

For React rendering, also install the optional renderer peers:

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

Install the package that provides your component library as well. For example, the built-in OpenUI library is exported by `@openuidev/react-ui`:

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

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

### openui generate-api-key examples (pnpm)

Source: https://www.openui.com/docs/api-reference/cli

Example commands for generating an API key with pnpm. The first uses defaults, the second writes to `.env.local`.

```bash
pnpx @openuidev/cli@latest generate-api-key
pnpx @openuidev/cli@latest generate-api-key --file .env.local
```

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

### Install @openuidev/langchain with pnpm

Source: https://www.openui.com/docs/api-reference/langchain

Install the package for the Web-standard server helpers using pnpm.

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

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

### Installation

Source: https://www.openui.com/docs/api-reference/react-email

Install the package along with its peer dependencies using your preferred package manager.

```APIDOC
## Install

### Package Manager
pnpm, bun, yarn, npm

### Command
```bash
pnpm add @openuidev/react-email @openuidev/react-lang @react-email/render
```
```

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

### Install CLI globally with pnpm

Source: https://www.openui.com/docs/api-reference/cli

Install the CLI globally using `pnpm add -g @openuidev/cli`.

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

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

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

Source: https://www.openui.com/docs/reliability/installation

Install the Observability SDK using pnpm. This is the first step for custom model integration when not using Gateway or Autofix.

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

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

### Project layout for langgraph-platform example

Source: https://www.openui.com/docs/build-agents/frameworks/langgraph

Shows the file structure of the example project. It lists the key files: page.tsx, route.ts, agent.ts, tools.ts, cloud-prompt.ts, library.ts, generated folder, and langgraph.json.

```text
examples/agent-frameworks/langgraph-platform/
|- src/app/page.tsx           # AgentInterface with agUIAdapter()
|- src/app/api/chat/route.ts  # createLangChainStreamResponse()
|- src/agent/agent.ts         # DeepAgent with openUIStreamTransformer()
|- src/agent/tools.ts         # Mock weather, finance, and research tools
|- src/lib/cloud-prompt.ts    # Generated OpenUI Lang instructions for Gateway
|- src/library.ts             # Components the model can render
|- src/generated/             # Generated component-library specification
|- langgraph.json             # Local and deployed graph configuration
```

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

### createOpenUIIntegration usage example

Source: https://www.openui.com/docs/api-reference/assistant-ui

Shows how to import and call createOpenUIIntegration with a custom library and tool names. The example uses a local library import and sets presentToolName and promptToolName.

```typescript
import { createOpenUIIntegration } from "@openuidev/assistant-ui";
import { library } from "./library";

const openui = createOpenUIIntegration({
  library,
  presentToolName: "show_panel",
  promptToolName: "ask_panel",
});
```

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

### Complete example: define Percent function and render

Source: https://www.openui.com/docs/openui-lang/functions

A complete example showing how to define a custom function with defineFunction, extend the openuiLibrary, and render a response. The renderer computes the percentages, and the model only writes the function calls.

```tsx
"use client";

import { defineFunction, Renderer } from "@openuidev/react-lang";
import { openuiLibrary } from "@openuidev/react-ui";
import { z } from "zod/v4";

const percent = defineFunction({
  name: "Percent",
  description: "Formats part / total as a percentage",
  params: z.object({ part: z.number(), total: z.number().default(100) }),
  returns: z.string(),
  fn: ({ part, total }) => `${((part / total) * 100).toFixed(1)}%`,
});

// Create the library once, at module scope.
const library = openuiLibrary.extend({ functions: { add: [percent] } });

export function Summary({ response }: { response: string }) {
  return <Renderer library={library} response={response} />;
}
```

```text
root = Stack([header, tbl, summary])
header = CardHeader("Q3 sales")
regions = ["North", "South", "West"]
sales = [42, 75, 120]
targets = [120, 100, 100]
tbl = Table([Col("Region", regions), Col("Sales", sales, "number"), Col("Target", targets, "number")])
summary = TextContent("North reached " + @Percent(42, 120) + " of its target. The team reached " + @Percent(@Sum(sales), @Sum(targets)) + ".")
```

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

### Install OpenUI packages with pnpm

Source: https://www.openui.com/docs/build-agents/ui-generation

Install the required packages: @openuidev/react-lang for rendering OpenUI Lang, @openuidev/react-ui for the built-in component library, and @openuidev/lang-core for generating the system prompt on the server. If the agent uses only your own components, you can omit @openuidev/react-ui.

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

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

### Install A2UI client and Zod peer

Source: https://www.openui.com/docs/api-reference/a2ui

Installs the framework-neutral A2UI client and its Zod peer dependency.

```bash
npm install @openuidev/a2ui zod
```

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

### generateSystemPrompt with cloud and promptOptions

Source: https://www.openui.com/docs/openui-lang/system-prompts

Gateway accepts preamble, examples, and additionalRules in promptOptions when cloud: true is used. This example adds a custom preamble.

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

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

### Install React renderer peers

Source: https://www.openui.com/docs/api-reference/a2ui

Installs React and the React renderer package for rendering A2UI surfaces.

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

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

### OpenUI Lang example: signup form

Source: https://www.openui.com/docs/openui-lang/overview

Example OpenUI Lang code defining a signup form with a welcome card, form fields, and action buttons. It demonstrates the syntax for components, properties, and actions like @ToAssistant.

```openui-lang
root = Stack([welcomeCard])
welcomeCard = Card([welcomeHeader, signupForm])
welcomeHeader = CardHeader("Welcome", "Get started with our platform")
signupForm = Form("signup", actions, [nameField, emailField])
nameField = FormControl("Name", Input("name", "Your name", "text", {required: true, minLength: 2}))
emailField = FormControl("Email", Input("email", "you@example.com", "email", {required: true, email: true}))
actions = Buttons([signUpBtn, learnMoreBtn], "row")
signUpBtn = Button("Sign up", @ToAssistant("Sign me up"), "primary")
learnMoreBtn = Button("Learn more", @ToAssistant("Tell me more about the platform"), "secondary")
```

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

### useNav example: GoToSettings component

Source: https://www.openui.com/docs/agent/reference/hooks

Example component using useNav to navigate to the 'settings' route. The hook respects controlled mode when onNavigate is passed to AgentInterface.

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

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

### generate command examples (pnpm)

Source: https://www.openui.com/docs/api-reference/cli

Examples of using `generate` with pnpm, including printing to stdout, writing to a file, outputting spec or JSON schema, and specifying export names.

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

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

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

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

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

### v0.1 Static UI Generation Example

Source: https://www.openui.com/docs/openui-lang/evolution-guide

Example of a static UI component tree generated by the LLM. Data is hardcoded and there is no interactivity beyond sending a message back to the LLM.

```openui
root = Stack([header, chart])
header = CardHeader("Q4 Revenue")
chart = BarChart(["Oct", "Nov", "Dec"], [Series("Revenue", [120, 150, 180])])
```

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

### v0.5 Interactive App with Live Data Example

Source: https://www.openui.com/docs/openui-lang/evolution-guide

Example of an interactive app with reactive state, live data queries, and computed KPIs. User changes to the Select update the chart without an LLM roundtrip.

```openui
$days = "7"
filter = Select("days", [SelectItem("7", "7 days"), SelectItem("30", "30 days")], null, null, $days)
data = Query("analytics", {days: $days}, {rows: []})
chart = LineChart(data.rows.day, [Series("Revenue", data.rows.revenue)])
kpi = Card([TextContent("Total", "small"), TextContent("" + @Sum(data.rows.revenue), "large-heavy")])
root = Stack([CardHeader("Revenue Dashboard"), filter, Stack([kpi], "row"), chart])
```

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

### Install OpenUI Agent Skill via skills CLI

Source: https://www.openui.com/docs/mcp

Recommended installation method for the OpenUI Agent Skill. Works with Claude Code, Cursor, GitHub Copilot, Codex, and any agent that supports the agentskills.io standard.

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

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

### AgentInterface.Welcome usage example

Source: https://www.openui.com/docs/agent/reference/components

Shows how to configure the Welcome screen with a title, description, image, starters, and starter variant. The starters prop uses ConversationStarterProps objects with displayText and prompt fields.

```jsx
<AgentInterface.Welcome
  title="Ask me anything"
  description="I can explore data, build dashboards, and answer questions."
  image={{ url: "/logo.png" }}
  starters={[{ displayText: "Summarize Q3 revenue", prompt: "Summarize Q3 revenue" }]}
  starterVariant="short"
/>
```

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

### openui deploy examples (pnpm)

Source: https://www.openui.com/docs/api-reference/cli

Example commands for deploying with pnpm. Includes preview deploy, production deploy with `--prod --yes`, and deploying a specific directory without local env using `--skip-env`.

```bash
# Preview deploy from the project directory
pnpx @openuidev/cli@latest deploy

# Production deploy
pnpx @openuidev/cli@latest deploy --prod --yes

# Deploy a specific directory without local env
pnpx @openuidev/cli@latest deploy ./my-app --skip-env
```

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

### pnpx @openuidev/cli@latest feedback --category docs "The streaming guide doesn't cover partial components"

Source: https://www.openui.com/docs/api-reference/cli

Example of sending feedback with the --category option set to docs. The message is provided as a quoted string.

```bash
pnpx @openuidev/cli@latest feedback --category docs "The streaming guide doesn't cover partial components"
```

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

### openui setup-agent [directory]

Source: https://www.openui.com/docs/api-reference/cli

Adds OpenUI instructions for coding agents to an existing project. Appends the OpenUI skill to AGENTS.md or creates the file. Running it again refreshes the instructions and leaves the rest of the file alone. The directory argument defaults to the current folder.

```bash
openui setup-agent [directory]
```

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

### Install @openuidev/server with pnpm

Source: https://www.openui.com/docs/api-reference/server

Install the @openuidev/server package using pnpm. This is the package manager shown in the first tab of the install section.

```bash
pnpm add @openuidev/server
```

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

### Install with pnpm

Source: https://www.openui.com/docs/api-reference/devtools

Install the @openuidev/devtools package as a dev dependency using pnpm.

```bash
pnpm add -D @openuidev/devtools
```

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

### Install @openuidev/react-email with pnpm

Source: https://www.openui.com/docs/api-reference/react-email

Install the package along with @openuidev/react-lang and @react-email/render using pnpm.

```bash
pnpm add @openuidev/react-email @openuidev/react-lang @react-email/render
```

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

### Opt out of installation telemetry with DO_NOT_TRACK

Source: https://www.openui.com/docs/openui-lang/telemetry

Set the DO_NOT_TRACK environment variable to 1 when installing dependencies to disable installation telemetry. Works with pnpm, npm, Yarn, and Bun. In CI, set it before the dependency-install step.

```bash
DO_NOT_TRACK=1 pnpm install
```

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

### Opt out of installation telemetry with OPENUI_TELEMETRY_DISABLED

Source: https://www.openui.com/docs/openui-lang/telemetry

Set the OPENUI_TELEMETRY_DISABLED environment variable to 1 when installing dependencies to disable installation telemetry. Works with pnpm, npm, Yarn, and Bun. In CI, set it before the dependency-install step.

```bash
OPENUI_TELEMETRY_DISABLED=1 pnpm install
```

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

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

Source: https://www.openui.com/docs/agent/getting-started/quickstart

Deploys a Vercel preview from the project directory. Run this command in the project directory.

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

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

### Install workspace dependencies with pnpm

Source: https://www.openui.com/docs/build-agents/frameworks/pi

Installs workspace dependencies once from the repo root using pnpm.

```bash
pnpm install
```

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

### Backend usage example with generateSystemPrompt

Source: https://www.openui.com/docs/openui-lang/system-prompts

Shows how to generate a system prompt and use it with OpenAI's chat completions API in a Next.js API route. Requires an OpenAI API key and a generated system-prompt.spec.json file.

```typescript
import OpenAI from "openai";
import { generateSystemPrompt, type LibrarySpec } from "@openuidev/lang-core";
import librarySpec from "./generated/system-prompt.spec.json";

const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const systemPrompt = generateSystemPrompt({
  library: librarySpec as LibrarySpec,
  promptOptions: { preamble: "You are a helpful assistant." },
});

export async function POST(req: Request) {
  const { messages } = await req.json();

  const completion = await client.chat.completions.create({
    model: "gpt-5.4-mini",
    stream: true,
    messages: [{ role: "system", content: systemPrompt }, ...messages],
  });

  return new Response(completion.toReadableStream(), {
    headers: { "Content-Type": "text/event-stream" },
  });
}
```

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

### Create the application with pnpx @openuidev/cli@latest create

Source: https://www.openui.com/docs/agent/getting-started/quickstart

Scaffolds a Next.js agent application with Agent Interface, an OpenUI renderer, and a server route for model generation. Run this command in your terminal.

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

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

### Example with Nested Children

Source: https://www.openui.com/docs/openui-lang/renderer

Example of defining a component that renders nested children using the renderNode prop.

```APIDOC
## Example with Nested Children

### Description
Shows how to define a component that accepts an array of child component references and renders them using `renderNode`.

### Example
```jsx
const Dashboard = defineComponent({
  name: "Dashboard",
  description: "Container",
  props: z.object({ cards: z.array(StatCard.ref) }),
  component: ({ props, renderNode }) => <div>{renderNode(props.cards)}</div>,
});
```
```

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

### createLibrary

Source: https://www.openui.com/docs/openui-lang/defining-components

Creates a component library for OpenUI Lang. The root option specifies the entry point component, and components lists the available components. componentGroups organizes components into named sections in the generated prompt.

```APIDOC
## createLibrary

### Description
Creates a component library for OpenUI Lang. The `root` option specifies the entry point component, and `components` lists the available components. `componentGroups` organizes components into named sections in the generated prompt.

### Parameters
- **root** (string) - Required - The name of the component that the LLM must use as the entry point. Must match the `name` of one of the components in the library.
- **components** (array) - Required - List of component definitions.
- **componentGroups** (array) - Optional - List of groups, each with a `name` and `components` array. Each group can also have a `notes` array.

### Example
```js
const library = createLibrary({
  root: "Stack",
  components: [Stack, Card, TextContent],
  componentGroups: [
    { name: "Forms", components: ["Form", "FormControl", "Input", "Button", "Buttons"] },
  ],
});
```
```

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

### restStorage usage example

Source: https://www.openui.com/docs/agent/reference/adapters-and-formats

Example of creating a restStorage instance with baseUrl, optional openAIMessageFormat, and optional headers.

```typescript
import { restStorage, openAIMessageFormat } from "@openuidev/react-ui";

const storage = restStorage({
  baseUrl: "/api/threads",
  messageFormat: openAIMessageFormat, // optional
  headers: { "x-tenant": "acme" }, // optional, sent on every request
});
```

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

### Install @openuidev/langchain with npm and LangGraph peer

Source: https://www.openui.com/docs/api-reference/langchain

Install the package and the optional LangGraph peer dependency for applications that run the agent-side transformer.

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

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

### openuiInstructions / createOpenUIInstructions

Source: https://www.openui.com/docs/api-reference/assistant-ui

Default generated model instructions and instruction factory.

```APIDOC
## openuiInstructions / createOpenUIInstructions

### Description
Default generated model instructions and instruction factory.

### Exports
- `openuiInstructions` - Default generated model instructions.
- `createOpenUIInstructions` - Factory to create custom instructions.

### Usage
Use the default instructions or create custom ones with the factory.

```

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

### Generate samples and run benchmark

Source: https://www.openui.com/docs/openui-lang/benchmarks

Run these commands from the benchmarks directory. The first command calls OpenAI and requires OPENAI_API_KEY in your shell. The second command is offline and produces the token/latency report.

```shell
# 1. Generate samples (calls OpenAI — requires OPENAI_API_KEY in your shell)
cd benchmarks
pnpm generate

# 2. Run the token/latency report (offline, no API calls)
pnpm bench
```
Tokens:
Raw