Herramientas del navegador MCP

Haga que sus herramientas de IA sean 10 veces más conscientes y capaces de interactuar con su navegador

Esta aplicación es una poderosa herramienta de interacción y monitoreo del navegador que permite que las aplicaciones impulsadas por IA a través del Protocolo de Contexto de Modelo (MCP) de Anthropic capturen y analicen datos del navegador mediante una extensión de Chrome.

Lea nuestra documentación para obtener las guías completas de instalación, inicio rápido y contribución.

Hoja de ruta

Consulta la hoja de ruta de nuestro proyecto aquí: Hoja de ruta de Github / Tablero del proyecto

Actualizaciones

¡Ya está disponible la v1.2.0! Aquí tienes un breve resumen de la actualización:

Ahora puedes activar "Permitir pegar automáticamente en el cursor" en el panel DevTools. Las capturas de pantalla se pegarán automáticamente en el cursor (solo asegúrate de enfocar o hacer clic en el campo de entrada del agente en el cursor; de lo contrario, no funcionará).
Se integró un conjunto de herramientas de análisis de SEO, rendimiento, accesibilidad y mejores prácticas a través de Lighthouse
Se implementó un mensaje específico de NextJS que se utiliza para mejorar el SEO de una aplicación NextJS
Se agregó el modo depurador como una herramienta que ejecuta todas las herramientas de depuración en una secuencia particular, junto con un mensaje para mejorar el razonamiento.
Se agregó el modo Auditoría como una herramienta para ejecutar todas las herramientas de auditoría en una secuencia particular
Problemas de conectividad de Windows resueltos
Red mejorada entre el servidor BrowserTools, la extensión y el servidor MCP con descubrimiento automático de host/puerto, reconexión automática y mecanismos de apagado elegante
Se agregó la capacidad de salir más fácilmente del servidor de Herramientas del navegador con Ctrl+C

Guía de inicio rápido

Hay tres componentes para ejecutar esta herramienta MCP:

Instale nuestra extensión de Chrome desde aquí: v1.2.0 BrowserToolsMCP Chrome Extension
Instale el servidor MCP desde este comando dentro de su IDE: npx @agentdeskai/browser-tools-mcp@latest
Abra una nueva terminal y ejecute este comando: npx @agentdeskai/browser-tools-server@latest

Los diferentes IDE tienen diferentes configuraciones, pero este comando generalmente es un buen punto de partida; consulte la documentación de su IDE para obtener la configuración adecuada.

CONSEJO IMPORTANTE: Necesitas instalar dos servidores. Hay...

browser-tools-server (servidor nodejs local que es un middleware para recopilar registros) y
browser-tools-mcp (servidor MCP que instala en su IDE y que se comunica con la extensión + browser-tools-server)

npx @agentdeskai/browser-tools-mcp@latest es lo que pones en tu IDE npx @agentdeskai/browser-tools-server@latest es lo que ejecutas en una nueva ventana de terminal

Después de estos tres pasos, abra las herramientas de desarrollo de Chrome y luego el panel BrowserToolsMCP.

Si aún tienes problemas, prueba estos pasos:

Cierra el navegador. No solo la ventana, sino todo Chrome.
Reiniciar el servidor del nodo local (browser-tools-server)
Asegúrate de tener solo UNA instancia del panel de herramientas de desarrollo de Chrome abierta

Después de eso, debería funcionar, pero si no lo hace, hágamelo saber y podré compartir algunos pasos más para recopilar registros/información sobre el problema.

Si tienes alguna pregunta o problema, ¡no dudes en abrir un ticket! Y si tienes alguna idea para mejorar esto, no dudes en contactarme o abrir un ticket con una etiqueta de mejora, o contactarme en @tedx_ai en x.

Notas de actualización completas:

Agentes de codificación como Cursor pueden ejecutar estas auditorías en la página actual sin problemas. Al aprovechar Puppeteer y la biblioteca npm Lighthouse, BrowserTools MCP ahora puede:

