For the complete documentation index, see llms.txt. Markdown versions of documentation pages are available by appending .md to the page URL.
メインナビゲーション
Theme

おすすめ

Agents API

Agents SDK

ChatKit

API ダッシュボード
ChatGPT を試す

ChatKit

ChatKit で埋め込み型チャットを構築し、カスタマイズできます。

エージェントを活用したチャットの構築には ChatKit が最適です。社内ナレッジベースを検索するアシスタント、新入社員のオンボーディングを支援するアシスタント、調査や買い物、日程調整のアシスタント、トラブルシューティング用のボット、資金計画のアドバイザー、サポートエージェントなど、さまざまな用途に対応します。ChatKit が提供する埋め込み型チャットは、ユーザー体験を細部までカバーし、用途に合わせてカスタマイズできます。

ChatKit には、埋め込み可能な UI ウィジェット、カスタマイズ可能なプロンプト、ツールの呼び出し、ファイル添付、思考の連鎖を可視化する機能が用意されています。これらの機能を使えば、チャット UI を一から作らずにエージェントを構築できます。

概要

ChatKit の統合方法は次の 2 つから選べます。

  • 独自サーバーとの統合。独自のインフラで ChatKit を実行します。ChatKit Python SDK を使うと、Agents SDK で構築したサービスをはじめ、任意のエージェントサービスに接続できます。フロントエンドはウィジェットを使って構築します。
  • Agent Builder がホストする既存のワークフローとの統合。すでに ChatKit を Agent Builder のワークフローと組み合わせて使用している場合は、Agent Builder の移行期間中もそのワークフローを引き続き利用できます。

OpenAI は Agent Builder の提供を段階的に終了します。既存のユーザーは移行期間中も Agent Builder を利用できます。提供終了は 2026 年 11 月 30 日の予定です。ChatKit は引き続き利用できます。新規開発や移行を計画する際は、ChatKit の高度な統合を使い、独自のサーバー側エージェントに接続してください。Agent Builder からの移行手順については、Agent Builder からの移行を参照してください。

ChatKit の導入

Custom server integration
Custom server integration
Use any server and the ChatKit SDKs to build your own custom ChatKit user experience
Existing hosted workflow
Existing hosted workflow
Connect ChatKit to an existing Agent Builder workflow during the transition window

フロントエンドへの ChatKit の埋め込み

ここで説明する方法は、すでに ChatKit のバックエンドとして Agent Builder のワークフローを使用している場合に限り利用してください。新しい ChatKit アプリを構築する場合や、Agent Builder の提供終了前に移行する場合は、高度な統合を使って ChatKit を独自のサーバー側エージェントに接続してください。

既存のホスト型ワークフローで ChatKit をセットアップする手順は、大きく 3 つに分かれます。まず、Agent Builder が利用できるうちに既存のワークフローを開きます。次に ChatKit をセットアップし、必要な機能を追加してチャットを構築します。


OpenAI がホストする ChatKit

1. 既存のホスト型ワークフローの利用

Agent Builder で既存のワークフローを開くと、ワークフロー ID を取得できます。移行を計画する際は、Agent Builder からの移行を参照してください。

フロントエンドに埋め込んだチャットは、選択したワークフローに接続します。

2. 製品への ChatKit の組み込み

ChatKit をセットアップするには、ChatKit セッションとサーバーのエンドポイントを作成し、ワークフロー ID を指定してクライアントシークレットを受け渡します。続いて、サイトに ChatKit を埋め込むためのスクリプトを追加します。

セキュリティ上の重要事項： ChatKit セッションを作成する際は、エンドユーザーごとに一意の値を user パラメーターに指定する必要があります。サーバー側でアプリケーションのユーザーを認証し、そのユーザーに固有の識別子をこのパラメーターで渡してください。

  1. サーバーでクライアントトークンを生成します。

    次の例では、OpenAI API を通じて ChatKit セッションを作成し、そのセッションのクライアントシークレットを返すサービスを起動します。

    # Replace the illustrative IDs and URLs below with your own resource values.
import hmac
import json
import os
from typing import Annotated

import requests
from fastapi import Depends, FastAPI, HTTPException
from fastapi.security import HTTPAuthorizationCredentials, HTTPBearer
from pydantic import BaseModel


api_key = os.environ["OPENAI_API_KEY"]
workflow_id = "wf_123"
authenticated_users: dict[str, str] = json.loads(
    os.environ["CHATKIT_AUTHENTICATED_USERS"]
)
bearer_auth = HTTPBearer(auto_error=False)


def get_authenticated_user_id(
    credentials: Annotated[
        HTTPAuthorizationCredentials | None,
        Depends(bearer_auth),
    ],
) -> str:
    if credentials is not None:
        for token, user_id in authenticated_users.items():
            if hmac.compare_digest(credentials.credentials, token):
                return user_id
    raise HTTPException(status_code=401, detail="Invalid authentication token")


