Ant Design X: AI 体验新秩序

enzeberg
250 阅读5分钟

1.1 诞生背景

Ant Design X 于 2024 年 11 月正式发布，是蚂蚁集团在 Ant Design 基础上推出的全新 AGI 组件库。随着 AI 技术在企业级产品中的广泛应用，传统 UI 组件库已无法满足 AI 交互的复杂需求。蚂蚁集团内部在开发数据分析、智能客服等多个 AI 功能时，亟需一套统一的设计体系来简化开发流程，Ant Design X 应运而生。它基于 RICH 交互范式，完美融合 GUI 与自然语言交互，为 AI 应用提供了从唤醒到反馈的全流程组件支持。

1.2 RICH 设计范式：重新定义 AI 交互

Ant Design X 提出的 RICH 设计范式，是一套系统性的 AI 产品设计理论，包含四个核心要素：

1.2.1 Role（角色）

AI 在交互中扮演的角色决定其行为模式和表达方式。例如：

  • 客服场景：AI 需要展现亲和力，使用友好的语气和表情
  • 数据分析场景：AI 应体现专业性，采用严谨的术语和逻辑

1.2.2 Intention（意图）

根据用户需求的清晰度提供不同交互方式：

  • 清晰意图（如"生成销售报表"）：直接提供执行按钮
  • 模糊意图（如"帮我分析数据"）：通过 Prompts 组件提供引导选项

1.2.3 Conversation（对话）

设计完整的对话生命周期，包括：

  • 开始：Welcome 组件介绍 AI 能力
  • 追问：当需求不明确时主动澄清
  • 确认：ThoughtChain 展示任务执行进度
  • 结束：Actions 组件提供结果操作选项

1.2.4 Hybrid UI（混合界面）

结合 GUI 和自然语言的优势，提供三种界面类型：

  • 独立式：纯对话交互（如 ChatGPT）
  • 助手式：对话与界面均衡（如文档 AI 助手）
  • 嵌入式：界面主导 + AI 辅助（如 BI 工具中的 AI 分析功能）

1.3 核心组件与使用场景

Ant Design X 提供了覆盖 AI 交互全流程的原子组件：

1.3.1 通用组件

  • Bubble：消息气泡组件，支持 Markdown 渲染和打字机效果
<Bubble 
  content="这是支持 **Markdown** 的消息" 
  avatar={<UserOutlined />} 
  typing
/>
  • Conversations：会话管理组件，支持多会话切换和历史记录

1.3.2 唤醒组件

  • Welcome：欢迎界面，降低用户认知门槛
  • Prompts：提示集组件，提供快捷问题建议

1.3.3 表达组件

  • Sender：发送框组件，支持文本、语音和附件输入
  • Suggestion：快捷指令组件，一键触发常见操作

1.3.4 确认组件

  • ThoughtChain：思维链组件，可视化 AI 推理过程
<ThoughtChain 
  steps={[
    { title: "分析问题", status: "done" },
    { title: "生成方案", status: "processing" },
    { title: "优化结果", status: "pending" }
  ]}
/>

1.3.5 典型使用场景

  1. 智能客服系统：Bubble + Sender + Suggestion 构建对话界面
  2. 企业 AI 助手：Conversations + ThoughtChain 实现多任务管理
  3. 知识问答平台：Prompts + Bubble 引导用户提问并展示答案

1.4 快速上手：安装与基础使用

1.4.1 安装

使用 npm、yarn 或 pnpm 安装：

npm install @ant-design/x --save
# 或
yarn add @ant-design/x
# 或
pnpm add @ant-design/x

1.4.2 基础对话界面

import React from 'react'
import { Bubble, Sender } from '@ant-design/x'
const messages = [
  { content: 'Hello, Ant Design X!', role: 'user' },
  { content: '欢迎使用 AI 助手，有什么可以帮你？', role: 'assistant' }
]
const App = () => (
  <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
    <Bubble.List items={messages} />
    <Sender placeholder="输入你的问题..." />
  </div>
)
export default App

1.5 高级功能：模型对接与数据流管理

1.5.1 对接 AI 模型

使用 useXAgent 钩子对接 OpenAI 标准 API：

