AgentKit
AgentKit
AgentKit
文档指南
请输入
AgentKit
产品动态
产品计费
快速入门
用户指南
智能体运行时
沙箱模板
沙箱模板管理
在 Agent 中集成沙箱模板
Skills Sandbox 沙箱模板
技能
A2A 中心
会话与记忆管理
知识库
网关
MCP 接入
身份与权限
快速入门
观测
开发者指南
VeADK 参考
API 参考
Runtime
Tool
Skill
A2A
SessionStore
Memory
Knowledge
MCP
ChatKit 参考
DeliveryAI
产品动态
产品计费
开始使用
步骤一：企业管理员-开通并配置服务
- 文档首页
AgentKitAgentKit快速入门使用 ChatKit 快速搭建对话界面并接入模型或 Agent 服务
复制全文
下载 pdf使用 ChatKit 快速搭建对话界面并接入模型或 Agent 服务
文档反馈
问问助手本文介绍如何在 React 项目中接入 ChatKit，通过 Mock 适配器运行一个可交互的对话界面，确认组件、样式和运行时配置正确后，可将前端请求切换到已有的业务服务端代理。完成后，页面应能发送消息并持续显示模型返回的流式回答。
前提条件
- 已创建 React 18 或 React 19 项目，并可使用 npm 安装依赖。
- 项目使用 Vite、webpack、Next.js 等支持 ES Module 的打包工具。
- 页面可以为 ChatKit 容器提供明确高度。
说明
若您的项目使用 Next.js 等服务端渲染框架，需将 ChatKit 放入客户端组件，并关闭该组件的服务端渲染。
步骤一：安装依赖
在项目目录中执行如下命令，安装 ChatKit。
npm install @volcengine/chatkit
步骤二：使用 Mock 适配器运行
import { Chatkit, useChatRuntime } from '@volcengine/chatkit';
import { createMockAdapter } from '@volcengine/chatkit/adapters/mock';
import '@volcengine/chatkit/styles.css';
// 整个应用一个适配器实例，放在模块级（或 useMemo），引用保持稳定
const adapter = createMockAdapter();
export function Demo() {
// 运行时准备好之前返回 undefined
const runtime = useChatRuntime({ sessionId: 'demo', adapter });
return (
<div style={{ height: 600 }}>
{runtime && <Chatkit runtime={runtime} settings={{ welcome: '有什么可以帮忙的？' }} />}
</div>
);
}
关键配置说明
配置 | 作用 | 注意事项 |
配置 | 作用 | 注意事项 |
styles.css | 加载 ChatKit 的基础样式 | 需单独引入；缺少时组件可以渲染，但布局和视觉样式可能不完整。 |
adapter | 连接运行时与后端协议 | 整个应用建议复用同一个适配器实例。将实例定义在模块级，或使用 useMemo 保持引用稳定，避免组件重新渲染时重复创建运行时。 |
sessionId | 标识当前会话 | 同一业务会话必须持续使用同一个 sessionId，修改 sessionId 会切换到另一个会话。 |
height | 设置 ChatKit 容器高度 | 页面可以为 ChatKit 的父容器提供明确高度，否则，聊天区域可能无法正常显示。 |
将 Demo 组件渲染到项目页面中，然后使用项目原有的开发命令启动应用，例如 npm run dev。打开该页面并发送任意消息。出现用户消息，且界面依次展示思考过程、工具调用和流式回答时，说明组件、基础样式与运行时已接入成功。
步骤三：接入模型或 Agent 服务
完成前端调试后，您可以按需将 Mock 适配器替换为目标协议的适配器。本节以使用 OpenAI 兼容接口为例，并把请求发送到业务服务端代理。
import { createOpenAiAdapter } from '@volcengine/chatkit/adapters/openai';
// 将请求发送到您的服务端，由服务端补充模型名称和密钥，再转发到模型服务，避免在浏览器中暴露密钥
export const adapter = createOpenAiAdapter({
run: ({ sessionId, runId, body }) =>
fetch('/api/chat/completions', {
method: 'POST',
credentials: 'include', // 请求携带用户登录态，服务端据此验证用户身份
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ session_id: sessionId, run_id: runId, ...body }),
}),
});
后续操作
本文仅演示 ChatKit 必需的 run 能力。完成基础接入后，您可以根据后端实际支持的能力，继续实现历史加载、停止生成、断线续接、重新生成和编辑后重发。
说明
若后端使用 Codex、OpenCode、DSH 等长连接型适配器，无需提供 run 请求函数。请调用对应的连接创建函数（例如 createCodexConnection）配置服务地址、短期访问凭据和协议参数以建立连接。
- 接入后端：了解各协议适配器的接入方式和能力差异。
- 自定义界面：了解如何选择 settings、features、slots 和 renderers。
- 主题与样式：配置亮色或暗色主题，并通过样式变量调整界面。
- 事件与数据：接入业务埋点、错误上报和运行监控。
最近更新时间：2026.10.23 09:23:31
这个页面对您有帮助吗？
有用
有用
无用
无用