さくらのAI Engine × Claude CodeではじめるAgentic Coding

本記事は、Claude Code + さくらのAI EngineではじめるAgentic Codingを加筆修正したものです。

いまやAIは仕事に欠かせない存在になりました。数あるAIサービスの中でもプログラミングにおいてはClaude Codeの存在感が強く、SNSや情報共有サイトで毎日のように見かけます。

しかし、Claude Codeを使うにはProで月17ドル、Maxで月100ドル、場合によってはさらに使用量で課金されるため、少し触ってみたい人にとって心理的なハードルが高くなりがちです。

本記事では、無料枠を提供しているさくらのAI EngineとClaude Code Routerを組み合わせて、簡単なWebアプリケーションを開発するまでの流れを紹介します。

Agentic Codingはどのようなものなのか、体験してみましょう。

さくらのAI Engineとは？
Claude Code Routerとは？
Claude CodeとClaude Code Routerをインストールする
さくらのAI Engineで「基盤モデル無償プラン」を契約する
さくらのAI Engineでアカウントトークンを作成する
Claude Code Routerを設定する
Claude Codeを動かしてみる
実践編: Claude CodeでWebアプリケーションを開発する

さくらのAI Engineとは？

さくらのAI Engineは、さくらインターネットが提供する生成AI向けのプラットフォームで、OpenAI互換のAPIを通じて複数の基盤モデルを利用できます。

「基盤モデル無償プラン」を契約することで月3,000リクエストまでは無料で利用できます。上限に達しても従量課金プランには移行しないため、コストを管理しやすいのが特徴です。

2026年2月時点では、以下のモデルが利用可能です。最新の情報は、さくらのAI Engineの公式サイトを参照してください。

モデル名	用途
Qwen3-Coder-30B-A3B-Instruct	コーディング
Qwen3-Coder-480B-A35B-Instruct-FP8	コーディング
gpt-oss-120b	汎用
llm-jp-3.1-8x13b-instruct4	国産
preview/Phi-4-mini-instruct-cpu	パブリックプレビュー、CPU
preview/Phi-4-multimodal-instruct	パブリックプレビュー、マルチモーダル
preview/Qwen3-0.6B-cpu	パブリックプレビュー、CPU
preview/Qwen3-VL-30B-A3B-Instruct	パブリックプレビュー、マルチモーダル
multilingual-e5-large	ベクトル埋め込み
preview/Qwen3-Embedding-4B-FP16	パブリックプレビュー、ベクトル埋め込み
whisper-large-v3-turbo	音声

Claude Code Routerとは？

Claude Code Routerは、Claude Codeの機能やシステムプロンプトを使いながら任意のプロバイダーを利用するためのOSSです。

AnthropicのAPIの代わりに、さくらのAI Engineにリクエストをルーティングすることで無料でClaude Code互換の体験ができます。

Claude CodeとClaude Code Routerをインストールする

Claude CodeとClaude Code Routerをグローバルインストールします。

npm install -g @anthropic-ai/claude-code
npm install -g @musistudio/claude-code-router

インストールしただけでは使えないため、AIモデルプロバイダーを設定します。

さくらのAI Engineで「基盤モデル無償プラン」を契約する

さくらのクラウドを使うためには、さくらインターネットの会員登録とさくらのクラウドのプロジェクトの作成が必要です。さくらのAI Engineのご利用の流れを参考に会員登録とプロジェクトの作成を作成します。

さくらのクラウドからログインし、「さくらのAI Engine」メニューから遷移します。

さくらのクラウドホーム。クラウド関連のメニューがいくつか並んでおり、中段あたりに「さくらのAI Engine」のメニューがある。 — さくらのクラウドホーム

さくらのAI Engineのページに遷移した直後に表示されるサービス約款への同意ダイアログが表示されている。 — サービス約款への同意

準備ができたら、さくらのAI Engineのプランを選択します。「基盤モデル無償プラン」と「従量課金プラン」がありますので、「基盤モデル無償プラン」を選択します。

