Angular MCPサーバーの使い方｜v22の9ツール実測とAI設定

Angular CLI には、AIエージェント（Claude Code・Cursor・GitHub Copilot など）から Angular のプロジェクトを扱えるようにする MCP サーバーが入っています。起動するコマンドは ng mcp です。 AI の設定ファイルに次の数行を書くと、AI がプロジェクトの一覧を読み、ビルドやテストを実行し、Angular 公式のベストプラクティスに沿ってコードを書けるようになります。

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

この記事では、Angular CLI 22.2.2 の MCP サーバーに、実際に MCP の手順（JSON-RPC）でつないで、ツールを呼び出した結果を載せています。

確認環境：Angular CLI 22.2.2、Node.js 24.21.0、Linux。ng new で作ったプロジェクト（zoneless）で確かめました（確認日 2026年10月12日）。

MCPサーバーとは：AIに「Angular の道具」を渡す仕組み

MCP（Model Context Protocol）は、AI が外部の道具（ツール）を呼び出すための共通の約束事です。 Angular CLI の MCP サーバーは、AI に次のような道具を渡します。

9つのツール一覧（v22.2.2 で取得）

MCP の tools/list で取得した、既定で使えるツールです。

「変更する？」「ネットが要る？」の列は、次の --read-only・--local-only で消えたツールから作りました。

--read-only と --local-only で、使えるツールが変わる

AI にプロジェクトを触らせたくないときは --read-only、ネットにつながない環境では --local-only を付けます。 それぞれ付けて tools/list を取得しました。

設定ファイルでは、args の最後に足します。

"args": ["-y", "@angular/cli", "mcp", "--read-only"]

レビューだけを AI に頼むなら --read-only から始めると、AI がビルドや開発サーバーを勝手に動かすことがありません。

AIツールごとの設定ファイル

VS Code だけ、キーが mcpServers ではなく servers です。 ここを間違えると、サーバーが読み込まれません。

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

なお、ターミナルで ng mcp をそのまま実行すると、サーバーは起動せず、次の案内が表示されました。MCP サーバーは、AI ツールから起動されて使うものです。

To start using the Angular CLI MCP Server, add this configuration to your host:

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

Exact configuration may differ depending on the host.

呼び出してみた結果① list_projects

AI が最初に呼ぶツールです。 angular.json を読み、プロジェクトの名前・種類・ターゲットを返しました（見やすく整えています）。

{
  "workspaces": [{
    "path": "/srv/s4/ng/shop/angular.json",
    "projects": [{
      "name": "shop",
      "type": "application",
      "builder": "@angular/build:application",
      "sourceRoot": "src",
      "styleLanguage": "css",
      "targets": ["build", "serve", "test"]
    }],
    "frameworkVersion": "22"
  }]
}

frameworkVersion が 22 と返るので、AI は v22 の書き方で書けばよいと分かります。

呼び出してみた結果② run_target でビルド

run_target に {"target": "build", "project": "shop"} を渡すと、ng build と同じビルドが走り、ログが返りました。

"status": "success"
Initial chunk files | Names         |  Raw size | Estimated transfer size
main-L2U4BII2.js    | main          | 216.81 kB |                59.59 kB
styles-5INURTSO.css | styles        |   0 bytes |                 0 bytes
                    | Initial total | 216.81 kB |                59.59 kB
Application bundle generation complete. [2.343 seconds]
Output location: /srv/s4/ng/shop/dist/shop

status が success か、ログにエラーが出ているかを AI が読み、失敗していれば、ログをもとに直してもう一度ビルドできます。 人が「ビルドが通るか試して」と頼む手間が減ります。

呼び出してみた結果③ get_best_practices

v22 のベストプラクティスには、v22 で既定が変わった点が書かれていました。 返った内容の一部です。

- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
- Do NOT set `changeDetection: ChangeDetectionStrategy.OnPush` explicitly. `OnPush` is the default in Angular v22+.
- Use signals for state management
- Do NOT use the `@HostBinding` and `@HostListener` decorators.

「OnPush は v22 から既定なので、明示して書かない」という指示が入っています。AI が少し前の版の書き方（standalone: true や OnPush の明示）を書きがちな点を、このツールが直してくれます。v22 の変更点そのものは、関連記事「Angular 22新機能まとめ｜22.0〜22.2」で扱っています。

search_documentation はネットが要る

search_documentation は angular.dev を検索するツールで、外部につながらない確認環境では結果が0件でした。 社内ネットワークなどで外に出られない場合は、--local-only を付けてこのツールを外しておくと、AI が空振りの検索を繰り返しません。

ng new --ai-config で、最初から AI 用のファイルを作る

ng new には、AI ツール用のファイルを作る --ai-config があります。 選べる値は次の6つでした。

ng new aiapp --ai-config=claude-code

claude-code を選ぶと、プロジェクト直下に CLAUDE.md と .mcp.json ができました。 CLAUDE.md の中身は get_best_practices が返すものと同じベストプラクティスで、.mcp.json は冒頭の設定と同じ内容です。--ai-config=claude のように短く書くと、無効な値として止まりました。

よくある質問

Q. Angular の版がいくつから使えますか。 A. この記事は Angular CLI 22.2.2 で確かめています。ツールの数や名前は版によって変わることがあるので、使う版で tools/list の結果か、angular.dev の MCP のページを確かめるのが確実です。

Q. ng mcp を実行しても何も始まりません。 A. ターミナルから直接実行すると、設定の案内が表示されるだけです。AI ツールの設定ファイルに書き、AI ツールから起動させます。

Q. AI に勝手にビルドさせたくありません。 A. --read-only を付けると、run_target・devserver_start・devserver_stop が消えます。読むだけのツール6つになります。

Q. VS Code で読み込まれません。 A. .vscode/mcp.json の一番上のキーを servers にしているか確かめます。Cursor や Claude Code と同じ mcpServers では読み込まれません。

Q. 社内ネットワークで使えますか。 A. search_documentation 以外の8つは、ネットにつながらなくても動きます。--local-only を付けると、その8つだけになります。ただし npx -y @angular/cli で CLI を取得する形の設定は、npm のパッケージを取得できる環境が要ります。

Q. 既存のプロジェクトにも後から足せますか。 A. 足せます。--ai-config は新しく作るときの選択肢ですが、MCP の設定は冒頭の JSON を AI ツールの設定ファイルに書けば、既存のプロジェクトでも使えます。

まとめ

• ng mcp は、AI エージェントに Angular の道具を渡す MCP サーバー
• v22.2.2 の既定のツールは 9つ。--read-only で 6つ、--local-only で 8つ
• list_projects で構成を読み、run_target で AI がビルドして結果を読む
• get_best_practices には 「OnPush は v22 から既定」 などの指示が入っている
• VS Code だけキーが servers。ng new --ai-config=claude-code なら CLAUDE.md と .mcp.json ができる

参考・出典

確認日はいずれも 2026年10月12日です。

• Angular 公式ドキュメント「MCP」（angular.dev/ai/mcp）：https://angular.dev/ai/mcp
• Angular CLI 22.2.2（ng mcp・ng new --help の表示、MCP の tools/list・tools/call の結果）

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。