Chatpad を Cloudflare Pages にデプロイして Cloudflare AI Gateway を使う

# 目的

[deiucanta/chatpad](https://github.com/deiucanta/chatpad) をフォーク・修正した [kyouheicf/chatpad](https://github.com/kyouheicf/chatpad) を使って、以下のような構成を組んで、Cloudflare AI Gateway がどのように使えるかを試してみます。

![chatpad.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/889c05a1-f1f7-f41c-17a8-64731f77382f.png)

# 参考：Cloudflare AI Gateway とは

- [AI Gateway (Beta) · Cloudflare AI Gateway docs](https://developers.cloudflare.com/ai-gateway/)
> 主な機能は以下の通りです：
> - 分析： リクエスト数、トークン数、アプリケーションの実行にかかるコストなどのメトリクスを表示します。
> - リアルタイムログ： リクエストとエラーに関する洞察を得る
> - キャッシュ: 元のモデルプロバイダーの代わりにCloudflareのキャッシュから直接リクエストを配信することで、リクエストの高速化とコスト削減を実現します。
> - レート制限： アプリケーションが受け取るリクエスト数を制限することで、アプリケーションのスケールをコントロール
> - リクエストの再試行とフォールバック： エラー発生時のリクエストの再試行とモデルのフォールバックを定義することで、回復力を向上させます。
> - お気に入りのプロバイダーのサポート Workers AI、OpenAI、Azure OpenAI、HuggingFace、ReplicateはすべてAI Gatewayで動作します。
> - レスポンスストリーミング：AI Gatewayはレスポンスストリーミングをサポートします。

![cf_ai_gateway.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/c2ae5e55-92b9-d2b6-cb8d-709d95d244d8.png)

![cf_ai_valuechain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/0084cab3-9fd6-ebb8-127e-666a69f12de3.png)

# Cloudflare Pages にデプロイ

以下のガイドに沿って進めます。

- [Get started guide · Cloudflare Pages docs](https://developers.cloudflare.com/pages/get-started/guide/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/58563664-4dc2-7f8f-d6e4-bfcc269b249e.png)

ビルド設定では、以下のようにしてください。

- Framework preset : `Create React App`
- ビルド出力先 `/dist`
- 環境変数 `NODE_VERSION = 18.15.0`
- 環境変数 `YARN_VERSION = 1`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/6549af26-c743-25eb-e36c-1bba27e21936.png)

デプロイ成功時のログは以下のような形になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/f1678574-ba7f-ebb0-4cce-50860a40c3cd.png)

# Cloudflare Access 設定
- [Preview deployments · Cloudflare Pages docs](https://developers.cloudflare.com/pages/configuration/preview-deployments/#customize-preview-deployments-access)

後ほど API キーを入力して利用する場面が出てくるため、Cloudflare Access で認証を設定します。
Pages プロジェクトの `Settings > Access policy` から有効化します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/e372274f-6932-693a-6783-2023a2fddf9a.png)

`Manage Policies` から Cloudflare Access の設定を確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/d64683ad-d0fe-6485-7283-3e3f67fc0e0d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/4b10ab81-5ed9-7ec7-4191-ba65626f623c.png)

デフォルトだと `*.chatpadXXXX.pages.dev` は登録されますが、`chatpadXXXX.pages.dev` は対象外となってしまっているため、ワイルドカードなしの `chatpadXXXX.pages.dev` も登録します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/41d1b3bf-89e4-4dc2-666d-b99682cdc3d0.png)

デフォルトでは以下のように Email で One Time PIN を求められるような認証です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/8e3b3c34-66c5-1196-e3a1-d4c0c7848d4f.png)

# Cloudflare AI Gateway 設定

以下の手順で Cloudflare AI Gateway のエンドポイントを作成します。

> - [Creating an AI Gateway · Cloudflare AI Gateway docs](https://developers.cloudflare.com/ai-gateway/get-started/creating-gateway/)
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/9e5bf587-d023-5329-5e32-65f4c3408e9c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/e6f2b5d4-90c8-1760-ca73-a5e98463561a.png)

エンドポイント作成後、リアルタイムログを有効化します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/93e63f1f-9145-168a-0567-2c74a6019294.png)

また、上記の `API Endpoints` から OpenAI 等の AI プロバイダ向けエンドポイントが確認できます。
このたった1行のコードで始められるというところがミソですね。

- [Connecting your application · Cloudflare AI Gateway docs](https://developers.cloudflare.com/ai-gateway/get-started/connecting-applications/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/fc3b6c6c-2326-594a-7b1e-1c8969e669b6.png)

# Chatpad 設定
Cloudflare Access によって保護された Cloudflare Pages 上に Chatpad がデプロイされたので、Chatpad でカスタムプロバイダを設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/39764019-5948-00a3-1485-82b6c6ddbbad.png)

今回は OpenAI の API キーを使って Cloudflare AI Gateway のエンドポイントを設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/f8c63a37-0582-1b5b-493a-e462698c3414.png)

保存すると、ブラウザ開発者ツール内のコンソールでも以下の表示が得られます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/b8997924-95be-26a9-4506-af8c4af53262.png)


# Cloudflare AI Gateway の分析とログ
この状態でチャットを開始すると、返答を得られました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/361eb1ed-7ce0-d577-a681-416263a4fb2d.png)

Cloudflare AI Gateway のリアルタイムログでもストリーミングデータが `Parsed` された状態でのレスポンスが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/f7d7f9f6-3061-90f1-e42a-abe83e4d20d3.png)

分析画面では、トークン数やコストも含めた統計的な傾向が把握できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/fa6a20ff-2ede-1044-4aa8-d3a9f5963399.png)

また、以下のファイル内で返答トークン数を制限していますが、必要に応じて変えてみてください。

```typescript:src/utils/openai.ts
max_tokens: 256,
```

# まとめ

Chatpad のツールと簡単なコード変更で Cloudflare AI Gateway を通して OpenAI の chat/completions API を使い始めることができました。

Cloudflare AI Gateway に接続することで、分析やロギングによってアプリケーションの利用状況を把握し、キャッシングやレート制限、リクエストの再試行、モデルのフォールバックなどの機能によってアプリケーションのスケールを制御することができます。ぜひ活用してみてください。