Quick Start

1. Create your app

Run the create command. This sets up a Next.js app with OpenUI Chat and the Standard Component Library pre-configured.

npx create-openui-chat my-chat-app
cd my-chat-app

pnpm create openui-chat my-chat-app
cd my-chat-app

yarn create openui-chat my-chat-app
cd my-chat-app

bun create openui-chat my-chat-app
cd my-chat-app

2. Add your API key

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

OPENAI_API_KEY=sk-your-key-here

3. Start the dev server

npm run dev

pnpm dev

yarn dev

bun dev

Open http://localhost:3000 in your browser. You should see the Copilot interface. Try sending a message!

What you just built

The scaffold generated two key files that power the chat experience:

The Frontend (`app/page.tsx`)

It renders the <Copilot /> component. This is a "batteries-included" sidebar that handles message history, loading states, and UI rendering.

import { Copilot } from "@openuidev/react-ui";
import { standardLibrary } from "@openuidev/react-ui";

export default function Page() {
  return (
    <Copilot 
      apiUrl="/api/chat" 
      agentName="Assistant" 
      componentLibrary={standardLibrary} // Enables Generative UI
    />
  );
}

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

A Next.js Route Handler that receives messages and streams the response. It automatically injects the System Prompt from the standard library so the LLM knows how to render UI components.