ai-elements-chatbot

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

AI Elements Chatbot Components

AI Elements 聊天机器人组件

Status: Production Ready ✅ | Last Verified: 2025-11-18

状态：已就绪可投入生产 ✅ | 最后验证时间：2025-11-18

What Is AI Elements?

什么是AI Elements？

Production-ready chat UI components for AI applications:

Built on shadcn/ui
30+ components (Message, Conversation, Response, etc.)
Works with Vercel AI SDK v5
Streaming support
Tool/function call displays
Reasoning visualization

适用于AI应用的、可投入生产使用的聊天UI组件：

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

Quick Start (15 Minutes)

快速开始（15分钟）

Prerequisites

前置要求

Next.js 15+ (App Router)
shadcn/ui initialized
Tailwind v4
AI SDK v5+

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

1. Initialize

1. 初始化

bash

pnpm dlx ai-elements@latest init

bash

pnpm dlx ai-elements@latest init

2. Add Components

2. 添加组件

bash

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

bash

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

3. Create Chat Interface

3. 创建聊天界面

typescript

'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>
  );
}

Load
references/setup-guide.md
for complete setup.

typescript

'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
获取完整配置步骤。

Core Components

核心组件

Message & Conversation

typescript

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>

typescript

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)

Response（Markdown）

typescript

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

<Response markdown={content} />

typescript

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

<Response markdown={content} />

PromptInput

typescript

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

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

typescript

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

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

CodeBlock

typescript

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

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

typescript

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

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

Reasoning (Thinking)

Reasoning（思考过程）

typescript

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

<Reasoning content={thinking} />

typescript

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

<Reasoning content={thinking} />

Tool (Function Calls)

Tool（函数调用）

typescript

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

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

typescript

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

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

Critical Rules

重要规则

Always Do ✅

务必遵守 ✅

Install shadcn/ui first (AI Elements requires it)
Use Next.js App Router (Pages Router not supported)
Use AI SDK v5 (breaking changes from v4)
Install via CLI (
```
pnpm dlx ai-elements@latest
```
)
Update components.json with registry
Use client components ('use client' directive)
Stream responses for better UX
Handle loading states
Add error boundaries
Test on mobile

先安装shadcn/ui（AI Elements依赖该库）
使用Next.js App Router（不支持Pages Router）
使用AI SDK v5（与v4存在破坏性变更）
通过CLI安装（
```
pnpm dlx ai-elements@latest
```
）
更新components.json并配置注册表
使用客户端组件（添加'use client'指令）
采用流式响应以提升用户体验
处理加载状态
添加错误边界
在移动端测试

Never Do ❌

切勿尝试 ❌

Never install as npm package (components are copied)
Never use Pages Router (only App Router)
Never use AI SDK v4 (breaking changes)
Never skip prerequisites (shadcn/ui, Tailwind)
Never modify core types (extends shadcn types)
Never use without streaming (defeats purpose)
Never skip accessibility (ARIA labels)
Never hardcode styles (use Tailwind)
Never skip error handling (API failures)
Never ignore mobile (responsive required)

不要以npm包形式安装（组件为复制式引入）
不要使用Pages Router（仅支持App Router）
不要使用AI SDK v4（存在破坏性变更）
不要跳过前置要求（shadcn/ui、Tailwind）
不要修改核心类型（继承自shadcn类型）
不要关闭流式传输（违背组件设计初衷）
不要忽略无障碍访问（添加ARIA标签）
不要硬编码样式（使用Tailwind）
不要跳过错误处理（应对API失败场景）
不要忽略移动端适配（必须支持响应式）

Available Components (30+)

可用组件（30+个）

Core:

Message
Conversation
Response
PromptInput

Content:

CodeBlock
Markdown
Tool
Reasoning
Sources

Actions:

Actions
CopyButton
ShareButton
RegenerateButton

Advanced:

BranchNavigation
ThinkingDisplay
WebPreview

核心组件：

Message
Conversation
Response
PromptInput

内容组件：

CodeBlock
Markdown
Tool
Reasoning
Sources

操作组件：

Actions
CopyButton
ShareButton
RegenerateButton

高级组件：

BranchNavigation
ThinkingDisplay
WebPreview

Common Use Cases

常见使用场景

Use Case 1: Basic Chat

场景1：基础聊天

typescript

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} />
  </>
);

typescript

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} />
  </>
);

Use Case 2: With Tool Calls

场景2：集成工具调用

typescript

{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>
))}

typescript

{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>
))}

Use Case 3: With Reasoning

场景3：展示推理过程

typescript

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

typescript

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

Use Case 4: With Code Blocks

场景4：代码块展示

typescript

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

typescript

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

Use Case 5: With Sources

场景5：添加来源标注

typescript

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

typescript

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

API Routes

API路由

Basic Streaming

基础流式传输

typescript

// 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();
}

typescript

// 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();
}

With Tools

集成工具调用

typescript

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

typescript

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

When to Use AI Elements

何时使用AI Elements

Use when:

Building ChatGPT-style interface
Need production-ready components
Using Vercel AI SDK
Want streaming responses
Need tool/function displays
Want reasoning visualization

Don't use when:

Not using Next.js App Router
Don't have shadcn/ui
Need Pages Router
Building custom design system

适合使用场景：

构建ChatGPT风格的界面
需要可投入生产的组件
使用Vercel AI SDK
想要实现流式响应
需要展示工具/函数调用
需要可视化推理过程

不适合使用场景：

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

Resources

资源

References (

references/

```
component-catalog.md
```
- All 8 AI Elements components with examples
```
example-reference.md
```
- Complete integration examples and patterns
```
setup-guide.md
```
- Step-by-step setup with Next.js 15 and shadcn/ui

Templates (

templates/

Component examples available in reference files

参考文档（

references/

）：

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

模板（

templates/

）：

组件示例可在参考文档中查看

Official Documentation

官方文档

AI Elements: https://ai-elements.vercel.app
Components: https://ai-elements.vercel.app/docs/components
Examples: https://github.com/ai-elements/ai-elements/tree/main/examples

Questions? Issues?

Check
```
references/setup-guide.md
```
for complete setup
Verify prerequisites (Next.js 15+, shadcn/ui, AI SDK v5)
See official examples

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）
查看官方示例