import React from 'react'
import { useXAgent, Sender } from '@ant-design/x'
const App = () => {
  const [agent] = useXAgent({
    baseURL: 'https://your-api-endpoint',
    model: 'gpt-3.5-turbo',
    // 生产环境中建议通过环境变量传入 API Key
    dangerouslyApiKey: process.env.REACT_APP_API_KEY
  })
  const handleSubmit = async (text) => {
    try {
      await agent.request({
        messages: [{ role: 'user', content: text }],
        stream: true
      })
    } catch (error) {
      console.error('请求失败:', error)
    }
  }
  return <Sender onSubmit={handleSubmit} />
}
export default App

1.5.2 管理对话数据流

使用 useXChat 钩子简化对话状态管理：

import React from 'react'
import { useXChat, useXAgent, Bubble, Sender } from '@ant-design/x'
const App = () => {
  const [agent] = useXAgent({
    baseURL: 'https://your-api-endpoint',
    model: 'gpt-3.5-turbo'
  })
  
  const { messages, onRequest, isLoading } = useXChat({ agent })
  return (
    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
      <Bubble.List items={messages} />
      {isLoading && <div>AI 正在思考...</div>}
      <Sender onSubmit={onRequest} disabled={isLoading} />
    </div>
  )
}
export default App

1.6 综合示例：构建智能助手界面

以下是一个完整的智能助手界面示例，包含欢迎界面、消息展示、思维链和发送功能：

import React from 'react'
import { 
  Bubble, Sender, Welcome, ThoughtChain, XProvider 
} from '@ant-design/x'
import { useXChat, useXAgent } from '@ant-design/x'
import { UserOutlined, RobotOutlined } from '@ant-design/icons'
const App = () => {
  const [agent] = useXAgent({
    baseURL: 'https://your-api-endpoint',
    model: 'gpt-3.5-turbo'
  })
  
  const { messages, onRequest, isLoading, thoughtChain } = useXChat({ agent })
  return (
    <XProvider>
      <div style={{ 
        maxWidth: '600px', 
        margin: '20px auto', 
        height: '80vh', 
        display: 'flex', 
        flexDirection: 'column' 
      }}>
        {/* 欢迎界面 */}
        {messages.length === 0 && !isLoading && (
          <Welcome 
            title="欢迎使用 Ant Design X 助手"
            description="我可以帮助你解答问题、生成内容和分析数据"
            actions={[
              { text: "开始对话", onClick: () => {/* 处理开始对话 */} }
            ]}
          />
        )}
        
        {/* 消息列表 */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '10px' }}>
          <Bubble.List 
            items={messages}
            roles={{
              user: { avatar: <UserOutlined /> },
              assistant: { avatar: <RobotOutlined /> }
            }}
          />
          
          {/* 思维链展示 */}
          {isLoading && thoughtChain && (
            <ThoughtChain steps={thoughtChain} />
          )}
        </div>
        
        {/* 发送框 */}
        <Sender 
          onSubmit={onRequest} 
          placeholder="输入你的问题..."
          disabled={isLoading}
          showVoiceButton
          showAttachmentButton
        />
      </div>
    </XProvider>
  )
}
export default App

1.7 实际应用案例

1.7.1 AI0x0 桌面应用

开源项目 AI0x0 采用 Ant Design X 重构后，界面美观度和用户体验显著提升，特别是在对话流畅性和交互反馈方面得到用户好评。

1.7.2 企业智能客服系统

某金融科技公司使用 Ant Design X 构建智能客服系统，通过 Bubble 组件展示对话，Suggestion 组件提供快捷回复，ThoughtChain 组件展示问题处理进度，客户满意度提升 25%。

1.8 总结与未来展望

Ant Design X 作为专为 AI 应用设计的组件库，通过 RICH 设计范式和丰富的原子组件，极大简化了 AI 交互界面的开发流程。其核心优势包括：

  • 源自企业级 AI 产品的最佳实践
  • 灵活多样的组件覆盖各类 AI 交互场景
  • 开箱即用的模型对接能力和数据流管理
  • 完善的 TypeScript 类型支持和主题定制

未来，Ant Design X 计划推出移动端组件库，进一步完善多端适配能力，并增加更多行业特定模板，如医疗、教育等领域的 AI 应用解决方案。

通过 Ant Design X，开发者可以更专注于 AI 功能的实现，而非界面构建，从而加速 AI 产品的落地和迭代。

avatar
文章
阅读
粉丝