TypeScriptの Nxプラグイン

完全なTypeScript Nx PluginをModel Context Protocol (MCP)サーバー統合で生成します。このジェネレーターは、AIアシスタントによる自動コード生成とプロジェクトスキャフォールディングのためにシームレスに使用できるカスタムジェネレーターを構築するための基盤を作成します。

使用方法

Nxプラグインの生成

TypeScript Nxプラグインは2つの方法で生成できます:

VSCode

1. インストール Nx Console VSCode Plugin まだインストールしていない場合
2. VSCodeでNxコンソールを開く
3. クリック Generate (UI) "Common Nx Commands"セクションで
4. 検索 @aws/nx-plugin - ts#nx-plugin
5. 必須パラメータを入力
6. クリック 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

変更されるファイルを確認するためにドライランを実行することもできます

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

オプション

パラメータ	型	デフォルト	説明
name 必須	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.

ジェネレーターの出力

ジェネレーターは以下のプロジェクト構造を作成します:

• Directoryyour-plugin/

  • Directorysrc/

    • index.ts プラグインの空のエントリーポイント
    • Directorymcp-server/

      • index.ts MCPサーバーエントリーポイント
      • server.ts メインMCPサーバー設定
      • Directorytools/

        • create-workspace-command.ts ワークスペース作成ガイド用ツール
        • general-guidance.ts Nxとプラグインの一般ガイダンス用ツール
        • list-generators.ts 利用可能なジェネレーター一覧表示ツール
        • generator-guide.ts 詳細なジェネレーター情報提供ツール
      • utils.ts MCPサーバー用ユーティリティ関数
  • generators.json Nxジェネレーター設定（初期状態は空）
  • package.json MCPサーバーバイナリを含むプラグインパッケージ設定
  • tsconfig.json TypeScript設定（Nx互換性のためCommonJS）
  • project.json ビルドとパッケージターゲットを含むNxプロジェクト設定

Nxプラグインの操作

ジェネレーターの追加

プラグインプロジェクトを作成後、ts#nx-generatorジェネレーターを使用して新しいジェネレーターを追加できます:

VSCode

1. インストール Nx Console VSCode Plugin まだインストールしていない場合
2. VSCodeでNxコンソールを開く
3. クリック Generate (UI) "Common Nx Commands"セクションで
4. 検索 @aws/nx-plugin - ts#nx-generator
5. 必須パラメータを入力
   • pluginProject: your-plugin
6. クリック 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

変更されるファイルを確認するためにドライランを実行することもできます

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

これによりプラグインに新しいジェネレーターが追加されます。

Tip

ジェネレーター実装の詳細についてはts#nx-generatorガイドを参照してください。

MCPサーバーのgenerator-guideツールで使用されるため、ジェネレーターの詳細なREADME.mdを作成するようにしてください。

プロジェクトターゲット

生成されたプラグインには重要なターゲットが含まれます:

ビルドターゲット

TypeScriptコードをコンパイルしプラグインを使用可能な状態にします:

pnpm

pnpm nx build your-plugin

yarn

yarn nx build your-plugin

npm

npx nx build your-plugin

bun

bunx nx build your-plugin

パッケージターゲット

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

パッケージターゲットには以下が含まれます:

• コンパイル済みJavaScriptファイル
• TypeScript宣言ファイル
• ジェネレーターとエグゼキューター設定ファイル
• ドキュメントとライセンスファイル

MCPサーバー統合

プラグインはts#mcp-serverジェネレーターを使用してMCPサーバーを設定します。

ツール

プラグインにはAIアシスタント向けの完全なMCPサーバーが含まれます:

• general-guidance: Nxとプラグイン操作のベストプラクティスを取得
• create-workspace-command: プラグイン使用可能な新規ワークスペース作成方法を学習
• list-generators: プラグイン内の利用可能なジェネレーター一覧を表示
• generator-guide: スキーマや使用方法を含む特定ジェネレーターの詳細情報を取得

AIアシスタントとの連携設定

設定ファイル

MCPをサポートするほとんどのAIアシスタントは類似した設定アプローチを採用しています。MCPサーバーの詳細を記載した設定ファイルを作成または更新する必要があります：

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

Caution

サーバー接続時にENOENT npxのようなエラーが発生する場合、ターミナルでwhich npxを実行して取得できるnpxの絶対パスを指定する必要があるかもしれません。

ホットリロード

MCPサーバーを開発中に--watchフラグを設定すると、AIアシスタントが常に最新のツール/リソースを認識するようになります：

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

Note

新しいツールやリソースを追加した場合、AIアシスタントでMCPサーバーをリフレッシュする必要があるかもしれません。

アシスタント固有の設定

特定のAIアシスタントでMCPを設定するには、各アシスタントのドキュメントを参照してください：

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

Tip

Amazon Q Developerなどの一部のAIアシスタントでは、ワークスペースレベルのMCPサーバー設定を指定可能です。これは特定のプロジェクトに関連するMCPサーバーを定義する際に特に有用です。

MCPサーバーのカスタマイズ

server.tsを修正してプラグイン領域固有の追加ツールやリソースを導入することで、MCPサーバーを拡張できます。

MCPサーバー作成の詳細についてはts#mcp-serverガイドを参照してください。

プラグインの公開

公開準備

1. パッケージ情報更新: プラグインのpackage.jsonに適切な名前、バージョン、説明、リポジトリ情報を記述

2. パッケージビルド:

   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. ローカルテスト: 他のワークスペースにインストールしてテスト可能:

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

NPMへの公開

準備が整ったら:

cd dist/your-plugin/package
npm publish

公開プラグインの使用

公開後、他のユーザーは以下でプラグインをインストールして使用できます:

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

ジェネレーターの使用:

VSCode

1. インストール Nx Console VSCode Plugin まだインストールしていない場合
2. VSCodeでNxコンソールを開く
3. クリック Generate (UI) "Common Nx Commands"セクションで
4. 検索 your-plugin-name - your-generator-name
5. 必須パラメータを入力
6. クリック 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

変更されるファイルを確認するためにドライランを実行することもできます

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

公開プラグインを使ったAIアシスタント設定

公開プラグインのMCPサーバーは以下のように設定できます:

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