Skip to content

Commit ffe799b

Browse files
i18n(fr): add guides/build-with-ai.mdx (#12043)
Co-authored-by: Paul Valladares <[email protected]>
1 parent ab2010d commit ffe799b

File tree

1 file changed

+227
-0
lines changed

1 file changed

+227
-0
lines changed
Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
---
2+
title: Créer des sites Astro avec des outils d'IA
3+
sidebar:
4+
label: Créer avec l'IA
5+
tableOfContents:
6+
minHeadingLevel: 2
7+
maxHeadingLevel: 4
8+
i18nReady: true
9+
description: Ressources et conseils pour créer des sites Astro avec l'aide de l'IA
10+
---
11+
12+
import { Steps, LinkButton, Card } from '@astrojs/starlight/components';
13+
14+
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.
15+
16+
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.
17+
18+
## Fichiers de contexte
19+
20+
Astro fournit des fichiers [`llms.txt`](https://docs.astro.build/llms.txt) et [`llms-full.txt`](https://docs.astro.build/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.
21+
22+
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](#serveur-mcp-dastro-docs) 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.
23+
24+
## Serveur MCP d'Astro Docs
25+
26+
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.
27+
28+
:::tip[Qu'est-ce que le MCP ?]
29+
Le [protocole de contexte de modèle](https://modelcontextprotocol.io/) (ou « Model Context Protocol », abrégé MCP, en anglais) est un moyen standardisé permettant aux outils d'IA d'accéder à des outils externes et à des sources de données.
30+
:::
31+
32+
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.
33+
34+
Le serveur MCP d'Astro Docs utilise l'API de [kapa.ai](https://www.kapa.ai/) pour maintenir un index à jour de la documentation d'Astro.
35+
36+
### Détails du serveur
37+
38+
- **Nom** : Astro Docs
39+
- **URL** : `https://mcp.docs.astro.build/mcp`
40+
- **Transport** : HTTP diffusable en continu
41+
42+
Ce serveur utilise un transport HTTP diffusable en continu, qui peut ne pas être compatible avec tous les outils. Consultez la documentation de votre outil pour connaître la prise en charge de MCP.
43+
44+
### Installation
45+
46+
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.
47+
48+
#### Claude Code
49+
50+
[Claude Code](https://docs.anthropic.com/fr/docs/claude-code/overview) 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.
51+
52+
Installation à l'aide de la commande du terminal :
53+
54+
```shell
55+
claude mcp add --transport http "Astro docs" https://mcp.docs.astro.build/mcp
56+
```
57+
58+
[Plus d'informations sur l'utilisation des serveurs MCP avec Claude Code](https://docs.anthropic.com/fr/docs/claude-code/mcp)
59+
60+
#### Cursor
61+
62+
[Cursor](https://cursor.com) 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.
63+
64+
Installation en cliquant sur le bouton ci-dessous :
65+
66+
<LinkButton href="cursor://anysphere.cursor-deeplink/mcp/install?name=Astro%20docs&config=eyJ1cmwiOiJodHRwczovL21jcC5kb2NzLmFzdHJvLmJ1aWxkL21jcCJ9">Ajoutez à Cursor</LinkButton>
67+
68+
[Plus d'informations sur l'utilisation des serveurs MCP avec Cursor](https://docs.cursor.com/context/mcp)
69+
70+
#### Visual Studio Code
71+
72+
[Visual Studio Code](https://code.visualstudio.com) 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.
73+
74+
Installation en cliquant sur le bouton ci-dessous :
75+
76+
<LinkButton href="vscode:mcp/install?%7B%22name%22%3A%22Astro%20docs%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.docs.astro.build%2Fmcp%22%7D">Ajoutez à VS Code</LinkButton>
77+
78+
[Plus d'informations sur l'utilisation des serveurs MCP avec VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server)
79+
80+
#### Warp
81+
82+
[Warp](https://warp.dev) (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.
83+
84+
<Steps>
85+
86+
1. Ouvrez vos paramètres Warp et accédez à AI > MCP Servers > Manage MCP Servers.
87+
2. Cliquez sur « Add ».
88+
3. 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` :
89+
```json title="Configuration MCP" {3-9}
90+
{
91+
"mcpServers": {
92+
"Astro docs": {
93+
"command": "npx",
94+
"args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"],
95+
"env": {},
96+
"working_directory": null,
97+
"start_on_launch": true
98+
}
99+
}
100+
}
101+
```
102+
4. Cliquez sur « Save ».
103+
104+
</Steps>
105+
106+
[Plus d'informations sur l'utilisation des serveurs MCP avec Warp](https://docs.warp.dev/knowledge-and-collaboration/mcp)
107+
108+
#### Claude.ai / Claude Desktop
109+
110+
[Claude.ai](https://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.
111+
112+
<Steps>
113+
114+
1. Accédez aux [paramètres du connecteur Claude.ai](https://claude.ai/settings/connectors).
115+
2. Cliquez sur « Ajouter un connecteur personnalisé ». Vous devrez peut-être faire défiler la page vers le bas pour trouver cette option.
116+
3. Saisissez l'URL du serveur : `https://mcp.docs.astro.build/mcp`.
117+
4. Définissez le nom sur « Astro docs ».
118+
119+
</Steps>
120+
121+
[Plus d'informations sur l'utilisation des serveurs MCP avec Claude.ai](https://support.anthropic.com/fr/articles/10168395-configuration-des-integrations-sur-claude-ai#h_cda40ecb32)
122+
123+
#### Windsurf
124+
125+
[Windsurf](https://windsurf.com/) 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.
126+
127+
Windsurf ne prend pas en charge le streaming HTTP, il nécessite donc une configuration de proxy locale :
128+
129+
<Steps>
130+
131+
1. Ouvrez `~/.codeium/windsurf/mcp_config.json` dans votre éditeur.
132+
2. Ajoutez la configuration suivante pour les MCP à vos paramètres Windsurf :
133+
134+
```json title="Configuration MCP" {3-6}
135+
{
136+
"mcpServers": {
137+
"Astro docs": {
138+
"command": "npx",
139+
"args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
140+
}
141+
}
142+
}
143+
```
144+
3. Enregistrez la configuration et redémarrez Windsurf.
145+
146+
</Steps>
147+
148+
[Plus d'informations sur l'utilisation des serveurs MCP avec Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json)
149+
150+
151+
#### Zed
152+
153+
[Zed](https://zed.dev) 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.
154+
155+
Zed ne prend pas en charge le streaming HTTP, il nécessite donc une configuration de proxy locale :
156+
157+
<Steps>
158+
159+
1. Ouvrez `~/.config/zed/settings.json` dans votre éditeur.
160+
2. Ajoutez la configuration suivante pour les MCP à vos paramètres Zed :
161+
162+
```json title="Configuration MCP" {3-6}
163+
{
164+
"context_servers": {
165+
"Astro docs": {
166+
"command": "npx",
167+
"args": ["-y", "mcp-remote", "https://mcp.docs.astro.build/mcp"]
168+
}
169+
}
170+
}
171+
```
172+
3. Enregistrez la configuration.
173+
174+
</Steps>
175+
176+
[Plus d'informations sur l'utilisation des serveurs MCP avec Zed](https://zed.dev/docs/ai/mcp)
177+
178+
#### ChatGPT
179+
180+
:::caution[Disponibilité limitée]
181+
L'intégration du serveur MCP est uniquement disponible pour les utilisateurs de ChatGPT Pro, Team et Enterprise. La configuration est plus complexe que pour d'autres outils.
182+
:::
183+
184+
Reportez-vous à la [documentation du MCP d'OpenAI](https://platform.openai.com/docs/mcp#test-and-connect-your-mcp-server) pour obtenir des instructions de configuration spécifiques.
185+
186+
#### Raycast
187+
188+
[Raycast](https://www.raycast.com/) 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](https://www.raycast.com/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.
189+
190+
Installation en cliquant sur le bouton ci-dessous :
191+
192+
<LinkButton href="raycast://mcp/install?%7B%22name%22%3A%22Astro%20docs%22%2C%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%20%22mcp-remote%22%2C%20%22https%3A%2F%2Fmcp.docs.astro.build%2Fmcp%22%5D%7D">Ajoutez à Raycast</LinkButton>
193+
194+
[Plus d'informations sur l'utilisation des serveurs MCP avec Raycast](https://manual.raycast.com/model-context-protocol)
195+
196+
### Utilisation
197+
198+
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.
199+
200+
:::note[Rappel]
201+
Le serveur MCP d'Astro Docs donne accès à la documentation actuelle, mais vos outils d'IA restent responsables de l'interprétation et de la génération du code. L'IA fait des erreurs ; il est donc important de toujours examiner attentivement le code généré et de le tester minutieusement.
202+
:::
203+
204+
### Dépannage
205+
206+
Si vous rencontrez des problèmes :
207+
208+
- Vérifiez que votre outil prend en charge le transport HTTP diffusable en continu.
209+
- Vérifiez que l'URL du serveur est correcte : `https://mcp.docs.astro.build/mcp`.
210+
- Assurez-vous que votre outil dispose bien d’un accès Internet.
211+
- Consultez la documentation d’intégration MCP de votre outil spécifique.
212+
213+
Si vous rencontrez encore des problèmes, ouvrez un ticket dans le [dépôt du serveur MCP d'Astro Docs](https://github.com/withastro/docs-mcp/issues).
214+
215+
216+
## Assistance IA sur Discord
217+
218+
La même technologie qui alimente le serveur MCP d'Astro est également disponible sous forme de chatbot sur le [Discord d'Astro](https://astro.build/chat) 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.
219+
220+
**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.
221+
222+
## Conseils pour le développement avec Astro basé sur l'IA
223+
224+
- **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](https://astro.build/themes/) existant ou utilisez `npm create astro@latest` avec une option de modèle.
225+
- **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`.
226+
- **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.
227+
- **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.

0 commit comments

Comments
 (0)