DevServer MCP

Gestiona servidores de desarrollo para flujos de trabajo asistidos por LLM, ofreciendo control programático a través de una TUI unificada y automatización experimental del navegador mediante Playwright.

GitHub

Prueba este MCPPatrocinado

Documentación

DevServer MCP

Un servidor de Model Context Protocol (MCP) que gestiona servidores de desarrollo para flujos de trabajo asistidos por LLM. Proporciona control programático sobre múltiples servidores de desarrollo a través de una interfaz unificada con una TUI simple, además de automatización experimental de navegador mediante Playwright.

También puedes encender y apagar los servidores haciendo clic a través de la TUI.

Screenshot

Estado del Proyecto

Este es tanto software ALPHA como un ejercicio de vibe coding; la mayor parte de este código base está escrita con la ayuda de herramientas LLM.

Las pruebas validan parte de la funcionalidad y el servidor ya es útil si necesitas esta funcionalidad, pero los resultados pueden variar.

Características

🚀 Gestión de Procesos: Inicia, detén y supervisa múltiples servidores de desarrollo
📊 TUI Enriquecida: Interfaz de terminal interactiva con transmisión de registros en tiempo real
🌐 Automatización de Navegador: Integración experimental con Playwright para pruebas y automatización web
🔧 Integración con LLM: Soporte completo del protocolo MCP para flujos de trabajo de desarrollo asistidos por IA

Instalación

uv add --dev git+https://github.com/Uninen/devserver-mcp.git --tag v0.6.0

Playwright (Opcional)

Si quieres usar las funciones experimentales de automatización de navegador con Playwright, debes instalar Playwright manualmente:

# Install Playwright
uv add playwright

# Install browser drivers
playwright install

Inicio Rápido

Crea un archivo devservers.yml en la raíz de tu proyecto:

servers:
  backend:
    command: 'python manage.py runserver'
    working_dir: '.'
    port: 8000

  frontend:
    command: 'npm run dev'
    working_dir: './frontend'
    port: 3000
    autostart: true

  worker:
    command: 'celery -A myproject worker -l info'
    working_dir: '.'
    port: 5555
    prefix_logs: false

# Optional: Enable experimental Playwright browser automation
experimental:
  playwright: true

Configuración

VS Code

Añade a .vscode/mcp.json:

{
  "servers": {
    "devserver": {
      "url": "http://localhost:3001/mcp/",
      "type": "http"
    }
  }
}

Luego ejecuta la TUI en una terminal separada: devservers

Claude Code

Instala el servidor localmente:

claude mcp add --transport http devservers http://localhost:3001/mcp/

...o para un proyecto (lo que lo guarda en un .mcp.json en el proyecto):

claude mcp add -s project --transport http devservers http://localhost:3001/mcp/

Luego ejecuta la TUI en una terminal separada: devservers

Gemini CLI

Añade la configuración del servidor en settings.json (~/.gemini/settings.json globalmente o .gemini/settings.json por proyecto, consulta la documentación):

...
  "mcpServers": {
    "devservers": {
      "httpUrl": "http://localhost:3001/mcp",
      "timeout": 5000,
      "trust": true
    }
  },
...

Luego ejecuta la TUI en una terminal separada: devservers

Zed

Zed aún no soporta servidores MCP remotos de forma nativa, por lo que necesitas usar un proxy como mcp-proxy.

Puedes usar la interfaz en Assistant Setting -> Context Server -> Add Custom Server, añadir el nombre "Devservers" y el comando uvx mcp-proxy --transport streamablehttp http://localhost:3001/mcp/, o puedes añadir esto manualmente a la configuración de Zed:

  "context_servers": {
    "devservers": {
      "command": {
        "path": "uvx",
        "args": ["mcp-proxy", "--transport", "streamablehttp", "http://localhost:3001/mcp/"]
      }
    }
  },

Luego ejecuta la TUI en una terminal separada: devservers

Uso

Ejecutar la TUI del Servidor MCP

Inicia la TUI en la terminal:

devservers

Ahora puedes ver y controlar los servidores de desarrollo y ver los registros mientras también das a los LLM acceso completo a los servidores y sus registros.

Herramientas MCP Disponibles

El servidor expone las siguientes herramientas para la interacción con LLM:

Gestión de Servidores

start_server(name) - Inicia un servidor configurado
stop_server(name) - Detiene un servidor (gestionado o externo)
get_devserver_statuses() - Obtiene todos los estados de los servidores
get_devserver_logs(name, offset, limit, reverse) - Obtiene registros con soporte de paginación
- offset: Posición inicial (predeterminado: 0, los valores negativos cuentan desde el final)
- limit: Máximo de registros a devolver (predeterminado: 100)
- reverse: True para los más recientes primero, False para los más antiguos primero (predeterminado: True)

Automatización de Navegador (Experimental)

Cuando experimental.playwright está configurado en la configuración:

browser_navigate(url, wait_until) - Navega el navegador a una URL con condiciones de espera
browser_snapshot() - Captura una instantánea de accesibilidad de la página actual
browser_console_messages(clear, offset, limit, reverse) - Obtiene mensajes de consola con paginación
- clear: Borra los mensajes después de la recuperación (predeterminado: False)
- offset: Posición inicial (predeterminado: 0, los valores negativos cuentan desde el final)
- limit: Máximo de mensajes a devolver (predeterminado: 100)
- reverse: True para los más recientes primero, False para los más antiguos primero (predeterminado: True)
browser_click(ref) - Hace clic en un elemento de la página usando un selector CSS o referencia de elemento
browser_type(ref, text, submit, slowly) - Escribe texto en un elemento con envío opcional (tecla Enter) y modo de escritura lenta
browser_resize(width, height) - Redimensiona la ventana del navegador a las dimensiones especificadas
browser_screenshot(full_page, name) - Toma una captura de pantalla de la página actual
- full_page: Captura la página completa en lugar de la ventana (predeterminado: False)
- name: Nombre de archivo opcional para la captura de pantalla (predeterminado: nombre con marca de tiempo)

Desarrollo

Usar MCP Inspector

Inicia el servidor: devservers
Inicia MCP Inspector: npx @modelcontextprotocol/inspector http://localhost:3001

Scripting con MCP Inspector

Inicia el servidor: devservers
Usa MCP Inspector en modo CLI, por ejemplo: npx @modelcontextprotocol/inspector --cli http://localhost:3001 --method tools/call --tool-name start_server --tool-arg name=frontend

En Otros Lugares

Sigue unessa.net en Bluesky o @uninen en Twitter
Lee mis aprendizajes en constante actualización sobre Vite / Vue / TypeScript y otros temas de desarrollo web en mi sitio Today I Learned

Contribuciones

¡Las contribuciones son bienvenidas! Por favor, sigue el código de conducta al interactuar con otros.