SuperAPI AI 工具集

ai-elements-chatbot

智能体与模型

查看项目

更新于 10-15 22:39

技能介绍

用途:为对话式 AI 界面提供生产级 UI 组件,基于 shadcn/ui 构建,适合搭建 ChatGPT 风格聊天界面。

主要能力:提供 message、message-content、conversation、response、prompt-input、actions、suggestion 等核心组件,以及 tool(工具调用)、reasoning(推理展示)、sources 与 inline-citation(引用来源)、code-block(代码高亮)、branch(对话分支)、task(任务列表)、image(AI 生成图片)、web-preview(网页预览)、loader(加载状态)等可选组件。具备流式 Markdown 渲染、自动滚动、输入框自动缩放、按角色区分消息样式。

使用方式:先确认前置条件,Next.js 需 15+,AI SDK 需 5+,并已初始化 shadcn/ui。随后运行 pnpm dlx ai-elements@latest init 初始化,再用 pnpm dlx ai-elements@latest add message conversation response prompt-input 添加组件。组件会被复制到 components/ui/ai/ 目录而非作为 npm 包安装,源码归项目所有可自行修改。API 路由需使用 AI SDK v5 的 streamText() 并返回 toDataStreamResponse()。

适用场景:构建带函数调用的 AI 助手、展示思考过程、添加引用来源、含代码片段的对话、多轮分支对话、AI 生成图片或网页预览等。

限制:必须使用 Next.js App Router,不支持 Pages Router;必须使用 AI SDK v5,v4 不兼容;组件均为客户端组件,需加 'use client';仅适配 shadcn/ui 与 Tailwind 类名,不可与其他组件库混用;语音输入仅 Chrome/Edge 支持,Firefox/Safari 需条件渲染或改用服务端语音识别;移动端需自行添加响应式最小高度;长回复中的推理块需客户端合并以避免重复;复制按钮应传入原始 Markdown 而非渲染后 HTML;Tailwind v4 需正确配置 CSS 变量。具体收费与价格信息暂未提供。