Flutter Inspector MCP Server

Servidor MCP de Flutter Inspector para desarrollo basado en IA

Repositorio de GitHub

🔍 Servidor de Protocolo de Contexto de Modelo (MCP) que conecta sus aplicaciones Flutter con asistentes de codificación de IA como Cursor, Claude, Cline, Windsurf, RooCode o cualquier otro asistente de IA que admita el servidor MCP

Vea un pequeño video tutorial sobre cómo configurar el servidor mcp en macOS con Cursor: https://www.youtube.com/watch?v=NBY2p7XIass

[!NOTA] Dado que hay un nuevo paquete experimental en desarrollo que expone las acciones de la herramienta de desarrollo de herramientas Dart a los clientes, es posible que en el futuro este proyecto no sea tan necesario.

Por lo tanto, mi enfoque actual es

1. Para estabilizar y pulir sólo estas herramientas que serán útiles en el desarrollo (para que sea más plug & play) ver más en MCP_RPC_DESCRIPTION.md
2. Encuentra una solución para no utilizar el servidor de reenvío.

Espero que te sea útil.

¡Que tenga un lindo día!

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

⚠️ ADVERTENCIA ⚠️

Los métodos de volcado de RPC (como dump_render_tree ) pueden causar un uso excesivo de tokens o sobrecargar el contexto. Por lo tanto, ahora están deshabilitados por defecto, pero se pueden habilitar mediante la variable de entorno DUMPS_SUPPORTED=true .

Vea más detalles sobre las variables de entorno en .env.example .

🚀 Primeros pasos

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

🎯 Herramientas disponibles para agentes de IA

Análisis de errores

• get_app_errors [Recurso|Herramienta] - Recupera información de errores precisa y condensada de tu aplicación Flutter. Uso :
  • Utiliza solo una breve descripción del error. Debe filtrar los errores duplicados para evitar saturar la ventana de contexto del agente con los mismos errores.
  • Utiliza el Monitor de Errores para capturar errores de la máquina virtual Dart. Esto significa: primero, inicie el servidor mcp, el servidor de reenvío, inicie la aplicación, abra DevTools y la extensión, y luego recargue la aplicación para capturar errores. Todos los errores se capturarán en la extensión DevTools (mcp_bridge).

  Probado en : ✅ macOS, ✅ iOS No probado en : 🚧 Android, 🤔 Windows, 🤔 Linux, ❌ Web Ver problema

Herramientas de desarrollo

• hot_reload [Herramienta] - Realiza una recarga en caliente de la aplicación Flutter Probado en : ✅ macOS, ✅ iOS, ✅ Android No probado en : 🤔 Windows, 🤔 Linux, ❌ Web Ver problema
• screenshot [Recurso|Herramienta]: Captura una captura de pantalla de la aplicación en ejecución. Configuración :
  • Habilitar con el indicador --images o la variable de entorno IMAGES_SUPPORTED=true
  • Puede utilizar compresión para optimizar el tamaño de la imagen.

  Probado en : ✅ macOS, ✅ iOS No probado en : 🚧 Android, 🤔 Windows, 🤔 Linux, ❌ Web Ver problema

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.

📚 Ver más en MCP_RPC_DESCRIPTION

🔧 Solución de problemas

get_app_errors : dado que los errores se capturan en la extensión DevTools, debe asegurarse de haber reiniciado o vuelto a cargar la aplicación Flutter después de iniciar el servidor MCP, el servidor de reenvío y la extensión mcp_bridge de DevTools.

Asegúrese también de:

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.