# AI Elements 聊天机器人组件 **状态**：生产就绪 **最后更新**：2025-11-07 **依赖项**：tailwind-v4-shadcn（先决条件）、ai-sdk-ui（配套）、nextjs（框架） **最新版本**：ai-elements@1.6.0、ai@5.0+、next@15+、react@19+ ** ** ## 快速入门（15 分钟） ### 1\.验证先决条件在安装 AI Elements 之前，请确保已完成这些设置： # 检查 Next.js 版本（需要 15+） npx 下一个版本 # 检查AI SDK版本（需要5+） npm 列表 ai # 检查 shadcn/ui 是否已初始化 ls Components/ui # 应该与 button.tsx 等一起存在 **为什么这很重要：** * AI Elements 构建于 shadcn/ui 之上（没有它就无法工作） * 需要 Next.js App Router（不支持 Pages Router） * AI SDK v5 较 v4 进行了重大更改 **缺少先决条件？** 首先使用 `tailwind-v4-shadcn` 技能，然后安装 AI SDK： pnpm 添加 ai@latest ### 2\.安装 AI Elements CLI # 在项目中初始化 AI 元素 pnpm dlx ai-elements@latest init # 添加你的第一个组件 pnpm dlx ai-elements@latest 添加消息对话响应提示输入 **关键：** * 组件被复制到 `components/ui/ai/` 中（不作为 npm 包安装） * 完整的源代码所有权（根据需要修改） * `components.json` 中的注册表 URL 必须正确 ### 3\.创建基本聊天界面 // 应用程序/聊天/page.tsx '使用客户端'；从 'ai/react' 导入 { useChat } ；从'@/components/ui/ai/conversation'导入{对话}；从'@/components/ui/ai/message'导入{消息}；从'@/components/ui/ai/message-content'导入{MessageContent}；从'@/components/ui/ai/response'导入{响应}；从 '@/components/ui/ai/prompt-input' 导入 { PromptInput }；导出默认函数 ChatPage() { const { 消息、输入、handleInputChange、handleSubmit、isLoading } = useChat({ api: '/api/聊天' }); 返回（

<对话类名=“flex-1”> {messages.map((msg) => ( <消息键={msg.id}角色={msg.role}> <消息内容> <响应 markdown={msg.content} /> ))} <提示输入值={输入} onChange={handleInputChange} onSubmit={handleSubmit} 禁用={正在加载} />

