Servidor MCP de Dart y Flutter

Esta guía analiza el servidor MCP de Dart y Flutter.

El servidor MCP de Dart y Flutter expone las acciones de las herramientas de desarrollo de Dart y Flutter a clientes asistentes de IA compatibles. MCP (model context protocol) es un protocolo que habilita la comunicación entre herramientas de desarrollo y asistentes de IA, permitiendo a los asistentes comprender el contexto del código y realizar acciones en nombre del desarrollador.

El servidor MCP de Dart y Flutter puede funcionar con cualquier cliente MCP que admita E/S estándar (stdio) como medio de transporte. Para acceder a todas las funciones del servidor MCP de Dart y Flutter, un cliente MCP debe admitir Tools y Resources. Para disfrutar de la mejor experiencia de desarrollo con el servidor MCP de Dart y Flutter, un cliente MCP también debería admitir Roots.

Si estás utilizando un cliente que dice admitir roots pero no las establece de forma efectiva, pasa el flag --force-roots-fallback para habilitar herramientas que permitan gestionar las roots.

El servidor MCP de Dart y Flutter ofrece una lista creciente de herramientas que otorgan a los asistentes de IA una visión profunda de tu proyecto. Aquí tienes una descripción general de algunas cosas que puede hacer:

• Analizar y corregir errores en el código de tu proyecto.
• Resolver símbolos a elementos para asegurar su existencia y obtener documentación e información de firma para los mismos.
• Introspeccionar e interactuar con tu aplicación en ejecución.
• Buscar en el sitio pub.dev el mejor paquete para un caso de uso.
• Gestionar las dependencias de paquetes en tu archivo pubspec.yaml.
• Ejecutar pruebas y analizar los resultados.
• Formatear código con el mismo formateador y configuración que dart format y el servidor de análisis de Dart.

Ejecutar el servidor con el comando dart mcp-server, el cual debe estar configurado en tu cliente preferido.

Esta sección proporciona instrucciones para configurar el servidor MCP de Dart y Flutter con herramientas populares como Antigravity, Gemini CLI, Cursor y GitHub Copilot.

Para configurar Google Antigravity para usar el servidor MCP de Dart y Flutter, puedes instalarlo desde la lista de servidores disponibles o conectarlo como un servidor MCP personalizado.

1. Navega a o abre el panel lateral Agent.

   Si está cerrado, ábrelo de alguna de estas formas:

   • Presionando Command + L.
   • Yendo a View > Open View... > Agent.

2. En la esquina superior derecha del panel de Agent, haz clic en el botón de menú Additional options (...).

3. Selecciona MCP Servers.

4. En la esquina superior derecha del panel de Agent, haz clic en Manage MCP Servers.

Desde aquí, puedes elegir instalar el servidor MCP desde la tienda MCP integrada o configurándolo manualmente.

1. En la lista de servidores MCP disponibles, busca Dart y haz clic en Install.

1. En la esquina superior derecha de la vista del editor Manage MCPs, haz clic en View raw config.

2. Añade la siguiente entrada dart-mcp-server al mapa mcpServers:

   mcp_config.json

   json

   {
     "mcpServers": {
       "dart-mcp-server": {
         "command": "dart",
         "args": [
           "mcp-server"
         ],
         "env": {}
       }
     }
   }
   

   content_copy

También se recomienda instalar las extensiones de Dart y Flutter:

1. Abre la vista de Extensions de cualquiera de las siguientes formas:

   • Presionando Shift + Command + P.
   • Yendo a View > Extensions.

2. En el cuadro de búsqueda de Search Extensions, escribe Flutter.

3. En la lista de extensiones, selecciona Flutter.

4. En la vista Extension: Flutter que se abre, haz clic en el botón Install.

   Esto instala tanto la extensión de Dart como la de Flutter.

Para obtener más información sobre las extensiones de Dart y Flutter, consulta Desarrollar aplicaciones Flutter en VS Code.

Para configurar Gemini CLI para usar el servidor MCP de Dart y Flutter, añade una entrada de Dart a la sección mcpServers de la configuración de Gemini.

