Servidor MCP de acero

https://github.com/user-attachments/assets/25848033-40ea-4fa4-96f9-83b6153a0212

Un servidor de Protocolo de Contexto de Modelo (MCP) que permite a los LLM como Claude navegar por la web mediante herramientas basadas en Puppeteer y Steel. Basado en el framework Web Voyager, proporciona herramientas para todas las acciones web estándar: clics, desplazamientos, escritura, etc., y capturas de pantalla.

Pídele a Claude que te ayude con tareas como:

• "Buscar una receta y guardar la lista de ingredientes"
• Seguimiento del estado de entrega de un paquete
• "Buscar y comparar precios de un producto específico"
• "Rellenar una solicitud de empleo en línea"

🚀 Inicio rápido

A continuación, se muestra una guía simplificada para ejecutar Steel Voyager en Claude Desktop. Solo necesita ajustar las opciones del entorno para alternar entre Steel Cloud y una instancia local/autoalojada.

Prerrequisitos

1. Últimas versiones de Git y Node.js instaladas
2. Claude Desktop instalado
3. (Opcional) Imagen de Docker de Steel ejecutándose localmente, si planea alojarla usted mismo
4. (Opcional) Si usas Steel Cloud, trae tu clave API. Consíguela aquí .

A) Inicio rápido (Steel Cloud)

1. Clonar y construir el proyecto:
   git clone https://github.com/steel-dev/steel-mcp-server.git cd steel-mcp-server npm install npm run build
2. Configure Claude Desktop ( ~/Library/Application Support/Claude/claude_desktop_config.json ) agregando una entrada de servidor:
   { "mcpServers": { "steel-puppeteer": { "command": "node", "args": ["path/to/steel-voyager/dist/index.js"], "env": { "STEEL_LOCAL": "false", "STEEL_API_KEY": "YOUR_STEEL_API_KEY_HERE", "GLOBAL_WAIT_SECONDS": "1" } } } }
   • Reemplace "YOUR_STEEL_API_KEY_HERE" con su clave API de Steel válida.
   • Asegúrese de que "STEEL_LOCAL" esté configurado como "falso" para el modo nube.
3. Inicie Claude Desktop. Este servidor MCP se iniciará automáticamente en modo nube.
4. (Opcional) Puede ver o administrar sesiones activas de Steel Browser en su panel de control .

B) Inicio rápido (Steel local/autoalojado)

1. Asegúrese de que su servicio Steel local o auto hospedado esté ejecutándose (por ejemplo, utilizando la imagen Docker de Steel de código abierto).
2. Clonar y compilar el proyecto (igual que el anterior si aún no lo hizo):
   git clone https://github.com/steel-dev/steel-mcp-server.git cd steel-mcp-server npm install npm run build
3. Configurar Claude Desktop ( ~/Library/Application Support/Claude/claude_desktop_config.json ) para el modo local:
   { "mcpServers": { "steel-puppeteer": { "command": "node", "args": ["path/to/steel-voyager/dist/index.js"], "env": { "STEEL_LOCAL": "true", "STEEL_BASE_URL": "http://localhost:3000", "GLOBAL_WAIT_SECONDS": "1" } } } }
   • "STEEL_LOCAL" debe ser "verdadero".
   • Si se aloja usted mismo en un servidor en la nube, configure "STEEL_BASE_URL" para que apunte a su URL de Steel local/autoalojada.
4. Inicie Claude Desktop, que se conectará a su Steel que se está ejecutando localmente y lanzará Steel Voyager en modo local.
5. (Opcional) Para ver las sesiones localmente, puede visitar su panel de control autohospedado ( localhost:5173 ) o los registros específicos de su entorno de ejecución de Steel.

¡Listo! Una vez iniciado, Claude Desktop orquestará el servidor MCP en segundo plano y te permitirá interactuar con las funciones de automatización web a través de Steel Voyager.

Para obtener más información sobre la configuración o si tiene problemas, consulte los documentos de configuración de MCP: https://modelcontextprotocol.io/quickstart/user

Componentes

Herramientas

• navegar por
  • Navegue a cualquier URL en el navegador
  • Entradas:
    • url (cadena, obligatoria): URL a la que navegar (por ejemplo, " https://example.com ").
