Simulates various device displays and captures transparent PNG screenshots of websites using Playwright or a browser extension.
Also known as itelo/view-sim, view-sim-mcp
- Stars
- 0
- Tools
- —
- Downloads, 30 days
- —
- Latest version
- 1.0.0
- Last commit
- Oct 31, 2026
- License
- MIT
What is view-sim MCP?
view-sim simulates various device displays and captures transparent PNG screenshots of websites using Playwright or a browser extension.
Summary generated from the project's README
About view-sim MCP server
Visualizing how websites appear on different hardware is what this server enables for developers and designers. It allows an AI client to open sites on various simulated devices including phones, tablets, MacBooks, and large displays. Users can navigate through web pages and capture transparent PNG screenshots to verify layouts across multiple screen sizes.
Setup involves running the server via npx and installing Playwright's chromium and webkit browsers for headless operations. You can choose to run the server headlessly or connect it to the view-sim browser extension. For enhanced security, you can restrict connections to specific extension IDs by configuring the VIEW_SIM_EXTENSION_IDS environment variable. This flexibility allows for both automated testing and manual browser-based interaction.
What you can do with it
- 1Verify mobile responsivenessAsk the AI to check how a specific website renders on a phone or tablet screen.
- 2Automated headless testingRun browser navigation and screenshot tasks without a visible browser window using Playwright.
Written from the project's README. Every use case is checked against a quote from it.
How to install view-sim MCP
Formats verified 10 Nov 2026Install view-sim MCP in Claude Code
$ claude mcp add view-sim -- npx -y view-sim-mcpInstall view-sim MCP in Cursor
~/.cursor/mcp.json
{
"mcpServers": {
"view-sim": {
"command": "npx",
"args": [
"-y",
"view-sim-mcp"
]
}
}
}Install view-sim MCP in VS Code
.vscode/mcp.json
{
"servers": {
"view-sim": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"view-sim-mcp"
]
}
}
}Install view-sim MCP in Claude Desktop
claude_desktop_config.json
{
"mcpServers": {
"view-sim": {
"command": "npx",
"args": [
"-y",
"view-sim-mcp"
]
}
}
}Install view-sim MCP in Codex
~/.codex/config.toml
[mcp_servers.view-sim] command = "npx" args = ["-y", "view-sim-mcp"]
Install view-sim MCP in Gemini CLI
~/.gemini/settings.json
{
"mcpServers": {
"view-sim": {
"command": "npx",
"args": [
"-y",
"view-sim-mcp"
]
}
}
}Configuration
VIEW_SIM_EXTENSION_IDSComma-separated extension ids allowed to connect to the bridge (Chrome id and/or view-sim@itelo). Unset allows any extension.
| Name | Description | |
|---|---|---|
| VIEW_SIM_EXTENSION_IDS | Comma-separated extension ids allowed to connect to the bridge (Chrome id and/or view-sim@itelo). Unset allows any extension. |
Automated checks
Ran Nov 14, 2026Full report →Passed our automated checks. That is not a security audit: read the code and give the server the narrowest access it needs. How checks work
- Source repository linked and reachableitelo/view-sim is public and reachablegithub.com/itelo/view-sim ↗Pass
- Package names this repository as its sourceview-sim-mcp names itelo/view-sim as sourcenpmjs.com/package/view-sim-mcp ↗Pass
- Build provenance (Sigstore attestation)No build attestation published for this releaseNot checked
- Open source license (OSI)MITspdx.org/licenses/MIT.html ↗Pass
- Commit or release in the last yearLast commit or release 2026-10-31github.com/itelo/view-sim ↗Pass
- OpenSSF ScorecardNot checked
- Package name not close to a popular packageNo popular package one edit away from view-sim-mcpPass
- No critical advisory in the package or its dependencies102 resolved dependencies checked; no critical advisoryosv.dev ↗Pass
- No hidden instructions to the model0 tool descriptions and the README read; no override phrases, credential paths or hidden charactersPass
- Destructive tools are labelledNot checked
- Remote endpoint answers the MCP handshakeNot checked
README
View on GitHubview-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 playwright@1.64.1 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.
view-sim MCP questions
How do I add view-sim MCP to Claude Code?
Run claude mcp add view-sim -- npx -y view-sim-mcp in your terminal. Add --scope user to make it available in every project.
How do I add view-sim MCP to Cursor?
Open ~/.cursor/mcp.json and add the server under mcpServers, using the Cursor config shown in the install section above.
Can I restrict access to the view-sim extension only?
Yes, you can set the VIEW_SIM_EXTENSION_IDS environment variable to its extension ID to allow only the extension to connect to the bridge.