• Para habilitar el servidor en todos los proyectos de tu dispositivo, edita el archivo ~/.gemini/settings.json en tu directorio de inicio.
• Para habilitar el servidor en un proyecto específico, edita el archivo .gemini/settings.json en el directorio raíz del proyecto.

{
  "mcpServers": {
    "dart": {
      "command": "dart",
      "args": [
        "mcp-server"
      ]
    }
  }
}

Para obtener más información, consulta la documentación oficial de Gemini CLI sobre cómo configurar servidores MCP.

El Agent mode de Gemini Code Assist integra Gemini CLI para proporcionar un potente agente de IA directamente en tu IDE. Si aún no has configurado Gemini Code Assist o su modo agente, sigue sus instrucciones de Antes de comenzar para empezar.

Para configurar Gemini Code Assist para usar el servidor MCP de Dart y Flutter, sigue las instrucciones para configurar Gemini CLI.

Puedes verificar que el servidor MCP se ha configurado correctamente escribiendo /mcp en la ventana de chat en el Agent mode.

Para obtener más información, consulta la documentación oficial de Gemini Code Assist para usar el modo agente.

De forma predeterminada, la extensión de Dart utiliza la API MCP de VS Code para registrar el servidor MCP de Dart y Flutter, así como una herramienta para proporcionar la URI para el Dart Tooling Daemon activo.

Habilita o deshabilita explícitamente el servidor MCP de Dart y Flutter configurando el ajuste dart.mcpServer en tus configuraciones de VS Code.

Para cambiar esto a nivel global, actualiza tus ajustes de usuario:

1. En VS Code, haz clic en View > Command Palette y luego busca Preferences: Open User Settings (JSON).

2. Añade la siguiente configuración:

   json

   "dart.mcpServer": true
   

   content_copy

Si deseas que esta configuración se aplique solo a un espacio de trabajo específico, añade la entrada a la configuración de tu espacio de trabajo:

1. En VS Code, haz clic en View > Command Palette y luego busca Preferences: Open Workspace Settings (JSON).

2. Añade la siguiente configuración:

   json

   "dart.mcpServer": true
   

   content_copy

Para obtener más información, consulta la documentación oficial de VS Code sobre cómo habilitar el soporte de MCP.

La forma más fácil de configurar el servidor MCP de Dart y Flutter con Cursor es haciendo clic en el botón Add to Cursor:

Alternativamente, puedes configurar el servidor de forma manual:

1. Ve a Cursor > Settings > Cursor Settings > Tools & Integrations.

2. Haz clic en Add Custom MCP o New MCP Server dependiendo de si ya tienes otros servidores MCP configurados.

3. Edita el archivo .cursor/mcp.json en tu proyecto local (la configuración solo se aplicará a este proyecto) o edita el archivo global ~/.cursor/mcp.json en tu directorio de inicio (la configuración se aplicará a todos los proyectos) para configurar el servidor MCP de Dart y Flutter:

   .cursor/mcp.json

   json

   {
     "mcpServers": {
       "dart": {
         "command": "dart",
         "args": [
           "mcp-server"
         ]
       }
     }
   }
   

   content_copy

Para obtener más información, consulta la documentación oficial de Cursor sobre cómo instalar servidores MCP.

Para configurar OpenCode para usar el servidor MCP de Dart y Flutter, añade la entrada dart-mcp-server a tu configuración de OpenCode.

La configuración de OpenCode se encuentra típicamente en ~/.opencode/config.json o en la configuración de la clave opencode key de tu proyecto.

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "dart-mcp-server": {
      "type": "local",
      "command": [
        "dart",
        "mcp-server"
      ],
      "enabled": true,
      "environment": {}
    }
  }
}

Para configurar Claude Code para usar el servidor MCP de Dart y Flutter en el proyecto actual, utiliza el comando de CLI claude mcp add:

$ claude mcp add --transport stdio dart -- dart mcp-server

Para obtener más información sobre la configuración de servidores MCP en Claude Code, consulta su documentación sobre cómo instalar servidores MCP.

Para configurar Codex CLI para usar el servidor MCP de Dart y Flutter en el proyecto actual, utiliza el comando de CLI codex mcp add:

$ codex mcp add dart -- dart mcp-server --force-roots-fallback