• buscar
  • Realice una búsqueda en Google navegando a " https://www.google.com/search?q=encodedQuery ".
  • Entradas:
    • query (cadena, obligatoria): Texto a buscar en Google.
• hacer clic
  • Haga clic en los elementos de la página utilizando etiquetas numeradas
  • Entradas:
    • label (número, obligatorio): el número de etiqueta del elemento en el que se hará clic.
• tipo
  • Escriba texto en los campos de entrada utilizando etiquetas numeradas
  • Entradas:
    • label (número, obligatorio): El número de etiqueta del campo de entrada.
    • text (cadena, obligatorio): Texto a escribir en el campo.
    • replaceText (booleano, opcional): si es verdadero, reemplaza cualquier texto existente en el campo.
• desplazarse hacia abajo
  • Desplácese hacia abajo en la página
  • Entradas:
    • pixels (entero, opcional): Número de píxeles para desplazarse hacia abajo. Si no se especifica, se desplaza una página completa.
• desplazarse hacia arriba
  • Desplácese hacia arriba en la página
  • Entradas:
    • pixels (entero, opcional): Número de píxeles para desplazarse hacia arriba. Si no se especifica, se desplaza una página completa.
• volver atrás
  • Navegar a la página anterior en el historial del navegador
  • No se requieren entradas
• esperar
  • Espere hasta 10 segundos, útil para páginas que se cargan lentamente o necesitan más tiempo para que aparezca el contenido dinámico.
  • Entradas:
    • seconds (número, obligatorio): Número de segundos a esperar (0 a 10).
• guardar captura de pantalla sin marcar
  • Captura la página actual sin cuadros delimitadores ni resaltados y guárdala como un recurso.
  • Entradas:
    • resourceName (cadena, opcional): Nombre donde se guardará la captura de pantalla (p. ej., "before_login"). Si se omite, se genera automáticamente un nombre genérico.

Recursos

• Capturas de pantalla : cada captura de pantalla guardada es accesible a través de un URI de recurso MCP en el formato: • screenshot://RESOURCE_NAMEEl servidor almacena estas capturas de pantalla cada vez que se especifica la herramienta "save_unmarked_screenshot" o cuando una acción finaliza (en la mayoría de las herramientas) con una captura de pantalla anotada. Estas imágenes se pueden recuperar mediante una solicitud estándar de recuperación de recursos de MCP.

(Nota: si bien los registros de la consola aún se recopilan para análisis y depuración, no se exponen como recursos recuperables en esta implementación. Aparecen en los registros del servidor, pero no se sirven a través de los URI de recursos de MCP).

Características principales

• Automatización del navegador con Puppeteer
• Integración de Steel para la gestión de sesiones del navegador
• Identificación visual de elementos mediante etiquetas numeradas
• Capacidades de captura de pantalla
• Interacción web básica (navegación, clics, llenado de formularios)
• Soporte de carga diferida mediante desplazamiento
• Compatibilidad con instancias de Steel locales y remotas

Comprensión de los cuadros delimitadores

Al interactuar con las páginas, Steel Puppeteer agrega superposiciones visuales para ayudar a identificar elementos interactivos:

• Cada elemento interactivo (botones, enlaces, entradas) recibe una etiqueta numerada única
• Los cuadros de colores delinean los límites de los elementos.
• Las etiquetas aparecen encima o dentro de los elementos para una fácil referencia.
• Utilice estos números al especificar elementos para operaciones de clic o escritura

Configuración

Steel Voyager puede ejecutarse en dos modos: "Local" o "Nube". Este comportamiento se controla mediante variables de entorno. A continuación, se presenta una breve descripción:

Modo local

1. Establezca STEEL_LOCAL="true".
2. (Opcional) Configure STEEL_BASE_URL para que apunte al servidor Steel si lo aloja en un dominio personalizado. De lo contrario, Steel Voyager usará http://localhost:3000 como predeterminado.
3. No se requiere clave API en este modo.
4. Puppeteer se conectará a través de ws://0.0.0.0:3000

Ejemplo:

exportar STEEL_LOCAL="verdadero"

