awesome-ionic-mcp

Tommertom/awesome-ionic-mcp

3.4

If you are the rightful owner of awesome-ionic-mcp and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

The Awesome Ionic MCP server is a comprehensive Ionic coding companion powered by the Model Context Protocol (MCP), designed to enhance mobile app development workflows.

Awesome Ionic MCP server

Your comprehensive Ionic coding companion powered by the Model Context Protocol (MCP). This intelligent server provides seamless access to Ionic Framework components, Capacitor plugins, and developer resources to accelerate your mobile app development workflow. Whether you're building cross-platform applications with React, Angular, Vue, or Vanilla JavaScript, this MCP server delivers real-time component definitions, API documentation, code examples, and plugin information directly to your AI assistant, enabling faster development and better code quality.

Data is sourced from the package @ionic/core, ionicframework.com, docs-demo.ionic.io, capacitorjs.com, capawesome.io, capacitor-community, and capgo.live to ensure accuracy and completeness.

Tools available

Tool NameFeature GroupDescription
get_ionic_component_definition@ionic/core.jsonRetrieves the typescript definition of an Ionic component based on its HTML tag.
get_all_ionic_components@ionic/core.jsonRetrieves the list of all Ionic components available for this tool
get_component_apiionicframework.comRetrieves the component API on from the IonicFramework page using its HTML tag.
get_component_demodocs-demo.ionic.ioReturns the component demo from the GitHub repository based on its HTML tag.
get_official_plugin_apicapacitorjs.comRetrieves the official plugin API on from the Capacitor page using its HTML tag.
get_all_official_pluginscapacitorjs.comRetrieves list of all Official Capacitor plugins.
get_all_pluginscapawesome.ioRetrieves list of all Capawesome Capacitor plugins (free and insider versions).
get_all_free_pluginscapawesome.ioRetrieves list of all Capawesome Capacitor free plugins - intensively curated and up-to-date.
get_all_insider_pluginscapawesome.ioRetrieves list of all Capawesome Capacitor insider plugins - intensively curated and up-to-date.
get_plugin_apicapawesome.ioRetrieves API documentation for a specific Capawesome Capacitor plugin.
get_capacitor_community_plugin_apicapacitor-communityRetrieves API documentation for a specific Capacitor Community plugin.
get_all_capacitor_community_pluginscapacitor-communityRetrieves list of all Capacitor Community plugins.
get_capgo_plugin_apicapgoRetrieves API documentation for a specific CapGo plugin.
get_all_capgo_pluginscapgoRetrieves list of all CapGo plugins.
get_all_capacitor_pluginsall-capacitor-pluginsSuperlist of all Capacitor plugings from different publishers you can use to retrieve API information through this MCP tool. If you are lost about which plugin to use, this tool will help you find the right one.

Getting started & upfront warning

The Awesome Ionic MCP server can work with any MCP client that supports standard I/O (stdio) as the transport medium. Here are specific instructions for some popular tools:

Just to let you know - for some data the MCP server will run Puppeteer to open a browser and get the data. So you will see a browser window spanwed and closed.

Basic configuration

Claude Desktop

To configure Claude Desktop to use the Awesome Ionic MCP server, edit the claude_desktop_config.json file. You can open or create this file from the Claude > Settings menu. Select the Developer tab, then click Edit Config.

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

Cline

To configure Cline to use the Awesome Ionic MCP server, edit the cline_mcp_settings.json file. You can open or create this file by clicking the MCP Servers icon at the top of the Cline pane, then clicking the Configure MCP Servers button.

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

Cursor

To configure Cursor to use the Awesome Ionic MCP server, edit either the file .cursor/mcp.json (to configure only a specific project) or the file ~/.cursor/mcp.json (to make the MCP server available in all projects):

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

Visual Studio Code Copilot

To configure a single project, edit the .vscode/mcp.json file in your workspace:

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

To make the server available in every project you open, edit your user settings:

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

Windsurf Editor

To configure Windsurf Editor, edit the file ~/.codeium/windsurf/mcp_config.json:

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

Credits

Credits go to Firebase team- for using their code of their Firebase MCP server. https://firebase.google.com/docs/cli/mcp-server