Web to MCP
WebToMCP · コーディング
Web to MCPは、実際のWebサイト上のコンポーネントを取得し、そのコードとスタイルをCursorまたはClaude Codeへ直接送るChrome拡張機能兼Model Context Protocolサーバーだ。
Web to MCP について
What Is Web to MCP
Web to MCPが解くのは、とても具体的で面倒な問題だ。AIアシスタントにUIコンポーネントを説明する、という手間である。「角丸でグラデーションの青いボタン」と打ち込む代わりに、本物の要素を指して送れる。
ツールは連携する2つの部品でできている。Chrome拡張機能が閲覧中のどのサイトでも取得を担い、MCPサーバーがそのコンポーネントをアシスタントへ届ける。すでにCursorやClaude Codeを使っていて、当てずっぽうではなくピクセル単位の出発点が欲しい開発者に向く。
最大の制約は守備範囲だ。Web to MCPはアシスタントに材料を渡すだけで、自分でコードを書いたり書き換えたりはしない。仕上がりは使うモデルとプロンプト次第だ。加えてChromeとGoogleアカウントが要り、共有サーバーではなく個人のMCP URLで動く。
Getting Started
- Chrome Web StoreからWeb to MCP拡張機能を入れる。
- Googleアカウントでログインし、自分専用のMCP URLを発行する。
- そのURLをアシスタントの設定ファイルに加える（Cursorは
.cursor/mcp.json、Claude Codeは独自のMCP設定を読む）。 - 任意のWebサイトを開き、拡張機能のアイコンを押して選択モードを有効にする。
- 目的の要素をクリックし、参照用のidをコピーして、アシスタントに再現を頼む。
AIツール情報
Web to MCPの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- CursorやClaude Codeを使うフロントエンド開発者。取得したコードが普段のチャットの流れにそのまま入る。
- モックアップや実ページを本番コンポーネントに落とし込み、おおよそではなく正確なスタイル値が欲しいデザインエンジニア。
- 新しく加わったメンバーを迎えるチーム。実績のあるコンポーネントを取得する方が、スタイルを手作業で文書化するより速い。
タスク
- 他のサイトで見た特定のコンポーネントを再現する。拡張機能はDOM構造と計算済みCSSごと取得する。
- 自社デザインシステムのボタンやカードに合わせる。新しいコードが既存の画面と食い違わない。
- 参考例からレイアウトを試作する。実際の型をいくつか取る方が、一つずつゼロから説明するより早い。
シーン
- 気に入った料金表を見つけ、その構造を自分の技術スタックで再現してほしい。
- デザイナーが動いているページをそのまま渡してきて、平面の画像ではなく実際のホバー挙動が要る。
- 複雑なコンポーネントの作りを学びたく、読むための本物のコード文脈が欲しい。
主な機能
ワンクリックでコンポーネントを取得
拡張機能のアイコンを押して選択モードに切り替え、ページ上の任意の要素を選ぶ。Web to MCPは描画されたままのDOM構造と計算済みCSSを記録するので、アシスタントは訪問者が見るものと同じものを受け取る。開発者ツールを開く必要も、スタイルを手で写す必要もない。
MCPによる直接受け渡し
取得したコンポーネントは、アカウントに紐づく個人URLを使ってModel Context Protocol経由でアシスタントへ届く。URLを設定に書けば、CursorとClaude Codeはツールを自動で見つける。チャットではidで要素を参照するので、受け渡しはいつも使っているツールの中で完結する。
フレームワークに依存しない出力
取得はReact、Vue、Angular、素のHTMLとCSSのサイトで同じように働く。フレームワークの中身ではなく、描画結果を読むからだ。そのうえでアシスタントが、あなたが構築中のスタックにこの文脈を合わせる。ただし結果を導くため、プロンプトにフレームワークとデザインシステムを明記した方がいい。
ピクセルだけでなく意味の文脈も
スクリーンショットと違い、ここでは意味づけされたHTML、正確なCSS値、周囲の構造やホバー状態といったレイアウト文脈が入る。この細かさが、画像を読み解き直すのではなく、見た目に近い結果を狙える理由だ。Web to MCPは、データはアシスタントへ直接渡り自社サーバーには保存しないと説明する。
個人専用のMCPエンドポイント
ログインしたアカウントごとに、Googleログイン後に専用のMCP URLが発行される。プロジェクト用や全体用の設定ファイルに貼れば、接続は本人だけのものになる。自分でサーバーを立てる場合と比べ、導入は数分で終わる。
Claude CodeとCursorに対応
導入ガイドはCursorとClaude Codeの両方を扱う。このツールが前提にした2つのアシスタントだ。Cursorでは.cursor/mcp.jsonに項目を足し、Claude CodeではMCP設定ファイルを編集する。どちらの道も、導入後に「取得して参照する」同じ流れをたどる。
メリットとデメリット
メリット
- インターフェースをアシスタントに説明する当てずっぽうをなくす。本物のコードとスタイルを送るからだ。
- 平面のスクリーンショットではなく意味づけされたHTMLと正確なCSSを渡すので、一発で当たりやすい。
- 描画結果を読むため、どんなサイトでも、どんなフロントエンドフレームワークでも動く。
- 個人のMCP URLと標準的な設定ファイルで、導入は数分で済む。
- コンポーネントのデータはアシスタントへ直接渡り、提供元のサーバーには残らない。
デメリット
- ChromeとGoogleアカウントが要る。FirefoxやSafariの利用者は使えない。
- 仕上がりは使うモデルとプロンプト次第で、より良い入力ではあるが完成品ではない。
- 無料プランは月あたりの取得回数に上限があり、多く使うならProが要る。
よくある質問
動いているWebサイトのコンポーネントを取得し、そのコードとスタイルをAIアシスタントへ送る。自分で説明しなくても、そのコンポーネントの再現を頼める。
関連コンテンツ
Web to MCPに関連するツール、スキル、記事を探す。
Web to MCPの代替ツール
Base Code
Base44 (Wix) · コーディング · 生産性向上Base CodeはBase44の共有クラウド開発環境だ。既存のGitHubリポジトリに対する変更をチャットで伝え、プレビューで確認し、プルリクエストとして返せる。
Google EmbeddingGemma 2
Google DeepMind · ライティング · 画像 · コーディングGoogle EmbeddingGemma 2 は 7 億 4000 万パラメータのオープンなモデルで、テキスト、コード、画像、音声、動画フレームを同じ 768 次元空間のベクトルに変え、スマートフォンやノート PC 上で動く。
GitGlow
GitGlow · コーディング · 生産性向上GitGlow は自分のコードと AI エージェントの変更を一つのレビューにまとめるデスクトップ Git クライアントだ。出荷前に、マシンから何が出ていくのかを確かめられる。