Claude Codeとeroq CLI：コーディングエージェントでアセット生成

コーディングエージェントは、ランディングページのほぼすべてをこなせます。ただし、ヒーロー画像だけは別です。<picture>タグは書けても、肝心の画像は作れません。メディア系のAPIが返すのはURLかbase64のデータですが、エージェントが本当に欲しいのは、次の編集で参照できるパスに置かれたファイルです。eroq CLIはこのギャップを埋めます。eroq mcpはstdio経由でローカルのMCPサーバーを起動し、そのツールがレンダリング結果をプロジェクト内のファイルとして保存して、パスを返します。

これは私たち自身が使っているワークフローです。コマンドと環境変数を説明し、最後に実際のセッションを丸ごと紹介します。

インストールとログイン

パッケージはnpmで公開されています。Node 18以降が必要で、依存関係はゼロです。

npm install -g @eroq/cli
eroq login          # paste a key from the developers dashboard
eroq account        # balance, plan, workspace

eroq loginは、キーを0600のパーミッションで~/.config/eroq/config.jsonに保存します。2つの環境変数でこれを上書きでき、CIやエージェントの設定ではこちらを使うのがおすすめです。

• EROQ_API_KEY：キー。保存済みのキーより優先されます。
• EROQ_API_URL：ベースURL。デフォルトはhttps://eroq.aiです。ステージング環境に向ける場合以外は、変更しないでください。

コマンド

どのコマンドも、保存したものとメーター行（「Spent 100 credits · 887 remaining」）を表示します。

eroq models                                     # models, credit prices, plan gates
eroq voices                                     # roster + your clones
eroq enhance "kettle on a counter" --kind image # free prompt rewrite
eroq image "…" -m eroq-image-one -o public/img/hero.webp
eroq video "…" -s 10 --aspect 9:16 --shot push-in -o public/video/teaser.mp4
eroq speech "…" -v orion --speed 0.95 -o public/audio/intro.mp3

覚えておきたいフラグは次のとおりです。-mはモデルの選択です（画像のデフォルトはeroq-image-one、動画はeroq-motion-one）。-sはクリップの長さ（秒）で、プランによる上限があり、エンジンが対応する長さに丸められます（動画のドキュメントを参照）。--aspectには16:9、9:16、1:1を指定します。--shotはカメラワークのいずれか。--refには写真のURLを渡します（クリップなら画像から動画、静止画なら維持したい顔として使われます）。--negativeはネガティブプロンプト、-oは出力先のパスです。-oを省くと、./eroq-image-<timestamp>.webp、./eroq-video-<timestamp>.mp4、./eroq-speech-<timestamp>.mp3のいずれかに保存されます。

Claude Codeへの2つの接続方法

サーバーは2種類あり、1つの重要な点で異なります。

リモート（HTTP経由）。 Claude Codeがhttps://eroq.ai/mcpと直接やり取りします。ツールはURLを返し、generate_videoはレンダリングが終わっていなければジョブIDを返します。

claude mcp add --transport http eroq https://eroq.ai/mcp \
  --header "Authorization: Bearer eroq_sk_YOUR_KEY"

ローカル（stdio経由）。 Claude Codeがeroq mcpを子プロセスとして起動します。ツールは作業ディレクトリにファイルを保存してパスを返します。generate_videoはレンダリングの完了を最大8分まで待つので、エージェントが受け取るのは受付票ではなくMP4そのものです。

claude mcp add eroq --env EROQ_API_KEY=eroq_sk_YOUR_KEY -- npx -y @eroq/cli mcp

コーディング作業なら、ローカルを選びましょう。eroq install claude-codeを実行すると、保存済みのキーが入った状態で両方のスニペットが表示されます。ローカルのツールはgenerate_image、generate_video、generate_speech、enhance_prompt、list_models、list_voices、list_characters、get_accountで、最初の3つはout_pathを受け付けます。

Cursorは~/.cursor/mcp.json（プロジェクト単位なら.cursor/mcp.json）を読み込みます。

{
  "mcpServers": {
    "eroq": {
      "url": "https://eroq.ai/mcp",
      "headers": { "Authorization": "Bearer eroq_sk_YOUR_KEY" }
    }
  }
}

Codex CLIは~/.codex/config.tomlを読み込み、stdioサーバーを起動します。

[mcp_servers.eroq]
command = "npx"
args = ["-y", "@eroq/cli", "mcp"]
env = { EROQ_API_KEY = "eroq_sk_YOUR_KEY" }

eroq install cursorとeroq install codexでも、これらのスニペットが表示されます。接続方法の一覧はMCPのドキュメントにあります。

