mcpField
V
view-sim

view-sim

本地服务
github.com浏览器自动化01 天前更新
代码仓库访问官网

关于 view-sim

view-sim-mcp 是用于在不同设备和浏览器框架中查看网站并截图的 MCP 服务，面向需要检查多种屏幕布局的场景。它可通过 view-sim 浏览器扩展操作，也可使用 Playwright 无头运行。

主要功能

  1. 01模拟手机、平板和桌面尺寸
  2. 02支持 Safari、Chrome、Firefox 与 Zen 框架
  3. 03浏览网页并导航
  4. 04生成透明 PNG 截图
  5. 05支持扩展桥接或 Playwright

适用场景

  1. 01检查网站在不同设备尺寸下的呈现
  2. 02为网页视图生成 PNG 截图

MCP 相关

它通过 MCP 服务向客户端提供 view-sim 的网站浏览、导航和截图能力，可使用浏览器扩展桥接或 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 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。