用途:用 OpenUI 与 OpenAI SDK 构建生成式 UI(generative UI)应用,前端流式渲染可交互界面。激活触发词包括“openui openai”“openui gpt”“openui chatgpt”“generative ui openai”“openai streaming ui”。
主要能力:单一后端与适配器即开即用,内置流式输出;通过 OPENAI_BASE_URL 与 OPENAI_MODEL 无需改代码即可路由到 OpenAI 兼容提供商(如 Gemini、OpenRouter、xAI、DeepSeek、Groq、Mistral、Together、Fireworks 及本地 Ollama、LM Studio)。默认模型为 gpt-5.5。可用 defineComponent 配合 zod 定义自定义组件,并以 createLibrary 组装组件库;也可用 npx @openuidev/cli generate ./src/lib/library.ts --out src/generated/system-prompt.txt 生成静态系统提示词。
使用方式:需 Node.js >= 22(推荐 24 LTS)、React >= 18.3.1(推荐 19+)、设置 OPENAI_API_KEY,Next.js 项目(推荐 App Router)。安装命令为 npm install @openuidev/react-ui @openuidev/react-headless @openuidev/react-lang lucide-react zod openai。在根布局导入 import "@openuidev/react-ui/components.css";后端路由返回 response.toReadableStream() 并设置 Content-Type 为 application/x-ndjson(NDJSON,非 SSE);前端使用 streamProtocol={openAIReadableStreamAdapter()} 与 openAIMessageFormat,并向 FullScreen 传入 componentLibrary={openuiChatLibrary}。
限制:Base URL 路由仅覆盖聊天补全,不等于完整 OpenAI API 兼容;模型 id 会变动,需查看各提供商当前目录。Azure OpenAI 不能直接替换,需用 AzureOpenAI 客户端、将 OPENAI_MODEL 设为部署名,旧数据面路径还需 ?api-version= 查询参数。常见错误包括缺少 API 密钥导致 401、未调用 toReadableStream() 导致流挂起、未传组件库导致组件显示为文本、未导入 CSS 导致空白、属性名写错被静默忽略等。