さくらのAI Engineのプラン。左に基盤モデル無償プラン、右に従量課金プランが並んでいる。

さくらのAI Engineの基盤モデル無償プランの契約ボタンが表示されている。 — 基盤モデル無償プランの契約ページ

「基盤モデル無償プラン」と「従量課金プラン」の違い

基盤モデル無償プランは、利用上限に達するまで従量課金プランと同様に利用できます。上限に達しても従量課金プランに自動的に移行しないため料金は発生しません。

従量課金プランは上限なしに利用できます。また、商用利用を前提としたクローズドモデル（要申請・法人のみ）が利用できます。

さくらのAI Engineでアカウントトークンを作成する

サイドメニューの「アカウントトークン」からアカウントトークンを作成します。Claude Code Routerにこのトークンを設定することで、さくらのAI Engineを使ってClaude Codeを実行できます。

さくらのAI Engineのページのサイドメニューが表示されており、上から2つ目にアカウントトークンのメニューがある。

さくらのAI Engineのアカウントトークンのページ。画面中央にアカウントトークンを作成というボタンがある。 — アカウントトークン

さくらのAI Engineのアカウントトークンの作成ページ。アカウントトークン名には、サンプルとしてclaude-code-routerと入力されている。画面左に作成するボタンがある。 — アカウントトークンの作成ページ

アカウントトークンは作成直後に一度しか表示されないので、必ず保存してください。忘れてしまった場合は再作成できます。

アカウントトークンの作成完了というダイアログの中にアカウントトークンが表示されている。その左下にはコピーボタンが配置されている。 — アカウントトークンの作成完了

Claude Code Routerを設定する

ホームディレクトリに設定ファイル（.claude-code-router/config.json）を作成します。

cd ~
mkdir .claude-code-router
touch .claude-code-router/config.json

取得したアカウントトークンを使ってさくらのAI Engineを利用できるようにプロバイダーの設定します。

さくらのAI Engineで利用可能なモデルが一覧表示されている。各セクションの上部にはAPIエンドポイントがあり、その下にモデル名やタグ、ステータス、料金が表示されている。 — 利用可能なモデル一の覧ページ

// .claude-code-router/config.json
{
  "providers": [
    {
      "name": "sakura",
      "api_base_url": "https://api.ai.sakura.ad.jp/v1/chat/completions",
      "api_key": "<ここに先ほど取得したアカウントトークンを設定する>",
      "models": [
        // さくらのAI Engineで利用可能なモデル名をそのまま設定します
        "Qwen3-Coder-480B-A35B-Instruct-FP8",
        "gpt-oss-120b"
      ],
      "transformer": {
        "use": [
          [
            "languagePolicy",
            {
              "lang": "ja-JP"
            }
          ]
        ]
      }
    }
  ],
  "router": {
    // 先頭の"sakura"はproviders.nameで設定した名前です
    // background/think/webSearch/imageなど用途によってモデルを設定できます
    "default": "sakura,Qwen3-Coder-480B-A35B-Instruct-FP8",
    "longContextThreshold": 60000
  }
}

今回は直接config.jsonを編集しましたが、ccr uiでブラウザから、ccr model set <provider>,<model>のようにCLIからも設定できます。

Claude Codeを動かしてみる

Claude Code Routerを経由して、Claude Codeを実行します。

初回起動時は説明やテーマ選択が表示されますが、以降はそのままプロンプトを入力して利用できます。

$ ccr code

 ccr code
╭───────────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code!                         │
│                                                   │
│   /help for help, /status for your current setup  │
│                                                   │
│   cwd: /path/to/repository                        │
│                                                   │
│   ─────────────────────────────────────────────── │
│                                                   │
│   Overrides (via env):                            │
│                                                   │
│   • API timeout: 600000ms                         │
│   • API Base URL: http://127.0.0.1:3456           │
╰───────────────────────────────────────────────────╯

