JavaScriptとCloudflare Workersを使用したOpenAI GPT関数呼び出し

Last reviewed: over 1 year ago

このチュートリアルでは、OpenAIの最新のチャット完了APIモデルで利用可能なOpenAIの関数呼び出し ↗機能を活用するプロジェクトを構築します。

関数呼び出し機能により、AIモデルは入力に基づいて関数を呼び出すタイミングをインテリジェントに決定し、関数のシグネチャに一致するJSON形式で応答します。この関数呼び出し機能を使用して、ユーザーからのメッセージに関連する情報を含むウェブサイトのURLをモデルに特定させ、そのサイトのテキストコンテンツを取得し、最終的にリアルタイムのウェブデータに基づいたモデルからの最終応答を返します。

学べること

OpenAIの関数呼び出し機能の使用方法。
Cloudflare WorkerにOpenAIのAPIを統合する方法。
Cheerioを使用してウェブサイトのコンテンツを取得および処理する方法。
JavaScriptでのAPI応答と関数呼び出しの処理方法。
Wranglerを使用してAPIキーをシークレットとして保存する方法。

Before you start

All of the tutorials assume you have already completed the Get started guide, which gets you set up with a Cloudflare Workers account, C3 ↗, and Wrangler.

1. 新しいWorkerプロジェクトを作成する

コマンドラインでWorkerプロジェクトを作成します：

npm create cloudflare@latest -- openai-function-calling-workers

yarn create cloudflare@latest openai-function-calling-workers

pnpm create cloudflare@latest openai-function-calling-workers

For setup, select the following options:

For What would you like to start with?, choose Hello Worldの例.
For Which template would you like to use?, choose Hello World Worker.
For Which language do you want to use?, choose JavaScript.
For Do you want to use git for version control?, choose Yes.
For Do you want to deploy your application?, choose No (we will be making some changes before deploying).

新しいopenai-function-calling-workers Workerプロジェクトに移動します：

cd openai-function-calling-workers

新しいopenai-function-calling-workersディレクトリ内で、src/index.jsファイルを見つけます。このファイルをチュートリアルのほとんどの設定に使用します。

このチュートリアルにはOpenAIアカウントとAPIキーが必要です。まだ持っていない場合は、新しいOpenAIアカウントを作成 ↗し、APIキーを作成 ↗してこのチュートリアルを続行してください。APIキーは安全な場所に保存して、後で使用できるようにしてください。

2. OpenAIにリクエストを送信する

Workerプロジェクトを作成したら、OpenAIに最初のリクエストを送信します。OpenAI APIと対話するためにOpenAIノードライブラリを使用します。このプロジェクトでは、ウェブサイトのHTMLコンテンツを処理するためにCheerioライブラリも使用します。

npm install openai cheerio

次に、index.jsでWorkerの構造を定義します：

export default {
  async fetch(request, env, ctx) {
    // OpenAI APIを初期化
    // 受信リクエストを処理
    return new Response("Hello World!");
  },
};

export defaultの上に、openaiとcheerioのインポートを追加します：

import OpenAI from "openai";
import * as cheerio from "cheerio";

fetch関数内で、OpenAIクライアントをインスタンス化します：

async fetch(request, env, ctx) {
  const openai = new OpenAI({
    apiKey: env.OPENAI_API_KEY,
  });

  // 受信リクエストを処理
  return new Response('Hello World!');
},

wrangler secret putを使用してOPENAI_API_KEYを設定します。このシークレットの値は、OpenAIダッシュボードで以前に作成したAPIキーです：

npx wrangler secret put <OPENAI_API_KEY>

ローカル開発のために、Workerプロジェクト内に新しいファイル.dev.varsを作成し、この行を追加します。OPENAI_API_KEYを自分のOpenAI APIキーに置き換えてください：

OPENAI_API_KEY = "<YOUR_OPENAI_API_KEY>"

次に、OpenAIのチャット完了API ↗にリクエストを送信します：

export default {
  async fetch(request, env, ctx) {
    const openai = new OpenAI({
      apiKey: env.OPENAI_API_KEY,
    });

    const url = new URL(request.url);
    const message = url.searchParams.get("message");

    const messages = [
      {
        role: "user",
        content: message ? message : "今日のニュースは何ですか？",
      },
    ];

    const tools = [
      {
        type: "function",
        function: {
          name: "read_website_content",
          description: "指定されたウェブサイトのコンテンツを読み取る",
          parameters: {
            type: "object",
            properties: {
              url: {
                type: "string",
                description: "読み取るウェブサイトのURL",
              },
            },
            required: ["url"],
          },
        },
      },
    ];

    const chatCompletion = await openai.chat.completions.create({
      model: "gpt-4o-mini",
      messages: messages,
      tools: tools,
      tool_choice: "auto",
    });

    const assistantMessage = chatCompletion.choices[0].message;
    console.log(assistantMessage);

    //後でアシスタントの応答をここで処理します
    return new Response(assistantMessage.content);
  },
};

