ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

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

如何把 Angular CLI 的 MCP Server 接入 Cursor、VS Code 或 Antigravity 等 AI 助手? 如何把 Angular CLI 的 MCP Server 接入 Cursor、VS Code 或 Antigravity 等 AI 助手【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angularAngular CLI 内置了一个实验性的 Model Context ProtocolMCPServer可以让 Cursor、Antigravity、JetBrains AI 等 AI 助手直接调用 Angular CLI 的能力代码生成、工作区分析、启动/停止开发服务器、执行 build 与 test 等。接入方式本身很轻——你只需要在自己的 AI 宿主环境IDE 或 CLI里加一个配置文件让它以npx angular/cli mcp启动这个 Server。本文按「配置 → 验证运行 → 限制工具范围 → 排查」的顺序把接入 Cursor、VS Code 和 Antigravity 的完整路径写清楚。接入后的默认工具集见 MCP Server 文档工具作用ai_tutor启动交互式 AI Angular 教学向导devserver.start异步启动 dev serverng serve调用后立即返回devserver.stop停止 dev serverdevserver.wait_for_build返回运行中 dev server 最近一次构建的日志get_best_practices获取 Angular 最佳实践指南list_projects读取angular.json列出工作区内所有应用和库onpush_zoneless_migration分析代码并给出迁移到OnPush变更检测zoneless 的前置条件的计划run_target执行已配置的 targetbuild、test、lint、e2e、deploy 等search_documentation搜索 angular.dev 官方文档准备条件一个已经打开、可供 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 为主打开.vscode/mcp.json文件顶部会出现Start按钮点击它启动 Server。当 AI 助手尝试启动时你会看到一个 Reviewed .vscode/mcp.json and ran start task 的确认以及 Allow task run? 的询问——点 Allow。打开命令面板CtrlShiftP输入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 助手无响应的情况先确认项目是打开状态——AI 助手需要一个实际的 Angular 项目例如ng new my-app cd my-app后用编辑器打开。确认 MCP Server 已启动在 VS Code 中打开.vscode/mcp.json并点击Start按钮。用命令面板中的MCP: List Running Servers确认angular-cli出现在运行列表中。文档还提到一个备选路径先输入#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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表