Cloudflare AI Gatewayを、LangChain.jsで作ったアプリに入れてみた

Cloudflare Meetup OsakaでAI Gatewayの話を聞き、AI Gatewayを使ってみた。管理画面から名前を指定するだけでAI Gatewayを作成できる。APIエンドポイントはプラットフォームによって変わり、LangChain.jsでの実装方法が紹介された。Cloudflare Workersでの処理実行やログ機能の確認方法も解説。AI Gatewayの便利な機能や課金不要の利点があり、レスポンスキャッシュやレートリミットも設定可能。LangSmithなど他のツールとも併用が可能。

Cloudflare Meetup OsakaでAI Gatewayの話を聞いて気になったので、触ってみました。

AI Gatewayの作成は、名前を指定するだけ

管理画面からAI Gatewayは作成できます。作成する際は名前を入れるだけで、細かな設定などは不要でした。

作成すると、管理画面右上に小さく「API」と書かれたボタンがあります。これをクリックすることで、AI Gatewayを呼び出す際の実装方法がみれます。

こんな感じです。利用するプラットフォームによってAPIエンドポイントが変わります。ただ、パッとみた感じ、最後のパスが変わるだけ・・・のようにも見えました。

LangChain.jsで呼び出す

サンプルコードではプラットフォームごとのSDKで紹介されていましたが、あえてLangChain.jsから使ってみます。LangChainのChatモデルやLLMモデルには、apiUrlや{platformname}ApiUrlなどのパラメータが付いていることがあります。ここにCloudflareのAI Gatewayで発行したAPIエンドポイントを設定しましょう。例えばChatAnthoropicであればこのようになります。

 const model = new ChatAnthropic({
  temperature: 0.9,
  model: "claude-3-sonnet-20240229",
  apiKey: process.env.ANTHROPIC_API_KEY,
  maxTokens: 1024,
  anthropicApiUrl: 'https://gateway.ai.cloudflare.com/v1/XXXXXXX/NAME/anthropic'
});

これをLangChainのLCEL（Chain）で実装しましょう。サンプルではRAGなのですが、便宜上質問への回答をするだけの実装にしています。

const template = `
  ユーザからの質問があります。
  ユーザの質問に対する回答を生成してください。
  矛盾している内容がある場合は、その旨を回答してください。
  
  # 制約
  - 質問に関係のありそうな情報にのみ基づいて回答してください。
  
  # ユーザからの質問
  {question}
  
  # 回答:`;
  const customRagPrompt = PromptTemplate.fromTemplate(template);
  const ragChain = await createStuffDocumentsChain({
    llm: model,
    prompt: customRagPrompt,
    outputParser: new StringOutputParser(),
  });
  const result = await ragChain.invoke({
    question,
  });
  return c.text(`${result}\n## Source\n${removeDuplicates(source).map(source => `- ${source.title}; ${source.url}`).join('\n')}`)

あとはこの処理をCloudflare Workersなどで実行してみましょう。エラーが起きずに動作すれば、組み込み成功です。もし動かない場合は、設定したAPI URLを削除してみて、プラットフォーム側のAPIで動くかどうかを確認してみましょう。