在 AI 助手中接入 Ionic/Capacitor…

当你想让 AI 助手（Claude Desktop、Cline、Cursor）直接查询 Ionic 组件 API、Capacitor 插件文档并执行 Ionic/Capacitor CLI 命令时使用。

适用场景

解决思路

1. 安装 awesome-ionic-mcp 服务器：在 Claude Desktop 的 claude_desktop_config.json（Claude > Settings > Developer 中打开）添加 mcpServers 配置，command 为 npx，args 为 ["-y", "awesome-ionic-mcp@latest"]。
2. 在 Cline 中配置：向 cline_mcp_settings.json 添加同样的 mcpServers 配置，并设置 "disabled": false。
3. 在 Cursor 中配置：向项目级 .cursor/mcp.json 或全局 ~/.cursor/mcp.json 添加同样的 mcpServers 配置。
4. 可选优化 GitHub 限流：服务器初始化时会发起约 160+ 次 GitHub API 调用，未认证时限流为 60 次/小时，认证后为 5,000 次/小时；在 MCP 配置的 env 中加入 GITHUB_TOKEN（从 GitHub Settings → Developer settings → Personal access tokens 获取，公开仓库无需特殊权限）。
5. 查询 Ionic 组件：用 get_ionic_component_definition({ tag: "ion-button" }) 获取 @ionic/core 的 TypeScript 定义；用 get_all_ionic_components() 列出全部组件；用 get_component_api({ tag: "ion-button" }) 获取 ionicframework.com 的 API 文档；用 get_component_demo({ tag: "ion-modal" }) 获取 docs-demo.ionic.io 的示例代码。
6. 查询 Capacitor 插件：用 get_official_plugin_api({ plugin: "Camera" }) 获取官方插件文档；用 get_all_official_plugins() 列出官方插件；用 get_all_capacitor_plugins() 搜索全部插件；用 get_plugin_api({ plugin: "capacitor-firebase" }) 获取第三方插件文档；用 get_all_free_plugins() 和 get_all_insider_plugins() 分别列出免费与付费插件；用 get_capgo_plugin_api({ plugin: "native-biometric" }) 和 get_all_capgo_plugins() 查询 CapGo 插件；用 get_capacitor_community_plugin_api({ plugin: "http" }) 和 get_all_capacitor_community_plugins() 查询社区插件。
7. 执行 Ionic CLI 项目信息命令（均支持 project_directory 参数，默认当前目录）：用 ionic_info({ format: "json" }) 获取项目信息；用 ionic_config_get({ key: "name" }) 读取配置；用 ionic_config_set({ key: "name", value: "MyApp" }) 设置配置；用 ionic_config_unset({ key: "telemetry" }) 删除配置。
8. 执行 Ionic CLI 项目初始化命令：用 ionic_start({ name: "MyApp", template: "tabs", type: "react", capacitor: true }) 创建项目（template 可选 blank/list/sidemenu/tabs，type 可选 angular/react/vue）；用 ionic_start_list() 列出模板；用 ionic_init({ name: "MyApp", type: "react" }) 初始化已有项目；用 ionic_repair() 修复依赖。
9. 执行 Ionic CLI 构建与开发服务器命令：用 ionic_build({ project_directory: "./my-app", prod: true, engine: "browser" }) 构建 Web 资源（engine 也可为 "cordova"）；用 ionic_serve({ project_directory: "./my-app", port: 8100, lab: false }) 启动开发服务器（服务器为前台运行，建议手动启动）。
10. 执行 Ionic CLI 代码生成命令：用 ionic_generate({ type: "page", name: "home", project_directory: "./my-app" }) 生成页面；用 ionic_generate({ type: "component", name: "user-card" }) 生成组件；用 ionic_generate({ type: "service", name: "auth" }) 生成服务；其他类型包括 directive、guard、pipe、class、interface、module。
11. 执行 Ionic CLI 集成命令：用 integrations_list() 列出可用集成；用 integrations_enable({ integration: "capacitor" }) 启用集成；用 integrations_disable({ integration: "cordova" }) 禁用集成。
12. 执行 Capacitor CLI 项目管理命令：用 capacitor_doctor({ platform: "ios" }) 检查 Capacitor 配置；用 capacitor_list_plugins() 列出已安装插件；用 capacitor_init({ name: "MyApp", id: "com.example.app", web_dir: "dist" }) 初始化 Capacitor；用 capacitor_add({ platform: "ios" }) 或 capacitor_add({ platform: "android" }) 添加平台；用 capacitor_migrate() 迁移到最新版本。
13. 执行 Capacitor CLI 构建与同步命令：用 capacitor_sync({ platform: "ios" }) 同步 Web 资源与依赖；用 capacitor_copy({ platform: "android" }) 仅复制 Web 资源；用 capacitor_update({ platform: "ios" }) 更新原生依赖；用 capacitor_build({ platform: "ios", scheme: "App", configuration: "Release" }) 构建原生发布版。
14. 执行 Capacitor CLI 运行与打开命令：用 capacitor_run({ platform: "ios", target: "iPhone 15 Pro" }) 在设备/模拟器上运行；用 capacitor_open({ platform: "ios" }) 打开 Xcode，用 capacitor_open({ platform: "android" }) 打开 Android Studio。
15. 按常见工作流创建新项目：先 ionic_start({ name: "MyApp", template: "tabs", type: "react", capacitor: true })，再 capacitor_add({ project_directory: "./MyApp", platform: "ios" })，然后 ionic_build({ project_directory: "./MyApp", prod: true }) 并 capacitor_sync({ project_directory: "./MyApp", platform: "ios" })。
16. 按常见工作流检查项目健康：依次执行 ionic_info({ format: "json" })、capacitor_doctor({ platform: "ios" })、capacitor_list_plugins()。
17. 按常见工作流生成代码：用 ionic_generate({ type: "page", name: "profile" }) 生成带路由的页面，用 ionic_generate({ type: "component", name: "user-avatar" }) 生成可复用组件，用 ionic_generate({ type: "service", name: "data" }) 生成服务。
18. 利用 AI 辅助能力：让助手发现组件（如“表单可以用哪些 Ionic 组件”）、查找插件（如“有没有生物认证的 Capacitor 插件”）、执行命令（如“构建 iOS 应用”）、生成代码、排查问题，全程无需离开对话。
19. 注意技术细节：服务器数据来自 @ionic/core、ionicframework.com、docs-demo.ionic.io、capacitorjs.com、第三方插件目录、capacitor-community、capgo.app；依赖 Node.js（用于 npx），CLI 命令需有 Ionic/Capacitor 项目；服务器使用 Puppeteer 抓取文档，初始化时可能弹出并关闭浏览器窗口，属正常现象。

适用边界 · 注意事项

• 不使用 AI 助手或 MCP 客户端（Claude Desktop、Cline、Cursor）时，无法使用本技能。
• 没有 Ionic/Capacitor 项目时，CLI 相关命令无法执行。
• 未安装 Node.js（无法运行 npx）时无法启动 MCP 服务器。