今天，我们正式发布 ChatKit SDK——一款专为智能体对话体验打造的全栈 UI 解决方案！无论你是在构建内部知识库助手、HR 入职助手、研究伴侣、购物助手、故障排查机器人，还是客户支持代理，ChatKit 都提供可自定义的聊天嵌入来处理所有用户体验细节。
ChatKit 可以以最小的侵入性集成到你的应用中，支持高度定制和扩展，帮助你快速构建专业级的智能对话界面。
🚀 为什么选择 ChatKit？
构建一个功能完善的聊天界面并非易事。你需要处理消息流式传输、文件上传、工具调用可视化、响应式布局、主题切换等诸多细节。ChatKit 将这些复杂性封装为一个简洁的 SDK，让你专注于智能体的业务逻辑。
核心优势
- 开箱即用：一行代码即可嵌入功能完整的聊天界面
- 深度定制：从主题颜色到交互组件，完全符合你的品牌风格
- 前后端分离：前端使用 ChatKit，后端托管在 XpertAI Agent Builder
- 生态兼容：基于成熟的 React 生态，支持 TypeScript
🎨 主题和自定义：让聊天界面融入你的产品
- 配色与模式：浅色 / 深色、强调色等级、圆角与密度
- 字体与语气：自定义字体族、输入框占位符、欢迎语
- 启动提示：预置示例问题，引导用户快速上手
- 头部定制：支持自定义按钮与导航，贴合产品信息架构
探索更多定制选项，请访问 ChatKit Studio 的交互式构建器。
🧩 小部件：让数据可视化与交互更丰富
ChatKit 小部件是对话中的交互式卡片和组件。通过小部件，你可以在聊天中展示：
- 数据卡片：产品信息、订单详情、用户资料
- 列表行：搜索结果、待办事项、推荐项
- 交互按钮：快速操作、表单提交、状态切换
小部件中间件
- 模型→前端：通过工具调用或结构化输出返回小部件 JSON，前端直接渲染
- 中间件：在服务端配置小部件生成/转换逻辑，按上下文动态调整内容与样式
- 交互回传：按钮/卡片点击会携带自定义负载回传给后端，触发业务处理
可使用 A2UI Widget Builder 设计并预览小部件，了解更多关于 A2UI 协议。
🔧 客户端工具：让模型操作前端功能
客户端工具将模型发起的工具调用路由到前端 UI 执行，适用于读取前端状态、用户交互、浏览器能力等场景。
工作流程
1) 服务端：在工作流中用 Client Tool 中间件定义工具名称、描述、参数模式 2) 模型：基于上下文触发工具调用 3) 前端：通过回调接收调用并执行浏览器/本地逻辑（状态读取、UI 动作、权限能力） 4) 回传：将执行结果返回给模型，继续推理
常见用法：读取浏览器状态、触发路由/主题切换、调起弹窗或设备能力。
⚡ 客户端副作用：驱动 UI 变化不中断对话
客户端副作用用于将模型产生的"副作用事件"推送到前端执行，不打断模型推理流程。适用于 UI 更新、视图聚焦、高亮、动画、状态同步等只影响前端、不依赖返回值的场景。
核心特性
- 不阻塞对话：模型触发副作用后继续生成回复
- 单向通知：模型 → 前端 UI，适合聚焦、高亮、动画、状态同步
- 预设结果：服务端配置默认 result，前端仅负责执行 UI 改变
适用于：解释功能时自动高亮界面区域，引导操作时自动滚动到目标位置等。
🏗️ 架构设计：前后端分离的最佳实践
ChatKit 采用前后端分离的架构设计：
- 前端：使用
@xpert-ai/chatkit-reactSDK 嵌入聊天界面 - 后端：在 XpertAI Agent Builder 创建智能体工作流
- 安全认证：通过服务端生成客户端密钥，确保安全访问
快速开始（概念级）
1) 在 XpertAI Agent Builder 创建智能体工作流，获取数字专家 ID
2) 前端安装并嵌入 @xpert-ai/chatkit-react，指向你的工作流
3) 后端提供会话创建端点，安全下发客户端密钥
4) 渲染 ChatKit 组件，启用主题、小部件、工具和副作用能力
🎯 适用场景
ChatKit 适合各种智能体对话应用场景：
- 企业内部工具：知识库助手、HR 入职流程、IT 支持机器人
- 电商与服务：购物顾问、订单查询、预约调度
- 专业领域：研究助手、财务规划、医疗咨询
- 开发者工具：代码审查助手、文档生成器、调试工具
📦 立即体验
ChatKit SDK 现已正式发布，提供完整的文档和示例代码。访问我们的文档中心开始构建你的第一个智能对话应用。
无需重新发明聊天界面，专注于打造真正有价值的智能体能力。
XpertAI ChatKit——让智能对话体验触手可及。