SuperAPI AI 工具集

ai-elements

前端与建站

查看项目

更新于 10-16 07:27

技能介绍

用途:AI Elements 是构建在 shadcn/ui 之上的组件库与自定义注册表,面向 AI 原生应用,提供 40+ 生产就绪的 React 组件,覆盖聊天界面、消息渲染、工具调用、推理展示、语音与代码相关场景。文档建议使用前先访问 https://ai-sdk.dev/elements 与 https://ai-sdk.dev/elements/components 获取正确的组件名、props 与安装命令。

主要能力:Conversation 提供自动滚动与回到底部按钮;Message 自动渲染各种消息部件(文本、工具调用、推理、图片),无需手动判断类型;MessageResponse 是通用 Markdown 渲染器,处理流式更新、代码高亮、数学、mermaid 与 CJK;还有 code-block、reasoning、tool、prompt-input、model-selector 等。此外包含语音组件(persona、speech-input、transcription、audio-player、mic-selector、voice-selector)和代码组件(terminal、file-tree、stack-trace、test-results、sandbox、snippet、commit、environment-variables、package-info、schema-display)。组件与 AI SDK v6 的 UIMessage 格式集成,配合 useChat 使用。

使用方式:按需安装组件,例如 npx ai-elements@latest add message,或用 shadcn CLI:npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/message.json。组件默认安装到 src/components/ai-elements/,源码完全可定制。服务端需使用 toUIMessageStreamResponse() 返回流。

限制:仅支持 React,不适用于 Vue、Svelte 等;需要 shadcn/ui 基础依赖;不要安装 all.json;AI Elements 文件不应添加 @ts-nocheck,类型错误通常源于版本不匹配。