企业官网建设流程全解析

如何把 Angular CLI 的 MCP Server 接入 Cursor、VS Code 或 Antigravity 等 AI 助手？

【免费下载链接】angularDeliver web apps with confidence 🚀项目地址: https://gitcode.com/GitHub_Trending/an/angular

Angular CLI 内置了一个实验性的 Model Context Protocol（MCP）Server，可以让 Cursor、Antigravity、JetBrains AI 等 AI 助手直接调用 Angular CLI 的能力：代码生成、工作区分析、启动/停止开发服务器、执行 build 与 test 等。接入方式本身很轻——你只需要在自己的 AI 宿主环境（IDE 或 CLI）里加一个配置文件，让它以npx @angular/cli mcp启动这个 Server。本文按「配置 → 验证运行 → 限制工具范围 → 排查」的顺序，把接入 Cursor、VS Code 和 Antigravity 的完整路径写清楚。

接入后的默认工具集见 MCP Server 文档：

准备条件

• 一个已经打开、可供 AI 助手操作的 Angular 项目根目录。AI 助手需要有真实的 Angular 项目才能工作，这也是文档在排查问题时的第一检查项。
• 已安装并配置好对应宿主环境（Cursor、VS Code 或 Antigravity）的 MCP 支持。Server 的启动由宿主环境负责，不需要你手动在终端运行npx @angular/cli mcp。

三个宿主的配置结构略有差异，注意 VS Code 用的键是servers，而 Antigravity 和 Cursor 用的是mcpServers，不要照抄混用。

配置 AI 宿主环境

Antigravity

在项目根目录创建.antigravity/mcp.json：

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

Cursor

在项目根目录创建.cursor/mcp.json；如果希望所有项目都生效，也可以改为全局配置~/.cursor/mcp.json：

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

VS Code

在项目根目录创建.vscode/mcp.json：

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

验证 Server 是否运行

文档中给出的验证方式以 VS Code 为主：

1. 打开.vscode/mcp.json，文件顶部会出现Start按钮，点击它启动 Server。当 AI 助手尝试启动时，你会看到一个 "Reviewed .vscode/mcp.json and ran start task" 的确认，以及 "Allow task run?" 的询问——点 Allow。
2. 打开命令面板（Ctrl+Shift+P），输入MCP: List Running Servers，在列表中找到angular-cli，说明 Server 已在运行。

运行起来之后，可以让 AI 助手做一次只读操作作为功能验证：例如请它执行list_projects。按文档描述，该工具会读取angular.json并列出工作区中所有的应用和库；如果你的工作区里有应用或库，AI 助手应当能列出它们，说明工具链路已通。

可选：限制注册的工具范围

如果不想让 AI 助手拥有可能修改项目的工具，可以在配置文件的args数组中追加参数（来自 MCP Server 文档）：

• --read-only：只注册不会修改项目的工具。
• --local-only：只注册不需要联网的工具。

只读模式的示例：

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

可选：与 Agent Skills 组合

如果你的宿主环境支持自定义 Agent Skills（文档以 Antigravity 为例），可以把这个 MCP Server 与官方 Angular AI Skills 组合使用：Skills 提供指令级的开发规范和编码指引，MCP Server 提供执行这些指引所需的动作工具（编译、跑测试、分析工作区等）。Skills 的可用清单（angular-developer、angular-new-app）和用法见 Agent Skills 文档。两者是互补关系，MCP Server 单独工作不依赖 Skills。

排查：Server 没启动或 AI 助手没有反应

文档在 AI Tutor 场景下给出的排查步骤，同样适用于 MCP Server 接入后 AI 助手无响应的情况：

1. 先确认项目是打开状态——AI 助手需要一个实际的 Angular 项目（例如ng new my-app && cd my-app后用编辑器打开）。
2. 确认 MCP Server 已启动：在 VS Code 中打开.vscode/mcp.json并点击Start按钮。
3. 用命令面板中的MCP: List Running Servers确认angular-cli出现在运行列表中。
4. 文档还提到一个备选路径：先输入#angular-cli加载 Angular 上下文，再给出具体的使用提示。

边界说明

• 该 MCP Server 在官方文档中被标注为实验性功能（见 LLM prompts and AI IDE setup），工具行为可能随 CLI 版本变化。
• run_target、devserver.*等工具会实际执行构建、测试或启动/停止 dev server；不需要这些能力时建议用--read-only收窄范围。
• Cursor 的项目级配置与全局配置（~/.cursor/mcp.json）二选一即可，两者同时存在时以哪个生效取决于 Cursor 自身的配置合并规则，文档未进一步说明，可按项目需要只保留项目级配置。

【免费下载链接】angularDeliver web apps with confidence 🚀项目地址: https://gitcode.com/GitHub_Trending/an/angular