openui-forge-anthropiclisted

# OpenUI Forge — Anthropic Build generative UI apps with OpenUI + Anthropic Claude. Converts Anthropic streaming events to OpenAI-compatible NDJSON. ## Activation Triggers - "openui anthropic", "openui claude", "openui sonnet" - "generative ui claude", "claude streaming ui" ## Prerequisites - Node.js >= 22 (24 LTS recommended), React >= 18.3.1 (19+ recommended) - `ANTHROPIC_API_KEY` environment variable set - Next.js project (App Router recommended) ## Quick Start 1. Install dependencies: ```bash npm install @openuidev/react-ui @openuidev/react-headless @openuidev/react-lang lucide-react zod @anthropic-ai/sdk ``` 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` The backend streams from Anthropic and converts each event into OpenAI-compatible SSE chunks that `openAIAdapter()` expects (`data: {json}\n\n` lines, terminated by `data: [DONE]`). ```typescript import { openuiChatLibrary } from "@openuidev/react-ui/genui-lib"; import Anthropic from "@anthropic-ai/sdk"; const client = new Anthropic(); 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."],