Creando sitios Astro con herramientas de IA

Los editores potenciados por IA y las herramientas de codificación con agentes generalmente tienen un buen conocimiento de las API y conceptos principales de Astro. Sin embargo, algunos pueden usar API más antiguas y no estar al tanto de las funciones más recientes o de los cambios recientes en el framework.

Esta guía cubre cómo mejorar las herramientas de IA con conocimiento actualizado de Astro y proporciona las mejores prácticas para crear sitios Astro con asistencia de IA.

Archivos de contexto

Astro ofrece los archivos llms.txt y llms-full.txt que contienen todo el contenido de la documentación en un formato optimizado para el consumo por IA. Estos son archivos estáticos del contenido de la documentación de Astro en un formato Markdown simplificado. Algunas herramientas de IA pueden descubrir automáticamente estos archivos si proporcionas https://docs.astro.build como fuente de documentación.

Aunque estos archivos proporcionan una versión mínima y fácil de analizar de la documentación de Astro, son archivos grandes que usarán muchos tokens si se utilizan directamente en el contexto y deberán actualizarse regularmente para mantenerse al día. Es mejor usarlos como respaldo cuando la herramienta de IA no tenga acceso a la documentación más reciente de otras formas. El servidor MCP ofrece un acceso más eficiente a la documentación completa con capacidades de búsqueda en tiempo real, lo que lo convierte en la opción preferida cuando está disponible.

Servidor MCP de la documentación de Astro

Puedes asegurarte de que tus herramientas de IA tengan conocimiento actualizado de Astro a través del servidor MCP (Model Context Protocol) de la documentación de Astro. Este proporciona acceso en tiempo real a la documentación más reciente, ayudando a las herramientas de IA a evitar recomendaciones desactualizadas y asegurando que comprendan las mejores prácticas actuales.

¿Qué es MCP?

Model Context Protocol (MCP) es una forma estandarizada para que las herramientas de IA accedan a herramientas externas y fuentes de datos.

A diferencia de los modelos de IA entrenados con datos estáticos, el servidor MCP proporciona acceso a la documentación más reciente de Astro. El servidor es gratuito, de código abierto y se ejecuta de forma remota sin necesidad de instalar nada localmente.

El servidor MCP de la documentación de Astro utiliza la API de kapa.ai para mantener un índice actualizado de la documentación de Astro.

Detalles del servidor

• Name: Astro Docs
• URL: https://mcp.docs.astro.build/mcp
• Transport: HTTP transmitible

Instalación

El proceso de configuración varía según tu herramienta de desarrollo de IA. Es posible que algunas herramientas se refieran a los servidores MCP como conectores, adaptadores, extensiones o complementos.

Configuración manual

Muchas herramientas admiten un formato de configuración JSON común para servidores MCP. Si no hay instrucciones específicas para la herramienta que elegiste, es posible que puedas agregar el servidor MCP de la documentación de Astro incluyendo la siguiente configuración en los ajustes MCP de tu herramienta:

HTTP transmisible

mcp.json

{
  "mcpServers": {
    "Astro docs": {
      "type": "http",
      "url": "https://mcp.docs.astro.build/mcp"
    }
  }
}

Proxy local

mcp.json

{
  "mcpServers": {
    "Astro docs": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
    }
  }
}

CLI de Claude Code

Claude Code es una herramienta de codificación con agentes que se ejecuta en la línea de comandos. Habilitar el servidor MCP de la documentación de Astro le permite acceder a la documentación más reciente mientras genera código para Astro.

Instalar usando el comando de la terminal:

claude mcp add --transport http astro-docs https://mcp.docs.astro.build/mcp

Más información sobre el uso de servidores MCP con Claude Code

GitHub Action de Claude Code

Claude Code también ofrece una GitHub Action que se puede usar para ejecutar comandos en respuesta a eventos de GitHub. Habilitar el servidor MCP de la documentación de Astro le permite acceder a la documentación más reciente mientras responde preguntas en los comentarios o genera código para Astro.

Puedes configurarlo para usar el servidor MCP de la documentación de Astro para acceder a la documentación agregando lo siguiente al archivo de flujo de trabajo:

