Configurer le MCP DAZZM dans VS Code
Updated on Published on
Résumé de l'article
Connectez VS Code à une application DAZZM via le serveur MCP. Générez une clé API dans Account, configurez la connexion à l'échelle du projet ou de l'utilisateur, puis laissez l'assistant explorer et modifier votre application : définitions, pages, workflows et données.
Introduction
Section intitulée « Introduction »Le serveur MCP (Model Context Protocol) de DAZZM permet de connecter l’assistant de VS Code directement à une application DAZZM. Une fois la connexion établie, l’assistant peut agir dans deux domaines :
- Modifier l’application en manipulant ses définitions (modèles, pages, workflows, scripts, etc.) ;
- Lire et modifier les données contenues dans l’application.
Ce guide couvre la connexion dans VS Code, selon deux portées possibles :
- Portée projet — le serveur n’est disponible que dans un seul espace de travail VS Code, et la configuration se trouve dans le dossier de ce projet ;
- Portée utilisateur — le serveur est disponible dans tous les projets VS Code de la machine, et la configuration se trouve dans le profil utilisateur.
Les étapes de préparation — générer la clé API, choisir l’environnement, conseils d’utilisation — sont identiques pour les deux ; seul l’emplacement où la configuration est stockée diffère.
N.B : Le serveur MCP a été conçu pour être branché à un environnement de développement, dans lequel la modification des définitions est permise. Voir la section Choisir le bon environnement avant de vous connecter à tout autre environnement.
N.B : Puisque les applications DAZZM sont low-code et que leur code source n’est jamais stocké dans un dépôt GitHub, il n’y a pas de configuration au niveau du dépôt pour ce connecteur — seules les portées projet (espace de travail) et utilisateur s’appliquent.
N.B : Ce guide couvre VS Code uniquement. Pour l’application autonome GitHub Copilot (bureau/mobile), qui utilise un écran de configuration différent, voir Configurer le MCP DAZZM dans Copilot.
Prérequis
Section intitulée « Prérequis »- Un accès à l’application Account de votre organisation DAZZM ;
- Une application DAZZM avec un environnement de développement ;
- VS Code installé, avec l’extension GitHub Copilot activée ;
- Node.js et npm installés (la connexion utilise
npx) — vérifiez avec :
node -vnpm -vSi nécessaire, installez Node.js depuis nodejs.org.
Étapes à suivre
Section intitulée « Étapes à suivre »1. Générer une clé API (Account)
Section intitulée « 1. Générer une clé API (Account) »- Ouvrez l’application Account ;
- Accédez à l’application que vous souhaitez connecter ;
- Accédez à un environnement de développement de cette application ;
- Créez une clé API. Vous pouvez la nommer, par exemple, « VS Code » ;
- Copiez la valeur de la clé.
2. Configurer la portée projet
Section intitulée « 2. Configurer la portée projet »Utilisez la portée projet lorsque vous voulez que le serveur MCP soit activé uniquement pour un projet ou un espace de travail — utile pour tester, ou lorsque vous voulez que la configuration voyage avec le projet et soit partagée avec les autres développeurs qui l’ouvrent.
- Ouvrez votre projet dans VS Code ;
- À la racine du projet, créez un dossier nommé
.vscodes’il n’existe pas déjà ; - À l’intérieur de
.vscode, créez un fichier nommémcp.json; - Ajoutez le contenu suivant :
{ "servers": { "dazzm-<nom-app>": { "command": "npx", "args": [ "-y", "mcp-remote", "https://<nom-app>-<nom-env>.apps.dazzm.com/api/prod/mcp", "--header", "api-key:<VOTRE_CLE_API>" ] } }}- Remplacez
<VOTRE_CLE_API>par la valeur de la clé copiée à l’étape 1 ; - Enregistrez le fichier ;
- Rechargez VS Code (ou redémarrez la session de l’assistant) ;
- Ouvrez le chat de l’assistant et confirmez que le serveur apparaît dans la liste d’outils/serveurs MCP.
Quelques précisions sur cet exemple :
dazzm-<nom-app>est le nom du serveur MCP tel que l’assistant le verra. Nous recommandons de le nommerdazzm-suivi du nom de votre application. C’est particulièrement utile si vous contrôlez plusieurs applications ;- L’URL suit le format
https://<nom-app>-<nom-env>.apps.dazzm.com/api/prod/mcp, où<nom-app>est le nom de votre application et<nom-env>le nom de l’environnement auquel vous vous connectez — le même segment d’URL que vous utilisez pour accéder à votre application ; - Le segment
proddans/api/prod/mcpest fixe : il désigne la version de la plateforme DAZZM, et non l’environnement de votre application. Ne le remplacez pas ; api-key:est suivi directement de la valeur de la clé, sans espace.
3. Configurer la portée utilisateur
Section intitulée « 3. Configurer la portée utilisateur »Utilisez la portée utilisateur lorsque vous voulez que le serveur MCP soit disponible dans tous les projets VS Code de la machine actuelle, sans répéter la configuration dans chacun.
- Ouvrez VS Code ;
- Appuyez sur
Cmd+Shift+P(Mac) ouCtrl+Shift+P(Windows) ; - Recherchez et sélectionnez MCP: Open User Configuration ;
- Cela ouvre le fichier de configuration au niveau utilisateur pour votre système :
- Mac :
~/Library/Application Support/Code/User/mcp.json(ouCode - Insiderspour la version Insiders) - Windows :
%APPDATA%\Code\User\mcp.json(ouCode - Insiderspour la version Insiders)
- Mac :
- Ajoutez le même contenu qu’à l’étape 2, puis enregistrez le fichier et rechargez VS Code.
N.B : La palette de commandes propose aussi MCP: Add Server, qui demande une commande de façon interactive. Lors de nos tests, cette méthode n’a pas produit de configuration fonctionnelle de manière fiable — utilisez plutôt MCP: Open User Configuration et modifiez le JSON directement.
4. Garder la clé API hors de votre configuration (optionnel mais recommandé)
Section intitulée « 4. Garder la clé API hors de votre configuration (optionnel mais recommandé) »Si vous ne voulez pas coder en dur la clé API dans un fichier de configuration — surtout pour les configurations de portée projet partagées avec d’autres développeurs — référencez plutôt une variable d’environnement :
{ "servers": { "dazzm-<nom-app>": { "command": "npx", "args": [ "-y", "mcp-remote", "https://<nom-app>-<nom-env>.apps.dazzm.com/api/prod/mcp", "--header", "api-key:${env:DAZZM_API_KEY}" ] } }}Définissez la variable avant de lancer VS Code :
Mac / Linux
export DAZZM_API_KEY=<VOTRE_CLE_API>Windows (PowerShell)
$env:DAZZM_API_KEY="<VOTRE_CLE_API>"Si vous utilisez la portée projet dans un dépôt partagé, ne committez que la version avec le placeholder de mcp.json, et donnez à chaque développeur les instructions pour définir sa propre variable DAZZM_API_KEY localement. Ne committez jamais une vraie clé API.
5. Vérifier la connexion
Section intitulée « 5. Vérifier la connexion »Au démarrage, l’assistant se connecte aux serveurs MCP configurés. Si l’un d’eux échoue, une erreur s’affiche. En l’absence d’erreur, le serveur MCP a probablement été chargé avec succès.
Pour le confirmer, ouvrez le chat de l’assistant et vérifiez la liste des outils/serveurs MCP actifs — votre serveur DAZZM devrait y apparaître.
Vous pouvez aussi tester l’accès directement depuis un terminal avant de vous fier à la configuration de VS Code :
npx -y mcp-remote https://<nom-app>-<nom-env>.apps.dazzm.com/api/prod/mcp --header "api-key:<VOTRE_CLE_API>"Si la commande démarre avec succès, le serveur MCP distant est accessible et l’en-tête d’authentification est valide.
Dépannage
Section intitulée « Dépannage »Si l’outil MCP n’apparaît pas :
- Vérifiez que Node.js et npm sont installés ;
- Confirmez que l’URL est correcte ;
- Confirmez que la clé API est valide ;
- Rechargez VS Code après avoir modifié la configuration ;
- Assurez-vous que le fichier de configuration se trouve au bon emplacement pour la portée choisie ;
- Vérifiez que le fichier est un JSON valide ;
- Testez la commande
npxdirectement dans un terminal.
Problèmes courants : une erreur de syntaxe JSON, une clé API manquante ou invalide, le mauvais chemin pour le fichier de configuration, un assistant non actualisé après un changement de configuration, ou un environnement qui n’accepte pas le format de requête utilisé.
Si vous connectez l’assistant à une application toute neuve, il a peu d’exemples sur lesquels se fier pour trouver les bonnes solutions. Ces deux astuces l’aident à en trouver :
Connecter une application de référence. Enregistrez une seconde connexion MCP, cette fois vers une de vos applications complètes et bien construites. Choisissez l’application de votre choix, créez-y aussi une clé API (étape 1), puis ajoutez-la à la configuration en nommant ce connecteur dazzm-examples. Le nom compte : c’est lui qui indique à l’assistant qu’il s’agit d’un registre d’exemples, et il l’utilisera intuitivement pour y puiser de bonnes pratiques DAZZM.
Pointer l’assistant vers la documentation. En début de conversation, vous pouvez simplement lui demander de visiter doc.dazzm.com pour y trouver plus d’exemples et de guides sur la plateforme.
Choisir le bon environnement
Section intitulée « Choisir le bon environnement »Le serveur MCP est capable d’agir sur n’importe quel environnement, mais tous les usages ne se valent pas :
- Cas nominal — environnement de développement. C’est l’usage pour lequel le serveur MCP a été conçu : l’assistant peut y manipuler les définitions et les données de test en toute liberté.
- Cas acceptable — environnement de production, en lecture seule. Il est possible de brancher le serveur MCP à un environnement de production si l’objectif est d’employer ses capacités de lecture de données pour faire de l’analyse.
- Cas fortement déconseillé — écrire des données hors d’un environnement de test.