ChatKit 是构建智能体聊天体验的最佳方式。无论您是要构建内部知识库助手、HR 入职向导、研究伙伴、购物或日程规划助手、故障排除机器人、财务规划顾问还是客服代理，ChatKit 都提供了一个可自定义的聊天嵌入组件来处理所有用户体验细节。
使用 ChatKit 的可嵌入 UI 组件、可自定义提示词、工具调用支持、文件附件和思维链可视化功能来构建智能体，无需重复造轮子。
概览
实现 ChatKit 的两种方式如下：
- 推荐的集成方式。将 ChatKit 嵌入您的前端，自定义其外观和体验，让 OpenAI 托管并扩展后端，从 智能体构建器。需要开发服务器。
- 高级集成。在您自己的基础设施上运行 ChatKit。使用 ChatKit Python SDK 连接至任何智能体后端。使用组件构建前端。
开始使用 ChatKit
在前端嵌入 ChatKit
从宏观上看，设置 ChatKit 分为三个步骤。创建托管在 OpenAI 服务器上的智能体工作流。然后设置 ChatKit 并添加功能，以构建您的聊天体验。
1. 创建智能体工作流
创建智能体工作流使用 智能体构建器。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 仓库 在 GitHub 上。
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. 构建与迭代
参阅 GitHub 上的 自定义主题, 组件，且 操作 文档，详细了解 ChatKit 的工作原理。或者浏览以下资源来测试您的聊天功能、迭代提示词，并添加组件和工具。
构建您的实现
学习处理身份验证、添加主题和自定义等内容。
添加服务端存储、访问控制、工具和其他后端功能。
查看 ChatKit JS 仓库。
探索 ChatKit UI
体验 ChatKit 交互式演示。
浏览可用的 Widget。
通过交互式演示在实践中学习。
查看实际示例
查看 ChatKit 的实际示例并获取灵感。
克隆一个仓库，从一个完整可用的模板开始。
后续步骤
当您对 ChatKit 的实现感到满意后，请通过 评估。要在您自己的基础设施上运行 ChatKit，请参见 高级集成文档了解如何优化它.