Para obtener más información sobre la configuración de servidores MCP en Codex CLI, consulta su documentación sobre cómo conectarse a servidores MCP.

Una vez que hayas configurado el servidor MCP de Dart y Flutter con un cliente, el servidor MCP de Dart y Flutter le permite al cliente no solo razonar sobre el contexto de tu proyecto, sino también realizar acciones con herramientas.

El Modelo de Lenguaje Grande (LLM) decide qué herramientas usar y cuándo, para que puedas concentrarte en describir tu objetivo en lenguaje natural. Veamos esto en acción con un par de ejemplos utilizando el Agent mode de GitHub Copilot en VS Code.

Todos hemos pasado por eso: construyes una hermosa interfaz de usuario, ejecutas la aplicación y te reciben las famosas rayas amarillas y negras de un error de desbordamiento RenderFlex. En lugar de depurar manualmente el árbol de widgets, ahora puedes pedir ayuda a tu asistente de IA con un prompt similar al siguiente:

Busca y corrige problemas de análisis estático y en tiempo de ejecución. Busca y corrige cualquier problema de diseño.

Detrás de escena, el agente de IA utiliza las herramientas del servidor MCP de Dart y Flutter para:

• Ver el error: Utiliza una herramienta para obtener los errores actuales en tiempo de ejecución de la aplicación que se está ejecutando.
• Inspeccionar la interfaz de usuario: Accede al árbol de widgets de Flutter para comprender el diseño que está causando el desbordamiento.
• Aplicar una solución: Con este contexto en mano, aplica una solución y verifica una vez más si queda algún error.

Luego puedes mantener o deshacer los cambios de código.

Imagina que necesitas añadir un gráfico a tu aplicación. ¿Qué paquete deberías usar? ¿Cómo lo añades y escribes el código repetitivo? El servidor MCP de Dart y Flutter puede agilizar todo este proceso con un prompt similar al siguiente:

Encuentra un paquete adecuado para añadir un gráfico de líneas que muestre el número de pulsaciones de botones a lo largo del tiempo.

El agente de IA ahora actúa como un verdadero asistente:

• Encontrar la herramienta adecuada: Utiliza la herramienta pub_dev_search para encontrar librerías de gráficos populares y con buenas calificaciones.
• Gestionar dependencias: Después de confirmar tu elección, como package:fl_chart, utiliza una herramienta para añadir el paquete como dependencia.
• Generar el código: Genera el código del nuevo widget, con todo el código repetitivo para un gráfico de líneas que coloca en la interfaz de usuario. Incluso corrige automáticamente los errores de sintaxis introducidos durante el proceso. A partir de ahí, puedes personalizarlo más.

Lo que antes era un proceso de varios pasos que incluía investigar, leer documentación, editar pubspec.yaml y escribir el código correspondiente en tu aplicación, ahora es una sola solicitud.

Puedes usar el servidor MCP de Dart y Flutter para controlar una aplicación Flutter en ejecución desde tu asistente de IA: toma capturas de pantalla, toca botones, introduce texto, desplázate y realiza Hot Reload.

Primero, añade el paquete flutter_driver:

$ flutter pub add "flutter_driver:{sdk: flutter}"

En dispositivos móviles y de escritorio, protege enableFlutterDriverExtension() detrás de un flag --dart-define en el método main() de tu aplicación para que no se incluya en las compilaciones de producción:

import 'package:flutter_driver/driver_extension.dart';
​
void main() {
  if (const bool.fromEnvironment('ENABLE_FLUTTER_DRIVER')) {
    enableFlutterDriverExtension();
  }
  runApp(const MyApp());
}

Inicia tu aplicación con el flag activado:

$ flutter run -d <device-id> --dart-define=ENABLE_FLUTTER_DRIVER=true

Luego pídele a tu asistente que se conecte:

Conéctate a mi aplicación Flutter en ejecución, toma una captura de pantalla y luego toca en "Sign In".

El agente utiliza la herramienta dtd para descubrir la aplicación y flutter_driver_command para controlar su interfaz de usuario.

Si encuentras algún problema o tienes comentarios sobre el servidor MCP de Dart y Flutter, presenta una incidencia en el rastreador de incidencias de dart-lang/ai.