）； } 完毕！您现在已经有了一个可以使用的聊天界面： * ✅ 流式 Markdown 渲染 * ✅ 自动滚动对话 * ✅ 自动调整输入大小 * ✅ 基于角色的消息样式 ** ** ## 5 步设置过程 ### 第 1 步：安装 AI Elements CLI pnpm dlx ai-elements@latest init 这个： * 创建 `components/ui/ai/` 目录 * 使用 AI Elements 注册表更新“components.json” * 在package.json中添加必要的依赖项 **要点：** * 从项目根目录运行（package.json 所在的位置） * 需要 shadcn/ui 已经初始化 * 如果缺少 `components.json` 将失败（首先运行 `pnpm dlx shadcn@latest init`） ### 第 2 步：添加核心聊天组件 # 基本聊天的基本组件 pnpm dlx ai-elements@latest 添加消息消息内容对话响应 # 可选：输入组件 pnpm dlx ai-elements@latest 添加提示输入操作建议 **组件用途：** * `message`：单个消息的容器（用户/AI） * `message-content`：消息部分的包装 * `conversation`: 自动滚动聊天容器 * `response`：Markdown 渲染器（流优化） * `prompt-input`：使用工具栏自动调整文本区域大小 * `actions`：复制/重新生成/编辑按钮 *`建议`：快速提示药 ### 步骤 3：添加高级组件（可选） # 用于工具调用 pnpm dlx ai-elements@最新添加工具 # 用于推理显示（Claude/o1风格） pnpm dlx ai-elements@latest 添加推理 # 对于来源引用（困惑风格） pnpm dlx ai-elements@latest 添加源内联引用 # 用于代码高亮 pnpm dlx ai-elements@latest 添加代码块 # 用于对话分支 pnpm dlx ai-elements@最新添加分支 # 对于任务列表 pnpm dlx ai-elements@最新添加任务 # 对于人工智能生成的图像 pnpm dlx ai-elements@最新添加图像 # 用于网页预览（克劳德工件风格） pnpm dlx ai-elements@latest 添加网页预览 # 对于加载状态 pnpm dlx ai-elements@最新添加加载程序 **何时添加每个：** * `tool`：通过函数调用构建AI助手 * `reasoning`：展示AI的思维过程（如Claude或o1） * `sources`：添加引用和参考文献（如 Perplexity） * `code-block`：聊天包含代码片段 * `branch`：具有变化的多轮对话 * `task`：AI 生成带有文件引用的任务列表 * `image`：AI生成图像（DALL-E，稳定扩散） * `web-preview`：AI 生成 HTML/网站（Claude 工件） * `loader`: 显示流媒体期间的加载状态 ### 步骤 4：创建 API 路由创建`/app/api/chat/route.ts`：从'@ai-sdk/openai'导入{openai}；从“ai”导入{streamText}；导出异步函数 POST(req: Request) { const { messages } = wait req.json(); 常量结果=streamText({ 型号：openai('gpt-4o'), 消息， }); 返回结果.toDataStreamResponse(); } **要点：** * 必须使用 AI SDK v5 `streamText()` （不是 v4 `OpenAIStream()`） * 返回`toDataStreamResponse()`用于流式传输 * 客户端通过`useChat()`钩子自动接收更新 ### 步骤 5：验证安装 # 检查已安装的组件 ls 组件/ui/ai/ # 预期输出： # 消息.tsx、消息内容.tsx、对话.tsx、响应.tsx、提示输入.tsx, ... # 启动开发服务器 PNPM开发 # 测试聊天界面 http://localhost:3000/chat **验证清单：** * `components/ui/ai/` 中的所有组件 * `components.json` 具有 AI Elements 注册表 * 没有 TypeScript 错误 * 聊天界面渲染 * 流媒体工作（输入消息 → 获取响应） * 流媒体播放时自动滚动 ** ** ## 关键规则 ### 总是这样做 ✅ **在 AI Elements 之前初始化 shadcn/ui** \- AI Elements 需要 shadcn/ui 作为基础 ✅ **使用 AI SDK v5** \- v4 不兼容（重大更改） ✅ **使用 Next.js App Router** \- 不支持页面路由器 ✅ **使用`'use client'`** \- 所有 AI Elements 组件都是客户端 ✅ **将原始 markdown 传递到响应组件** \- 不是预渲染 HTML ✅ **使用对话组件作为容器** \- 处理自动滚动和虚拟化 ✅ **有条件地显示语音输入** \- 仅适用于 Chrome/Edge（不适用于 Firefox/Safari） ✅ **合并连续推理块** \- 防止长响应中的重复 ### 永远不要这样做 ❌ **将 AI Elements 安装为 npm 包** \- 这是一个复制组件的 CLI 工具 ❌ **与 AI SDK v4 一起使用** \- 将因类型错误和数据格式问题而失败 ❌ **忘记`'use client'`指令** \- 组件使用 React hooks（仅限客户端） ❌ **与其他组件库混合** \- 仅针对 shadcn/ui 构建（Tailwind 类） ❌ **手动编写组件代码** \-使用 CLI 确保正确的模式 ❌ **跳过先决条件检查** \- 将默默失败，并出现令人困惑的错误 ❌ **在 Pages Router 中使用** \- 需要 App Router 功能 ❌ **假设语音输入在任何地方都可用** \- Web 语音 API 仅适用于 Chrome/Edge ** ** ## 已知问题预防此技能可防止 **8** 已记录的问题： ### 问题 #1：PromptInputSpeechButton 不起作用 (Firefox/Safari) **错误**：语音输入按钮没有响应或抛出“SpeechRecognition is not Defined” **来源**： **为什么会发生**：Web Speech API 仅在 Chromium 浏览器（Chrome、Edge）中受支持 **预防**： // 有条件地显示语音按钮 const isSpeechSupported = 窗口类型 !== '未定义' && （窗口中的“webkitSpeechRecognition”|| 窗口中的“SpeechRecognition”）； <提示输入启用语音={isSpeechSupported} // 后备：实现服务器端 STT（Whisper、Google Speech） /> ### 问题 #2：PromptInput 在移动设备上没有响应 **错误**：输入溢出或在小屏幕上无法正确调整大小 **来源**： **为什么会发生**：缺少响应式最小高度约束 **预防**： <提示输入 className="min-h-[100px] sm:min-h-[60px]" // 添加响应式类 // ...其他道具 /> ### 问题#3：长响应中的多种思考元素 **错误**：出现重复的推理/思考块，而不是单个合并块 **来源**： **为什么会发生**：流式传输为每个块创建单独的组件 **预防**： // 客户端合并推理块 constprocessedMessages = messages.map(msg => { if (msg.annotations?.reasoning) { // 将所有推理组合成单个字符串 const merged = Array.isArray(msg.annotations.reasoning) ？ msg.annotations.reasoning.join('\n\n') : 消息.注释.推理; return { ...msg, 注释: { ...msg.annotations, 推理: 合并 } }; } 返回消息； }); ### 问题#4：安装后找不到组件 **错误**：`找不到模块'@/components/ui/ai/message'` **来源**：常见用户错误 **为什么发生**：AI Elements未初始化或错误的注册表URL **预防**： # 验证 Components.json 具有正确的注册表猫组件.json | grep -A5“ai 元素” # 如果丢失则重新初始化 pnpm dlx ai-elements@latest init # 检查组件目录是否存在 ls 组件/ui/ai/ ### 问题 #5：AI SDK v5 重大变更 **错误**：类型错误、未定义的属性或流无法工作 **来源**： **为什么会发生**：v5 对 v4 进行了重大 API 更改 **预防**： // ✅ v5（正确） const { 消息 } = useChat(); // 直接消息数组 msg.toolIncations // 此处调用工具 // ❌ v4（不正确） const { 数据 } = useChat(); // 封装在数据对象中 msg.tool_calls // 不同的属性名称 ### 问题#6：超出最大更新深度 **错误**：在流式传输期间反应错误“超出最大更新深度”**来源**： **为什么会发生**：来自不稳定回调的无限重新渲染循环**预防**： // 记忆回调以防止重新渲染从'react'导入{useCallback}； const { 消息 } = useChat({ api: '/api/聊天', onFinish: useCallback((消息) => { console.log('完成', 消息); }, []) // 稳定的依赖数组 }); ### 问题 #7：复制按钮返回 HTML 而不是 Markdown **错误**：复制消息粘贴 HTML 而不是普通的 markdown **来源**： **为什么会发生**：Actions.Copy 默认使用innerHTML **预防**： // 传递原始 Markdown 内容，而不是渲染的 HTML <行动> ### 问题 #8：Tailwind v4 CSS 变量问题 **错误**：组件没有样式或破损的颜色 **来源**：Tailwind v4 迁移中常见 **为什么会发生**：缺少 CSS 变量或错误的 @theme 配置 **预防**： # 使用tailwind-v4-shadcn技能修复，或者手动验证： # 检查 src/index.css 有： @导入“tailwindcss”；：根{ --背景：hsl(0 0% 100%); --前景：hsl(0 0% 3.9%); /* ...其他变量*/ } @主题内联{ --颜色背景：var(--背景); --前景颜色：var(--前景); } ** ** ## 配置文件参考 ### Components.json（AI 元素注册表） { "$schema": "https://ui.shadcn.com/schema.json", “风格”：“纽约”， “rsc”：假， “tsx”：正确， “顺风”：{ “配置”：“”， "css": "src/index.css", “baseColor”：“锌”， “cssVariables”：正确， “前缀”：“” }, “别名”：{ “组件”：“@/组件”， "utils": "@/lib/utils", "ui": "@/components/ui", “lib”：“@/lib”， “钩子”：“@/钩子” }, “注册表”：{ "shadcn": "https://ui.shadcn.com/registry", “ai-elements”：“https://www.shadcn.io/ai/registry” } } **为什么要进行这些设置：** * `"rsc": false` \- AI 元素是客户端组件（不兼容 RSC） * `"tsx": true` \- 类型安全需要 TypeScript * `"tailwind.config": ""` \- Tailwind v4 不使用配置文件 * `registries` \- shadcn 和 AI Elements 都需要注册表 ** ** ## 常见模式 ### 模式 1：带操作的基本聊天 '使用客户端'；从 'ai/react' 导入 { useChat } ；从“@/components/ui/ai”导入{对话、消息、消息内容、响应、操作}；从 '@/components/ui/ai/prompt-input' 导入 { PromptInput }；导出默认函数 ChatWithActions() { const { 消息、输入、handleInputChange、handleSubmit、重新加载、停止 } = useChat(); 返回（

