name: ai-elements-chatbot description: shadcn/ui AI 聊天组件，用于对话界面。用于流式聊天、工具/函数显示、推理可视化，或遇到 Next.js App Router 设置、Tailwind v4 集成、AI SDK v5 迁移错误时使用。 Keywords: ai-elements, vercel-ai-sdk, shadcn, chatbot, conversational-ai, streaming-ui, chat-interface, ai-chat, message-components, conversation-ui, tool-calling, reasoning-display, source-citations, markdown-streaming, function-calling, ai-responses, prompt-input, code-highlighting, web-preview, branch-navigation, thinking-display, perplexity-style, claude-artifacts license: MIT metadata: version: “2.0.0” last_verified: “2025-11-18” production_tested: true token_savings: “~68%” errors_prevented: 8 templates_included: 0 references_included: 3

AI Elements 聊天机器人组件

状态: 生产就绪 ✅ | 最后验证: 2025-11-18

什么是 AI Elements？

用于AI应用程序的生产就绪聊天UI组件：

基于 shadcn/ui 构建
30+ 组件（Message, Conversation, Response 等）
与 Vercel AI SDK v5 兼容
支持流式传输
工具/函数调用显示
推理可视化

快速开始（15分钟）

先决条件

Next.js 15+（App Router）
shadcn/ui 已初始化
Tailwind v4
AI SDK v5+

1. 初始化

pnpm dlx ai-elements@latest init

2. 添加组件

pnpm dlx ai-elements@latest add message conversation response prompt-input

3. 创建聊天界面

'use client';

import { useChat } from 'ai/react';
import { Conversation } from '@/components/ui/ai/conversation';
import { Message } from '@/components/ui/ai/message';
import { Response } from '@/components/ui/ai/response';
import { PromptInput } from '@/components/ui/ai/prompt-input';

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat'
  });

  return (
    <div className="flex h-screen flex-col">
      <Conversation>
        {messages.map((msg) => (
          <Message key={msg.id} role={msg.role}>
            <Response markdown={msg.content} />
          </Message>
        ))}
      </Conversation>

      <PromptInput
        value={input}
        onChange={handleInputChange}
        onSubmit={handleSubmit}
      />
    </div>
  );
}

加载 references/setup-guide.md 以获取完整设置。

核心组件

Message 和 Conversation

import { Conversation } from '@/components/ui/ai/conversation';
import { Message } from '@/components/ui/ai/message';

<Conversation>
  {messages.map((msg) => (
    <Message key={msg.id} role={msg.role}>
      {msg.content}
    </Message>
  ))}
</Conversation>

Response（Markdown）

import { Response } from '@/components/ui/ai/response';

<Response markdown={content} />

PromptInput

import { PromptInput } from '@/components/ui/ai/prompt-input';

<PromptInput
  value={input}
  onChange={handleInputChange}
  onSubmit={handleSubmit}
/>

CodeBlock

import { CodeBlock } from '@/components/ui/ai/code-block';

<CodeBlock code={code} language="typescript" />

Reasoning（思考）

import { Reasoning } from '@/components/ui/ai/reasoning';

<Reasoning content={thinking} />

Tool（函数调用）

import { Tool } from '@/components/ui/ai/tool';

<Tool name="search" args={{ query: "..." }} result={result} />

关键规则

总是要做 ✅

首先安装 shadcn/ui（AI Elements 需要它）
使用 Next.js App Router（Pages Router 不支持）
使用 AI SDK v5（从 v4 有重大变更）
通过 CLI 安装（pnpm dlx ai-elements@latest）
更新 components.json 与注册表
使用客户端组件（‘use client’ 指令）
流式响应 以提供更好的用户体验
处理加载状态
添加错误边界
在移动设备上测试

永远不要做 ❌

永远不要作为 npm 包安装（组件是复制的）
永远不要使用 Pages Router（仅 App Router）
永远不要使用 AI SDK v4（重大变更）
永远不要跳过先决条件（shadcn/ui, Tailwind）
永远不要修改核心类型（扩展 shadcn 类型）
永远不要不使用流式传输（违背目的）
永远不要跳过可访问性（ARIA 标签）
永远不要硬编码样式（使用 Tailwind）
永远不要跳过错误处理（API 失败）
永远不要忽略移动设备（需要响应式）

可用组件（30+）

核心：

Message
Conversation
Response
PromptInput

内容：

CodeBlock
Markdown
Tool
Reasoning
Sources

操作：

Actions
CopyButton
ShareButton
RegenerateButton

高级：

BranchNavigation
ThinkingDisplay
WebPreview

常见用例

用例 1: 基本聊天

const { messages, input, handleInputChange, handleSubmit } = useChat();

return (
  <>
    <Conversation>
      {messages.map(m => (
        <Message key={m.id} role={m.role}>
          <Response markdown={m.content} />
        </Message>
      ))}
    </Conversation>
    <PromptInput value={input} onChange={handleInputChange} onSubmit={handleSubmit} />
  </>
);

用例 2: 带工具调用

{messages.map(m => (
  <Message key={m.id} role={m.role}>
    {m.toolInvocations?.map(tool => (
      <Tool key={tool.toolCallId} name={tool.toolName} args={tool.args} result={tool.result} />
    ))}
    <Response markdown={m.content} />
  </Message>
))}

用例 3: 带推理

<Message role="assistant">
  {reasoning && <Reasoning content={reasoning} />}
  <Response markdown={content} />
</Message>

用例 4: 带代码块

<Response markdown={content}>
  {(node) => node.type === 'code' ? (
    <CodeBlock code={node.value} language={node.lang} />
  ) : null}
</Response>

用例 5: 带来源

<Message role="assistant">
  <Response markdown={content} />
  <Sources sources={sources} />
</Message>

API 路由

基本流式传输

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4'),
    messages
  });

  return result.toDataStreamResponse();
}

带工具

const result = streamText({
  model: openai('gpt-4'),
  messages,
  tools: {
    search: {
      description: '搜索网络',
      parameters: z.object({ query: z.string() }),
      execute: async ({ query }) => {
        return await search(query);
      }
    }
  }
});

何时使用 AI Elements

使用时：

构建 ChatGPT 风格的界面
需要生产就绪的组件
使用 Vercel AI SDK
想要流式响应
需要工具/函数显示
想要推理可视化

不要使用时：

不使用 Next.js App Router
没有 shadcn/ui
需要 Pages Router
构建自定义设计系统

资源

参考（references/）：

component-catalog.md - 所有 8 个 AI Elements 组件及示例
example-reference.md - 完整集成示例和模式
setup-guide.md - 使用 Next.js 15 和 shadcn/ui 的逐步设置指南

模板（templates/）：

组件示例可在参考文件中找到

官方文档

AI Elements: https://ai-elements.vercel.app
组件: https://ai-elements.vercel.app/docs/components
示例: https://github.com/ai-elements/ai-elements/tree/main/examples

有问题？问题？

检查 references/setup-guide.md 以获取完整设置
验证先决条件（Next.js 15+, shadcn/ui, AI SDK v5）
查看官方示例