openui-forge-vercellisted

# OpenUI Forge — Vercel AI SDK Build generative UI apps with OpenUI + Vercel AI SDK. Native streaming with `streamText` and `toUIMessageStreamResponse()`. ## Activation Triggers - "openui vercel", "openui vercel ai", "openui ai sdk" - "generative ui vercel", "vercel ai streaming ui" - "useChat openui", "streamText openui" ## Prerequisites - Node.js >= 22 (24 LTS recommended), React >= 18.3.1 (19+ recommended) - `OPENAI_API_KEY` environment variable set - Next.js project (App Router) ## Quick Start 1. Install dependencies: ```bash npm install @openuidev/react-ui @openuidev/react-lang lucide-react zod ai @ai-sdk/openai @ai-sdk/react ``` Pin to the AI SDK v6 line: `ai@^6`, `@ai-sdk/openai@^3`, `@ai-sdk/react@^3`. 2. Add the CSS import to `app/layout.tsx`: ```tsx import "@openuidev/react-ui/components.css"; ``` 3. Create the API route and frontend page below 4. Run `npm run dev` and test ## Full Code ### Backend: `app/api/chat/route.ts` ```typescript import { openuiChatLibrary } from "@openuidev/react-ui/genui-lib"; import { convertToModelMessages, streamText } from "ai"; import { openai } from "@ai-sdk/openai"; export async function POST(req: Request) { const { messages } = await req.json(); const systemPrompt = openuiChatLibrary.prompt({ preamble: "You are a helpful assistant that generates interactive UIs.", additionalRules: ["Always use Stack as root when combining multiple components."], }); // AI SDK v6: convert the UI message stream into model