実践セッション：ランディングページのアセット

お題は、架空のドリップケトルのランディングページです（商品動画の典型的なケースです）。エージェントにはローカルサーバーとpublic/フォルダー、そして約250クレジットの予算があります。以下は、そのトレースを少しだけ削ったものです。

Agent: Checking the wallet before I spend anything.
       [get_account] → 1,000 credits, no plan (clips capped at 10 s)

Agent: Tightening the hero prompt first — it's free.
       [enhance_prompt kind=image prompt="black kettle, morning light, premium"]
       → "Close-up of a matte black pour-over kettle on a walnut counter, steam
          curling up into morning window light, shallow depth of field, soft cross
          lighting, a few coffee beans scattered out of focus, calm and premium,
          product photography, warm film palette."

Agent: [generate_image model=eroq-image-one out_path=public/img/hero.webp]
       → Image saved to public/img/hero.webp · Spent 10 credits · 990 remaining

Agent: Two feature tiles on the same look, then a vertical teaser.
       [generate_image … out_path=public/img/feature-pour.webp]   → 10 credits
       [generate_image … out_path=public/img/feature-temp.webp]   → 10 credits
       [generate_video model=eroq-motion-one seconds=10 aspect=9:16
        out_path=public/video/teaser.mp4
        prompt="Slow push-in on the same matte black kettle as steam rises and
        drifts toward the window, morning light warming from blue to gold, tiny
        dust motes in the beam, shallow focus holding on the spout, calm premium
        mood, 35mm film look."]
       → Clip saved to public/video/teaser.mp4 · Spent 60 credits · 910 remaining

Agent: A scratch voice-over for the hero, Orion, a touch slower.
       [generate_speech voice=orion speed=0.95 out_path=public/audio/intro.mp3
        text="Pour slower. Taste more. The kettle that waits for you."]
       → Speech saved to public/audio/intro.mp3 · Spent 3 credits · 907 remaining

Agent: Wiring them into index.html now.

続いてエージェントはマークアップを書きます。<img src="/img/hero.webp">、ティーザーを入れたミュート・自動再生の<video>、再生ボタンの裏に置いた<audio>要素。これでページが本物になります。合計は93クレジットで、エントリーパックの単価ならおよそ2ドルです。人間よりも少ないテイク数で済ませられることが、ここでのエージェントの唯一の強みです。3つ目のバリエーションに惚れ込んだりはしませんから。

これを安定して回すための習慣が2つあります。1つ目は、最初にget_accountを呼ばせて、作業を始める前にプランのクリップ上限と残高をエージェントに把握させること。2つ目は、必ずout_pathを渡すことです。プロジェクトのルートにタイムスタンプ付きのデフォルト名で保存されるのは、ちょっとしたテストなら問題ありませんが、リポジトリでは散らかる原因になります。

お金を使えるエージェントのためのガードレール

• 専用のキー。 エージェント専用のキーを作成して独自のレート制限をかけ、プロジェクトが終わったら無効化しましょう。
• gitに含めない。 Claude Codeの--envやCodexのTOMLはリポジトリの外にあります。キーを含むプロジェクト単位の.cursor/mcp.jsonは、.gitignoreに追加しましょう。
• 失敗は無料。 失敗したレンダリングは自動で返金され、ポリシー外のプロンプトはcontent_blockedを返して一切課金されません。エージェントのリトライ処理は「もう一度だけ試し、だめなら確認する」で十分です。
• モデルの制限は明示的。 プレミアム動画エンジンにはプランが必要です。ロックされたモデルは、課金の前に403 plan_requiredを返します。自分のキーで使えるものはeroq modelsで確認できます。

よくある質問

リモートのMCPサーバーを使っている場合も、CLIは必要ですか？

必要ありません。リモートサーバーは、ヘッダーを送れるクライアントならどれでも使えます。CLIのstdioサーバーは、URLではなくディスク上のファイルを必要とするエージェント向けです。

CLIではどのモデルを使えますか？

プランで解放されているものすべてです。3つの画像モデル、eroq modelsに表示される動画エンジン、2つの音声モデルとボイスのラインナップに加え、自分のクローンやキャラクターも使えます。

エージェントは自分のキャラクターを使えますか？

はい。list_charactersはあなたのキャストを返します。generate_speechにchar:<id>を指定すればそのキャラクターの声で話し、キャラクターの写真を--refに渡せば、複数の画像で顔を維持したり、画像から動画を生成したりできます。

準備はできましたか？APIキーを取得してeroq loginを実行し、退屈な作業はエージェントに任せましょう。