Evaluar páginas para cumplimiento de WCAG
Identificar cuellos de botella en el rendimiento
Marcar problemas de SEO en la página
Verificar el cumplimiento de las mejores prácticas de desarrollo web
Revisar los problemas específicos de NextJS con SEO

...todo sin salir de tu IDE 🎉

🔑 Adiciones clave

Tipo de auditoría	Descripción
Accesibilidad	Comprobaciones compatibles con WCAG de contraste de color, texto alternativo faltante, trampas de navegación del teclado, atributos ARIA y más.
Actuación	Análisis impulsado por Lighthouse de recursos que bloquean la representación, tamaño excesivo del DOM, imágenes no optimizadas y otros factores que afectan la velocidad de la página.
Posicionamiento web (SEO)	Evalúa factores de SEO en la página (como metadatos, encabezados y estructura de enlaces) y sugiere mejoras para una mejor visibilidad de búsqueda.
Mejores prácticas	Comprueba las mejores prácticas generales en el desarrollo web.
Auditoría de NextJS	Inyecta un mensaje que se utiliza para realizar una auditoría de NextJS.
Modo auditoría	Ejecuta todas las herramientas de auditoría en una secuencia.
Modo depurador	Ejecuta todas las herramientas de depuración en una secuencia.

🛠️ Uso de herramientas de auditoría

✅ Antes de empezar

Asegúrese de tener:

Una pestaña activa en su navegador
La extensión BrowserTools habilitada

▶️ Ejecución de auditorías

Automatización del navegador sin interfaz gráfica :
Puppeteer automatiza una instancia de Chrome sin cabeza para cargar la página y recopilar datos de auditoría, lo que garantiza resultados precisos incluso para SPA o contenido cargado a través de JavaScript.

La instancia del navegador sin cabeza permanece activa durante 60 segundos después de la última llamada de auditoría para gestionar de manera eficiente las solicitudes de auditoría consecutivas.

Resultados estructurados :
Cada auditoría devuelve los resultados en formato JSON estructurado, incluyendo puntuaciones generales y listas detalladas de problemas. Esto facilita a los clientes compatibles con MCP la interpretación de los hallazgos y la presentación de información práctica.

El servidor MCP proporciona herramientas para ejecutar auditorías en la página actual. A continuación, se muestran ejemplos de consultas que puede usar para activarlas:

Auditoría de accesibilidad ( `runAccessibilityAudit` )

Garantiza que la página cumpla con los estándares de accesibilidad como WCAG.

Consultas de ejemplo:
"¿Hay algún problema de accesibilidad en esta página?"
"Ejecutar una auditoría de accesibilidad."
"Comprueba si esta página cumple con los estándares WCAG".

Auditoría de desempeño ( `runPerformanceAudit` )

Identifica cuellos de botella de rendimiento y problemas de carga.

Consultas de ejemplo:
"¿Por qué esta página se carga tan lentamente?"
"Comprueba el rendimiento de esta página."
"Realice una auditoría de rendimiento".

Auditoría SEO ( `runSEOAudit` )

Evalúa qué tan bien está optimizada la página para los motores de búsqueda.

Consultas de ejemplo:
"¿Cómo puedo mejorar el SEO de esta página?"
"Realice una auditoría SEO".
"Comprueba el SEO en esta página".

Auditoría de mejores prácticas ( `runBestPracticesAudit` )

Comprueba las mejores prácticas generales en el desarrollo web.

Consultas de ejemplo:
"Realice una auditoría de mejores prácticas".
"Consulta las mejores prácticas en esta página".
"¿Hay algún problema de mejores prácticas en esta página?"

Modo auditoría ( `runAuditMode` )

Ejecuta todas las auditorías en una secuencia específica. Ejecutará una auditoría de NextJS si se detecta el framework.

Consultas de ejemplo:
"Ejecutar modo auditoría."
"Ingresar al modo auditoría."

Auditorías de NextJS ( `runNextJSAudit` )