export STEEL_BASE_URL=" http://localhost:3000 " # solo si se anula

Modo nube

1. Establezca STEEL_LOCAL="falso".
2. Configure STEEL_API_KEY para que Steel Voyager pueda autenticarse con el servicio en nube de Steel (o con su Steel autohospedado si cambió STEEL_BASE_URL).
3. STEEL_BASE_URL tiene como valor predeterminado https://api.steel.dev ; anule esto si tiene una instancia de Steel autohospedada ejecutándose en otro punto final.
4. Puppeteer se conectará a través de wss://connect.steel.dev?sessionId=…&apiKey=…

Ejemplo:

exportar STEEL_LOCAL="falso"

exportar STEEL_API_KEY="SU_CLAVE_DE_API_DE_ACERO_AQUÍ"

Configuración del escritorio de Claude

Para usar Steel Voyager con Claude Desktop, agregue algo como esto a su archivo de configuración (generalmente ubicado en ~/Library/Application Support/Claude/claude_desktop_config.json):

Ajuste las variables de entorno para que coincidan con el modo deseado:

• Si se ejecuta localmente o está alojado automáticamente, mantenga "STEEL_LOCAL": "true" y, opcionalmente, "STEEL_BASE_URL": "http://localhost:3000" .
• Si se ejecuta en modo nube, elimine "STEEL_LOCAL": "true" , agregue "STEEL_LOCAL": "false" y proporcione "STEEL_API_KEY": "<YourKey>" Esto permitirá que Claude Desktop inicie Steel Voyager en el modo correcto.

Instalación y funcionamiento

Instalación mediante herrería

Para instalar Steel MCP Server para Claude Desktop automáticamente a través de Smithery :

Desarrollo local

1. Clonar el repositorio
2. Instalar dependencias:
   npm install
3. Construir el proyecto:
   npm run build
4. Iniciar el servidor:
   npm start

Ejemplo de uso 📹

Le pedimos a Claude que nos impresionara con sus nuevas habilidades y decidió investigar los últimos desarrollos con Sora y luego crear una visualización interactiva para demostrar los datos detrás del modelo y cómo funciona 🤯

https://github.com/user-attachments/assets/8d4293ea-03fc-459f-ba6b-291f5b017ad7

*Disculpen la calidad, Github nos obliga a mantener los videos por debajo de los 10 MB :/

Solución de problemas

Problemas comunes y soluciones:

1. Verifique su clave API de Steel al usar el servicio en la nube y asegúrese de que su instancia local de Steel esté funcionando. Compruebe que tenga una conexión de red adecuada al servicio.
2. Si tienes problemas con la forma en que se representan o marcan las páginas y se envían a Claude, intenta agregar un retraso en tu configuración a través de la variable de entorno GLOBAL_WAIT_SECONDS .
3. Asegúrese de que la página se haya cargado completamente y verifique la configuración del tamaño de la ventana gráfica. Asegúrese de que su sistema tenga suficiente memoria disponible para realizar capturas de pantalla.
4. La limpieza de sesiones no es la mejor en este momento, por lo que es posible que tengas que liberar sesiones manualmente a medida que se inician para ejecutar tareas.
5. Darle indicaciones a Claude de la manera correcta puede contribuir en gran medida a mejorar su desempeño y evitar errores tontos que este puede producir.
6. Aproveche el visor de sesiones para analizar dónde su modelo puede estar deteniéndose.
7. Después de unas 15-20 acciones en el navegador, Claude empieza a ralentizarse a medida que su ventana contextual se llena, pero solo con imágenes. No debería ser terrible, pero hemos notado cierta latencia, especialmente con el cliente de escritorio de Claude, que va con retraso.

Contribuyendo

Este proyecto es experimental y está en desarrollo. ¡Agradecemos cualquier contribución!

1. Bifurcar el repositorio
2. Crear una rama de características
3. Enviar una solicitud de extracción

Por favor incluya:

• Descripción clara de los cambios
• Motivación
• Actualizaciones de la documentación

Descargo de responsabilidad

Este proyecto es experimental y se basa en el código de Web Voyager. Úselo en entornos de producción bajo su propia responsabilidad.