+ Chat API
+
+ POST /api/chat with {"{ messages: [{ role, content }] }"}
+
+
+ );
+}
diff --git a/examples/openui-react-native/backend/src/library.ts b/examples/openui-react-native/backend/src/library.ts
new file mode 100644
index 000000000..f204bf861
--- /dev/null
+++ b/examples/openui-react-native/backend/src/library.ts
@@ -0,0 +1,123 @@
+/**
+ * Node-compatible library definition — mirrors mobile/library.tsx exactly
+ * (same component names, same Zod schemas, same prop order) but uses null
+ * renderers so the file can run in Node.js without react-native.
+ *
+ * Used only by the @openuidev/cli to generate system-prompt.txt.
+ * The backend API route never imports this file at runtime.
+ */
+import type { PromptOptions } from "@openuidev/react-lang";
+import { createLibrary, defineComponent } from "@openuidev/react-lang";
+import { z } from "zod";
+
+const DataPointSchema = z.object({
+ label: z.string().describe("X-axis or slice label"),
+ value: z.number().describe("Numeric value"),
+});
+
+const TextComponent = defineComponent({
+ name: "Text",
+ description: "Renders a line of text. Use variant to control emphasis.",
+ props: z.object({
+ content: z.string().describe("The text to display"),
+ variant: z
+ .enum(["body", "heading", "caption"])
+ .optional()
+ .describe("Visual style of the text — heading | body | caption"),
+ }),
+ component: () => null,
+});
+
+const BarChartComponent = defineComponent({
+ name: "BarChart",
+ description: "Renders a vertical bar chart for comparing discrete values across categories.",
+ props: z.object({
+ data: z.array(DataPointSchema).describe("Array of { label, value } data points"),
+ title: z.string().optional().describe("Chart title displayed above the bars"),
+ color: z
+ .string()
+ .optional()
+ .describe('Hex color for bars, e.g. "#6366f1". Defaults to indigo.'),
+ }),
+ component: () => null,
+});
+
+const LineChartComponent = defineComponent({
+ name: "LineChart",
+ description: "Renders a line chart to visualise trends across an ordered sequence of values.",
+ props: z.object({
+ data: z.array(DataPointSchema).describe("Ordered array of { label, value } data points"),
+ title: z.string().optional().describe("Chart title"),
+ color: z
+ .string()
+ .optional()
+ .describe('Hex color for the line, e.g. "#10b981". Defaults to emerald.'),
+ }),
+ component: () => null,
+});
+
+const PieChartComponent = defineComponent({
+ name: "PieChart",
+ description: "Renders a pie chart to show how parts contribute to a whole.",
+ props: z.object({
+ data: z
+ .array(
+ z.object({
+ label: z.string().describe("Slice label shown in the legend"),
+ value: z.number().describe("Numeric value for this slice"),
+ color: z.string().optional().describe("Hex color override for this slice"),
+ }),
+ )
+ .describe("Array of { label, value, color? } slices"),
+ title: z.string().optional().describe("Chart title"),
+ }),
+ component: () => null,
+});
+
+const CardComponent = defineComponent({
+ name: "Card",
+ description: "A container card that holds a list of child components.",
+ props: z.object({
+ children: z
+ .array(
+ z.union([
+ TextComponent.ref,
+ BarChartComponent.ref,
+ LineChartComponent.ref,
+ PieChartComponent.ref,
+ ]),
+ )
+ .optional()
+ .describe("Child Text or chart components rendered inside the card"),
+ }),
+ component: () => null,
+});
+
+export const library = createLibrary({
+ components: [
+ TextComponent,
+ BarChartComponent,
+ LineChartComponent,
+ PieChartComponent,
+ CardComponent,
+ ],
+ root: "Card",
+});
+
+export const promptOptions: PromptOptions = {
+ preamble:
+ "You are a helpful assistant. Always respond using OpenUI Lang — never plain markdown or JSON.",
+ additionalRules: [
+ "Always wrap your entire response inside a single root Card.",
+ "Use Text components for all textual content.",
+ 'Use variant="heading" for the main topic, variant="caption" for secondary info, and the default body variant for regular text.',
+ "Use BarChart to compare discrete categories, LineChart for trends over time, and PieChart for part-to-whole proportions.",
+ "Always provide meaningful labels for every data point.",
+ "Only include a chart when the user's query involves data that genuinely benefits from visualisation.",
+ ],
+ examples: [
+ `root = Card([intro, detail])\nintro = Text("It's sunny and 24°C in San Francisco.", "heading")\ndetail = Text("Humidity is at 60%. No rain expected this week.", "body")`,
+ `root = Card([heading, chart])\nheading = Text("Revenue grew 42% over Q1.", "heading")\nchart = LineChart([{label:"Jan",value:80},{label:"Feb",value:95},{label:"Mar",value:114}], "Q1 Revenue ($k)", "#6366f1")`,
+ `root = Card([chart])\nchart = PieChart([{label:"Product A",value:45},{label:"Product B",value:30},{label:"Product C",value:25}], "2025 Market Share")`,
+ ],
+};
diff --git a/examples/openui-react-native/backend/src/system-prompt.txt b/examples/openui-react-native/backend/src/system-prompt.txt
new file mode 100644
index 000000000..5044cea03
--- /dev/null
+++ b/examples/openui-react-native/backend/src/system-prompt.txt
@@ -0,0 +1,66 @@
+You are a helpful assistant. Always respond using OpenUI Lang — never plain markdown or JSON.
+
+## Syntax Rules
+
+1. Each statement is on its own line: `identifier = Expression`
+2. `root` is the entry point — every program must define `root = Card(...)`
+3. Expressions are: strings ("..."), numbers, booleans (true/false), arrays ([...]), objects ({...}), or component calls TypeName(arg1, arg2, ...)
+4. Use references for readability: define `name = ...` on one line, then use `name` later
+5. EVERY variable (except root) MUST be referenced by at least one other variable. Unreferenced variables are silently dropped and will NOT render. Always include defined variables in their parent's children/items array.
+6. Arguments are POSITIONAL (order matters, not names)
+7. Optional arguments can be omitted from the end
+8. No operators, no logic, no variables — only declarations
+9. Strings use double quotes with backslash escaping
+
+## Component Signatures
+
+Arguments marked with ? are optional. Sub-components can be inline or referenced; prefer references for better streaming.
+The `action` prop type accepts: ContinueConversation (sends message to LLM), OpenUrl (navigates to URL), or Custom (app-defined).
+
+Text(content: string, variant?: "body" | "heading" | "caption") — Renders a line of text. Use variant to control emphasis.
+BarChart(data: {label: string, value: number}[], title?: string, color?: string) — Renders a vertical bar chart for comparing discrete values across categories.
+LineChart(data: {label: string, value: number}[], title?: string, color?: string) — Renders a line chart to visualise trends across an ordered sequence of values.
+PieChart(data: {label: string, value: number, color?: string}[], title?: string) — Renders a pie chart to show how parts contribute to a whole.
+Card(children?: (Text | BarChart | LineChart | PieChart)[]) — A container card that holds a list of child components.
+
+## Hoisting & Streaming (CRITICAL)
+
+openui-lang supports hoisting: a reference can be used BEFORE it is defined. The parser resolves all references after the full input is parsed.
+
+During streaming, the output is re-parsed on every chunk. Undefined references are temporarily unresolved and appear once their definitions stream in. This creates a progressive top-down reveal — structure first, then data fills in.
+
+**Recommended statement order for optimal streaming:**
+1. `root = Card(...)` — UI shell appears immediately
+2. Component definitions — fill in as they stream
+3. Data values — leaf content last
+
+Always write the root = Card(...) statement first so the UI shell appears immediately, even before child data has streamed in.
+
+## Examples
+
+root = Card([intro, detail])
+intro = Text("It's sunny and 24°C in San Francisco.", "heading")
+detail = Text("Humidity is at 60%. No rain expected this week.", "body")
+
+root = Card([heading, chart])
+heading = Text("Revenue grew 42% over Q1.", "heading")
+chart = LineChart([{label:"Jan",value:80},{label:"Feb",value:95},{label:"Mar",value:114}], "Q1 Revenue ($k)", "#6366f1")
+
+root = Card([chart])
+chart = PieChart([{label:"Product A",value:45},{label:"Product B",value:30},{label:"Product C",value:25}], "2025 Market Share")
+
+## Important Rules
+- ALWAYS start with root = Card(...)
+- Write statements in TOP-DOWN order: root → components → data (leverages hoisting for progressive streaming)
+- Each statement on its own line
+- No trailing text or explanations — output ONLY openui-lang code
+- When asked about data, generate realistic/plausible data
+- Choose components that best represent the content (tables for comparisons, charts for trends, forms for input, etc.)
+- NEVER define a variable without referencing it from the tree. Every variable must be reachable from root, otherwise it will not render.
+
+- Always wrap your entire response inside a single root Card.
+- Use Text components for all textual content.
+- Use variant="heading" for the main topic, variant="caption" for secondary info, and the default body variant for regular text.
+- Use BarChart to compare discrete categories, LineChart for trends over time, and PieChart for part-to-whole proportions.
+- Always provide meaningful labels for every data point.
+- Only include a chart when the user's query involves data that genuinely benefits from visualisation.
diff --git a/examples/openui-react-native/backend/tsconfig.json b/examples/openui-react-native/backend/tsconfig.json
new file mode 100644
index 000000000..fba2bf379
--- /dev/null
+++ b/examples/openui-react-native/backend/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [{ "name": "next" }],
+ "paths": { "@/*": ["./src/*"] }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}
diff --git a/examples/openui-react-native/chat-app/.gitignore b/examples/openui-react-native/chat-app/.gitignore
new file mode 100644
index 000000000..d914c328f
--- /dev/null
+++ b/examples/openui-react-native/chat-app/.gitignore
@@ -0,0 +1,41 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# generated native folders
+/ios
+/android
diff --git a/examples/openui-react-native/chat-app/App.tsx b/examples/openui-react-native/chat-app/App.tsx
new file mode 100644
index 000000000..1599fb575
--- /dev/null
+++ b/examples/openui-react-native/chat-app/App.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import ChatScreen from "./screens/ChatScreen";
+import ErrorScreen from "./screens/ErrorScreen";
+
+const BACKEND_URL = process.env.EXPO_PUBLIC_BACKEND_URL;
+
+export default function App() {
+ if (!BACKEND_URL) {
+ return (
+