本文通过 UI 选用 Ant Design X 组件库，后端调用百宝箱 SDK 的方式，带领开发者使用极少的代码极速完成 AI 对话应用的开发。

认识下 Ant Design X

Ant Design X 针对 React 应用，提供可高度定制的 AI 对话组件，可流畅集成主流 LLM 服务，拥有如下亮点：

• 丰富的 AI 组件
  包含消息气泡（Bubble）、对话列表（Conversations）、提示集（Prompts）、输入附件（Attachment）、智能输入框（Sender）、快捷建议（Suggestion）、多思路链路（ThoughtChain）等，满足主流对话场景。
• API 及数据流管理
  内建令牌认证、流式推理、国际化、模型调度与数据管理（如 useXAgent、useXChat、XStream、XRequest、XProvider），帮你高效衔接前后端。
• 模块化与 TS 支持
  基于 ES modules，支持 Tree Shaking，代码按需加载。全 TypeScript 类型定义，开发体验一流。

试用 demo

点我快速体验百宝箱 + Ant Design X 实现的 AI 聊天应用。

接入步骤

1. 前端 UI 搭建（React + Ant Design X）

以 Vite 创建项目，安装依赖：

npm add @ant-design/x tbox-nodejs-sdk

简易对话页面例子：

import { Bubble, Sender } from '@ant-design/x';

const messages = [{ content: 'Hello, Ant Design X!', role: 'user' }];

function App() {
  return (
    <div>
      <Bubble.List items={messages} />
      <Sender />
    </div>
  );
}
export default App;

组件完整示例请参考官方文档：https://x.ant.design/

2. 智能后端对接：百宝箱智能体 SDK

高质量对话体验离不开强大的智能体推理。推荐在后端使用百宝箱智能体 SDK完成 LLM 接入与代理服务：

1. 后端集成百宝箱 SDK，将用户的消息输入转化为大模型请求，灵活对接市场主流 LLM。
2. 前端调用自建业务接口，将消息通过 HTTP 发送后端，由百宝箱 SDK 调用大模型并流式返回推理进度。
3. 对接 Ant Design X 组件，如通过 XRequest 或 XStream 实现消息的流式展示和回显，提高用户体验。

后端 Node.js 代码示例：

import { TboxClient } from 'tbox-nodejs-sdk';

const tboxClient = new TboxClient({
  httpClientConfig: {
    authorization: 'TBox-Token-xxx', // 替换真实 token
  },
});

前端调用方式：

import { TboxClient } from 'tbox-nodejs-sdk';
import { useXAgent, useXChat, Sender, Bubble } from '@ant-design/x';

const tboxClient = new TboxClient({
  httpClientConfig: {
    authorization: 'TBox-Token-xxx', // 替换真实 token
  },
});

const ChatDemo = () => {
  const [agent] = useXAgent({
    request: async ({ message }, { onUpdate, onSuccess }) => {
      const stream = tboxClient.chat({
        appId: '2025*****xxx', // 替换真实 AppID
        query: message,
        userId: '用户唯一标识',
      });

      let content = '';
      stream.on('data', (data) => {
        content += JSON.stringify(data);
        onUpdate(content);
      });
      stream.on('end', () => onSuccess(content));
    },
  });

  const { onRequest, messages } = useXChat({ agent });

  return (
    <div style={{ maxWidth: 800, margin: '0 auto' }}>
      <Bubble.List
        items={messages.map((msg) => ({
          key: msg.id,
          content: msg.message,
        }))}
      />
      <Sender onSubmit={onRequest} />
    </div>
  );
};

完整API文档参考：百宝箱 Node.js SDK

这样，业务上即可 “前端极简 UI × 后端超强智能体”，实现 LLM 聊天应用端到端快速上线！

总结

Ant Design X 为开发者提供了极致组件化、类型安全、即插即用的聊天 UI 框架，结合百宝箱智能体 SDK 打造的智能后端，不仅大幅缩减工程代码量、加快产品上线速度，更能轻松对接主流大模型、支持复杂对话场景与定制卡片展示。

如果你需要快速开发智能对话应用，极力建议采用 “Ant Design X + 百宝箱智能体 SDK” 的前后端联动方案，即可实现高颜值、体验佳、响应快的 AI 聊天产品。