OpenAI ChatKit：API 集成工具集开源

ChatKit 是一个开箱即用的框架，用于构建高质量的 AI 驱动型聊天体验。它专为希望快速将高级对话智能集成到应用中的开发者而设计，只需极少的配置，也不必重复造轮子。ChatKit 默认提供一套完整、可直接用于生产环境的聊天界面。

主要功能包括：

• 深度 UI 自定义，让 ChatKit 成为应用中浑然一体的一部分
• 内置响应流式传输，打造互动、自然的对话体验
• 集成工具与 workflow，用于可视化 Agent 行为和 chain-of-thought 推理过程
• 直接在聊天界面中渲染丰富的交互式 widget
• 支持附件处理，可上传文件和图片
• 提供 thread 和消息管理，用于组织复杂对话
• 支持来源标注和实体标签，提供透明度与引用依据

只需将 ChatKit 组件放入应用，配置几个选项，即可开始使用。

ChatKit 有什么不同？

ChatKit 是一种与框架无关、即插即用的聊天解决方案。你无须构建自定义 UI、管理底层聊天状态，也不用自行拼装各种功能。只需添加 ChatKit 组件，为其提供 client token，再根据需要定制聊天体验即可，不需要额外工作。

在服务器上生成 client token。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 }

在服务器上生成 client token。

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 }

安装 React bindings：npm install @openai/chatkit-react

安装 React bindings。

npm install @openai/chatkit-react

将 ChatKit JS script 添加到页面中：<script src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js" async ></script>

将 ChatKit JS script 添加到页面中。

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

渲染 ChatKit：import { 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]" />; }

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

Starter app —— 克隆仓库，从一个功能完备、可正常运行的模板开始。

Samples —— 查看 ChatKit 的实际运行示例，从中获取灵感。

本项目采用 Apache License 2.0 许可证。