Capacitor Mcp

Cap-go/capgo-skills/skills/capacitor-mcp

作者 Cap-go2cfb277a148832bdb1a835b01e4de323687b498b無授權條款72 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫今天更新

Model Context Protocol (MCP) tools for Capacitor mobile development. Covers Ionic/Capacitor component APIs, plugin documentation, CLI commands, and AI-assisted development via MCP. Use this skill when users want to integrate AI agents with Ionic/Capacitor tooling.

AI 產生的概覽

說明如何為 Ionic 與 Capacitor 行動開發設定並使用 awesome-ionic-mcp 模型上下文協定伺服器。

功能
這個技能說明如何在 Claude Desktop、Cline、Cursor 等用戶端安裝與設定 awesome-ionic-mcp MCP 伺服器,並介紹它提供的工具。這些工具涵蓋 Ionic 元件定義與範例、來自多個發佈者的 Capacitor 外掛文件,以及用於建置、同步、執行與產生程式碼的 Ionic 與 Capacitor CLI 指令。它也列出範例提問與常見工作流程,用於 AI 輔助的 Ionic/Capacitor 開發。
適用情境
當使用者想把 AI 助理接到 Ionic 或 Capacitor 工具鏈、在對話中查詢元件或外掛 API,或以程式化方式執行 Ionic 與 Capacitor CLI 指令時使用。適合以 Ionic 和 Capacitor 建置的行動應用專案。
執行需求
需要 Node.js 以便透過 npx 執行伺服器、支援 MCP 的用戶端,以及用來取得文件與外掛資料的網路存取。選用的 GitHub 權杖可提高 API 速率限制。執行 CLI 指令需要 Ionic/Capacitor 專案。伺服器使用 Puppeteer,初始化時可能開啟瀏覽器。這個技能不含指令碼,只有說明文件。

Capacitor MCP Tools

Guide to using Model Context Protocol (MCP) for Ionic and Capacitor mobile development automation.

When to Use This Skill

  • User wants to automate Ionic/Capacitor development
  • User asks about MCP integration
  • User wants AI-assisted component/plugin discovery
  • User needs programmatic CLI command execution
  • User wants access to Ionic components and Capacitor plugins within AI chat

What is MCP?

MCP (Model Context Protocol) is an open standard for connecting AI models to external tools and data sources. For Capacitor development, MCP enables:

  • Access to Ionic component definitions and APIs
  • Capacitor plugin documentation lookup
  • Automated CLI command execution (build, sync, run, etc.)
  • Project configuration management
  • Real-time component demos and examples

Setting Up MCP for Capacitor

1. Install Awesome Ionic MCP Server

The awesome-ionic-mcp server is a comprehensive tool that provides access to:

  • Ionic Framework component APIs
  • Official Capacitor plugins
  • Capawesome plugins (free and insider)
  • Capacitor Community plugins
  • CapGo plugins
  • 28 Ionic/Capacitor CLI commands
Claude Desktop

Add to claude_desktop_config.json (accessible via Claude > Settings > Developer):

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

Add to cline_mcp_settings.json:

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

Add to .cursor/mcp.json (project-specific) or ~/.cursor/mcp.json (global):

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

2. Optional: GitHub Token for Rate Limiting

The server makes ~160+ GitHub API calls during initialization to fetch plugin data. Without authentication, GitHub limits you to 60 requests/hour. With a token, this increases to 5,000 requests/hour.

Add GITHUB_TOKEN to your MCP configuration:

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

Get a token from GitHub Settings → Developer settings → Personal access tokens. No special permissions needed for public repos.

Available MCP Tools

Ionic Component Tools

typescript
// Get Ionic component definitionget_ionic_component_definition({ tag: "ion-button" })// Returns TypeScript definition from @ionic/core
// List all Ionic componentsget_all_ionic_components()// Returns: ["ion-button", "ion-card", "ion-input", ...]
// Get component API documentationget_component_api({ tag: "ion-button" })// Returns API docs from ionicframework.com
// Get component demo codeget_component_demo({ tag: "ion-modal" })// Returns demo code from docs-demo.ionic.io

Capacitor Plugin Tools

typescript
// Get official Capacitor plugin APIget_official_plugin_api({ plugin: "Camera" })// Returns documentation from capacitorjs.com
// List all official pluginsget_all_official_plugins()// Returns: ["Camera", "Filesystem", "Geolocation", ...]
// Search all available Capacitor pluginsget_all_capacitor_plugins()// Returns superlist from all plugin publishers
// Get Capawesome plugin documentationget_plugin_api({ plugin: "capacitor-firebase" })
// List Capawesome pluginsget_all_free_plugins() // Free pluginsget_all_insider_plugins() // Insider/paid plugins
// Get CapGo plugin documentationget_capgo_plugin_api({ plugin: "native-biometric" })get_all_capgo_plugins()
// Get Capacitor Community plugin docsget_capacitor_community_plugin_api({ plugin: "http" })get_all_capacitor_community_plugins()

Ionic CLI Commands

All commands accept a project_directory parameter (defaults to current directory).

