npx @openuidev/cli@latest create --name genui-chat-app --template openui-self-hosted --no-skill --no-interactive
cd genui-chat-app

The CLI is the easiest way to scaffold a new OpenUI/GenUI app. Version-sensitive: verify current CLI flags/template names before relying on them. It prompts for an OpenUI Cloud or self-hosted Agent Interface app when no template is passed. Use `--template openui-cloud` for the managed Cloud starter and `--template openui-self-hosted` for the app-owned model/storage starter. For unattended agent/CI use, pass `--template`, `--no-interactive`, and usually `--no-skill`.

Use `--no-install` when the agent needs to control package-manager behavior explicitly:

```bash
npx @openuidev/cli@latest create --name genui-chat-app --template openui-self-hosted --no-skill --no-interactive --no-install

import {
  AgentInterface,
  fetchLLM,
  restStorage,
  openAIReadableStreamAdapter,
  openAIMessageFormat,
} from "@openuidev/react-ui";

const llm = fetchLLM({
  url: "/api/chat",
  streamAdapter: openAIReadableStreamAdapter(),
  messageFormat: openAIMessageFormat,
});

const storage = restStorage({ baseUrl: "/api/chat/storage" });

export function Chat() {
  return <AgentInterface llm={llm} storage={storage} />;
}

import { type ChatLLM, openAIAdapter } from "@openuidev/react-ui";

const llm: ChatLLM = {
  streamProtocol: openAIAdapter(),
  send: ({ threadId, messages, signal }) =>
    fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ threadId, messages }),
      signal,
    }),
};

import { Renderer } from "@openuidev/react-lang";
import { openuiChatLibrary } from "@openuidev/react-ui";
import "@openuidev/react-ui/components.css";
import "@openuidev/react-ui/styles/index.css";

export function AssistantGenUI({
  response,
  isStreaming,
}: {
  response: string;
  isStreaming?: boolean;
}) {
  return (
    <Renderer
      response={response}
      library={openuiChatLibrary}
      isStreaming={isStreaming}
      onError={(error) => console.error(error)}
    />
  );
}

npx @openuidev/cli@latest generate ./src/library.tsx --out ./src/generated/system-prompt.txt
npx @openuidev/cli@latest generate ./src/library.tsx --json-schema --out ./src/generated/component-spec.json

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

const systemPrompt = openuiLibrary.prompt(openuiPromptOptions);

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";

const MetricCard = defineComponent({
  name: "MetricCard",
  description: "Shows a labeled metric.",
  props: z.object({
    label: z.string(),
    value: z.string(),
  }),
  component: ({ props }) => (
    <article>
      <strong>{props.label}</strong>
      <span>{props.value}</span>
    </article>
  ),
});

export const library = createLibrary({
  root: "MetricCard",
  components: [MetricCard],
});

identifier = Expression

root = Stack([title, metrics, table])
title = TextContent("Q4 dashboard", "large-heavy")
metrics = Stack([rev, users], "row", "m")
rev = StatCard("Revenue", "$1.2M")
users = StatCard("Users", "450k")
table = Table([Col("Region", ["NA", "EU"]), Col("Revenue", [720000, 480000], "currency")])

$days = "7"
root = Stack([filter, total])
filter = Select("days", [SelectItem("7", "7 days"), SelectItem("30", "30 days")], null, null, $days)
total = TextContent("Showing " + $days + " days")

$title = ""
root = Stack([input, btn, tbl])
todos = Query("list_todos", {}, {rows: []})
createTodo = Mutation("create_todo", {title: $title})
input = Input("title", "What needs to be done?", "text", null, $title)
btn = Button("Create", Action([@Run(createTodo), @Run(todos), @Reset($title)]), "primary")
tbl = Table([Col("Title", todos.rows.title)])

import { createParser } from "@openuidev/react-lang";
import { openuiChatLibrary } from "@openuidev/react-ui";

const parser = createParser(openuiChatLibrary.toJSONSchema(), "Card");
const result = parser.parse(response);
const errors = result.meta?.errors ?? [];
if (errors.length > 0) throw new Error(JSON.stringify(errors, null, 2));

import { Renderer } from "@openuidev/react-lang";
import { openuiLibrary, openuiPromptOptions } from "@openuidev/react-ui";
import "@openuidev/react-ui/components.css";
import "@openuidev/react-ui/styles/index.css";

const prompt = openuiLibrary.prompt(openuiPromptOptions);

import { AgentInterface, createTheme, type ThemeProps } from "@openuidev/react-ui";

const companyChatTheme: ThemeProps = {
  lightTheme: createTheme({
    background: "oklch(0.98 0.01 250)",
    interactiveAccentDefault: "oklch(0.55 0.18 255)",
    chatUserResponseBg: "oklch(0.55 0.18 255)",
    chatUserResponseText: "oklch(0.99 0 0)",
    radiusM: "10px",
    fontBody: "Inter, system-ui, sans-serif",
  }),
  darkTheme: createTheme({
    background: "oklch(0.16 0.02 255)",
    interactiveAccentDefault: "oklch(0.72 0.14 255)",
    chatUserResponseBg: "oklch(0.72 0.14 255)",
    chatUserResponseText: "oklch(0.12 0.01 255)",
  }),
};

const starters = [
  { displayText: "Summarize pipeline", prompt: "Summarize the current sales pipeline." },
];

<AgentInterface
  llm={llm}
  theme={companyChatTheme}
  logoUrl="/brand/logo.svg"
  agentName="Acme Assistant"
  starters={starters}
  starterVariant="long"
/>;