Swebsy MCP

Crea y edita sitios web reales en Swebsy Studio desde tu agente de codificación (Claude Code, Codex, Cursor, Windsurf), sin tarifas de IA por token. Funciona a través de un puente local 127.0.0.1 y requiere una pestaña abierta de Swebsy Studio. Instalación: npx -y @swebsy/mcp setup

Documentación

@swebsy/mcp — conecta tu agente de codificación a Swebsy

Crea y edita sitios web reales con el agente de codificación que ya pagas — sin tarifas de IA por token.

npm CI License: MIT

An agent creating a site, rewriting the hero, adding a section and exporting it, while Swebsy Studio updates live

@swebsy/mcp es un servidor MCP que permite que Claude Code, Codex, Cursor, Windsurf, Cline, GitHub Copilot — o cualquier agente que hable el Protocolo de Contexto de Modelos — controle una pestaña abierta de Swebsy Studio. Tu agente descubre plantillas, crea y abre sitios, renombra proyectos, añade secciones, edita contenido, cambia páginas, configura todos los ajustes del sitio (SEO, favicon, fuentes, analíticas, robots.txt, destino de publicación), captura capturas de pantalla y exporta el sitio terminado, todo a través de un relé local de WebSocket 127.0.0.1. Nada se proxya a través de nuestros servidores, y Studio redacta secretos (claves API, tokens de despliegue, historial de chat) antes de que cualquier cosa cruce el puente. La política de servicio y privacidad de tu propio agente de codificación sigue aplicándose al contenido no secreto que recibe.

¿Qué es Swebsy?

Swebsy es un constructor visual de sitios web con un modelo de propiedad real: construyes visualmente, exportas archivos reales (HTML/CSS/JS) y publicas donde quieras — sin bloqueo, sin requisito de hosting propietario. El plan gratuito funciona completamente local; no requiere cuenta.

¿Por qué usar un MCP en lugar de un panel de IA integrado?

La mayoría de los "constructores de sitios web con IA" añaden un panel de chat y te cobran por token además del modelo al que ya estás suscrito. Swebsy adopta el enfoque opuesto — expone el editor como una herramienta que tu propio agente puede controlar:

  • Sin facturación de API por token. Swebsy no interviene en los costos del modelo. Usas el plan de Claude, Cursor, Codex o Copilot que ya pagas.
  • Se ejecuta en tu máquina. El agente habla con tu pestaña abierta de Studio a través de un puente local 127.0.0.1 — las indicaciones y el contenido no se envían para ser medidos.
  • Trae tu propio agente. Tu modelo, tus instrucciones personalizadas, tu flujo de trabajo — no un envoltorio bloqueado. Cualquier agente compatible con MCP funciona.
  • Tú eres dueño del resultado. Todo lo que el agente construye se exporta como archivos reales y portables que puedes alojar en cualquier lugar.

Configuración

Un comando registra Swebsy con cada agente compatible que encuentre (Claude Code, Codex, Cursor, Windsurf, VS Code, Cline):

npx -y @swebsy/mcp setup

Nunca cambia una entrada swebsy existente y nunca reescribe un archivo de configuración que no pueda analizar; informa el resultado de cada agente. O regístralo manualmente:

Claude Code

claude mcp add swebsy -- npx -y @swebsy/mcp

Codex

codex mcp add swebsy -- npx -y @swebsy/mcp

Cursor — añade a ~/.cursor/mcp.json (o al .cursor/mcp.json de un proyecto):

{
  "mcpServers": {
    "swebsy": { "command": "npx", "args": ["-y", "@swebsy/mcp"] }
  }
}

GitHub Copilot (VS Code)

code --add-mcp '{"name":"swebsy","command":"npx","args":["-y","@swebsy/mcp"]}'

Windsurf — añade el mismo bloque JSON a ~/.codeium/windsurf/mcp_config.json.

Cline — añade el mismo bloque JSON a cline_mcp_settings.json, o usa el botón MCP Servers → Configure de la extensión, que lo abre:

  • macOS ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
  • Linux ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
  • Windows %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json

Cline CLI (npm i -g cline) es una instalación separada de la extensión, con su propia configuración en ~/.cline/data/settings/cline_mcp_settings.json y un bloque transport anidado:

{
  "mcpServers": {
    "swebsy": {
      "transport": { "type": "stdio", "command": "npx", "args": ["-y", "@swebsy/mcp"] }
    }
  }
}

O deja que su propio CLI lo escriba: cline mcp add swebsy --yes -- npx -y @swebsy/mcp.

Emparejamiento

  1. Ejecuta npx -y @swebsy/mcp setup
  2. Reinicia tu agente.
  3. Pídele: "Créame una página de aterrizaje con Swebsy." La primera solicitud abre Studio y lo conecta.

Te conectas una vez por navegador. Cuando no hay una pestaña de Studio conectada, la siguiente llamada de herramienta abre Studio y lo reconecta automáticamente (espera hasta 20 segundos). La sesión se guarda en ~/.swebsy/agent-<port>.session, por lo que sobrevive al reinicio del puente.

