Créer des sites Astro avec des outils d'IA

Les éditeurs basés sur l’IA et les outils de codage agentique ont généralement une bonne connaissance des API et des concepts de base d’Astro. Cependant, certains peuvent utiliser des API plus anciennes et ne pas être au courant des nouvelles fonctionnalités ou des modifications récentes apportées au framework.

Ce guide explique comment améliorer les outils d’IA avec des connaissances d’Astro à jour et fournit les meilleures pratiques pour créer des sites Astro avec l’assistance de l’IA.

Fichiers de contexte

Astro fournit des fichiers llms.txt et llms-full.txt qui contiennent le contenu complet de la documentation dans un format optimisé pour la consommation par l’IA. Il s’agit de fichiers statiques du contenu d’Astro Docs dans un format Markdown simplifié. Certains outils d’IA peuvent détecter automatiquement ces fichiers si vous indiquez https://docs.astro.build comme source pour la documentation.

Bien que ces fichiers fournissent une version minimale et facile à analyser de la documentation d’Astro, ce sont des fichiers volumineux qui utiliseront beaucoup de jetons s’ils sont utilisés directement dans le contexte et devront être mis à jour régulièrement pour rester à jour. Il est préférable de les utiliser comme solution de secours lorsque l’outil d’IA n’a pas accès à la documentation la plus récente par d’autres moyens. Le serveur MCP offre un accès plus efficace à la documentation complète avec des capacités de recherche en temps réel, ce qui en fait l’option préférée lorsqu’elle est disponible.

Serveur MCP d’Astro Docs

Vous pouvez vous assurer que vos outils d’IA disposent de connaissances d’Astro à jour grâce au serveur MCP (« Model Context Protocol » en anglais) d’Astro Docs. Celui-ci permet un accès en temps réel à la documentation la plus récente, aidant les outils d’IA à éviter les recommandations obsolètes et garantissant qu’ils comprennent les meilleures pratiques actuelles.

Contrairement aux modèles d’IA entraînés sur des données statiques, le serveur MCP donne accès à la documentation d’Astro la plus récente. Le serveur est gratuit, open source et fonctionne à distance sans aucune installation locale.

Le serveur MCP d’Astro Docs utilise l’API de kapa.ai pour maintenir un index à jour de la documentation d’Astro.

Détails du serveur

Nom : Astro Docs
URL : https://mcp.docs.astro.build/mcp
Transport : HTTP diffusable en continu

Installation

Le processus de configuration varie en fonction de votre outil de développement d’IA. Certains outils peuvent désigner les serveurs MCP par des termes tels que connecteurs, adaptateurs, extensions ou modules d’extension.

Configuration manuelle

De nombreux outils prennent en charge un format de configuration JSON commun pour les serveurs MCP. Si votre outil ne dispose pas d’instructions spécifiques, vous pouvez peut-être ajouter le serveur MCP d’Astro Docs en incluant la configuration suivante dans les paramètres MCP de votre outil :

Streamable HTTP
Local Proxy

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

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

CLI de Claude Code

Claude Code est un outil de codage agentique qui s’exécute sur la ligne de commande. L’activation du serveur MCP d’Astro Docs lui permet d’accéder à la documentation la plus récente lors de la génération de code Astro.

Installation à l’aide de la commande du terminal :

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

Plus d’informations sur l’utilisation des serveurs MCP avec Claude Code

GitHub Action pour Claude Code

Claude Code fournit également une action GitHub qui peut être utilisée pour exécuter des commandes en réponse à des événements GitHub. L’activation du serveur MCP d’Astro Docs lui permet d’accéder à la documentation la plus récente tout en répondant aux questions dans les commentaires ou en générant du code Astro.

Vous pouvez le configurer pour utiliser le serveur MCP d’Astro Docs pour accéder à la documentation en ajoutant ce qui suit au fichier de workflow :

# ...le reste de la configuration de votre flux de travail
- 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"

Plus d’informations sur l’utilisation des serveurs MCP avec l’action GitHub Claude Code

Cursor

Cursor est un éditeur de code avec IA. L’ajout du serveur MCP d’Astro Docs permet à Cursor d’accéder à la documentation d’Astro la plus récente tout en effectuant des tâches de développement.

Installation en cliquant sur le bouton ci-dessous :

Ajoutez à Cursor

Plus d’informations sur l’utilisation des serveurs MCP avec Cursor

Visual Studio Code

Visual Studio Code prend en charge les serveurs MCP lors de l’utilisation de Copilot Chat. L’ajout du serveur MCP d’Astro Docs permet à VS Code d’accéder à la dernière documentation d’Astro pour répondre à des questions ou effectuer des tâches de codage.

Installation en cliquant sur le bouton ci-dessous :

Ajoutez à VS Code

Plus d’informations sur l’utilisation des serveurs MCP avec VS Code

Warp

Warp (anciennement Warp Terminal) est un environnement de développement d’agents conçu pour coder avec plusieurs agents IA. L’ajout du serveur MCP d’Astro Docs permet à Warp d’accéder à la dernière documentation Astro pour répondre à des questions ou effectuer des tâches de codage.

Ouvrez vos paramètres Warp et accédez à AI > MCP Servers > Manage MCP Servers.
Cliquez sur « Add ».

Saisissez la configuration suivante. Vous pouvez éventuellement configurer le serveur MCP d’Astro pour qu’il s’active au démarrage à l’aide de l’option start_on_launch :

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

Cliquez sur « Save ».

Plus d’informations sur l’utilisation des serveurs MCP avec Warp

Claude.ai / Claude Desktop

Claude.ai est un assistant IA à usage général. L’ajout du serveur MCP d’Astro Docs lui permet d’accéder à la documentation la plus récente pour répondre aux questions à propos d’Astro ou générer du code Astro.