.github/workflows/claude.yml

# ...resto de la configuración de tu flujo de trabajo
- uses: anthropics/claude-code-action@beta
  with:
    anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
    mcp_config: |
      {
        "mcpServers": {
          "astro-docs": {
            "type": "http",
            "url": "https://mcp.docs.astro.build/mcp"
          }
        }
      }
    allowed_tools: "mcp__astro-docs__search_astro_docs"

Más información sobre el uso de servidores MCP con la GitHub Action de Claude Code

Cursor

Cursor es un editor de código con IA. Agregar el servidor MCP de la documentación de Astro permite que Cursor acceda a la documentación más reciente de Astro mientras realiza tareas de desarrollo.

Instala haciendo clic en el botón de abajo:

Agregar a Cursor

Más información sobre el uso de servidores MCP con Cursor

Visual Studio Code

Visual Studio Code admite servidores MCP cuando se usa Copilot Chat. Agregar el servidor MCP de la documentación de Astro permite que VS Code acceda a la documentación más reciente de Astro al responder preguntas o realizar tareas de codificación.

Instala haciendo clic en el botón de abajo:

Agregar a VS Code

Más información sobre el uso de servidores MCP con VS Code

Warp

Warp (anteriormente Warp Terminal) es un entorno de desarrollo de agentes creado para programar con múltiples agentes de IA. Agregar el servidor MCP de la documentación de Astro permite que Warp acceda a la documentación más reciente de Astro al responder preguntas o realizar tareas de codificación.

1. Abre la configuración de Warp y ve a IA > Servidores MCP > Administrar servidores MCP.
2. Haz clic en “Agregar”.
3. Ingresa la siguiente configuración. Opcionalmente puedes configurar el servidor MCP de Astro para que se active al iniciar usando la bandera start_on_launch:

   MCP Configuration

   {
     "mcpServers": {
       "Astro docs": {
         "command": "npx",
         "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"],
         "env": {},
         "working_directory": null,
         "start_on_launch": true
       }
     }
   }

4. Haz clic en “Guardar”.

Más información sobre el uso de servidores MCP con Warp

Claude.ai / Claude Desktop

Claude.ai es un asistente de IA de propósito general. Agregar el servidor MCP de la documentación de Astro le permite acceder a la documentación más reciente al responder preguntas sobre Astro o generar código para Astro.

1. Navega a la configuración de conectores de Claude.ai.
2. Haz clic en “Agregar conector personalizado”. Es posible que necesites desplazarte hacia abajo para encontrar esta opción.
3. Ingresa la URL del servidor: https://mcp.docs.astro.build/mcp.
4. Establece el nombre como “Astro docs”.

Más información sobre el uso de servidores MCP con Claude.ai

Windsurf

Windsurf es una herramienta de codificación con agentes impulsada por IA, disponible como complemento para editores o como editor independiente. Puede usar el servidor MCP de la documentación de Astro para acceder a la documentación mientras realiza tareas de codificación.

Windsurf no admite HTTP transmisible, por lo que requiere una configuración de proxy local:

1. Abre ~/.codeium/windsurf/mcp_config.json en tu editor.

2. Agrega la siguiente configuración a los ajustes MCP de Windsurf:

   Configuración MCP

   {
     "mcpServers": {
       "Astro docs": {
         "command": "npx",
         "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
       }
     }
   }

3. Guarda la configuración y reinicia Windsurf.

Más información sobre el uso de servidores MCP con Windsurf

CLI de Gemini

Gemini CLI es una herramienta de codificación con IA en la línea de comandos que puede usar el servidor MCP de la documentación de Astro para acceder a la documentación mientras genera código para Astro.

Puedes configurar los servidores MCP a nivel global en el archivo ~/.gemini/settings.json, o en un archivo .gemini/settings.json en la raíz de un proyecto.

.gemini/settings.json

{
  "mcpServers": {
    "Astro docs": {
      "httpUrl": "https://mcp.docs.astro.build/mcp",
    }
  }
}

Más información sobre el uso de servidores MCP con Gemini CLI

Zed

Zed admite servidores MCP cuando se utilizan sus capacidades de IA. Puede usar el servidor MCP de la documentación de Astro para acceder a la documentación mientras realiza tareas de codificación.

