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 :

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

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

Options

Paramètre	Type	Par défaut	Description
name Requis	string	-	Nom du projet TypeScript
directory	string	packages	Répertoire parent où la bibliothèque est placée.
subDirectory	string	-	Le sous-répertoire dans lequel la bibliothèque est placée. Par défaut, il s'agit du nom de la bibliothèque.
preferInstallDependencies	boolean	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 Empty 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
      • 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
      • utils.ts Utility functions for the MCP server
  • generators.json Nx generator configuration (initially empty)
  • package.json Plugin package configuration
  • tsconfig.json TypeScript configuration (CommonJS for Nx compatibility)
  • project.json Nx project configuration with build and package targets

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 :

CLI

pnpm

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

yarn

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

npm

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

bun

bunx nx g @aws/nx-plugin:ts#nx-generator --project=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 --project=your-plugin --dry-run

yarn

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

npm

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

bun

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

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
   • project: your-plugin
6. Cliquez sur Generate

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
• Fichiers de configuration des générateurs et exécuteurs
• 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.

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

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/your-plugin/package

Publication sur NPM

Une fois que votre plugin est prêt :

cd dist/your-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 :

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

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"]
    }
  }
}