Servidor MCP de Flutter Inspector para desarrollo basado en IA

Repositorio de GitHub

🔍 Un potente servidor de Protocolo de Contexto de Modelo (MCP) que conecta tus aplicaciones Flutter con asistentes de codificación de IA como Cursor, Claude y Cline.

⚠️ Este proyecto es un trabajo en progreso y aún no se han implementado todos los métodos (principalmente los relacionados con Flutter Inspector).

Actualmente, Flutter funciona con el servidor MCP mediante un servidor de reenvío. Consulta la sección "Arquitectura" para obtener más información.

Algunos otros métodos no se han probado; podrían funcionar o no. Úsalos con precaución. Es posible que la mayoría de los métodos se eliminen del servidor MCP más adelante para centrarse únicamente en aplicaciones Flutter y, posiblemente, en Jaspr.

⚠️ ADVERTENCIA ⚠️

Los métodos de depuración, que pueden usar una gran cantidad de tokens y, por lo tanto, sobrecargar el contexto, ahora se ubican en el parámetro "debug-tools". En producción, los métodos de depuración están deshabilitados por defecto.

🚀 Primeros pasos

• El inicio rápido está disponible en QUICK_START.md
• Las opciones de configuración están disponibles en CONFIGURATION.md

🎯 ¿A qué puede llamar el agente?

• [Recurso|Herramienta] Analizar errores : Obtenga errores precisos y condensados de su aplicación. ¿Por qué es mejor que el mensaje de consola? Contiene solo lo que el agente necesita, no toda la lista de widgets rastreados ni la información duplicada. Esto es ideal para que el agente comprenda el error.
• [Recurso|Herramienta] Captura de pantalla : obtén una captura de pantalla de la aplicación. Funciona solo con Claude (no probado). Cursor y Cline no admiten imágenes en la respuesta.

Se implementará:

• [Recurso|Herramienta] Información de la aplicación : tamaño de la pantalla, proporción de píxeles. Permite que un agente use la selección de widgets.
• Recarga en caliente y reinicio en caliente
• [Recurso|Herramienta] Herramienta de selección : Idea actual:
  1. Habilitar la selección de widgets en Flutter Inspector.
  2. Seleccionar widget por posición lógica de píxel.
  3. Obtén información detallada sobre la estructura de tu aplicación Flutter según la posición lógica de los píxeles.

En investigación:

• Inspeccionar ruta actual : ver el estado de navegación actual
• Extensiones: Estados de proveedor/Riverpod de Flutter : obtiene el estado de las instancias de proveedor/Riverpod.
• Extensiones: Jaspr : ?
• Extensiones: Jaspr Proveedor : ?
• Extensiones: Llama : ?

📚 Herramientas disponibles

Todas las herramientas usan el puerto 8181 de forma predeterminada si no se especifica ningún puerto. Puede anular esta configuración proporcionando un número de puerto específico.

La mayoría de las herramientas descritas en TOOLS.md

todo: agregar más detalles sobre métodos útiles

🔧 Solución de problemas

Asegúrese de que:

1. Verifique que el servidor de reenvío esté ejecutándose.
2. Se abrió Devtools en el navegador.
3. He agregado la extensión MCP a las dependencias de desarrollo de mi aplicación Flutter y la he habilitado en Devtools.
4. Problemas de conexión
   • Asegúrese de que su aplicación Flutter se esté ejecutando en modo de depuración
   • Verifique que los puertos coincidan tanto en la aplicación Flutter como en el inspector
   • Compruebe si el puerto no está siendo utilizado por otro proceso
5. La herramienta de IA no detecta el inspector
   • Reiniciar la herramienta de IA después de los cambios de configuración
   • Verificar la sintaxis JSON de configuración
   • Verifique los registros de la herramienta para detectar errores de conexión

🚧 Integración de herrería 🚧 (trabajo en progreso)

Flutter Inspector está registrado en el registro de Smithery, lo que lo hace detectable y utilizable por otras herramientas de IA a través de una interfaz estandarizada.

Arquitectura de integración

🤝 Contribuyendo

¡Agradecemos sus contribuciones! No dude en enviar solicitudes de incorporación de cambios o reportar problemas en el repositorio de GitHub .

📖 Más información

• Documentación de Flutter DevTools
• Protocolo de servicio de Dart VM
• Constantes RPC de Flutter DevTools (supongo y espero que sean correctas:))

📄 Licencia

MIT – ¡Siéntete libre de usarlo en tus proyectos!

Flutter y Dart son marcas comerciales de Google LLC.