Zed no admite HTTP transmisible, por lo que requiere una configuración de proxy local:

1. Abre ~/.config/zed/settings.json en tu editor.

2. Agrega la siguiente configuración a los ajustes MCP de Zed:

   Configuración MCP

   {
     "context_servers": {
       "Astro docs": {
         "command": "npx",
         "args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
       }
     }
   }

3. Guarda la configuración.

Más información sobre el uso de servidores MCP con Zed

ChatGPT

Disponibilidad limitada

La integración del servidor MCP solo está disponible para usuarios de ChatGPT Pro, Team y Enterprise. El proceso de configuración es más complejo que en otras herramientas.

Consulta la documentación MCP de OpenAI para obtener instrucciones específicas de configuración.

Raycast

Raycast puede conectarse a servidores MCP para mejorar sus capacidades de IA. Las funciones de IA, como MCP, requieren una cuenta Raycast Pro, así que asegúrate de haber actualizado antes de intentar instalarlo. Agregar el servidor MCP de la documentación de Astro permite que Raycast acceda a la documentación más reciente de Astro al responder preguntas.

Instala haciendo clic en el botón de abajo:

Agregar a Raycast

Más información sobre el uso de servidores MCP con Raycast

Uso

Una vez configurado, puedes hacer preguntas sobre Astro a tu herramienta de IA, y esta recuperará información directamente de la documentación más reciente. Los agentes de codificación podrán consultar la documentación actualizada al realizar tareas de programación, y los chatbots podrán responder con precisión preguntas sobre las funciones, API y mejores prácticas de Astro.

Recuerda

El servidor MCP de la documentación de Astro proporciona acceso a la documentación actual, pero tus herramientas de IA siguen siendo responsables de la interpretación y generación de código. La IA puede cometer errores, así que siempre revisa cuidadosamente el código generado y pruébalo a fondo.

Solución de problemas

Si encuentras problemas:

• Verifica que tu herramienta admita transporte HTTP transmisible.
• Comprueba que la URL del servidor sea correcta: https://mcp.docs.astro.build/mcp.
• Asegúrate de que tu herramienta tenga acceso a internet.
• Consulta la documentación de integración MCP específica de tu herramienta.

Si aún tienes problemas, abre un issue en el repositorio del servidor MCP de la documentación de Astro.

Soporte de IA en Discord

La misma tecnología que impulsa el servidor MCP de Astro también está disponible como chatbot en el Discord de Astro para soporte autoservicio. Visita el canal #support-ai para hacer preguntas sobre Astro o el código de tu proyecto en lenguaje natural. Tu conversación se organiza automáticamente en hilos, y puedes hacer un número ilimitado de preguntas de seguimiento.

Las conversaciones con el chatbot son públicas y están sujetas a las mismas reglas del servidor sobre lenguaje y comportamiento que el resto de nuestros canales, pero no son revisadas activamente por nuestros miembros voluntarios de soporte. Para recibir ayuda de la comunidad, crea un hilo en nuestro canal regular #support.

Consejos para el desarrollo de Astro potenciado por IA

• Comienza con plantillas: En lugar de construir desde cero, pide a las herramientas de IA que comiencen con una plantilla de Astro existente o usa npm create astro@latest con una opción de plantilla.
• Usa astro add para integraciones: Pide a las herramientas de IA que utilicen astro add para integraciones oficiales (por ejemplo, astro add tailwind, astro add react). Para otros paquetes, instálalos usando el comando de tu gestor de paquetes preferido en lugar de editar directamente package.json.

• Verifica las APIs actuales: Las herramientas de IA pueden usar patrones desactualizados. Pídeles que consulten la documentación más reciente, especialmente para funciones nuevas como sesiones y actions. Esto también es importante para funciones que han tenido cambios significativos desde su lanzamiento inicial, como las colecciones de contenido, o funciones que antes eran experimentales y que ahora pueden haber dejado de serlo.
• Usa reglas de proyecto: Si tu herramienta de IA lo permite, configura reglas de proyecto para aplicar las mejores prácticas y estándares de codificación, como los mencionados anteriormente.