Project Information
typescript
// Get comprehensive project infoionic_info({ format: "json" })
// Get configuration valueionic_config_get({ key: "name" })
// Set configuration valueionic_config_set({ key: "name", value: "MyApp" })
// Unset configuration valueionic_config_unset({ key: "telemetry" })
Project Setup
typescript
// Create new Ionic projectionic_start({  name: "MyApp",  template: "tabs", // blank, list, sidemenu, tabs  type: "react", // angular, react, vue  capacitor: true})
// List available templatesionic_start_list()
// Initialize existing projectionic_init({ name: "MyApp", type: "react" })
// Repair project dependenciesionic_repair()
Build & Serve
typescript
// Build web assetsionic_build({  project_directory: "./my-app",  prod: true,  engine: "browser" // or "cordova"})
// Start development server (manual launch recommended)// Note: Server runs in foreground, manual launch preferredionic_serve({  project_directory: "./my-app",  port: 8100,  lab: false})
Code Generation
typescript
// Generate pageionic_generate({  type: "page",  name: "home",  project_directory: "./my-app"})
// Generate componentionic_generate({  type: "component",  name: "user-card"})
// Generate serviceionic_generate({  type: "service",  name: "auth"})
// Other types: directive, guard, pipe, class, interface, module
Integrations
typescript
// List available integrationsintegrations_list()
// Enable integration (e.g., Capacitor)integrations_enable({ integration: "capacitor" })
// Disable integrationintegrations_disable({ integration: "cordova" })

Capacitor CLI Commands

Project Management
typescript
// Check Capacitor setupcapacitor_doctor({ platform: "ios" })
// List installed pluginscapacitor_list_plugins()
// Initialize Capacitorcapacitor_init({  name: "MyApp",  id: "com.example.app",  web_dir: "dist"})
// Add platformcapacitor_add({ platform: "ios" })capacitor_add({ platform: "android" })
// Migrate to latest versioncapacitor_migrate()
Build & Sync
typescript
// Sync web assets and dependenciescapacitor_sync({ platform: "ios" })
// Copy web assets onlycapacitor_copy({ platform: "android" })
// Update native dependenciescapacitor_update({ platform: "ios" })
// Build native releasecapacitor_build({  platform: "ios",  scheme: "App",  configuration: "Release"})
Run & Deploy
typescript
// Run on device/emulatorcapacitor_run({  platform: "ios",  target: "iPhone 15 Pro"})
// Open native IDEcapacitor_open({ platform: "ios" }) // Opens Xcodecapacitor_open({ platform: "android" }) // Opens Android Studio

Common Workflows

Create New Project

typescript
// 1. Create Ionic projectionic_start({  name: "MyApp",  template: "tabs",  type: "react",  capacitor: true})
// 2. Add iOS platformcapacitor_add({  project_directory: "./MyApp",  platform: "ios"})
// 3. Build and syncionic_build({  project_directory: "./MyApp",  prod: true})capacitor_sync({  project_directory: "./MyApp",  platform: "ios"})

Check Project Health

typescript
// Get system infoionic_info({ format: "json" })
// Check Capacitor setupcapacitor_doctor({ platform: "ios" })
// List installed pluginscapacitor_list_plugins()

Generate Code

typescript
// Generate page with routingionic_generate({ type: "page", name: "profile" })
// Generate reusable componentionic_generate({ type: "component", name: "user-avatar" })
// Generate serviceionic_generate({ type: "service", name: "data" })

AI-Assisted Development Benefits

With awesome-ionic-mcp, AI assistants can:

  1. Discover Components: Ask "What Ionic components can I use for forms?" and get accurate API docs
  2. Find Plugins: Ask "Is there a Capacitor plugin for biometric authentication?" and get relevant results
  3. Execute Commands: Request "Build the iOS app" and the CLI command runs automatically
  4. Generate Code: Get component examples with proper TypeScript definitions
  5. Troubleshoot: Look up plugin APIs and configuration without leaving the chat

Example Queries

With the MCP server installed, you can ask your AI assistant:

  • "Show me the API for ion-modal component"
  • "List all available Capacitor Camera plugin methods"
  • "Generate a new page called settings"
  • "What Capawesome plugins are available for Firebase?"
  • "Build my app for iOS"
  • "Sync my Capacitor project"
  • "What are all the free CapGo plugins?"

Technical Details

Data Sources

The awesome-ionic-mcp server aggregates data from:

  • @ionic/core package (TypeScript definitions)
  • ionicframework.com (component API docs)
  • docs-demo.ionic.io (component demos)
  • capacitorjs.com (official plugins)
  • capawesome.io (Capawesome plugins)
  • capacitor-community (community plugins)
  • capgo.app (CapGo plugins)

Requirements

  • Node.js (for npx command)
  • Optional: GitHub token for avoiding API rate limits
  • Ionic/Capacitor project (for CLI commands)

Browser Automation

The server uses Puppeteer to fetch some documentation. You may see a browser window spawn and close during initialization - this is normal.

Resources

來源與署名

來源:Cap-go/capgo-skills位於skills/capacitor-mcp提交2cfb277

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架