ChatKit 是一个开箱即用的框架，旨在帮助开发者快速构建高质量、由 AI 驱动的聊天体验。它专为希望以最少的配置、无需从头开发即可为其应用添加先进对话智能的开发者而设计。ChatKit 提供一套完整的、可直接投入生产的聊天界面。

主要功能包括：

• 深度 UI 自定义，让 ChatKit 无缝融入您的应用，成为其中的一等公民；
• 内置响应流式传输，实现互动自然的对话体验；
• 工具与工作流集成，支持可视化代理行为与思维链推理；
• 丰富的交互小部件，直接渲染在聊天窗口内；
• 附件处理，支持文件与图片上传；
• 线程与消息管理，便于组织复杂的对话；
• 来源标注与实体标记，提升透明度与引用清晰度。

只需将 ChatKit 组件拖入您的应用，配置几项选项，即可立即投入使用。

ChatKit 的独特之处？

ChatKit 是一款与具体框架无关、即插即用的聊天解决方案。 您无需自建自定义 UI、管理底层聊天状态，也不必自行拼凑各种功能。 只需添加 ChatKit 组件、提供客户端令牌，并根据需求自定义聊天体验，无需额外开发工作。

快速入门

1. 在您的服务器上生成客户端令牌。

   from 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 }
   

2. 安装 React 绑定。

   npm install @openai/chatkit-react
   

3. 将 ChatKit JS 脚本添加到您的页面。

   <script
     src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"
     async
   ></script>
   

4. 渲染 ChatKit。

   import { ChatKit, useChatKit } from '@openai/chatkit-react';
   
   export function MyChat() {
     const { control } = useChatKit({
       api: {
         async getClientSecret(existing) {
           if (existing) {
             // 实现会话刷新
           }
   
           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]" />;
   }
   

查看实际示例

• 入门应用 - 克隆仓库，即可获得一个完全可用的模板；
• 示例集 - 查看 ChatKit 的实际应用案例，获取灵感。

许可协议

本项目采用 Apache License 2.0 许可协议。

chatkit-js 快速上手指南

环境准备

• 系统要求：支持现代浏览器（Chrome、Edge、Firefox 等），适用于 Web 应用开发。
• 前置依赖：
  • Node.js（建议 v16+）
  • React 环境（如使用 Create React App 或 Vite 构建项目）
  • 后端服务用于生成 client token，例如 FastAPI 或其他 Python 框架

如果你在中国，可以使用国内镜像源加速 npm 包安装，例如：

npm install --registry=https://registry.npmmirror.com

---

安装步骤

1. 安装 React 绑定库

   npm install @openai/chatkit-react
   

2. 引入 ChatKit JS 脚本

   在你的 HTML 页面中添加以下脚本标签：

   <script
     src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"
     async
   ></script>
   

---

基本使用

以下是最简单的使用示例，展示如何在 React 中渲染 ChatKit 组件。

步骤 1：创建后端接口生成 client token

在你的服务器端（如 FastAPI）中添加如下代码：

from 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 }

步骤 2：在 React 组件中使用 ChatKit

import { ChatKit, useChatKit } from '@openai/chatkit-react';

export function MyChat() {
  const { control } = useChatKit({
    api: {
      async getClientSecret(existing) {
        if (existing) {
          // 实现会话刷新逻辑
        }

        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]" />;
}

---

完成以上步骤后，即可在你的应用中看到一个完整的聊天界面。你可以根据需求进一步自定义样式和功能。