👊

Claude3のAPIでAI Gatewayを使う

2024/03/14に公開

Claudeのjavascript SDKである@anthropic-ai/sdkを使っている環境でAI Gatewayを使おうとしたらハマったので解決策を書いておきます。

無難に動かしてみようとする

OpenAIのパッケージでAI Gatewayを使っている感覚で以下のように指定してみました。

import Anthropic from '@anthropic-ai/sdk';

const anthropic = new Anthropic({
    apiKey: process.env.CLAUDE_API_KEY,
    baseURL: "https://gateway.ai.cloudflare.com/v1/xxxxxxxxxxxxxxxxxx/example/anthropic"
});

そして実際にClaude 3を呼び出してみると以下のエラーが出ます

NotFoundError: 404 {"type":"error","error":{"type":"not_found_error","message":"Not Found"}}
.... (略)
 {
  status: 404,
  headers: {
    .... (略)
  },
  error: {
    type: 'error',
    error: { type: 'not_found_error', message: 'Not Found' }
  }
}

なんじゃこりゃ...
どうやらClaudeのAPI側の都合上、AI GatewayのリクエストのURLが微妙におかしいことになっているようです。

具体的に調べてみると
https://gateway.ai.cloudflare.com/v1/xxxxxxxxxxxxxxxxxx/example/anthropic/messages
に送られるべきリクエスト(cloudflare側が想定しているリクエスト)が
https://gateway.ai.cloudflare.com/v1/xxxxxxxxxxxxxxxxxx/example/anthropic/v1/messages
こちらのURLに送信されているようです。

ごり押す

どうしようもなさそうなのでSDKのfetchをいじってごり押します。

import Anthropic from '@anthropic-ai/sdk';
const anthropic = new Anthropic({
    apiKey: process.env.CLAUDE_API_KEY,
    baseURL: "https://gateway.ai.cloudflare.com/v1/xxxxxxxxxxxxxxxxxx/example/anthropic",
    fetch: async (url: RequestInfo, init?: RequestInit): Promise<Response> => {
        if (typeof url === "string") {
            return await fetch(url.replace(/(\/v1)(?!.*\/v1)/, ''), init);
        } else {
            return await fetch(url, init);
        }
    },
});

うごいた!!!
ということで完全ごり押しなのでcloudflareさんの対応を待ちましょう

無難に動かしてみようとする

ごり押す

Discussion