> hello

⏺ Hello! How can I help you today?

Claude Code Routerのハマりポイント

1.プロバイダーが見つからない

以下のようにconfig.jsonを編集しても「プロバイダーが見つからない」というエラーがでることがあります。

$ ccr code
Provider 'sakura' not foundError: Provider 'sakura' not found

Claude Code Routerは設定ファイルを変更したあとにリロードが必要なのでccr restartコマンドを実行します。

2.サービスが起動しない

config.jsonに手を加えているとサービスが起動できなくなることがあります。

$ ccr code
Service not running, starting service...
Service startup timeout, please manually run `ccr start` to start the service

同じポート（デフォルトでは3456）で別のサービス、もしくはccrの別セッションが起動しているためです。プロセスを確認し、killコマンドなどで終了させてから再度起動します。

$ lsof -i -P | grep "3456"
...
kill <PID>

実践編: Claude CodeでWebアプリケーションを開発する

Claude Code RouterとさくらのAI Engineを使って、シンプルなブラウザメモ帳を開発してみます。

$ node -v
v24.12.0

$ claude -v
2.1.45 (Claude Code)

$ ccr -v
claude-code-router version: 2.0.0

まずは、作業するディレクトリを作成します。

$ mkdir claude-memo
$ cd claude-memo

Claude Code Routerをはじめて起動するとき、フォルダが信頼できるかどうかの確認が表示されます。Claude Codeがファイルの読み込みや編集ができるように「Yes, I trust this folder（このフォルダを信頼する）」を選択します。

$ ccr code
Accessing workspace:

 /Users/dashino/claude-memo

 Quick safety check: Is this a project you created or one you trust? (Like your own code, a well-known open source project, or work from your team). If not, take a
 moment to review what's in this folder first.

 Claude Code'll be able to read, edit, and execute files here.

 Security guide

 ❯ 1. Yes, I trust this folder
   2. No, exit

 Enter to confirm · Esc to cancel

ここまでくると入力待機状態になるので、コマンドやプロンプトを入力して実行します。詳しくはClaude Codeの公式マニュアルをご覧ください。

まずはplanモードでどのようなWebアプリにしたいか指示します。

> /plan
  ⎿  Enabled plan mode

> Webブラウザで利用できる簡易的なメモ帳を作成してください。ライブラリは使わず、HTMLとCSS、JavaScriptのみで実装してください。

Ready to code?

 Here is Claude's plan:
╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌
 Web-Based Notepad Implementation Plan

 Context

 The user has requested a simple web-based notepad application that can be used in a web browser. The application should be implemented using only HTML, CSS, and
 JavaScript without any external libraries. This will be a single-file application that provides basic text editing functionality.

（略）

 Claude has written up a plan and is ready to execute. Would you like to proceed?

 ❯ 1. Yes, clear context and auto-accept edits (shift+tab)
   2. Yes, auto-accept edits
   3. Yes, manually approve edits
   4. Type here to tell Claude what to change

最後にplanモードからeditモードに切り替えて実行すると、Claude CodeがWebブラウザで利用できるメモ帳を生成します。追加でプロンプトを入力して、機能を拡張したり、変更したりできます。

Claude Codeが生成したブラウザメモ帳。Simple Web Notepadというタイトルがつけられており、Save Note、Load Note、Clear Noteというボタンが横並びに配置されている。その下にメモの入力用テキストエリアがある。 — 完成したブラウザメモ帳

今回は新規プロジェクトのシンプルなメモ帳なので、Claude Code Router × さくらのAI Engineでも実装できました。ただし、Claude Codeとのやりとりを続けていくとコンテキストウィンドウが肥大化し、エラーになることがあります。そういった場合はClaude Code Routerを再起動したり、変更箇所を局所化し小さく指示したりすることで改善されます。

それでもエラーになったり、思うように実装してくれなかったりする場合は、Claude Codeを契約してください。より精度が高く安定した結果が得られます。