Plugin TypeScript Nx

Générez un plugin Nx TypeScript complet avec un serveur Model Context Protocol (MCP) intégré. Ce générateur crée une base pour développer des générateurs personnalisés qui peuvent être utilisés de manière transparente par des assistants IA pour la génération automatisée de code et l’échafaudage de projets.

Utilisation

Générer un plugin Nx

Vous pouvez générer un plugin Nx TypeScript de deux manières :

VSCode

1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
2. Ouvrez la console Nx dans VSCode
3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
4. Recherchez @aws/nx-plugin - ts#nx-plugin
5. Remplissez les paramètres requis
6. Cliquez sur Generate

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-plugin

yarn

yarn nx g @aws/nx-plugin:ts#nx-plugin

npm

npx nx g @aws/nx-plugin:ts#nx-plugin

bun

bunx nx g @aws/nx-plugin:ts#nx-plugin

Vous pouvez également effectuer une simulation pour voir quels fichiers seraient modifiés

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-plugin --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#nx-plugin --dry-run

npm

npx nx g @aws/nx-plugin:ts#nx-plugin --dry-run

bun

bunx nx g @aws/nx-plugin:ts#nx-plugin --dry-run

Options

Paramètre	Type	Par défaut	Description
name Requis	string	-	TypeScript project name
directory	string	packages	Parent directory where the library is placed.
subDirectory	string	-	The sub directory the lib is placed in. By default this is the library name.

Résultat du générateur

Le générateur créera la structure de projet suivante :

• Répertoireyour-plugin/

  • Répertoiresrc/

    • index.ts Point d’entrée vide pour votre plugin
    • Répertoiremcp-server/

      • index.ts Point d’entrée du serveur MCP
      • server.ts Configuration principale du serveur MCP
      • Répertoiretools/

        • create-workspace-command.ts Outil de guidage pour la création d’espace de travail
        • general-guidance.ts Outil de conseils généraux sur Nx et le plugin
        • list-generators.ts Outil pour lister les générateurs disponibles
        • generator-guide.ts Outil d’information détaillée sur les générateurs
      • utils.ts Fonctions utilitaires pour le serveur MCP
  • generators.json Configuration des générateurs Nx (vide initialement)
  • package.json Configuration du package du plugin avec le binaire du serveur MCP
  • tsconfig.json Configuration TypeScript (CommonJS pour compatibilité Nx)
  • project.json Configuration du projet Nx avec les cibles de build et de packaging

Utilisation de votre plugin Nx

Ajout de générateurs

Une fois votre projet de plugin créé, vous pouvez ajouter des générateurs en utilisant le générateur ts#nx-generator :

VSCode

1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
2. Ouvrez la console Nx dans VSCode
3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
4. Recherchez @aws/nx-plugin - ts#nx-generator
5. Remplissez les paramètres requis
   • pluginProject: your-plugin
6. Cliquez sur Generate

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin

yarn

yarn nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin

npm

npx nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin

bun

bunx nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin

Vous pouvez également effectuer une simulation pour voir quels fichiers seraient modifiés

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin --dry-run

npm

npx nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin --dry-run

bun

bunx nx g @aws/nx-plugin:ts#nx-generator --pluginProject=your-plugin --dry-run

Ceci ajoutera un nouveau générateur à votre plugin.

Astuce

Consultez le guide ts#nx-generator pour des détails sur l’implémentation des générateurs.

Assurez-vous de rédiger un README.md détaillé pour votre générateur, car il est utilisé par l’outil generator-guide du serveur MCP.

Cibles du projet

Le plugin généré inclut plusieurs cibles importantes :

Cible Build

Compile votre code TypeScript et prépare le plugin à l’utilisation :

pnpm

pnpm nx build your-plugin

yarn

yarn nx build your-plugin

npm

npx nx build your-plugin

bun

bunx nx build your-plugin

Cible Package

Crée un package distribuable prêt pour la publication sur NPM :

pnpm

pnpm nx package your-plugin

yarn

yarn nx package your-plugin

npm

npx nx package your-plugin

bun

bunx nx package your-plugin

Le package inclut toutes les ressources nécessaires :

• Fichiers JavaScript compilés
• Fichiers de déclaration TypeScript
• Fichiers de configuration des générateurs et exécuteurs
• Documentation et fichiers de licence

Intégration du serveur MCP

Le plugin configure un serveur MCP en utilisant le générateur ts#mcp-server.

Outils