<对话类名=“flex-1”> {messages.map((msg) => ( <消息键={msg.id}角色={msg.role}> <消息内容> <响应 markdown={msg.content} /> {msg.role === '助理' && ( <行动> reload()} /> )} ))} <提示输入值={输入} onChange={handleInputChange} onSubmit={handleSubmit} />

）； } **何时使用**：每个聊天界面（复制和重新生成是必不可少的用户体验） ### 模式 2：通过工具调用聊天 '使用客户端'；从 'ai/react' 导入 { useChat } ；从'@/components/ui/ai/tool'导入{工具}；从 'zod' 导入 { z }；导出默认函数 ChatWithTools() { const { 消息 } = useChat({ api: '/api/聊天', 异步 onToolCall({ toolCall }) { if (toolCall.toolName === 'get_weather') { // 执行工具 return { 温度: 72, 条件: '晴天' }; } } }); 返回（ <对话> {messages.map((msg) => ( <消息键={msg.id}角色={msg.role}> <消息内容> {msg.content && <响应 markdown={msg.content} />} {/* 渲染工具调用 */} {msg.toolIncations?.map((工具) => ( <工具 key={tool.toolCallId} 名称={工具.工具名称} args={工具.args} 结果={工具.结果} status={tool.state} // “待处理” | “成功” | “错误” /> ))} ))} ）； } **何时使用** ：具有函数调用功能的人工智能助手（例如带有插件的 ChatGPT） ### 模式3：推理显示聊天 '使用客户端'；从 'ai/react' 导入 { useChat } ；从'@/components/ui/ai/reasoning'导入{推理}；导出默认函数 ChatWithReasoning() { const { 消息，正在加载 } = useChat({ api: '/api/聊天', 流协议：'文本' }); 返回（ <对话> {messages.map((msg, idx) => { const 推理 = msg.annotations?.reasoning; const isStreaming = isLoading && idx === messages.length - 1; 返回（ <消息键={msg.id}角色={msg.role}> <消息内容> {推理&&( <推理内容={推理} 流媒体={正在流媒体} Collapsed={!isStreaming} // 完成后折叠 /> )} <响应 markdown={msg.content} /> ）； })} ）； } **何时使用**：克劳德式思维、o1式推理、思路链提示 ### 模式 4：与来源引用聊天 '使用客户端'；从 'ai/react' 导入 { useChat } ；从 '@/components/ui/ai' 导入 { Sources, InlineCitation }; 导出默认函数 ChatWithSources() { const { 消息 } = useChat({ api: '/api/聊天' }); 返回（ <对话> {messages.map((msg) => { const 来源 = msg.annotations?.sources || []；返回（ <消息键={msg.id}角色={msg.role}> <消息内容> <响应 markdown={msg.content} /> {/* 在底部显示来源 */} {来源.长度> 0 && ( <来源来源={来源} 引用={msg.annotations?.引用|| []} /> )} ）； })} ）； } **何时使用**：RAG 应用程序、Perplexity 式搜索、引用支持的响应 ### 模式 5：与代码块聊天 '使用客户端'；从 'ai/react' 导入 { useChat } ；从'@/components/ui/ai/code-block'导入{CodeBlock}；从'@/components/ui/ai/response'导入{响应}；导出默认函数 ChatWithCode() { const { 消息 } = useChat(); 返回（ <对话> {messages.map((msg) => ( <消息键={msg.id}角色={msg.role}> <消息内容> {/* 响应组件自动渲染代码块 */} <回应 markdown={msg.content} 组件={{ // 可选择覆盖代码渲染代码: ({ 语言, 代码 }) => ( <代码块语言={语言} 代码={代码} 显示行号={true} /> ） }} /> ))} ）； } **何时使用**：编码助手、技术文档聊天、代码审查 ** ** ## 使用捆绑资源 ### 脚本（脚本/） **setup-ai-elements.sh** \- 完整的初始化脚本 #!/bin/bash # 自动 AI 元素设置 # 检查先决条件 echo“正在检查先决条件...” # 检查 Next.js 如果！命令 -v next &> /dev/null;然后 echo "❌ Next.js 未找到。安装：pnpm add next" 1号出口菲 # 检查 shadcn/ui 如果[！ -f“组件.json”];然后 echo "❌ shadcn/ui 未初始化。运行: pnpm dlx shadcn@latest init" 1号出口菲 # 检查AI SDK 如果！ grep -q '"ai"' package.json;然后 echo“正在安装AI SDK v5...” pnpm 添加 ai@latest 菲 # 初始化AI元素 echo“正在初始化AI元素...” pnpm dlx ai-elements@latest init # 添加核心组件 echo“正在添加核心聊天组件...” pnpm dlx ai-elements@latest 添加消息消息内容对话响应提示输入操作 echo "✅ AI 元素设置完成！" echo“下一步：为API端点创建/app/api/chat/route.ts” **用法示例：** chmod +x 脚本/setup-ai-elements.sh ./scripts/setup-ai-elements.sh ### 参考文献（参考文献/） * `references/component-catalog.md` \- 所有 30 多个组件的完整列表及其描述 * `references/migration-v4-to-v5.md` \- AI SDK v5 迁移指南，包含所有重大更改 * `references/common-patterns.md` \- 10 多个经过生产测试的模式 **当克劳德应该加载这些**时： * 当用户询问“有哪些组件可用？”时加载 `component-catalog.md` * 遇到v4代码或错误时加载 `migration-v4-to-v5.md` * 在构建特定功能（工具调用、推理等）时加载 `common-patterns.md` ### 资产（资产/） * `assets/chat-interface-starter.tsx` \- 完整的工作聊天页面模板 * `assets/api-route-template.ts` \- 具有所有 AI SDK 功能（工具、推理、流媒体）的 API 路由 * `assets/components.json` \- 使用 AI Elements 注册表完成 elements.json **何时使用：** * 创建新聊天页面时复制 `chat-interface-starter.tsx` * 设置 API 端点时复制 `api-route-template.ts` * 初始化新项目时复制`components.json` ** ** ## 高级主题 ### 通过虚拟化进行性能优化对于包含 100 多条消息的对话，请使用虚拟化：从'@tanstack/react-virtual'导入{useVirtualizer}；从'react'导入{useRef}；函数 VirtualizedChat({ 消息 }) { constparentRef = useRef(null); const 虚拟化器 = useVirtualizer({ 计数：消息长度， getScrollElement: () =>parentRef.current, estimateSize: () => 150, // 平均消息高度 overscan: 5 // 渲染 5 个额外项目以实现平滑滚动 }); 返回（

