Simula diversas pantallas de dispositivos y captura capturas de pantalla en formato PNG transparente de sitios web utilizando Playwright o una extensión de navegador.
También conocido como itelo/view-sim, view-sim-mcp
- Stars
- 0
- Herramientas
- —
- Descargas, 30 días
- —
- Última versión
- 1.0.0
- Último commit
- 31 oct 2026
- Licencia
- MIT
¿Qué es view-sim MCP?
view-sim es un MCP server. Simula diversas pantallas de dispositivos y captura capturas de pantalla en formato PNG transparente de sitios web utilizando Playwright o una extensión de navegador.
Resumen generado a partir del README del proyecto
Acerca del MCP server de view-sim
Este servidor permite a desarrolladores y diseñadores visualizar cómo se ven los sitios web en diferentes tipos de hardware. Permite que un cliente de IA abra sitios en varios dispositivos simulados, incluyendo teléfonos, tablets, MacBooks y pantallas grandes. Los usuarios pueden navegar por páginas web y capturar capturas de pantalla en PNG transparente para verificar diseños en múltiples tamaños de pantalla.
La configuración consiste en ejecutar el servidor mediante npx e instalar los navegadores chromium y webkit de Playwright para operaciones headless. Puedes elegir ejecutar el servidor en modo headless o conectarlo a la extensión de navegador view-sim. Para mayor seguridad, puedes restringir las conexiones a IDs de extensiones específicos configurando la variable de entorno VIEW_SIM_EXTENSION_IDS. Esta flexibilidad permite tanto pruebas automatizadas como interacción manual basada en el navegador.
Qué puedes hacer con él
- 1Verificar la adaptabilidad móvilPide a la IA que compruebe cómo se renderiza un sitio web específico en la pantalla de un teléfono o una tablet.
- 2Pruebas automatizadas headlessEjecuta tareas de navegación en el navegador y captura de pantalla sin una ventana de navegador visible utilizando Playwright.
Escrito a partir del README del proyecto. Cada caso de uso se verifica con una cita del mismo.
Cómo instalar view-sim MCP
Formatos verificados el 10 nov 2026Instalar view-sim MCP en Claude Code
$ claude mcp add view-sim -- npx -y view-sim-mcpInstalar view-sim MCP en Cursor
~/.cursor/mcp.json
{
"mcpServers": {
"view-sim": {
"command": "npx",
"args": [
"-y",
"view-sim-mcp"
]
}
}
}Instalar view-sim MCP en VS Code
.vscode/mcp.json
{
"servers": {
"view-sim": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"view-sim-mcp"
]
}
}
}Instalar view-sim MCP en Claude Desktop
claude_desktop_config.json
{
"mcpServers": {
"view-sim": {
"command": "npx",
"args": [
"-y",
"view-sim-mcp"
]
}
}
}Instalar view-sim MCP en Codex
~/.codex/config.toml
[mcp_servers.view-sim] command = "npx" args = ["-y", "view-sim-mcp"]
Instalar view-sim MCP en Gemini CLI
~/.gemini/settings.json
{
"mcpServers": {
"view-sim": {
"command": "npx",
"args": [
"-y",
"view-sim-mcp"
]
}
}
}Configuración
VIEW_SIM_EXTENSION_IDSComma-separated extension ids allowed to connect to the bridge (Chrome id and/or view-sim@itelo). Unset allows any extension.
| Nombre | Descripción | Tipo |
|---|---|---|
| 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. |
Verificaciones automáticas
Ejecutado 14 nov 2026Informe completo →Pasó nuestras verificaciones automáticas. Esto no es una auditoría de seguridad: lee el código y dale al servidor el acceso más limitado que necesite. Cómo funcionan las verificaciones
- Repositorio de origen vinculado y accesibleitelo/view-sim is public and reachablegithub.com/itelo/view-sim ↗Aprobado
- El paquete cita este repositorio como fuenteview-sim-mcp names itelo/view-sim as sourcenpmjs.com/package/view-sim-mcp ↗Aprobado
- Procedencia de la compilación (atestación Sigstore)No build attestation published for this releaseNo verificado
- Licencia de código abierto (OSI)MITspdx.org/licenses/MIT.html ↗Aprobado
- Commit o lanzamiento en el último añoLast commit or release 2026-10-31github.com/itelo/view-sim ↗Aprobado
- OpenSSF ScorecardNo verificado
- El nombre del paquete no es similar a un paquete popularNo popular package one edit away from view-sim-mcpAprobado
- Sin avisos críticos en el paquete ni en sus dependencias102 resolved dependencies checked; no critical advisoryosv.dev ↗Aprobado
- Sin instrucciones ocultas para el modelo0 tool descriptions and the README read; no override phrases, credential paths or hidden charactersAprobado
- Las herramientas destructivas están etiquetadasNo verificado
- El endpoint remoto responde al handshake MCPNo verificado
README
Ver en 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.
Preguntas sobre view-sim MCP
¿Cómo agrego view-sim MCP a Claude Code?
Ejecuta claude mcp add view-sim -- npx -y view-sim-mcp en tu terminal. Añade --scope user para que esté disponible en todos los proyectos.
¿Cómo agrego view-sim MCP a Cursor?
Abre ~/.cursor/mcp.json y añade el servidor en mcpServers, usando la configuración de Cursor que se muestra en la sección de instalación de arriba.
¿Puedo restringir el acceso solo a la extensión view-sim?
Sí, puedes configurar la variable de entorno VIEW_SIM_EXTENSION_IDS con el ID de la extensión para permitir que solo dicha extensión se conecte al bridge.