Add React-Email + OpenUI Renderer chat

examples/react-email-chat/.env.example

@@ -0,0 +1 @@
+OPENAI_API_KEY=sk-your-api-key-here

examples/react-email-chat/README.md

@@ -0,0 +1,47 @@
+# React Email Chat
+
+AI-powered email generator built with [OpenUI](https://github.com/anthropics/openui) and [React Email](https://react.email).
+
+Describe an email in natural language, and the AI generates a live email preview with exportable HTML. Iterate on the design through conversation.
+
+## Features
+
+- **Live email preview** — renders in an iframe for accurate email client representation
+- **Copy HTML** — one-click export of email-client-compatible HTML
+- **Iterative design** — follow-up suggestions to refine the email
+- **Multiple email types** — welcome emails, newsletters, order confirmations, password resets, and more
+
+## Getting Started
+
+1. Copy `.env.example` to `.env.local` and add your OpenAI API key:
+
+```bash
+cp .env.example .env.local
+```
+
+2. Install dependencies from the monorepo root:
+
+```bash
+pnpm install
+```
+
+3. Start the development server:
+
+```bash
+pnpm --filter react-email-chat dev
+```
+
+## Email Components
+
+| Component | Description |
+|-----------|-------------|
+| `EmailTemplate` | Root wrapper with subject, preview text, and Copy HTML |
+| `EmailHeading` | Heading (h1-h6) |
+| `EmailText` | Body text paragraph |
+| `EmailButton` | Call-to-action button with link |
+| `EmailImage` | Image with alt text |
+| `EmailDivider` | Horizontal divider |
+| `EmailLink` | Inline hyperlink |
+| `EmailSection` | Content grouping |
+| `EmailColumns` | Multi-column row layout |
+| `EmailColumn` | Single column in a row |

examples/react-email-chat/eslint.config.mjs

@@ -0,0 +1,22 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  globalIgnores([
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+  {
+    files: ["src/openui/**/*.{ts,tsx}"],
+    rules: {
+      "react-hooks/rules-of-hooks": "off",
+    },
+  },
+]);
+
+export default eslintConfig;

examples/react-email-chat/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/react-email-chat/next.config.ts

@@ -0,0 +1,11 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  transpilePackages: [
+    "@openuidev/react-headless",
+    "@openuidev/react-lang",
+    "@openuidev/react-email",
+  ],
+};
+
+export default nextConfig;

examples/react-email-chat/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "react-email-chat-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "generate:prompt": "pnpm --filter @openuidev/cli build && pnpm exec openui generate src/lib/library.ts --out src/generated/system-prompt.txt",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@openuidev/cli": "workspace:*",
+    "@openuidev/react-email": "workspace:*",
+    "@openuidev/react-headless": "workspace:*",
+    "@openuidev/react-lang": "workspace:*",
+    "@react-email/components": "^0.0.41",
+    "@react-email/render": "^1.0.6",
+    "lucide-react": "^0.575.0",
+    "next": "16.1.6",
+    "openai": "^6.22.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

examples/react-email-chat/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;