README.md

OpenUI examples

These projects showcase complete OpenUI workflows and integrations with different runtimes, application frameworks, design systems, coding harnesses, and specialized libraries. They are standalone reference implementations, not starter templates; use the OpenUI CLI to scaffold a new application.

Each example has one primary home. Complete workflows with a companion tutorial live in cookbooks; integration examples are grouped by the integration seam they teach. Cross-cutting technologies belong in that example's README rather than in duplicate directory trees.

Categories

Category	Use it for
agent-frameworks	Agent runtimes and orchestration frameworks that produce or stream OpenUI output
app-frameworks	Application frameworks or platforms that host an OpenUI client or server
cookbooks	Complete runnable workflows paired with step-by-step tutorials in the Cookbooks docs
design-systems	Component systems adapted into an OpenUI component library
harnesses	Coding-agent harnesses presented through an OpenUI interface
miscellaneous	Distinct capabilities, specialized libraries, and backend services that do not justify another top-level category

miscellaneous is intentionally flat. If several examples develop the same stable integration seam, promote that seam to a top-level category instead of adding nested miscellaneous taxonomies.

CLI selection

Set "featured": true on an entry in examples.json to show it in the CLI's backend framework picker. It shows up to five featured examples in catalog order beside the backend choices. “More examples…” opens the complete catalog, including entries with omitted or false flags. Every example is also available through openui create --example <name>.

Catalog

Agent frameworks

Example	Demonstrates
Google ADK	A Google ADK TypeScript agent streaming OpenUI Lang to a Next.js client
LangGraph Platform	A DeepAgents graph on LangGraph Platform, streamed to OpenUI through the LangChain adapter
Mastra	A Mastra agent connected to OpenUI through AG-UI
Vercel AI SDK	AgentInterface over a Vercel AI SDK streamText backend
Vercel Eve	An Eve agent rendered through Agent Interface

App frameworks

Example	Demonstrates
Angular	An NG-ZORRO X chat interface with the Angular OpenUI renderer
FastAPI	A Python FastAPI streaming backend with a React OpenUI client
React Native	An Expo client rendering native OpenUI components from a Next.js backend stream
Svelte	OpenUI Lang parsing and rendering in SvelteKit
Vue	OpenUI Lang parsing and rendering in Nuxt and Vue

Cookbooks

Example	Demonstrates	Tutorial
Conversational analytics	Formula 1 lap-time analysis with OpenUI Gateway, streamed charts, and visible tool calls	Walkthrough
Document comparison	Annual-report comparison with retrieval, page-cited evidence, and a customized Agent Interface	Walkthrough
Booking assistant	Adaptive booking forms prefilled from a request, live hotel search through an MCP server, and a summary before booking	Walkthrough

Design systems

Example	Demonstrates
Material UI	A broad Material UI component library for generated interfaces
shadcn/ui	A broad shadcn/ui component library for generated interfaces

Harnesses

Example	Demonstrates
Grok Build	Grok Build coding sessions and tool activity in Agent Interface
Pi	A Pi coding-agent session streamed into Agent Interface

Miscellaneous

Example	Demonstrates
Autofix	Direct OpenAI generation with @openuidev/server Autofix repair
Handsontable	Generated spreadsheet interfaces backed by Handsontable
HTML artifact	Sandboxed HTML artifacts as an OpenUI capability
OpenUI x assistant-ui Dashboards	Dashboard artifacts in a text-only assistant-ui chat, with data from npm, GitHub, and an MCP server
React Email	Generating and previewing emails with the OpenUI React Email library
Supabase	Persisted OpenUI conversations and threads with Supabase

Run and verify

Every JavaScript application under examples/ is standalone: it has its own manifest, dependencies, scripts, and canonical pnpm lockfile. Installing the repository root does not install any example dependencies.

Enter the application directory you want to run, then use your preferred package manager:

pnpm install --ignore-workspace
# or: npm install
# or: bun install

The pnpm flag prevents the command from climbing to this repository's ancestor workspace; it is not needed after copying an example elsewhere. The scripts do not invoke pnpm internally, so the corresponding pnpm dev, npm run dev, and bun run dev commands are equivalent. FastAPI's JavaScript application is in app-frameworks/fastapi/frontend; React Native has separate applications in app-frameworks/react-native/backend and app-frameworks/react-native/chat-app.

Repository maintainers can install every application from the repository root with:

pnpm examples:install

Follow an example's README for its environment variables and development command. From any example directory, run its credential-free verification contract with:

pnpm verify
# or: npm run verify
# or: bun run verify

To verify all examples sequentially against the pinned published OpenUI packages, run:

pnpm examples:verify

Examples that use static system prompts generate them locally before dev, build, and verify. Generated prompt and spec files are ignored by Git and should not be committed.

All @openuidev/* dependencies are exact published versions rather than links to packages in this repository. The Update OpenUI starters workflow runs after each successful release (and can be triggered manually), updates them together, refreshes every application's pnpm and npm lockfiles, verifies every example, and opens or updates one pull request when versions change.

pnpm and npm lockfiles are the reproducibility contracts for repository CI and starter updates. Bun users can generate native local lockfiles, which remain ignored under examples/.

Maintenance contract

Every retained example should:

• showcase a distinct OpenUI capability or maintained integration;
• remain runnable without depending on another example;
• document its purpose, stack, prerequisites, run command, architecture, key files, verification command, and extension points;
• expose a credential-free verify script that checks the example's relevant build, types, and local tests;
• generate derived prompts and specs locally rather than store them in the repository;
• depend on exact published @openuidev/* versions rather than root workspace packages;
• use a normalized @openuidev/example-* package name and keep repository links current.

Cookbooks also link to their companion docs tutorial. Keep each runnable app in examples/cookbooks/<name>/ and its walkthrough in docs/content/docs/cookbooks/<name>.mdx, with links in both directions. Update code and tutorial together in the same pull request.

Delete examples that duplicate an authoritative CLI template, are maintained elsewhere, substantially overlap a stronger example, or no longer justify their maintenance cost.