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.

The Awesome Ionic MCP server is an intelligent server that provides seamless access to Ionic Framework components, Capacitor plugins, and developer resources. It is designed to accelerate mobile app development workflows by delivering real-time component definitions, API documentation, code examples, and plugin information directly to AI assistants. This server supports cross-platform application development with React, Angular, Vue, or Vanilla JavaScript, ensuring faster development and better code quality. Data is sourced from trusted platforms like @ionic/core, ionicframework.com, docs-demo.ionic.io, capacitorjs.com, capawesome.io, capacitor-community, and capgo.live to ensure accuracy and completeness. The server can work with any MCP client that supports standard I/O (stdio) as the transport medium, making it versatile and easy to integrate into various development environments.

Features

  • Seamless access to Ionic Framework components and Capacitor plugins.
  • Real-time delivery of component definitions and API documentation.
  • Supports cross-platform development with React, Angular, Vue, and Vanilla JavaScript.
  • Data sourced from trusted platforms for accuracy and completeness.
  • Compatible with any MCP client supporting standard I/O (stdio).

Usages

usage with claude desktop

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

usage with cline

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

usage with cursor

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

usage with vscode copilot project

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

usage with vscode copilot user

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

usage with windsurf editor

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

Tools

  1. get_ionic_component_definition

    Retrieves the typescript definition of an Ionic component based on its HTML tag.

  2. get_all_ionic_components

    Retrieves the list of all Ionic components available for this tool.

  3. get_component_api

    Retrieves the component API from the IonicFramework page using its HTML tag.

  4. get_component_demo

    Returns the component demo from the GitHub repository based on its HTML tag.

  5. get_official_plugin_api

    Retrieves the official plugin API from the Capacitor page using its HTML tag.