Quick Start

Create the app

pnpx @openuidev/cli@latest create --name genui-chat-app

Then move into the project:

cd genui-chat-app

Add your API key

The generated app uses OpenAI by default, but works with any OpenAI-compatible provider (e.g., OpenRouter, Azure OpenAI, Anthropic via proxy).

echo "OPENAI_API_KEY=sk-your-key-here" > .env

Start the dev server

pnpm dev

What's included

The CLI generates a Next.js app with everything wired up:

src/
  app/
    page.tsx          # AgentInterface chat (thread history) with the built-in component library
    api/chat/
      route.ts        # Backend route with OpenAI streaming + example tools
  library.ts          # Re-exports openuiChatLibrary and openuiChatPromptOptions
  generated/
    system-prompt.txt        # Generated for static or legacy prompt integrations
    system-prompt.spec.json  # Generated library spec

• page.tsx: Renders the AgentInterface chat (an artifact chat surface with thread history) with openuiChatLibrary for Generative UI rendering. It provides an llm whose send posts messages to the route and whose streamProtocol is openAIAdapter(). Storage is optional — omit it and threads are kept in memory (wiped on reload).
• route.ts: A backend API route that uses generateSystemPrompt with the generated spec, then streams the response from the LLM.
• library.ts: Your component library entrypoint. The openui generate CLI reads this file to produce both the prompt and the library spec.

The dev and build scripts automatically regenerate both artifacts before starting. Use the emitted spec in your route:

"generate:prompt": "openui generate src/library.ts --out src/generated/system-prompt.txt",
"dev": "pnpm generate:prompt && next dev"

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

const systemPrompt = generateSystemPrompt({
  library: librarySpec as LibrarySpec,
});