---
title: Quick Start
description: Get a working chat UI running in under 5 minutes.
---

This page shows the scaffolded setup for getting a working chat app running quickly.

If you already have an existing Next.js app, use [Installation](/docs/chat/installation) or the [End-to-End Guide](/docs/chat/from-scratch) instead.

## 1. Create your app

Run the create command. This scaffolds a Next.js app with OpenUI Chat already wired to an OpenAI-backed route.

<Tabs groupId="pkg" items={["npx", "pnpm", "yarn", "bun"]} persist>
  <Tab value="npx">```bash npx @openuidev/cli@latest create cd genui-chat-app ```</Tab>
  <Tab value="pnpm">```bash pnpm dlx @openuidev/cli@latest create cd genui-chat-app ```</Tab>
  <Tab value="yarn">```bash yarn dlx @openuidev/cli@latest create cd genui-chat-app ```</Tab>
  <Tab value="bun">```bash bunx @openuidev/cli@latest create cd genui-chat-app ```</Tab>
</Tabs>

## 2. Add your API key

Create a `.env.local` file in the project root:

```bash
OPENAI_API_KEY=sk-your-key-here
```

## 3. 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>

Open [http://localhost:3000](http://localhost:3000) in your browser. You should see the default **FullScreen** chat. Try sending a message.

You should see a full-page chat experience with streaming responses enabled.

{/* add visual: gif showing the generated app launching, sending a message, and streaming a response in the default scaffold */}

## What you just built

The scaffold generates both the frontend and backend for you.

You do not need to recreate these files during quick start. This section is here so you know what the scaffold already configured.

### The Frontend (`app/page.tsx`)

**The** frontend renders `FullScreen`, sends requests with `processMessage`, converts messages explicitly with `openAIMessageFormat.toApi(messages)`, and parses the OpenAI SDK readable stream correctly.

```tsx
import { openAIMessageFormat, openAIReadableStreamAdapter } from "@openuidev/react-headless";
import { FullScreen } from "@openuidev/react-ui";
import { openuiLibrary } from "@openuidev/react-ui/genui-lib";

export default function Page() {
  return (
    <FullScreen
      processMessage={async ({ messages, abortController }) => {
        return fetch("/api/chat", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            messages: openAIMessageFormat.toApi(messages),
          }),
          signal: abortController.signal,
        });
      }}
      streamProtocol={openAIReadableStreamAdapter()}
      componentLibrary={openuiLibrary}
      agentName="OpenUI Chat"
    />
  );
}
```

### The Backend (`app/api/chat/route.ts`)

The scaffold also creates a Next.js route handler at `app/api/chat/route.ts`.

That route:

- loads the system prompt generated by the CLI at build time
- receives OpenAI-format messages
- prepends the system prompt
- calls OpenAI Chat Completions with streaming enabled
- returns `response.toReadableStream()`

The scaffold includes a prebuild step (`openui generate`) that creates the system prompt from your component library. This keeps the prompt on the server — it is never sent from the frontend.

## Next steps

Now that the app is running, choose the next path based on what you want to change.

<Cards>
  <Card title="End-to-End Guide" href="/docs/chat/from-scratch">
    Recreate the same flow in your own existing app.
  </Card>
  <Card title="Understand GenUI" href="/docs/chat/genui">
    Learn how the component library and system prompt work together.
  </Card>
  <Card title="Go Headless" href="/docs/chat/headless-intro">
    Build your own UI with `ChatProvider` and hooks.
  </Card>
</Cards>
