AI Elements 是一套面向 AI 应用的生产级聊天 UI 组件,构建在 shadcn/ui 之上,包含 30 多个组件(如 Message、Conversation、Response 等),可与 Vercel AI SDK v5 配合,支持流式响应、工具/函数调用展示和推理过程可视化。
主要能力:核心组件包括 Message、Conversation、Response、PromptInput;内容类组件有 CodeBlock、Markdown、Tool、Reasoning;操作类有 Actions、CopyButton、ShareButton、RegenerateButton;高级组件包括 BranchNavigation、ThinkingDisplay、WebPreview。
使用方式:需先满足前置条件——Next.js 15+(App Router)、已初始化 shadcn/ui、Tailwind v4、AI SDK v5+。初始化命令为 pnpm dlx ai-elements@latest init,添加组件命令为 pnpm dlx ai-elements@latest add message conversation response prompt-input。组件以复制方式安装,需更新 components.json 注册表,并在客户端组件中使用('use client')。API 路由可用 streamText 返回 result.toDataStreamResponse() 实现流式输出。
适用场景:构建 ChatGPT 风格界面、需要流式响应、工具调用展示、推理可视化,或使用 Vercel AI SDK 的项目。
限制:不支持 Pages Router,仅限 App Router;必须使用 AI SDK v5(v4 有破坏性变更);不能作为 npm 包安装;需先具备 shadcn/ui 与 Tailwind;不建议在自建设计系统中使用。官方文档见 https://ai-elements.vercel.app。