TypeScript Nx Plugin

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

Utilisation

Générer un Nx Plugin

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

Exécuter ce générateur@aws/nx-plugin:ts#nx-plugin

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

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

Composez votre commande4

nameRequis

directory

subDirectory

preferInstallDependencies

true

--dry-runVous pouvez également effectuer une simulation pour voir quels fichiers seraient modifiés

Options

Options du générateur4 options

nameRequisstring

Nom du projet TypeScript

directorystringPar défaut: packages

Répertoire parent où la bibliothèque est placée.

subDirectorystring

Le sous-répertoire dans lequel la bibliothèque est placée. Par défaut, il s'agit du nom de la bibliothèque.

preferInstallDependenciesbooleanPar défaut: true

Indique s'il faut privilégier l'installation des dépendances après l'exécution du générateur. Définir sur false pour différer l'installation lors de l'exécution de plusieurs générateurs en lot (une installation s'exécute quand même si nécessaire pour que les générateurs suivants puissent calculer le graphe de projet Nx) ; installer une seule fois à la fin.

Sortie du générateur

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

• Répertoireyour-plugin/

  • Répertoiresrc/

    • index.ts Entry point for your plugin
    • Répertoiremcp-server/

      • index.ts Exports your server
      • server.ts Main MCP server configuration
      • stdio.ts Entry point for your MCP server with STDIO transport
      • http.ts Entry point for your MCP server with Streamable HTTP transport
      • schema.ts Shared schemas for the MCP server’s tools
      • utils.ts Utility functions for the MCP server
      • Répertoireresources/

        • GENERAL_GUIDANCE.md Guidance served by the general-guidance tool
      • Répertoiretools/

        • create-workspace-command.ts Tool for workspace creation guidance
        • general-guidance.ts Tool for general Nx and plugin guidance
        • list-generators.ts Tool to list available generators
        • generator-guide.ts Tool for detailed generator information
  • generators.json Nx generator configuration (initially empty)
  • package.json Plugin package configuration
  • project.json Nx project configuration with build and package targets
  • tsconfig.json TypeScript configuration, referencing the two below
  • tsconfig.lib.json TypeScript configuration for your plugin’s source
  • tsconfig.spec.json TypeScript configuration for your plugin’s tests
  • vitest.config.mts Vitest configuration for your plugin’s tests
  • README.md Documentation for your plugin, served by the generator-guide tool
  • LICENSE Written by the license generator’s sync, when configured

Travailler avec votre Nx Plugin

Ajouter des générateurs

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

Exécuter ce générateur@aws/nx-plugin:ts#nx-generator

CLI

pnpm

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

yarn

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

npm

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

bun

$ bunx nx g @aws/nx-plugin: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
6. Cliquez sur Generate

Composez votre commande5

projectRequis

nameRequis

description

directory

preferInstallDependencies

true

--dry-runVous pouvez également effectuer une simulation pour voir quels fichiers seraient modifiés

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

Documentation du générateur

Lisez le guide ts#nx-generator pour plus de détails sur la façon d’implémenter des générateurs.

Assurez-vous d’écrire un README.md détaillé pour votre générateur, car celui-ci 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 pour 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 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

La cible package inclut tous les actifs nécessaires :

• Fichiers JavaScript compilés
• Fichiers de déclaration TypeScript
• Les manifestes generators.json, executors.json et migrations.json que Nx lit depuis un plugin publié
• Fichiers de documentation et 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 travailler avec Nx et votre plugin
• create-workspace-command : Apprenez comment créer de nouveaux espaces de travail pouvant utiliser 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, y compris les schémas et l’utilisation

Configuration avec les assistants IA

Fichiers de configuration

La plupart des assistants IA qui prennent en charge 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/stdio.ts"]
    }
  }
}

Résolution de chemin

Si vous recevez une erreur telle que 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

Lors du développement de votre serveur MCP, vous pouvez souhaiter configurer le flag --watch afin que l’assistant IA voie toujours les dernières versions des outils/ressources :

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

Actualisation des outils

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

Configuration spécifique à l’assistant

Veuillez vous référer à la documentation suivante pour configurer MCP avec des assistants IA spécifiques :

• Kiro
• Kiro CLI
• Claude Code
• Cursor
• Codex
• Cline
• Roo Code

Configuration de l’espace de travail

Certains assistants IA, tels que Kiro, vous 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.

Personnaliser le serveur MCP

Vous pouvez étendre le serveur MCP en modifiant server.ts pour ajouter des outils ou des ressources supplémentaires spécifiques au domaine de votre plugin.

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

Publier votre plugin

Préparation pour la publication

1. Mettre à jour les informations du package : Modifiez le package.json de votre plugin avec un nom, une version, une description et des informations de dépôt appropriés. Supprimez également "private": true.

2. Construire le 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

   Le package se trouve dans dist/<your-plugin's project root>/package — pour un plugin généré avec --name=nx-plugin --directory=tools, c’est dist/tools/nx-plugin/package.

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

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

Publication sur NPM

Une fois que votre plugin est prêt :

cd dist/tools/nx-plugin/package
npm publish

Utiliser les plugins publiés

Après publication, d’autres 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 add your-plugin-name

Puis utilisez vos générateurs :

Exécuter ce générateuryour-plugin-name:your-generator-name

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

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

Configurer les assistants IA avec votre plugin publié

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

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