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 サーバーをエクスポート
      • server.ts メインMCPサーバー設定
      • stdio.ts STDIOトランスポートを使用するMCPサーバーのエントリーポイント
      • http.ts ストリーミング可能なHTTPトランスポートを使用する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 Nx互換のTypeScript設定（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サーバーを設定します。

ツール

プラグインに含まれるMCPサーバーはAIアシスタントに以下のツールを提供します：

• 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/stdio.ts"]
    }
  }
}

Caution

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

ホットリロード

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

{
  "mcpServers": {
    "your-mcp-server": {
      "command": "npx",
      "args": ["tsx", "--watch", "/path/to/your-mcp-server/stdio.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"]
    }
  }
}