用途:在 Next.js(App Router)项目中结合 OpenUI 与 Vercel AI SDK,构建由大模型动态生成交互界面的生成式 UI 应用,实现原生流式渲染。
主要能力:后端使用 ai 包的 streamText 生成响应,通过 result.toUIMessageStreamResponse() 返回 UI 消息流;前端使用 @ai-sdk/react 的 useChat 驱动对话,并用 @openuidev/react-lang 的 Renderer 逐条渲染助手消息;支持工具调用(tool、zod、inputSchema)与多步执行(stopWhen: stepCountIs(n));可通过 defineComponent 定义自定义组件;支持运行时用 openuiChatLibrary.prompt() 生成系统提示,或通过 CLI 离线生成: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 项目。安装命令:npm install @openuidev/react-ui @openuidev/react-lang lucide-react zod ai @ai-sdk/openai @ai-sdk/react。建议使用 AI SDK v6:ai@^6、@ai-sdk/openai@^3、@ai-sdk/react@^3。需在 app/layout.tsx 中导入 "@openuidev/react-ui/components.css"。
关键用法要点:后端路由先用 convertToModelMessages(messages) 转换消息,再将 modelMessages 传入 streamText;前端 Renderer 必须传 library={openuiChatLibrary}(不是 componentLibrary),response 传拼接后的文本片段;isStreaming 标记进行中的消息;onAction 处理内置动作。工具需用 inputSchema,并用 stopWhen 替代已移除的 maxSteps。
适用场景:Next.js + Vercel AI SDK 环境下需要模型实时生成 UI、带工具取数后渲染界面的对话式应用。限制:资料未提供收费、价格与部署平台等具体信息。