はじめに
「OpenAI・Anthropic互換APIを無料で使おう！「さくらのAI Engine」3,000リクエスト使い切りチャレンジ」という企画を見かけて、参加させていただいています。
せっかくなので、私が開発している Windows 向け AI ワークスペース Compass を使って、AI が永遠になぞかけを続ける Web ページを作ることにしました。
開発も実行時も、さくらのAI を使わせていただきました。本記事では、何を作ったか・どう作ったか・どれくらいリクエストを消費したかをまとめます。
作ったもの：「エンドレスなぞかけ」
ページを開くと、そのままなぞかけが始まります。
1 分ごとに次の流れが自動で進みます。
- 出題者 AI がランダムなジャンルのお題を出す
- 回答者 AI がひねりの効いたなぞかけの答えを考える
- 評価者 AI が 100 点満点で採点する
- 高得点の回答は ランキング に残る
UI は落語家風の和風デザインにしてあり、Web Speech API による 音声読み上げの ON/OFF も切り替えられます。
技術スタックは Next.js + TypeScript です。ランキングはブラウザの localStorage に保存されるので、サーバー側の DB は不要です。
作り方：Compass でバイブコーディング
Compass とは
Compass は、私が開発している Windows 向け AI ワークスペース です。テキストを広範囲に処理するアプリを基本としつつ、Web ページの開発 もできるようにしています。OSS として公開しているので、興味があればダウンロードして使ってみてください。
開発の進め方
作り方はシンプルです。
- Compass の AI チャットに、作りたい Web ページの説明を入れる
- 生成されたコードを確認する
- 気に入らないところを指示して修正してもらう
- 繰り返す
いわゆる バイブコーディング（Vibe Coding） です。設計書を最初から書き下ろすというより、「こういう画面がほしい」「この部分を直して」と会話しながら形にしていくスタイルです。
コーディングに使った LLM
コード生成には preview/Kimi-K2.7-Code を使いました。非常に順調にコードを書いてもらえたのですが、ある程度進んだところで API 利用時のレート制限 が返ってくるようになり、休み休み作業 することになりました。バイブコーディングは快適ですが、LLM 側の制限も意識する必要がありますね。
完成したもの
こんな感じになりました。
左右が Compass、中央が完成した「エンドレスなぞかけ」です。
実行時に使ったさくらのAI
アプリ本体の AI（出題・回答・評価）には、もちろん さくらのAI API（OpenAI 互換）を使いました。
| 役割 | 内容 |
|---|---|
| 出題者 AI | ランダムなジャンルのお題を生成 |
| 回答者 AI | お題に対するなぞかけの答えを生成 |
| 評価者 AI | 回答を 100 点満点で採点 |
モデルの選定
gpt-oss-120b を使いました。安定して期待どおりの出力が返ってきます。
なぞかけなので国産モデルがいいのでは、と llm-jp-3.1-8x13b-instruct4 も試してみたのですが、お題に対して関係なさそうな長文が返ってきて、言うことを聞いてくれませんでした。用途に合ったモデル選びは大事だな、と改めて実感しました。
環境変数は .env で以下のように設定しています。
NEXT_PUBLIC_SAKURA_API_BASE_URL=https://api.ai.sakura.ad.jp/v1
NEXT_PUBLIC_SAKURA_API_KEY=your_api_key_here
SAKURA_MODEL=gpt-oss-120b
1 問あたり API を 3 回（出題・回答・評価）呼ぶので、1 分に 1 問ペースだと 1 時間で約 180 リクエスト 消費します。3,000 リクエストチャレンジとの相性は、計算するとだいたい 16〜17 時間 分。エンドレス、と名付けましたが、無制限ではないですね（笑）。
ソースコード
GitHub に公開しています。
- エンドレスなぞかけ: https://github.com/niki-ikuo/endlessnazokake
- Compass: https://github.com/niki-ikuo/compass
git clone https://github.com/niki-ikuo/endlessnazokake.git
cd endlessnazokake
npm install
cp .env.example .env
# .env にさくらのAI API キーを設定
npm run dev
ブラウザで http://localhost:3000 を開けば動きます。API キー未設定の場合はデモモードでランダムなお題・回答が表示されます。
リクエストの消費状況
さくらのAI Engine の 3,000 リクエスト使い切りチャレンジ、現在の消費状況はこんな感じです。
開発（Compass + Kimi-K2.7-Code）と実行（エンドレスなぞかけ × gpt-oss-120b）の両方で API を消費しているので、内訳も意識しながら使っています。
※ 今回の作業は 7/30 にほとんどの作業を行っています。
まとめ
- 「さくらのAI Engine 3,000リクエスト使い切りチャレンジ」のきっかけで、AI が永遠になぞかけする Web ページを作った
- 開発は自作の Compass で バイブコーディング。コーディング LLM は Kimi-K2.7-Code
- 実行時の AI は さくらのAI + gpt-oss-120b が安定。国産モデルは今回の用途ではうまくいかなかった
- ソースは GitHub で公開済み
さくらのAI Engine は OpenAI / Anthropic 互換 API として手軽に使え、Next.js アプリからも axios でそのまま呼べました。Compass との組み合わせも、Web ページを会話しながら作れるので相性がよかったです。
同じチャレンジに参加している方、面白い使い方があればぜひ教えてください。