mcpField
V
view-sim

view-sim

ローカル
github.comブラウザ自動化02 日前に更新
リポジトリ公式サイト

view-sim について

view-sim-mcpは、デバイスやブラウザーのフレームでサイトを表示し、スクリーンショットを撮るMCPサーバーです。view-simブラウザー拡張機能またはPlaywrightのヘッドレス実行に対応しています。

主な機能

  1. 01スマートフォン、タブレット、デスクトップを再現
  2. 02Safari、Chrome、Firefox、Zenのフレームに対応
  3. 03サイトの表示とナビゲーション
  4. 04透過PNGスクリーンショットを撮影
  5. 05拡張機能ブリッジまたはPlaywrightを利用

活用シーン

  1. 01異なるデバイスサイズでのサイト表示を確認
  2. 02ウェブページのPNG画像を作成

MCP 対応

MCPクライアントに、サイトの表示、ナビゲーション、スクリーンショット機能を提供します。ブラウザー拡張機能ブリッジまたはPlaywrightのヘッドレスモードを利用できます。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "itelo-view-sim": {
      "command": "npx",
      "args": [
        "-y",
        "view-sim-mcp"
      ],
      "env": {
        "VIEW_SIM_EXTENSION_IDS": "<VIEW_SIM_EXTENSION_IDS>"
      }
    }
  }
}
起動コマンドnpx -y view-sim-mcp
設定が必要な環境変数
VIEW_SIM_EXTENSION_IDSComma-separated extension ids allowed to connect to the bridge (Chrome id and/or view-sim@itelo). Unset allows any extension.

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmview-sim-mcp1.0.0

ツール

9

掲載時のツール一覧 · 1 日前に更新

このツールにパラメーターはありません。

詳細

view-sim-mcp

view-sim 用の MCP サーバーです。スマートフォン、タブレット、MacBook、大型ディスプレイでサイトを開き、移動して、透明な PNG スクリーンショットを撮影できます。view-sim のブラウザー拡張機能を使う方法と、Playwright を使ってヘッドレスで実行する方法があります。

claude mcp add view-sim -- npx -y view-sim-mcp

ヘッドレスでスクリーンショットを撮影するには、Playwright のブラウザーを一度インストールする必要があります。

npx -y [email protected] install chromium webkit

view-sim の拡張機能だけがブリッジに接続できるようにするには、VIEW_SIM_EXTENSION_IDS に拡張機能 ID を設定します（複数のブラウザーを使用する場合はカンマ区切りで指定します）。

claude mcp add view-sim -e VIEW_SIM_EXTENSION_IDS=<chrome-extension-id>,view-sim@itelo -- npx -y view-sim-mcp

ツールとブリッジの仕組みについては、メインの README をご覧ください。

MIT ライセンスです。view-sim が時間の節約に役立った場合は、GitHub Sponsors で支援できます。

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。