Ionic开发工具服务器

出色的Ionic MCP服务器

您全面的Ionic编码伴侣由模型上下文协议（MCP）提供支持。此智能服务器提供对Ionic Framework组件、电容器插件、开发人员资源和 CLI命令执行 加快您的移动应用程序开发工作流程。无论您是使用React、Angular、Vue还是Vanilla JavaScript构建跨平台应用程序，此MCP服务器都可以向您的AI助手提供实时组件定义、API文档、代码示例、插件信息，以及直接执行Ionic/Cacitor CLI命令的能力，从而实现更快的开发和更好的代码质量。

数据来源于包 @ionic/core、ionicframework.com、docs-demo.ionic.io、capacorjs.com、capawesome.io、电容器社区和capgo.live，以确保准确性和完整性。

可用工具

命令行工具

Awesome Ionic MCP服务器现在包括 28 Ionic和电容器CLI工具 允许您直接通过AI助手执行命令：

项目信息和诊断

• ionic_info -获取项目、系统和环境信息
• capacitor_doctor -检查安装程序是否存在配置错误
• capacitor_list_plugins -列出所有已安装的插件
• ionic_config_get/set/unset -管理配置值
• integrations_list -列出可用集成

开发工作流程

• ionic_build -通过优化构建web资产
• ionic_serve -启动开发服务器（建议手动启动）
• capacitor_sync -同步web资产并更新本机依赖关系
• capacitor_copy -将web资产复制到本机平台
• capacitor_update -更新本机插件

代码生成

• ionic_generate -生成页面、组件、服务、防护装置、管道
• Angular、React、Vue的框架特定脚手架

项目设置和管理

• ionic_start -创建新的Ionic项目
• ionic_start_list -列出可用模板
• ionic_init -使用Ionic初始化现有项目
• capacitor_init -初始化电容器配置
• capacitor_add -添加iOS或Android平台
• integrations_enable/disable -管理项目集成

本地开发

• capacitor_build -构建本地应用程序版本
• capacitor_run -在设备或模拟器上运行
• capacitor_open -打开Xcode或Android Studio
• capacitor_migrate -迁移到最新的电容器版本

维护

• ionic_repair -修复依赖关系并重新生成文件

常见工作流

创建新项目：

// 1. Create project
ionic_start({ name: "MyApp", template: "tabs", type: "react", capacitor: true })

// 2. Add iOS platform
capacitor_add({ project_directory: "./MyApp", platform: "ios" })

// 3. Build and sync
ionic_build({ project_directory: "./MyApp", prod: true })
capacitor_sync({ project_directory: "./MyApp", platform: "ios" })

检查项目运行状况：

ionic_info({ format: "json" })
capacitor_doctor({ platform: "ios" })
capacitor_list_plugins({})

生成组件：

ionic_generate({ type: "page", name: "home" })
ionic_generate({ type: "component", name: "user-card" })
ionic_generate({ type: "service", name: "auth" })

入门和预先警告

Awesome Ionic MCP服务器可以与任何支持标准I/O（stdio）作为传输介质的MCP客户端一起工作。以下是一些流行工具的具体说明：

只是让你知道，对于某些数据，MCP服务器将运行Puppeteer打开浏览器并获取数据。因此，您将看到一个浏览器窗口打开并关闭。

基本配置

克劳德桌面

要配置Claude Desktop以使用Awesome Ionic MCP服务器，请编辑 claude_desktop_config.json 文件。您可以从Claude>Settings菜单打开或创建此文件。选择“开发人员”选项卡，然后单击“编辑配置”。

{
  "mcpServers": {
    "awesome-ionic-mcp": {
      "command": "npx",
      "args": ["-y", "awesome-ionic-mcp@latest"]
    }
  }
}

克莱恩

要配置Cline使用Awesome Ionic MCP服务器，请编辑 cline_mcp_settings.json 文件。您可以通过单击Cline窗格顶部的MCP服务器图标，然后单击配置MCP服务器按钮来打开或创建此文件。

{
  "mcpServers": {
    "awesome-ionic-mcp": {
      "command": "npx",
      "args": ["-y", "awesome-ionic-mcp@latest"],
      "disabled": false
    }
  }
}

光标

要配置Cursor以使用Awesome Ionic MCP服务器，请编辑以下文件之一 .cursor/mcp.json （仅配置特定项目）或文件 ~/.cursor/mcp.json （使MCP服务器在所有项目中可用）：

{
  "mcpServers": {
    "awesome-ionic-mcp": {
      "command": "npx",
      "args": ["-y", "awesome-ionic-mcp@latest"]
    }
  }
}

环境变量

服务器支持可选的环境变量以增强功能：

GITHUB_TOKEN （推荐）

目的： 验证GitHub API请求以避免速率限制

为什么需要： 服务器从GitHub组织（CapGo、Capacitor社区）获取插件数据。在没有身份验证的情况下，GitHub将每个IP地址每小时限制为60个API请求。服务器在初始化期间进行~160+API调用，这在一次启动中耗尽了未经验证的限制。使用令牌后，限制增加到每小时5000个请求。

如何获取代币：

1. 转到GitHub设置→ 开发人员设置→ 个人访问令牌→ 代币（经典）
2. 点击“生成新令牌（经典）”
3. 给它一个描述性的名字（例如，“Awesome Ionic MCP”）
4. 访问公共存储库不需要特殊的范围/权限
5. 复制生成的令牌（以开头 ghp_)

配置示例：

{
  "mcpServers": {
    "awesome-ionic-mcp": {
      "type": "stdio"
      "command": "npx",
      "args": ["-y", "awesome-ionic-mcp@latest"],
      "env": {
        "GITHUB_TOKEN": "ghp_your_token_here"
      },
       "alwaysAllow": [
      "get_ionic_component_definition",
      "get_all_ionic_components",
      "get_component_api",
      "get_all_official_plugins",
      "get_official_plugin_api"
    ],
    }
  }
}

MCP_QUIET

目的： 抑制信息日志（仅显示错误）

何时使用： 如果你想要最小的日志输出

配置示例：

{
  "mcpServers": {
    "awesome-ionic-mcp": {
      "command": "npx",
      "args": ["-y", "awesome-ionic-mcp@latest"],
      "env": {
        "MCP_QUIET": "true"
      }
    }
  }
}

Visual Studio代码副本

要配置单个项目，请编辑 .vscode/mcp.json 工作区中的文件：

{
  "servers": {
    "awesome-ionic-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "awesome-ionic-mcp@latest"]
    }
  }
}

要使服务器在您打开的每个项目中都可用，请编辑您的用户设置：

{
  "mcp": {
    "servers": {
      "awesome-ionic-mcp": {
        "type": "stdio",
        "command": "npx",
        "args": ["-y", "awesome-ionic-mcp@latest"]
      }
    }
  }
}

Windsurf编辑器

要配置Windsurf编辑器，请编辑文件 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "awesome-ionic-mcp": {
      "command": "npx",
      "args": ["-y", "awesome-ionic-mcp@latest"]
    }
  }
}

学分

积分归Firebase团队所有，因为他们使用了Firebase MCP服务器的代码。 https://firebase.google.com/docs/cli/mcp-server