class ChatKitSession(BaseModel):
    client_secret: str


app = FastAPI()


@app.post("/api/chatkit/session")
def create_chatkit_session(
    user_id: Annotated[str, Depends(get_authenticated_user_id)],
):
    response = requests.post(
        "https://api.openai.com/v1/chatkit/sessions",
        headers={
            "Authorization": f"Bearer {api_key}",
            "Content-Type": "application/json",
            "OpenAI-Beta": "chatkit_beta=v1",
        },
        json={
            "workflow": {"id": workflow_id},
            "user": user_id,
        },
        timeout=30,
    )
    response.raise_for_status()
    session = ChatKitSession.model_validate(response.json())
    return {"client_secret": session.client_secret}

    Ruby を使用する場合は、gem install webrick で WEBrick をインストールしてください。

    サービスを起動する前に、wf_123 を実際のワークフロー ID に置き換え、OPENAI_API_KEY と CHATKIT_AUTHENTICATED_USERS を設定してください。後者には、アプリケーションの Bearer トークンをユーザーごとの固定 ID に対応付ける JSON マップを指定します。本番環境では、環境変数で設定したこのマップを、アプリケーションの認証処理またはセッションを照会する処理に置き換えてください。

  2. サーバー側のコードで、ワークフロー ID とシークレットキーをセッションエンドポイントに渡します。

    クライアントシークレットは、ChatKit のフロントエンドがチャットセッションを開始または更新するために使用する認証情報です。保存せず、取得したらすぐに ChatKit クライアントライブラリに渡してください。

    GitHub の chatkit-js リポジトリを参照してください。

    Go を使用する場合は、go get github.com/openai/openai-go/v3@v3.70.0 を実行してください。Java を使用する場合は、Maven の依存関係に com.openai:openai-java:4.75.1 を追加してください。

    ChatKit セッショントークンの作成
    export default async function getChatKitSessionToken(deviceId) {
  const apiKey = process.env.OPENAI_API_KEY;
  if (!apiKey) {
    throw new Error("OPENAI_API_KEY is required");
  }

  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 ${apiKey}`,
    },
    body: JSON.stringify({
      workflow: { id: "wf_68df4b13b3588190a09d19288d4610ec0df388c3983f58d1" },
      user: deviceId,
    }),
  });

  if (!response.ok) {
    throw new Error(
      `Failed to create a ChatKit session: ${response.status} ${await response.text()}`
    );
  }

  const { client_secret } = await response.json();

  if (!client_secret) {
    throw new Error("ChatKit session response did not include client_secret");
  }

  return client_secret;
}

  3. プロジェクトのディレクトリで、ChatKit の React バインディングをインストールします。

    npm install @openai/chatkit-react

  4. ページに ChatKit の JS スクリプトを追加します。次のスニペットをページの <head> またはスクリプトを読み込む箇所に追加すると、ブラウザが ChatKit を取得して実行します。

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

  5. UI に ChatKit を表示します。React の MyChat コンポーネントに、現在のユーザーの Bearer トークンを返す getAppAuthToken 関数を渡します。JavaScript タブのコードを使用する場合は、スニペットのスコープ内で同じ関数を呼び出せるようにしてください。このコードは、認証情報をサーバーに送信してクライアントシークレットを取得し、ワークフローに接続したチャットウィジェットをマウントします。

    フロントエンドのコード
    import { ChatKit, useChatKit } from '@openai/chatkit-react';

   export function MyChat({ getAppAuthToken }) {
     const { control } = useChatKit({
       api: {
         async getClientSecret(existing) {
           if (existing) {
             // implement session refresh
            }

           const appAuthToken = await getAppAuthToken();
           const res = await fetch('/api/chatkit/session', {
             method: 'POST',
             headers: {
               'Authorization': 'Bearer ' + appAuthToken,
               '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 の実装

GitHub の ChatKit ドキュメント

認証の処理、テーマの適用、カスタマイズなどの方法を学べます。
ChatKit Python SDK

サーバー側のストレージ、アクセス制御、ツールなどのバックエンド機能を追加できます。
ChatKit JS SDK

ChatKit JS のリポジトリを参照できます。

ChatKit UI の体験

chatkit.world

対話型デモで ChatKit を試せます。
ウィジェットビルダー

利用できるウィジェットを一覧で確認できます。
ChatKit Playground

対話型デモを実際に操作しながら使い方を学べます。

動作するサンプル

GitHub のサンプル

実際に動作する ChatKit のサンプルから、実装のヒントを得られます。
スターターアプリのリポジトリ

リポジトリをクローンすると、そのまま動作するテンプレートを使って開発を始められます。

次のステップ

ChatKit が意図どおりに動作するようになったら、評価を使って最適化する方法を学びましょう。新しい ChatKit アプリを構築する場合や、Agent Builder がホストするワークフローから既存の ChatKit アプリを移行する場合は、高度な統合のドキュメントを参照してください。