mcpField
V
view-sim

view-sim

Local
github.comBrowser Automation0Updated 1d ago
RepositoryVisit website

About view-sim

view-sim-mcp is an MCP server for viewing sites in device and browser frames and capturing screenshots. It supports operation through the view-sim browser extension or headlessly with Playwright.

Key features

  1. 01Simulates phone, tablet, and desktop sizes
  2. 02Supports Safari, Chrome, Firefox, and Zen frames
  3. 03Opens and navigates sites
  4. 04Captures transparent PNG screenshots
  5. 05Uses an extension bridge or Playwright

Use cases

  1. 01Check how a site appears at different device sizes
  2. 02Capture PNG screenshots of web pages

MCP support

The MCP server exposes view-sim site viewing, navigation, and screenshot capabilities to clients, using either the browser-extension bridge or headless Playwright.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "itelo-view-sim": {
      "command": "npx",
      "args": [
        "-y",
        "view-sim-mcp"
      ],
      "env": {
        "VIEW_SIM_EXTENSION_IDS": "<VIEW_SIM_EXTENSION_IDS>"
      }
    }
  }
}
Run commandnpx -y view-sim-mcp
Environment variables to set
VIEW_SIM_EXTENSION_IDSComma-separated extension ids allowed to connect to the bridge (Chrome id and/or view-sim@itelo). Unset allows any extension.

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmview-sim-mcp1.0.0

Tools

9

Saved tool list · updated 1d ago

This tool takes no parameters.

Details

From the project README

view-sim-mcp

MCP server for view-sim: open sites on phones, tablets, MacBooks and big displays, navigate and take transparent PNG screenshots, either through the view-sim browser extension or headlessly with Playwright.

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

Headless screenshots need Playwright's browsers once:

npx -y [email protected] install chromium webkit

To let only view-sim's extension connect to the bridge, set VIEW_SIM_EXTENSION_IDS to its extension id (comma-separated for several browsers):

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

See the main README for the tools and how the bridge works.

MIT licensed. If view-sim saves you time, you can support it on GitHub Sponsors.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.