Build with AI

Angular CLI MCPサーバーセットアップ

Angular CLIには、開発環境のAIアシスタントがAngular CLIと対話できるようにする実験的なModel Context Protocol (MCP) サーバーが含まれています。CLIによるコード生成、パッケージの追加などに対応しています。

開始するには、ターミナルで次のコマンドを実行します。

ng mcp

このコマンドを使用して、環境のベースとなるJSON設定を作成します。ファイル構造はIDEによって異なることに注意してください。以下のセクションでは、いくつかの人気のあるエディタの設定を提供します。

VS Code

プロジェクトのルートに.vscode/mcp.jsonという名前のファイルを作成し、以下の設定を追加します。serversプロパティの使用に注意してください。

{  "servers": {    "angular-cli": {      "command": "npx",      "args": ["@angular/cli", "mcp"]    }  }}

JetBrains IDEs

JetBrains IDEs(IntelliJ IDEAやWebStormなど)では、MCP Serverプラグインをインストールした後、Settings | Tools | AI Assistant | Model Context Protocol (MCP)に移動します。新しいサーバーを追加し、As JSONを選択します。サーバーリストにトップレベルプロパティを使用しない以下の設定を貼り付けます。

{  "name": "Angular CLI",  "command": "npx",  "args": [    "@angular/cli",    "mcp"  ]}

Firebase Studio

プロジェクトのルートに.idx/mcp.jsonという名前のファイルを作成し、以下の設定を追加します。

{  "mcpServers": {    "angular-cli": {      "command": "npx",      "args": ["@angular/cli", "mcp"]    }  }}

その他のIDE

これらのIDEの場合、設定ファイルを作成し、以下のスニペットを追加します。mcpServersプロパティの使用に注意してください。

  • Cursor: プロジェクトのルートに.cursor/mcp.jsonという名前のファイルを作成します。~/.cursor/mcp.jsonでグローバルに設定できます。
  • その他のIDE: MCP設定ファイルの適切な場所(多くの場合mcp.json)について、IDEのドキュメントを確認してください。
{  "mcpServers": {    "angular-cli": {      "command": "npx",      "args": ["@angular/cli", "mcp"]    }  }}