Le plugin inclut un serveur MCP complet qui fournit aux assistants IA les outils suivants :

• general-guidance : Obtenez les meilleures pratiques pour utiliser Nx et votre plugin
• create-workspace-command : Apprenez à créer de nouveaux espaces de travail compatibles avec votre plugin
• list-generators : Listez tous les générateurs disponibles dans votre plugin
• generator-guide : Obtenez des informations détaillées sur des générateurs spécifiques (schémas et utilisation)

Configuration avec les assistants IA

Fichiers de configuration

La plupart des assistants IA compatibles avec MCP utilisent une approche de configuration similaire. Vous devrez créer ou mettre à jour un fichier de configuration avec les détails de votre serveur MCP :

{
  "mcpServers": {
    "your-mcp-server": {
      "command": "npx",
      "args": ["tsx", "/path/to/your-mcp-server/index.ts"]
    }
  }
}

Attention

Si vous obtenez une erreur comme ENOENT npx lors de la connexion à votre serveur, vous devrez peut-être spécifier le chemin complet vers npx, que vous pouvez obtenir en exécutant which npx dans votre terminal.

Rechargement à chaud

Pendant le développement de votre serveur MCP, vous pouvez configurer le flag --watch pour que l’assistant IA voit toujours les dernières versions des outils/ressources :

{
  "mcpServers": {
    "your-mcp-server": {
      "command": "npx",
      "args": ["tsx", "--watch", "/path/to/your-mcp-server/index.ts"]
    }
  }
}

Note

Si vous ajoutez de nouveaux outils ou ressources, vous devrez peut-être rafraîchir votre serveur MCP dans l’assistant IA.

Configuration spécifique à l’assistant

Consultez la documentation suivante pour configurer MCP avec des assistants IA spécifiques :

• Amazon Q Developer
• Cline
• Cursor
• Claude Code
• Roo Code

Astuce

Certains assistants IA comme Amazon Q Developer permettent de spécifier une configuration de serveur MCP au niveau de l’espace de travail, ce qui est particulièrement utile pour définir les serveurs MCP pertinents pour un projet particulier.

Personnalisation du serveur MCP

Vous pouvez étendre le serveur MCP en modifiant server.ts pour ajouter des outils ou ressources spécifiques à votre domaine.

Pour plus de détails sur l’écriture de serveurs MCP, consultez le guide ts#mcp-server.

Publication de votre plugin

Préparation à la publication

1. Mettez à jour les informations du package : Modifiez le package.json de votre plugin avec le nom, la version, la description et les informations du dépôt.

2. Build du package :

   pnpm

   pnpm nx package your-plugin

   yarn

   yarn nx package your-plugin

   npm

   npx nx package your-plugin

   bun

   bunx nx package your-plugin

3. Test local : Vous pouvez tester votre plugin localement en l’installant dans un autre espace de travail :

   npm install /path/to/your/workspace/dist/your-plugin/package

Publication sur NPM

Une fois votre plugin prêt :

cd dist/your-plugin/package
npm publish

Utilisation des plugins publiés

Après publication, les utilisateurs peuvent installer et utiliser votre plugin :

pnpm

pnpm add -w your-plugin-name

yarn

yarn add your-plugin-name

npm

npm install --legacy-peer-deps your-plugin-name

bun

bun install your-plugin-name

Puis utilisez vos générateurs :

VSCode

1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
2. Ouvrez la console Nx dans VSCode
3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
4. Recherchez your-plugin-name - your-generator-name
5. Remplissez les paramètres requis
6. Cliquez sur Generate

CLI

pnpm

pnpm nx g your-plugin-name:your-generator-name

yarn

yarn nx g your-plugin-name:your-generator-name

npm

npx nx g your-plugin-name:your-generator-name

bun

bunx nx g your-plugin-name:your-generator-name

Vous pouvez également effectuer une simulation pour voir quels fichiers seraient modifiés

pnpm

pnpm nx g your-plugin-name:your-generator-name --dry-run

yarn

yarn nx g your-plugin-name:your-generator-name --dry-run

npm

npx nx g your-plugin-name:your-generator-name --dry-run

bun

bunx nx g your-plugin-name:your-generator-name --dry-run

Configuration des assistants IA avec votre plugin publié

Le serveur MCP de votre plugin publié peut être configuré ainsi :

{
  "mcpServers": {
    "aws-nx-mcp": {
      "command": "npx",
      "args": ["-y", "-p", "your-plugin-name", "your-plugin-name-mcp-server"]
    }
  }
}