Comprueba las mejores prácticas y las mejoras de SEO para las aplicaciones NextJS

Consultas de ejemplo:
"Ejecutar una auditoría de NextJS".
"Ejecute una auditoría de NextJS. Estoy usando el enrutador de aplicaciones".
"Ejecute una auditoría de NextJS. Estoy usando Page Router".

Modo depurador ( `runDebuggerMode` )

Ejecuta todas las herramientas de depuración en una secuencia particular

Consultas de ejemplo:
"Ingrese al modo depurador".

Arquitectura

Hay tres componentes principales que se utilizan para capturar y analizar datos del navegador:

Extensión de Chrome : una extensión del navegador que captura capturas de pantalla, registros de la consola, actividad de red y elementos DOM.
Servidor de nodo : un servidor intermediario que facilita la comunicación entre la extensión de Chrome y cualquier instancia de un servidor MCP.
Servidor MCP : un servidor de protocolo de contexto de modelo que proporciona herramientas estandarizadas para que los clientes de IA interactúen con el navegador.

┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐
│  MCP Client │ ──► │  MCP Server  │ ──► │  Node Server  │ ──► │   Chrome    │
│  (e.g.      │ ◄── │  (Protocol   │ ◄── │ (Middleware)  │ ◄── │  Extension  │
│   Cursor)   │     │   Handler)   │     │               │     │             │
└─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘

El Protocolo de Contexto de Modelo (MCP) es una capacidad compatible con los modelos de IA antrópica que permite crear herramientas personalizadas para cualquier cliente compatible. Clientes MCP como Claude Desktop, Cursor, Cline o Zed pueden ejecutar un servidor MCP que les enseña a usar una nueva herramienta.

Estas herramientas pueden acceder a API externas, pero en nuestro caso, todos los registros se almacenan localmente en su equipo y nunca se envían a ningún servicio o API de terceros. BrowserTools MCP ejecuta una instancia local de un servidor de API NodeJS que se comunica con la extensión de Chrome de BrowserTools.

Todos los consumidores de la interfaz del servidor MCP de BrowserTools tienen la misma API NodeJS y la misma extensión de Chrome.

Extensión de Chrome

Supervisa las solicitudes/respuestas de XHR y los registros de la consola
Realiza un seguimiento de los elementos DOM seleccionados
Envía todos los registros y elementos actuales al conector BrowserTools
Se conecta al servidor Websocket para capturar/enviar capturas de pantalla
Permite al usuario configurar límites de token/truncamiento + ruta de carpeta de captura de pantalla

Servidor de nodo

Actúa como middleware entre la extensión de Chrome y el servidor MCP
Recibe registros y el elemento seleccionado actualmente desde la extensión de Chrome
Procesa solicitudes del servidor MCP para capturar registros, capturas de pantalla o elementos actuales
Envía un comando Websocket a la extensión de Chrome para capturar una captura de pantalla
Trunca de forma inteligente las cadenas y la cantidad de objetos duplicados en los registros para evitar límites de tokens
Elimina las cookies y los encabezados sensibles para evitar el envío a LLM en clientes MCP

Servidor MCP

Implementa el Protocolo de Contexto del Modelo
Proporciona herramientas estandarizadas para clientes de IA.
Compatible con varios clientes MCP (Cursor, Cline, Zed, Claude Desktop, etc.)

Instalación

Los pasos de instalación se pueden encontrar en nuestra documentación:

Documentación de MCP de BrowserTools

Uso

Una vez instalado y configurado, el sistema permite a cualquier cliente MCP compatible:

Supervisar la salida de la consola del navegador
Capturar el tráfico de la red
Tomar capturas de pantalla
Analizar elementos seleccionados
Borrar los registros almacenados en nuestro servidor MCP
Ejecutar auditorías de accesibilidad, rendimiento, SEO y mejores prácticas.

Compatibilidad

Funciona con cualquier cliente compatible con MCP
Diseñado principalmente para la integración de Cursor IDE
Admite otros editores de IA y clientes MCP