This example renders streaming OpenUI Lang interfaces inside an assistant-ui conversation using @openuidev/assistant-ui, the integration package published and maintained by OpenUI.

assistant-ui owns the chat shell, runtime, messages, streaming, and tool lifecycle. OpenUI renders the ui argument of two tool calls: present_openui for display-only interfaces and prompt_openui for forms and choices that wait for the user to submit.

Quick Start

Using CLI (Recommended)

npx assistant-ui@latest create my-app --example with-openui
cd my-app

Environment Variables

Create .env.local:

OPENAI_API_KEY=your-api-key-here

Run

pnpm install
pnpm dev

Open http://localhost:3000 to see the result.

Run inside the monorepo

To develop against the workspace packages directly, clone the repository and build the packages the example imports before starting the dev server. Create examples/with-openui/.env.local with your OPENAI_API_KEY first.

git clone https://github.com/assistant-ui/assistant-ui.git
cd assistant-ui
pnpm install
pnpm exec turbo build --filter='with-openui^...'
pnpm -C examples/with-openui dev

Key Features

Registers openuiIntegration.toolkit so the model can call present_openui and prompt_openui
Mounts OpenUIInstructions so the model learns the OpenUI component vocabulary through assistant instructions
Uses sendAutomaticallyWhen: shouldContinueAfterOpenUIPrompt so a display-only call ends the turn while an interactive submission continues the conversation
Forwards the instructions and both frontend tools to the backend through AssistantChatTransport, so the API route stays generic
Loads the OpenUI layered stylesheet once in app/globals.css

How it works

app/page.tsx wires the runtime, toolkit, instructions, and suggestions
app/api/chat/route.ts streams with the AI SDK and exposes the forwarded frontend tools with frontendTools
Submitted form state is returned through addResult and hydrates again on replay

README.md

OpenUI Example