react-native

OpenUI React Native Example

A full-stack example that demonstrates using @openuidev/react-lang in a React Native (Expo) app with a Next.js API backend. The LLM streams responses in OpenUI Lang and the mobile client renders them as native components in real time.

Architecture

┌─────────────────────────────┐        ┌──────────────────────────┐
│   React Native (Expo) app   │  HTTP  │   Next.js backend (API)  │
│                             │ ──────►│                          │
│  • Chat UI                  │        │  • /api/chat  (POST)     │
│  • <Renderer /> parsing     │◄────── │  • Streams OpenUI Lang   │
│    streamed OpenUI Lang      │  stream│    via OpenUI Cloud      │
│  • Native chart components  │        │  • CORS enabled          │
└─────────────────────────────┘        └──────────────────────────┘

Project Structure

react-native/
├── backend/                  # Next.js API server
│   ├── package.json          # Standalone backend dependencies and scripts
│   ├── src/
│   │   ├── library.ts        # Component library definition (Node-compatible)
│   │   └── app/api/chat/
│   │       └── route.ts      # Streaming chat endpoint
│   └── env.example
└── chat-app/                 # Standalone Expo application
    └── package.json

The backend and mobile client are separate install units, so either can be installed, verified, or copied without a workspace.

Getting Started

Prerequisites

• Node.js 18+
• pnpm, npm, or Bun
• An OpenUI Cloud API key (https://console.thesys.dev/keys)

1. Install dependencies

From the react-native/ example directory, install each standalone application:

(cd backend && pnpm install --ignore-workspace)
(cd chat-app && pnpm install --ignore-workspace)

2. Configure the backend

cp backend/env.example backend/.env.local

Add your key to backend/.env.local:

THESYS_API_KEY=sk-th-...

3. Start the backend

(cd backend && pnpm dev)

The API will be available at http://localhost:3000.

4. Start the mobile app

(cd chat-app && pnpm start)

What's in This Example

backend/src/library.ts

Defines the custom component library using defineComponent and createLibrary. This is a Node-compatible version (renderers set to null) that the chat route turns into the system prompt — the backend never renders components itself.

The library exposes five components:

Component	Description
Card	Root container — every response is wrapped in one
Text	Text with optional heading, body, or caption variant
BarChart	Vertical bar chart for comparing discrete categories
LineChart	Line chart for trends over time
PieChart	Pie chart for part-to-whole proportions

backend/src/app/api/chat/route.ts

A Next.js Route Handler that:

1. Builds the system prompt from library.ts with generateSystemPrompt from @openuidev/lang-core when the module loads
2. Streams the conversation through OpenUI Cloud, using the OpenAI SDK pointed at https://api.thesys.dev/v1/embed
3. Returns raw text/plain chunks — intentionally simpler than SSE so React Native can consume the stream directly without a browser EventSource

React Native app (chat-app/)

Uses the <Renderer /> component from @openuidev/react-lang to progressively parse and render the streamed OpenUI Lang output as native components.

Scripts

Directory	Script	Description
backend/	pnpm dev	Start the Next.js API server
chat-app/	pnpm start	Start the Expo dev server

Learn More

• OpenUI Lang overview — core building blocks: Library, Prompt Generator, Parser, Renderer
• @openuidev/react-lang package

Verify

(cd backend && pnpm verify)
(cd chat-app && pnpm verify)