OpenAIに渡している引数を確認します：

model: これはOpenAIにリクエストに使用してほしいモデルです。この場合、gpt-4o-miniを使用しています。
messages: これは会話の一部であるすべてのメッセージを含む配列です。最初にユーザーからのメッセージを提供し、後でモデルからの応答を追加します。ユーザーメッセージの内容は、リクエストURLのmessageクエリパラメータか、デフォルトの「今日のニュースは何ですか？」のいずれかです。
tools: AIモデルが利用可能なアクションを含む配列です。この例では、指定されたウェブサイトのコンテンツを読み取るread_website_contentという1つのツールのみがあります。
- name: 関数の名前です。この場合、read_website_contentです。
- description: モデルに関数の目的を知らせる短い説明です。これはオプションですが、モデルがツールを選択するタイミングを知るのに役立ちます。
- parameters: 関数を説明するJSONスキーマオブジェクトです。この場合、urlという必須プロパティを含むオブジェクトの応答を要求します。
tool_choice: この引数は技術的にはオプションですが、autoがデフォルトです。この引数は、OpenAIが関数呼び出しまたは通常のメッセージ応答のいずれかを返すことができることを示します。

3. `read_website_content()`関数を構築する

次に、tools配列で参照されているread_website_content関数を定義する必要があります。read_website_content関数は、指定されたURLのコンテンツを取得し、cheerioライブラリを使用して<p>タグからテキストを抽出します。

このコードをindex.jsファイルのexport defaultブロックの上に追加します：

async function read_website_content(url) {
  console.log("ウェブサイトのコンテンツを読み取っています");

  const response = await fetch(url);
  const body = await response.text();
  let cheerioBody = cheerio.load(body);
  const resp = {
    website_body: cheerioBody("p").text(),
    url: url,
  };
  return JSON.stringify(resp);
}

この関数では、OpenAIから受け取ったURLを使用して、JavaScriptのFetch API ↗を使用してウェブサイトのコンテンツを取得し、段落テキストを抽出します。次に、この関数を呼び出すタイミングを決定する必要があります。

4. アシスタントのメッセージを処理する

次に、OpenAI APIからの応答を処理して、関数呼び出しが含まれているかどうかを確認する必要があります。関数呼び出しが存在する場合は、Worker内で対応する関数を実行する必要があります。アシスタントが複数の関数呼び出しを要求する可能性があることに注意してください。

export defaultブロック内のfetchメソッドを次のように修正します：

// ... 前のコード ...

if (assistantMessage.tool_calls) {
  for (const toolCall of assistantMessage.tool_calls) {
    if (toolCall.function.name === "read_website_content") {
      const url = JSON.parse(toolCall.function.arguments).url;
      const websiteContent = await read_website_content(url);
      messages.push({
        role: "tool",
        tool_call_id: toolCall.id,
        name: toolCall.function.name,
        content: websiteContent,
      });
    }
  }

  const secondChatCompletion = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: messages,
  });

  return new Response(secondChatCompletion.choices[0].message.content);
} else {
  // これは既存のreturn文です
  return new Response(assistantMessage.content);
}

アシスタントメッセージに関数呼び出しが含まれているかどうかをtool_callsプロパティを確認してチェックします。AIモデルはデフォルトで複数の関数を呼び出すことができるため、潜在的な関数呼び出しをループしてmessages配列に追加する必要があります。各read_website_content呼び出しは、以前に定義したread_website_content関数を呼び出し、OpenAIによって生成されたURLを引数として渡します。

secondChatCompletionは、各関数呼び出しから取得したデータに基づいた応答を提供するために必要です。最後のステップは、Workerをデプロイすることです。

npx wrangler devを実行してコードをテストし、提供されたURLをブラウザで開きます。これにより、取得したウェブデータからのリアルタイム情報を使用したOpenAIの応答が表示されます。

5. Workerアプリケーションをデプロイする

アプリケーションをデプロイするには、npx wrangler deployコマンドを実行してWorkerアプリケーションをデプロイします：

npx wrangler deploy

これで、<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.devでWorkerをプレビューできます。このURLにアクセスすると、OpenAIからの応答が表示されます。オプションで、カスタムメッセージを書くためにmessage URLパラメータを追加します。例えば、https://<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev/?message=NYCの今日の天気は？のようにします。

6. 次のステップ

このチュートリアルの完成したコードをGitHubで参照 ↗してください。

WorkersとAIを引き続き使用するには、LangChainとCloudflare Workersを一緒に使用するガイド ↗や、Cloudflare WorkersでChatGPTプラグインを構築する方法 ↗を参照してください。

質問がある場合、支援が必要な場合、またはプロジェクトを共有したい場合は、Cloudflare開発者コミュニティに参加して、他の開発者やCloudflareチームとつながるためにDiscord ↗に参加してください。

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings