Claude Code と MCP だけで Web サイトを作って Vercel に公開する

Claude Code に 2 つの MCP サーバー — FastMetal（モデルと画像生成）と Vercel（デプロイ）— を接続すると、サイトを作ってから公開して動作確認するまでを、ターミナルを離れずに終えられます。この記事では 1 枚もののランディングページを例に、その手順をなぞります。

必要なもの: Claude Code、FastMetal の API キー（残高を入れたもの）、Vercel のアカウント。

1. 2つの MCP サーバーを接続する

FastMetal はキーをヘッダーで渡します。

claude mcp add --transport http fastmetal https://mcp.fastmetal.ai/mcp \
  --header "Authorization: Bearer ${FASTMETAL_API_KEY}"

Vercel は OAuth なので、URL を登録するだけです。

claude mcp add --transport http vercel https://mcp.vercel.com

claude を起動して /mcp を実行すると接続状態が確認できます。Vercel 側は初回に認証を求められるので、ここでブラウザを開いて承認しておきます。

2. サイトの中身を作る

ここは通常の Claude Code の作業です。プロジェクトを作り、普段どおり指示を出します。

静的な1枚もののランディングページを作ってください。
Next.js の App Router、Tailwind、日本語。
セクションは ヒーロー / 特徴3つ / 料金 / 問い合わせ。

3. ヒーロー画像を生成する

Claude Code 本体は画像を作れませんが、FastMetal の MCP を繋いであれば generate_image が使えます。セッションを抜けずに画像を用意できるのがこの構成の効きどころです。

generate_image で、ヒーロー用の画像を作ってください。
プロンプトは「朝の光が差し込む静かな作業机、俯瞰、余白多め」。
返ってきたリンクから public/hero.png にダウンロードして、ヒーローに組み込んでください。

generate_image が返すのは画像そのものではなく期限付きのダウンロードリンク（既定で 15 分）です。リモートのサーバーは手元のディスクに書き込めないため、Claude Code に curl でダウンロードさせる形になります。リンクが切れていたら、もう一度生成し直してください。

4. コピーを別モデルにレビューさせる

自分で書いたモデルに自分の文章を評価させても、甘い点がつきがちです。ask で別の系統のモデルに投げると、率直な指摘が返ってきます。

ヒーローとサービス紹介の日本語コピーを、ask で glm-5.2 に見せて、
不自然な言い回しと冗長な箇所を指摘させてください。

判断に迷う箇所は compare で複数モデルに同じ質問を投げ、意見が割れたところだけ人間が決める、という進め方もできます。ただし compare はモデルの数だけ課金されるので、投げる前にモデル数を確認してください。

5. Vercel にデプロイする

Vercel MCP の deploy_to_vercel は、Git リポジトリも Vercel CLI も使わずに、ファイル一式を直接デプロイできます。まずは preview で確認するのが安全です。

deploy_to_vercel で、このプロジェクトを preview にデプロイしてください。
プロジェクト名は my-landing。

フレームワークは自動検出されるので、通常は設定を渡す必要はありません。ビルドが失敗したら get_deployment_build_logs でログを読ませ、そのまま修正させられます。

問題がなければ本番に切り替えます。

内容を確認できたので、target を production にして再デプロイしてください。

6. 公開後の状態を確認する

web_fetch_vercel_url を使うと、デプロイされた URL の中身を Claude Code に直接読ませられます。ブラウザで開いて目視する前の一次チェックとして使えます。

web_fetch_vercel_url で公開された URL を取得して、
ヒーローの見出しと料金セクションが意図どおり出ているか確認してください。

デプロイ保護がかかっている場合は get_access_to_vercel_url で一時的な共有リンクを発行できます。

つまずきやすい点

• リンクの有効期限 — 生成画像のリンクは短時間で切れます。同じセッション内でダウンロードまで済ませてください。
• compare はモデル数だけ課金される — 8 モデルに投げれば 8 回分です。残高は quota で確認できます。
• 確認プロンプトは切らない — MCP のツール実行、特に deploy_to_vercel のような書き込み系は、人間の確認を挟む設定のままにしておくことをおすすめします。外部から取り込んだ内容にプロンプトインジェクションが混ざる可能性があるためです。
• MCP 用のキーは分ける — キーは設定ファイルに残ります。上限を低く設定した専用キーを発行しておくと、流出時の被害がその金額までに収まります。

次のステップ

FastMetal 側のツール一覧と設定は MCP サーバーガイドに、利用できるモデルと円建ての価格は /models にまとまっています。キーの発行はダッシュボードから行えます。