用途:在 Next.js 项目中结合 OpenUI 与 Anthropic Claude 构建生成式 UI(generative UI)应用。后端从 Claude 流式输出,并转换成前端 openAIAdapter() 期望的 OpenAI 兼容 SSE 分块格式,从而实现流式渲染界面。
主要能力:提供后端 API 路由示例(app/api/chat/route.ts),把 Anthropic 的 content_block_delta 文本增量转换为 data: {json}\n\n 的 SSE 行,并以 data: [DONE] 结束;提供前端页面示例(app/chat/page.tsx),通过 FullScreen 组件配合 openuiChatLibrary、openAIAdapter()、openAIMessageFormat 和 apiUrl 完成接入;支持用 defineComponent 与 zod 定义自定义组件,以及用 openuiChatLibrary.prompt() 生成系统提示词,或用 CLI 生成。
前置条件:Node.js >= 22(推荐 24 LTS),React >= 18.3.1(推荐 19+),设置 ANTHROPIC_API_KEY 环境变量,建议 Next.js(App Router)。
安装:npm install @openuidev/react-ui @openuidev/react-headless @openuidev/react-lang lucide-react zod @anthropic-ai/sdk,并在 app/layout.tsx 中加入 import "@openuidev/react-ui/components.css";。
用法要点:运行 npm run dev 测试;后端需显式设置 max_tokens(如 4096);前端必须使用 streamProtocol={openAIAdapter()},而 openAIReadableStreamAdapter() 用于 NDJSON(无 data: 前缀),在此 SSE 场景下会静默无输出。CLI 生成提示词命令:npx @openuidev/cli generate ./src/lib/library.ts --out src/generated/system-prompt.txt。
限制与常见错误:401 表示 API Key 缺失或无效;流挂起多因缺少 [DONE] 哨兵或未调用 controller.close();输出乱码多因未包裹为 data: ... SSE 格式;组件被当作文本渲染多因未向 FullScreen 传 componentLibrary;无渲染且无报错通常是误用了 NDJSON 适配器。模型默认 claude-sonnet-4-6,可用 ANTHROPIC_MODEL 覆盖。具体价格、平台支持与效果资料暂未提供。