本文通过 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 接入与代理服务：
- 后端集成百宝箱 SDK，将用户的消息输入转化为大模型请求，灵活对接市场主流 LLM。
- 前端调用自建业务接口，将消息通过 HTTP 发送后端，由百宝箱 SDK 调用大模型并流式返回推理进度。
- 对接 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 聊天产品。
