Closed15

ChatKit・Agent Builder・Widget Builderを手軽に試して、デプロイするまで。

shinya furumatashinya furumata

https://chatkit.studio/

GUIでポチポチできるものとしては、

  • Playground
  • Widget Builder
  • chatkit.world
    がある。

Playgroundは、ChatのデザインをGUIでポチポチ変えてプレビューできる便利ツール。
chatkit.worldは、単なるデモ。

この中ではWedget Builderしか使わない。
Wedget Builderは後述するAgent Builderのoutput formatとして指定できるWedgetを作成・ダウンロードできるツール。これは便利そう。

shinya furumatashinya furumata

https://platform.openai.com/agent-builder

これが本丸のAgent Builder。GUIで簡単にChatの処理部分を定義できるツール。
今回はシンプルなツールを作るので、ファイルをもらって想定問答を10個返すエージェントを作ってみる。

他にもGuardrailsを追加したり、Vector Storeと連携したFileSearchを追加したり、MCPを繋いだり、かなり簡単にできる印象。

shinya furumatashinya furumata
  • Previewで動作確認ができる
  • Publishでworkflow Idを発行できる

かなりシンプルに完成した。

shinya furumatashinya furumata

せっかくなので、Widget Builderでwidgetもつくってみる。

ぽいのができたが、解答が長くなったときに見た目が悪くなりそう。あと、tagがいらないので作り直し。

適当にプロンプトを打つ

デモ画面では全文表示のボタンが動かないがぽいのができたので、いったんok。

.widgetファイルをダウンロードする。

Agent Builderに戻り、エージェントのOutput formatに作ったWidgetを追加で完了

shinya furumatashinya furumata

Widgetを追加したAgentをデモしてみる。とりあえずOpenAIのAgentKitに関するツイートを投げてみる

動いた。GUIでここまで作り込めるのは、なかなか感動。

Agent Kitは大枠こんな感じ。

shinya furumatashinya furumata

Cloneして、npm installして、環境変数にOpen AIのAPI Keyと、Agent builderで発行したworkflow idを追加する。

そしてnpm run dev

workflow not found

失敗した。

shinya furumatashinya furumata

あー、api keyを作ったプロジェクトとAgentを作ったプロジェクトが違うからかな

shinya furumatashinya furumata

issueに返信きてた。

We'll get the docs fixed, in the meantime, the reference is correct - uploadStrategy moved to api and is only required if you are using a custom backend. If you are using hosted ChatKit you need to enable uploads when you create the ChatKitSession. You'll still need to enable them client side as well. We'll see about simplifying that.

クライアント側でattachmentをenableにすることだけではなく、
ChatKitSessionを作るときにもfile_uploadのoptionをつけてやらんとだめらしい。

ChatKitPanel.tsx

      try {
        const response = await fetch(CREATE_SESSION_ENDPOINT, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            workflow: { id: WORKFLOW_ID },
// ここから
            chatkit_configuration: {
              file_upload: {
                enabled: true,
                max_file_size: 20, //ここはbyteではなくMBなので注意
                max_files: 3,
              },
            },
//ここまで追加
          }),
        });

あと、CREATE_SESSION_ENDPOINT側でも反映されるように設定

app/api/create-session/route.ts

interface CreateSessionRequestBody {
  workflow?: { id?: string | null } | null;
  scope?: { user_id?: string | null } | null;
  workflowId?: string | null;
  chatkit_configuration?: Record<string, unknown>; // ここ追加
}

    const parsedBody = await safeParseJson<CreateSessionRequestBody>(request);
    const { userId, sessionCookie: resolvedSessionCookie } = await resolveUserId(request);
    sessionCookie = resolvedSessionCookie;
    const resolvedWorkflowId =
      parsedBody?.workflow?.id ?? parsedBody?.workflowId ?? WORKFLOW_ID;
    const chatkitConfiguration = parsedBody?.chatkit_configuration; // ここ追加


    const upstreamResponse = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${openaiApiKey}`,
        "OpenAI-Beta": "chatkit_beta=v1",
      },
      body: JSON.stringify({
        workflow: { id: resolvedWorkflowId },
        user: userId,
//ここから
        ...(chatkitConfiguration
          ? { chatkit_configuration: chatkitConfiguration }
          : {}),
//ここまで追加
      }),
    });

無事動いた。

shinya furumatashinya furumata

Vercelにデプロイして、環境変数を設定すれば問題なく動いた。
(ウィジェットは邪魔なので消した)

このスクラップは10日前にクローズされました