ChatKit 是构建代理式聊天体验的最佳方式。无论您是要构建内部知识库助手、人力资源入职助手、研究伴侣、购物或日程安排助手、故障排除机器人、财务规划顾问还是支持代理，ChatKit 都提供了一个可定制的聊天嵌入组件，用于处理所有用户体验细节。
利用 ChatKit 的可嵌入 UI 组件、可定制提示词、工具调用支持、文件附件以及思维链可视化功能，无需重新发明聊天 UI 即可构建代理。
概述
实现 ChatKit 有两种方式
- 推荐集成：将 ChatKit 嵌入到您的前端，定制其外观和感觉，并让 OpenAI 通过 Agent Builder 托管和扩展后端。需要开发服务器。
- 高级集成：在您自己的基础设施上运行 ChatKit。使用 ChatKit Python SDK 并连接到任何代理式后端。使用小组件构建前端。
开始使用 ChatKit
将 ChatKit 嵌入到您的前端
总体而言，设置 ChatKit 是一个三步过程。创建一个托管在 OpenAI 服务器上的代理工作流，然后设置 ChatKit 并添加功能以构建您的聊天体验。
1. 创建代理工作流
使用 Agent Builder 创建代理工作流。Agent Builder 是一个用于设计多步骤代理工作流的可视化画布。您将获得一个工作流 ID。
您嵌入到前端的聊天将指向您创建的工作流作为后端。
2. 在您的产品中设置 ChatKit
要设置 ChatKit，您需要创建一个 ChatKit 会话、创建一个后端端点、传入您的工作流 ID、交换客户端密钥，并添加脚本以将 ChatKit 嵌入到您的网站中。
重要安全提示： 创建 ChatKit 会话时，必须传入一个 user 参数，该参数对于每个终端用户都应是唯一的。您的后端有责任对应用程序的用户进行身份验证，并在该参数中为他们传递唯一的标识符。
-
在您的服务器上，生成一个客户端令牌。
此代码片段启动了一个 FastAPI 服务，其唯一任务是通过 OpenAI Python SDK 创建一个新的 ChatKit 会话，并返回该会话的客户端密钥。
server.pypython1 2 3 4 5 6 7 8 9 10 11 12 13 14from fastapi import FastAPI from pydantic import BaseModel from openai import OpenAI import os app = FastAPI() openai = OpenAI(api_key=os.environ["OPENAI_API_KEY"]) @app.post("/api/chatkit/session") def create_chatkit_session(): session = openai.chatkit.sessions.create({ # ... }) return { client_secret: session.client_secret } -
在您的服务器端代码中，将您的工作流 ID 和密钥传递给会话端点。
客户端密钥是您的 ChatKit 前端用于打开或刷新聊天会话的凭据。不要存储它；应立即将其移交给 ChatKit 客户端库。
请参阅 GitHub 上的 chatkit-js 仓库。
chatkit.tstypescript1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20export default async function getChatKitSessionToken( deviceId: string ): Promise<string> { const response = await fetch("https://api.openai.com/v1/chatkit/sessions", { method: "POST", headers: { "Content-Type": "application/json", "OpenAI-Beta": "chatkit_beta=v1", Authorization: "Bearer " + process.env.VITE_OPENAI_API_SECRET_KEY, }, body: JSON.stringify({ workflow: { id: "wf_68df4b13b3588190a09d19288d4610ec0df388c3983f58d1" }, user: deviceId, }), }); const { client_secret } = await response.json(); return client_secret; } -
在您的项目目录中，安装 ChatKit React 绑定
npm install @openai/chatkit-react -
将 ChatKit JS 脚本添加到您的页面。将此代码片段放入页面的
<head>或任何加载脚本的地方，浏览器将为您获取并运行 ChatKit。index.htmlhtml1 2 3 4<script src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js" async ></script> -
在您的 UI 中渲染 ChatKit。此代码从您的服务器获取客户端密钥并挂载一个实时聊天组件，连接到您的工作流作为后端。
您的前端代码react1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24import { ChatKit, useChatKit } from '@openai/chatkit-react'; export function MyChat() { const { control } = useChatKit({ api: { async getClientSecret(existing) { if (existing) { // implement session refresh } const res = await fetch('/api/chatkit/session', { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { client_secret } = await res.json(); return client_secret; }, }, }); return <ChatKit control={control} className="h-[600px] w-[320px]" />; }
3. 构建与迭代
请参阅自定义主题、小组件和操作文档，以详细了解 ChatKit 的工作原理。或浏览以下资源来测试您的聊天、迭代提示词并添加小组件和工具。
构建您的实现
学习如何处理身份验证、添加主题和自定义等。
添加服务器端存储、访问控制、工具和其他后端功能。
查看 ChatKit JS 仓库。
探索 ChatKit UI
体验 ChatKit 的交互式演示。
浏览可用的小组件。
通过交互式演示在实践中学习。
查看工作示例
查看 ChatKit 的工作示例并获取灵感。
克隆一个代码仓库，从一个功能完善的模板开始。
后续步骤
当您对 ChatKit 的实现感到满意时，请学习如何通过评估 (evals) 对其进行优化。要在您自己的基础设施上运行 ChatKit，请参阅高级集成文档。