Plugin TypeScript Nx

Genera un completo Nx Plugin TypeScript con un server integrato Model Context Protocol (MCP). Questo generatore crea una base per sviluppare generatori personalizzati che possono essere utilizzati in modo fluido da assistenti AI per la generazione automatica di codice e l’impalcatura di progetti.

Utilizzo

Generare un Nx Plugin

Puoi generare un Nx Plugin TypeScript in due modi:

VSCode

1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
2. Apri la console Nx in VSCode
3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
4. Cerca @aws/nx-plugin - ts#nx-plugin
5. Compila i parametri richiesti
6. Clicca su 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

Puoi anche eseguire una prova per vedere quali file verrebbero modificati

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

Opzioni

Parametro	Tipo	Predefinito	Descrizione
name Obbligatorio	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.

Output del Generatore

Il generatore creerà la seguente struttura del progetto:

• Directoryyour-plugin/

  • Directorysrc/

    • index.ts Punto d’ingresso vuoto per il tuo plugin
    • Directorymcp-server/

      • index.ts Esporta il tuo server
      • server.ts Configurazione principale del server MCP
      • stdio.ts Punto d’ingresso per il server MCP con trasporto STDIO
      • http.ts Punto d’ingresso per il server MCP con trasporto HTTP streamable
      • Directorytools/

        • create-workspace-command.ts Strumento per la creazione guidata di workspace
        • general-guidance.ts Strumento per linee guida generali su Nx e plugin
        • list-generators.ts Strumento per elencare i generatori disponibili
        • generator-guide.ts Strumento per informazioni dettagliate sui generatori
      • utils.ts Funzioni di utilità per il server MCP
  • generators.json Configurazione del generatore Nx (inizialmente vuota)
  • package.json Configurazione del package del plugin con binary del server MCP
  • tsconfig.json Configurazione TypeScript (CommonJS per compatibilità Nx)
  • project.json Configurazione del progetto Nx con target di build e package

Lavorare con il Tuo Nx Plugin

Aggiungere Generatori

Dopo aver creato il progetto del plugin, puoi aggiungere generatori usando ts#nx-generator:

VSCode

1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
2. Apri la console Nx in VSCode
3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
4. Cerca @aws/nx-plugin - ts#nx-generator
5. Compila i parametri richiesti
   • pluginProject: your-plugin
6. Clicca su 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

Puoi anche eseguire una prova per vedere quali file verrebbero modificati

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

Questo aggiungerà un nuovo generatore al tuo plugin.

Consiglio

Leggi la guida ts#nx-generator per dettagli sull’implementazione dei generatori.

Assicurati di scrivere un dettagliato README.md per il tuo generatore, poiché viene utilizzato dallo strumento generator-guide del server MCP.

Target del Progetto

Il plugin generato include diversi target importanti:

Target Build

Compila il codice TypeScript e prepara il plugin per l’uso:

pnpm

pnpm nx build your-plugin

yarn

yarn nx build your-plugin

npm

npx nx build your-plugin

bun

bunx nx build your-plugin

Target Package

Crea un package distribuibile pronto per la pubblicazione su 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

Il target package include tutte le risorse necessarie:

• File JavaScript compilati
• File di dichiarazione TypeScript
• File di configurazione per generatori ed executor
• Documentazione e file di licenza

Integrazione Server MCP

Il plugin configura un server MCP usando il generatore ts#mcp-server.

Strumenti

Il plugin include un server MCP completo che fornisce ai assistenti AI i seguenti strumenti:

• general-guidance: Ottieni best practice per lavorare con Nx e il tuo plugin
• create-workspace-command: Impara a creare nuovi workspace che possono utilizzare il tuo plugin
• list-generators: Elenca tutti i generatori disponibili nel tuo plugin
• generator-guide: Ottieni informazioni dettagliate su generatori specifici inclusi schemi e utilizzo

Configurazione con Assistanti AI

File di configurazione

La maggior parte degli assistenti AI che supportano MCP utilizza un approccio simile per la configurazione. È necessario creare o aggiornare un file di configurazione con i dettagli del server MCP:

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

Se ricevi un errore come ENOENT npx durante la connessione al server, potrebbe essere necessario specificare il percorso completo di npx, ottenibile eseguendo which npx nel terminale.

Ricaricamento a caldo (Hot Reload)

Durante lo sviluppo del server MCP, puoi configurare il flag --watch per far sì che l’assistente AI rilevi sempre le versioni più recenti di strumenti/risorse:

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

Se aggiungi nuovi strumenti o risorse, potrebbe essere necessario aggiornare il server MCP nell’assistente AI.

Configurazione specifica per l’assistente

Consulta la seguente documentazione per configurare MCP con assistenti AI specifici:

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

Alcuni assistenti AI, come Amazon Q Developer, permettono di specificare configurazioni MCP a livello di workspace, particolarmente utili per definire i server MCP rilevanti per un progetto specifico.

Personalizzazione del Server MCP

Puoi estendere il server MCP modificando server.ts per aggiungere strumenti o risorse specifiche per il dominio del tuo plugin.

Per maggiori dettagli sulla scrittura di server MCP, consulta la guida ts#mcp-server.

Pubblicazione del Plugin

Preparazione alla Pubblicazione

1. Aggiorna Informazioni del Package: Modifica il package.json del tuo plugin con nome, versione, descrizione e informazioni del repository corrette.

2. Costruisci il 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 Locale: Puoi testare il plugin localmente installandolo in un altro workspace:

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

Pubblicazione su NPM

Quando il tuo plugin è pronto:

cd dist/your-plugin/package
npm publish

Utilizzo dei Plugin Pubblicati

Dopo la pubblicazione, altri possono installare e usare il tuo 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

Poi utilizza i tuoi generatori:

VSCode

1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
2. Apri la console Nx in VSCode
3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
4. Cerca your-plugin-name - your-generator-name
5. Compila i parametri richiesti
6. Clicca su 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

Puoi anche eseguire una prova per vedere quali file verrebbero modificati

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

Configura Assistanti AI con il Tuo Plugin Pubblicato

Il server MCP del tuo plugin pubblicato può essere configurato così:

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