Claude Code también lista un mensaje /swebsy:swebsy (MCP) que guía al agente a través de la conexión y apertura de un sitio. Otros agentes muestran los mensajes MCP a su manera, si es que lo hacen.

Para emparejar manualmente (el navegador no se abrió, Swebsy se ejecuta en un navegador diferente, o SWEBSY_NO_OPEN=1 está configurado):

  1. Pide a tu agente que ejecute la herramienta swebsy_start_pairing. Abre el enlace de emparejamiento en tu navegador predeterminado automáticamente, y también devuelve el enlace, el código sin procesar y el puerto del relé.
  2. Swebsy se conecta automáticamente y elimina el código de la barra de direcciones después de que se use. (Configura SWEBSY_NO_OPEN=1 para omitir la apertura automática y solo obtener el enlace de vuelta.)
  3. Si el navegador no se abrió — o Swebsy se está ejecutando en un navegador diferente — abre el enlace devuelto allí tú mismo, o usa los campos de respaldo en Configuración global → Agentes de codificación → ¿No se conectó? Empareja manualmente: pega el código sin procesar, deja el puerto en 37373 a menos que hayas cambiado SWEBSY_AGENT_PORT, y haz clic en Conectar.
  4. Indica a tu agente como de costumbre — controla la pestaña a través de las herramientas swebsy_*.

Mantén la pestaña de Studio abierta. Si el navegador la pone en reposo, las herramientas devuelven tab_unresponsive hasta que hagas clic en la pestaña. Fijarla puede ayudar, o añade Studio en Configuración de Chrome → Rendimiento → "Mantener siempre estos sitios activos".

Guía completa: https://docs.swebsy.com/settings/ai-coding-agent/

Múltiples agentes

Varios agentes de codificación pueden compartir una pestaña de Studio emparejada. Registra @swebsy/mcp en cada agente y usa el mismo SWEBSY_AGENT_PORT (predeterminado 37373) para cada servidor. El primer proceso MCP inicia el broker local; los procesos posteriores se unen automáticamente, por lo que Studio solo necesita emparejarse una vez.

Studio muestra el registro de agentes conectados y su actividad. El broker serializa comandos entre agentes para que el editor maneje un comando a la vez, y enruta cada resultado, captura de pantalla y exportación de vuelta al agente que lo solicitó. Una pestaña de Studio puede emparejarse con un broker a la vez; emparejar otra pestaña revoca la pestaña anterior.

Lo que tu agente puede hacer

Una vez emparejado, tu agente puede trabajar desde Inicio o Studio. Puede actualizar y listar plantillas instaladas, crear el sitio en blanco estándar o importar una plantilla sin cambios, listar metadatos de sitios guardados, abrir sitios por ID y renombrar sus nombres internos de Swebsy. Se permiten nombres duplicados; los IDs son autoritativos.

Después de swebsy_create_site o swebsy_open_site, consulta swebsy_status hasta que aparezca el siteId esperado y editorReady sea true. El agente puede entonces leer el árbol de páginas, añadir y editar secciones, crear y enlazar páginas, insertar bloques, gestionar símbolos reutilizables — incluyendo repetir uno con contenido diferente por instancia mientras su estilo se mantiene sincronizado — capturar capturas de pantalla en cualquier viewport, y exportar el proyecto.

swebsy_list_sites devuelve solo metadatos — nunca contenido de páginas, miniaturas, recursos, revisiones o configuraciones. Las analíticas de creación/renombrado impulsadas por el agente contienen solo IDs de fuente/plantilla/sitio, nunca nombres internos o contenido del sitio.

Configuración

Variable de entornoPredeterminadoPropósito
SWEBSY_AGENT_PORT37373Puerto en el que escucha el relé local
SWEBSY_AGENT_DIR.swebsy-agent del espacio de trabajoDónde se guardan capturas/exportaciones
SWEBSY_APP_URLhttps://studio.swebsy.comOrigen de Studio para el enlace swebsy_start_pairing (configurar para local/autoalojado)
SWEBSY_NO_OPEN(sin configurar)Configurar para omitir la apertura automática del enlace de emparejamiento en el navegador

Compilar desde el código fuente

El paquete publicado es todo lo que necesitas para usar esto; el código fuente está aquí para leer, auditar o modificar.

git clone https://github.com/swebsy/MCP.git
cd MCP
npm install
npm test
npm run build      # -> dist/server.js

Apunta un agente a tu compilación local en lugar de npm:

claude mcp add swebsy -- node /absolute/path/to/MCP/dist/server.js

Este repositorio es un espejo generado, capturado del directorio mcp/ del repositorio principal de Swebsy en cada versión. Cada archivo aquí se sobrescribe en la siguiente sincronización, por lo que una solicitud de extracción contra él se borraría en lugar de fusionarse — por favor abre un problema en su lugar y aplicaremos el cambio en el repositorio principal.

Enlaces

Licencia

MIT