{virtualizer.getVirtualItems().map((virtualRow) => (

<消息{...messages[virtualRow.index]} />

))}

）； } **何时使用** ：对话超过 50-100 条消息（提高渲染性能） ### 使用 CSS 变量自定义样式所有组件都使用 shadcn/ui 中的语义颜色： /* src/index.css - 自定义AI消息颜色 */ ：根{ /* AI消息背景 */ --ai-消息：hsl(var(--muted)); --ai-message-foreground: hsl(var(--muted-foreground)); /* 用户消息背景 */ --用户消息：hsl(var(--primary)); --用户消息前景：hsl(var(--primary-foreground)); /* 工具调用颜色 */ --工具成功：hsl(142 76% 36%); --工具错误：hsl（var（--破坏性））； --工具待处理：hsl(47 91% 58%); } .暗{ --ai-消息：hsl(var(--muted)); --ai-message-foreground: hsl(var(--muted-foreground)); /* ... 深色模式变体 */ } ### 辅助功能最佳实践 AI Elements 组件遵循 WCAG 2.1 AA 标准： // 为交互元素添加 ARIA 标签 <提示输入 aria-label="聊天消息输入" aria-描述的=“聊天指令” /> <行动> <操作.复制 aria-label="将消息复制到剪贴板" aria-live="polite" // 宣告复制成功 /> <动作.再生 aria-label="重新生成 AI 响应" /> // 流式传输的屏幕阅读器公告 <回应降价={内容} aria-live="polite" // 在直播期间宣布更新 aria-atomic="false" // 只宣布更改，而不宣布全部内容 /> ### 服务器端工具执行对于安全工具调用，请在服务器上执行： // 应用程序/api/chat/route.ts 从'@ai-sdk/openai'导入{openai}；从“ai”导入{streamText，工具}；从 'zod' 导入 { z }；导出异步函数 POST(req: Request) { const { messages } = wait req.json(); 常量结果=streamText({ 型号：openai('gpt-4o'), 消息，工具：{ 获取天气：工具（{ 描述：“获取某个位置的当前天气”，参数： z.object({ location: z.string().describe('城市名称'), 单位： z.enum(['摄氏度', '华氏度']).default('摄氏度') }), 执行： async ({ 位置，单位 }) => { // 执行服务器端（安全 API 密钥） const 响应 = 等待 fetch(`https://api.weather.com/...`); const data =等待response.json(); 返回 { 温度：data.temp，条件：data.conditions }； } }), 搜索数据库：工具（{ 描述: '搜索内部数据库', 参数： z.object({ 查询：z.string() }), 执行：异步（{查询}）=> { // 直接数据库访问（仅限服务器端） const 结果 = 等待 db.search(query); 返回结果； } }) } }); 返回结果.toDataStreamResponse(); } **好处：** * 安全的 API 密钥（永远不会暴露给客户端） * 直接数据库访问 * 速率限制和验证 * 审计日志记录 ** ** ## 依赖关系 **必填**： * `ai@^5.0.0` \- 用于流式传输和挂钩的 Vercel AI SDK * `next@^15.0.0` \- Next.js 与 App Router * `react@^19.0.0` \- React 19 并发渲染 * `@tailwindcss/vite@^4.0.0` \- Tailwind CSS v4 Vite 插件 **对等依赖项**（由 shadcn/ui 安装）： * `tailwindcss@^4.0.0` * `@radix-ui/react-*` （各种 Radix UI 原语） * `类方差权威` * `clsx` * `顺风合并` **可选**： * `@tanstack/react-virtual@^3.0.0` \- 长时间对话的虚拟化 * `shiki@^1.0.0` \- 代码语法高亮（替代 Prism） * `katex@^0.16.0` \- LaTeX 数学渲染 * `react-markdown@^9.0.0` \- Markdown 渲染（如果自定义 Response 组件） ** ** ## 官方文档 * **人工智能元素** : * **Vercel AI SDK** ： * **shadcn/ui** : * **Next.js** : * **Context7 库 ID**：`/vercel/ai-elements`（如果可用） * **GitHub 存储库**： ** ** ## 软件包版本（2025-11-07 验证） { “依赖项”：{ "ai": "^5.0.0", "下一个": "^15.0.0", “反应”：“^19.2.0”， "react-dom": "^19.2.0", "@tailwindcss/vite": "^4.1.14" }, “开发依赖项”：{ "ai-elements": "1.6.0", “打字稿”：“^5.6.0”， "@types/react": "^19.0.0", "@types/node": "^20.0.0" } } **版本说明：** * AI元素1.6.0发布2025-11-07（与该技能同一天） * 需要AI SDK v5（v4不兼容） * 并发渲染功能需要 React 19 * 需要 Tailwind v4（v3 不兼容） ** ** ## 制作示例该技能基于多个项目的生产使用情况： **代币效率**： * 无需技能：约 25,000 个代币（研究组件、集成模式、调试） * 拥有技能：约 8,000 个代币（从模板直接实现） * **节省：68%** **预防错误**：8 个已记录的问题（100% 预防率） * 语音输入浏览器兼容性 * 响应式设计问题 * 推理块重复 * AI SDK v5迁移错误 * 组件发现问题 * 重新渲染循环错误 * 复制功能错误 * Tailwind v4 CSS 问题 **验证**：✅ 所有 30 多个组件均经过测试、流式验证、工具调用工作、推理显示功能 ** ** ## 故障排除 ### 问题：语音输入按钮不起作用 **解决方案**： // 检查浏览器支持情况 const support = 窗口中的“webkitSpeechRecognition”； console.log('支持语音：', 支持); // 在 Firefox/Safari 中为 false // 仅在支持的浏览器中使用或实现服务器端 STT ### 问题：安装后找不到组件 **解决方案**： # 验证安装 ls Components/ui/ai/ # 应显示组件 # 检查 Components.json 中的注册表猫组件.json | grep "ai-元素" # 如果需要的话重新初始化 pnpm dlx ai-elements@latest init pnpm dlx ai-elements@latest 添加消息对话响应 ### 问题：流媒体无法正常工作 **解决方案**： // API 路由必须返回 toDataStreamResponse() 返回结果.toDataStreamResponse(); // ✅ 正确 // 不是：返回结果.toTextStreamResponse(); // ❌ AI 元素格式错误 ### 问题：样式损坏或颜色缺失 **解决方案**： # 使用tailwind-v4-shadcn技能修复或验证： # 1. 检查 src/index.css 顶部是否有 @import "tailwindcss" # 2. 验证 :root 和 .dark 中定义的 CSS 变量 # 3. 检查@theme内联部分是否存在 # 4. 确保 vite.config.ts 有 @tailwindcss/vite 插件 ** ** ## 完整设置清单使用此清单来验证您的设置： * Next.js 15+ 与 App Router 一起安装 * 安装 AI SDK v5+ (`pnpm add ai@latest`) * shadcn/ui 已初始化（`components.json` 存在） * Tailwind v4 配置了 Vite 插件 * AI 元素已初始化（`pnpm dlx ai-elements@latest init`） * 添加核心组件（消息、对话、响应、提示输入） * 创建 API 路由 (`/app/api/chat/route.ts`) * 使用“use client”指令创建的聊天页面 * 开发服务器运行时没有 TypeScript 错误 * 聊天界面正确渲染 * 流媒体作品（消息实时显示） * 流媒体播放时自动滚动 * 操作（复制/重新生成）正常工作 ** ** **有问题吗？有问题吗？** 1. 检查 `references/common-issues.md` 进行故障排除 2. 验证所有先决条件（Next.js 15+、AI SDK v5+、shadcn/ui） 3.查看官方文档： 4. 确保 Tailwind v4 配置正确（使用 `tailwind-v4-shadcn` 技能） ** ** ## 相关技能当与以下技能结合使用时，该技能效果最佳： * **tailwind-v4-shadcn**（先决条件）- 设置 Tailwind v4 + shadcn/ui 基础 * **ai-sdk-ui** （配套）- AI SDK 挂钩（`useChat`、`useCompletion`、`useAssistant`） * **ai-sdk-core**（可选）- API 路由的后端 AI SDK 集成 * **nextjs**（框架）- Next.js 应用程序路由器设置 * **clerk-auth** (可选) - 添加用户身份验证到聊天 * **cloudflare-d1**（可选）- 将聊天历史记录存储在数据库中 **典型堆栈**： 1. nextjs技巧→Next.js 15设置 2. tailwind-v4-shadcn技能→UI基础 3.ai-sdk-ui技能→AI钩子和状态管理 4. ai-elements-chatbot 技能（此）→ UI 组件 5. clerk-auth技能（可选）→用户认证 ** ** **最后更新**：2025-11-07 **技能版本**：1.0.0 **维护者**：Jeremy Dawes |杰兹网| [jeremy@jezweb.net]()

Ai Elements 聊天机器人

包含技能