Accédez aux paramètres du connecteur Claude.ai.
Cliquez sur « Ajouter un connecteur personnalisé ». Vous devrez peut-être faire défiler la page vers le bas pour trouver cette option.
Saisissez l’URL du serveur : https://mcp.docs.astro.build/mcp.
Définissez le nom sur « Astro docs ».

Plus d’informations sur l’utilisation des serveurs MCP avec Claude.ai

Windsurf

Windsurf est un outil de codage agentique basé sur l’IA, disponible sous forme de modules d’extension d’éditeur ou d’éditeur autonome. Il peut utiliser le serveur MCP d’Astro Docs pour accéder à la documentation tout en effectuant des tâches de codage.

Windsurf ne prend pas en charge le streaming HTTP, il nécessite donc une configuration de proxy locale :

Ouvrez ~/.codeium/windsurf/mcp_config.json dans votre éditeur.

Ajoutez la configuration suivante pour les MCP à vos paramètres Windsurf :

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

Enregistrez la configuration et redémarrez Windsurf.

Plus d’informations sur l’utilisation des serveurs MCP avec Windsurf

CLI de Gemini

La CLI de Gemini est un outil de codage IA en ligne de commande qui peut utiliser le serveur MCP d’Astro Docs pour accéder à la documentation tout en générant du code Astro.

Vous pouvez configurer les serveurs MCP au niveau global dans le fichier ~/.gemini/settings.json, ou dans un fichier .gemini/settings.json à la racine d’un projet.

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

Plus d’informations sur l’utilisation des serveurs MCP avec la CLI de Gemini

Zed

Zed prend en charge les serveurs MCP lors de l’utilisation de ses capacités d’IA. Il peut utiliser le serveur MCP d’Astro Docs pour accéder à la documentation tout en effectuant des tâches de codage.

Zed ne prend pas en charge le streaming HTTP, il nécessite donc une configuration de proxy locale :

Ouvrez ~/.config/zed/settings.json dans votre éditeur.

Ajoutez la configuration suivante pour les MCP à vos paramètres Zed :

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

Enregistrez la configuration.

Plus d’informations sur l’utilisation des serveurs MCP avec Zed

ChatGPT

Reportez-vous à la documentation du MCP d’OpenAI pour obtenir des instructions de configuration spécifiques.

Raycast

Raycast peut se connecter aux serveurs MCP pour améliorer ses capacités d’IA. Les fonctionnalités d’IA telles que MCP nécessitent un compte Raycast Pro, assurez-vous donc d’avoir effectué la mise à niveau avant d’essayer de l’installer. L’ajout du serveur MCP d’Astro Docs permet à Raycast d’accéder à la dernière documentation d’Astro tout en répondant aux questions.

Installation en cliquant sur le bouton ci-dessous :

Ajoutez à Raycast

Plus d’informations sur l’utilisation des serveurs MCP avec Raycast

Utilisation

Une fois configuré, vous pouvez poser des questions à votre outil d’IA à propos d’Astro ; il récupérera les informations directement dans la documentation la plus récente. Les agents de codage pourront consulter la documentation la plus récente lors de l’exécution de tâches de codage, et les chatbots pourront répondre avec précision aux questions sur les fonctionnalités, les API et les meilleures pratiques d’Astro.

Dépannage

Si vous rencontrez des problèmes :

Vérifiez que votre outil prend en charge le transport HTTP diffusable en continu.
Vérifiez que l’URL du serveur est correcte : https://mcp.docs.astro.build/mcp.
Assurez-vous que votre outil dispose bien d’un accès Internet.
Consultez la documentation d’intégration MCP de votre outil spécifique.

Si vous rencontrez encore des problèmes, ouvrez un ticket dans le dépôt du serveur MCP d’Astro Docs.

Assistance IA sur Discord

La même technologie qui alimente le serveur MCP d’Astro est également disponible sous forme de chatbot sur le Discord d’Astro pour une assistance en libre-service. Visitez le canal #support-ai pour poser des questions à propos d’Astro ou du code de votre projet en langage naturel. Votre conversation est automatiquement triée par fil et vous pouvez poser un nombre illimité de questions complémentaires.

Les conversations avec le chatbot sont publiques et sont soumises aux mêmes règles de serveur en matière de langage et de comportement que le reste de nos canaux, mais elles ne sont pas activement visitées par nos membres bénévoles fournissant une assistance. Pour obtenir l’aide de la communauté, veuillez créer un fil de discussion dans notre canal #support habituel.

Conseils pour le développement avec Astro basé sur l’IA

Commencez avec des modèles : plutôt que de créer à partir de zéro, demandez aux outils d’IA de commencer avec un modèle Astro existant ou utilisez npm create astro@latest avec une option de modèle.
Utilisez astro add pour les intégrations : demandez aux outils d’IA d’utiliser astro add pour les intégrations officielles (par exemple, astro add tailwind, astro add react). Pour les autres paquets, installez-les à l’aide de la commande de votre gestionnaire de paquets préféré plutôt que de modifier directement package.json.
Vérifiez les API actuelles : les outils d’IA peuvent utiliser des techniques obsolètes. Demandez-leur de consulter la documentation la plus récente, en particulier pour les nouvelles fonctionnalités comme les sessions et les actions. Ceci est également important pour les fonctionnalités qui ont connu des changements importants depuis leur lancement initial, telles que les collections de contenu ou les fonctionnalités auparavant expérimentales qui ne le sont peut-être plus.
Utilisez les règles du projet : si votre outil d’IA le prend en charge, configurez des règles de projet pour appliquer les meilleures pratiques et les normes de codage, telles que celles répertoriées ci-dessus.

Contribuer Communauté Parrainer