Awesome Ionic MCP server

1# Awesome Ionic MCP server
2Your comprehensive Ionic coding companion powered by the Model Context Protocol (MCP). This intelligent server provides seamless access to Ionic Framework components, Capacitor plugins, developer resources, and **CLI command execution** 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, plugin information, and the ability to execute Ionic/Capacitor CLI commands directly to your AI assistant, enabling faster development and better code quality.
3 
4Data 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.
5 
6## Tools available
7| Tool Name | Feature Group | Description |
8| --------- | ------------- | ----------- |
9| get_ionic_component_definition | @ionic/core.json | Retrieves the typescript definition of an Ionic component based on its HTML tag. |
10| get_all_ionic_components | @ionic/core.json | Retrieves the list of all Ionic components available for this tool |
11| get_component_api | ionicframework.com | Retrieves the component API on from the IonicFramework page using its HTML tag. |
12| get_component_demo | docs-demo.ionic.io | Returns the component demo from the GitHub repository based on its HTML tag. |
13| get_official_plugin_api | capacitorjs.com | Retrieves the official plugin API on from the Capacitor page using its HTML tag. |
14| get_all_official_plugins | capacitorjs.com | Retrieves list of all Official Capacitor plugins. |
15| get_all_plugins | capawesome.io | Retrieves list of all Capawesome Capacitor plugins (free and insider versions). |
16| get_all_free_plugins | capawesome.io | Retrieves list of all Capawesome Capacitor free plugins - intensively curated and up-to-date. |
17| get_all_insider_plugins | capawesome.io | Retrieves list of all Capawesome Capacitor insider plugins - intensively curated and up-to-date. |
18| get_plugin_api | capawesome.io | Retrieves API documentation for a specific Capawesome Capacitor plugin. |
19| get_capacitor_community_plugin_api | capacitor-community | Retrieves API documentation for a specific Capacitor Community plugin. |
20| get_all_capacitor_community_plugins | capacitor-community | Retrieves list of all Capacitor Community plugins. |
21| get_capgo_plugin_api | capgo | Retrieves API documentation for a specific CapGo plugin. |
22| get_all_capgo_plugins | capgo | Retrieves list of all CapGo plugins. |
23| get_all_capacitor_plugins | all-capacitor-plugins | Superlist 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. |
24| **ionic_info** | **ionic-cli** | **Get comprehensive project, system, and environment information** |
25| **ionic_config_get** | **ionic-cli** | **Read CLI or project configuration values** |
26| **ionic_config_set** | **ionic-cli** | **Set CLI or project configuration value** |
27| **ionic_config_unset** | **ionic-cli** | **Delete/unset configuration value** |
28| **ionic_start** | **ionic-cli** | **Create a new Ionic project** |
29| **ionic_start_list** | **ionic-cli** | **List available Ionic starter templates** |
30| **ionic_init** | **ionic-cli** | **Initialize existing project with Ionic** |
31| **ionic_build** | **ionic-cli** | **Build web assets for deployment** |
32| **ionic_serve** | **ionic-cli** | **Start local development server** |
33| **ionic_generate** | **ionic-cli** | **Generate pages, components, services** |
34| **ionic_repair** | **ionic-cli** | **Repair project dependencies** |
35| **integrations_list** | **ionic-cli** | **List project integrations** |
36| **integrations_enable** | **ionic-cli** | **Enable integration in project** |
37| **integrations_disable** | **ionic-cli** | **Disable integration in project** |
38| **capacitor_doctor** | **ionic-cli** | **Check Capacitor setup for errors** |
39| **capacitor_list_plugins** | **ionic-cli** | **List installed Capacitor plugins** |
40| **capacitor_sync** | **ionic-cli** | **Sync web assets and dependencies** |
41| **capacitor_copy** | **ionic-cli** | **Copy web assets to native platforms** |
42| **capacitor_update** | **ionic-cli** | **Update native dependencies** |
43| **capacitor_init** | **ionic-cli** | **Initialize Capacitor configuration** |
44| **capacitor_add** | **ionic-cli** | **Add native platform (iOS/Android)** |
45| **capacitor_build** | **ionic-cli** | **Build native platform release** |
46| **capacitor_run** | **ionic-cli** | **Run app on device/emulator** |
47| **capacitor_open** | **ionic-cli** | **Open native IDE** |
48| **capacitor_migrate** | **ionic-cli** | **Migrate to latest Capacitor version** |
49 
50## CLI Tools
51The Awesome Ionic MCP server now includes **28 Ionic and Capacitor CLI tools** that allow you to execute commands directly through your AI assistant:
52 
53### Project Information & Diagnostics
54- `ionic_info` - Get project, system, and environment information
55- `capacitor_doctor` - Check setup for configuration errors
56- `capacitor_list_plugins` - List all installed plugins
57- `ionic_config_get/set/unset` - Manage configuration values
58- `integrations_list` - List available integrations
59 
60### Development Workflow
61- `ionic_build` - Build web assets with optimizations
62- `ionic_serve` - Start development server (manual launch recommended)
63- `capacitor_sync` - Sync web assets and update native dependencies
64- `capacitor_copy` - Copy web assets to native platforms
65- `capacitor_update` - Update native plugins
66 
67### Code Generation
68- `ionic_generate` - Generate pages, components, services, guards, pipes
69- Framework-specific scaffolding for Angular, React, Vue
70 
71### Project Setup & Management
72- `ionic_start` - Create new Ionic project
73- `ionic_start_list` - List available templates
74- `ionic_init` - Initialize existing project with Ionic
75- `capacitor_init` - Initialize Capacitor configuration
76- `capacitor_add` - Add iOS or Android platform
77- `integrations_enable/disable` - Manage project integrations
78 
79### Native Development
80- `capacitor_build` - Build native app release
81- `capacitor_run` - Run on device or emulator
82- `capacitor_open` - Open Xcode or Android Studio
83- `capacitor_migrate` - Migrate to latest Capacitor version
84 
85### Maintenance
86- `ionic_repair` - Fix dependencies and regenerate files
87 
88### Common Workflows
89 
90**Create a new project:**
91```typescript
92// 1. Create project
93ionic_start({ name: "MyApp", template: "tabs", type: "react", capacitor: true })
94 
95// 2. Add iOS platform
96capacitor_add({ project_directory: "./MyApp", platform: "ios" })
97 
98// 3. Build and sync
99ionic_build({ project_directory: "./MyApp", prod: true })
100capacitor_sync({ project_directory: "./MyApp", platform: "ios" })
101```
102 
103**Check project health:**
104```typescript
105ionic_info({ format: "json" })
106capacitor_doctor({ platform: "ios" })
107capacitor_list_plugins({})
108```
109 
110**Generate components:**
111```typescript
112ionic_generate({ type: "page", name: "home" })
113ionic_generate({ type: "component", name: "user-card" })
114ionic_generate({ type: "service", name: "auth" })
115```
116 
117## Getting started & upfront warning
118The 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:
119 
120Just 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.
121 
122### Basic configuration
123 
124#### Claude Desktop
125To 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.
126 
127```json
128{
129  "mcpServers": {
130    "awesome-ionic-mcp": {
131      "command": "npx",
132      "args": ["-y", "awesome-ionic-mcp@latest"]
133    }
134  }
135}
136```
137 
138---
139 
140#### Cline
141To 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.
142 
143```json
144{
145  "mcpServers": {
146    "awesome-ionic-mcp": {
147      "command": "npx",
148      "args": ["-y", "awesome-ionic-mcp@latest"],
149      "disabled": false
150    }
151  }
152}
153```
154 
155---
156 
157#### Cursor
158To 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):
159 
160```json
161{
162  "mcpServers": {
163    "awesome-ionic-mcp": {
164      "command": "npx",
165      "args": ["-y", "awesome-ionic-mcp@latest"]
166    }
167  }
168}
169```
170 
171## Environment Variables
172 
173The server supports optional environment variables for enhanced functionality:
174 
175### `GITHUB_TOKEN` (Recommended)
176**Purpose:** Authenticate GitHub API requests to avoid rate limiting
177 
178**Why it's needed:** The server fetches plugin data from GitHub organizations (CapGo, Capacitor Community). Without authentication, GitHub limits you to 60 API requests per hour per IP address. The server makes ~160+ API calls during initialization, which exhausts the unauthenticated limit in a single startup. With a token, the limit increases to 5,000 requests per hour.
179 
180**How to get a token:**
1811. Go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)
1822. Click "Generate new token (classic)"
1833. Give it a descriptive name (e.g., "Awesome Ionic MCP")
1844. No special scopes/permissions needed for public repository access
1855. Copy the generated token (starts with `ghp_`)
186 
187**Configuration example:**
188```json
189{
190  "mcpServers": {
191    "awesome-ionic-mcp": {
192      "type": "stdio"
193      "command": "npx",
194      "args": ["-y", "awesome-ionic-mcp@latest"],
195      "env": {
196        "GITHUB_TOKEN": "ghp_your_token_here"
197      },
198       "alwaysAllow": [
199      "get_ionic_component_definition",
200      "get_all_ionic_components",
201      "get_component_api",
202      "get_all_official_plugins",
203      "get_official_plugin_api"
204    ],
205    }
206  }
207}
208```
209 
210### `MCP_QUIET`
211**Purpose:** Suppress informational logs (only errors will be shown)
212 
213**When to use:** If you want minimal logging output
214 
215**Configuration example:**
216```json
217{
218  "mcpServers": {
219    "awesome-ionic-mcp": {
220      "command": "npx",
221      "args": ["-y", "awesome-ionic-mcp@latest"],
222      "env": {
223        "MCP_QUIET": "true"
224      }
225    }
226  }
227}
228```
229 
230---
231 
232#### Visual Studio Code Copilot
233To configure a single project, edit the `.vscode/mcp.json` file in your workspace:
234 
235```json
236{
237  "servers": {
238    "awesome-ionic-mcp": {
239      "type": "stdio",
240      "command": "npx",
241      "args": ["-y", "awesome-ionic-mcp@latest"]
242    }
243  }
244}
245```
246 
247To make the server available in every project you open, edit your user settings:
248 
249```json
250{
251  "mcp": {
252    "servers": {
253      "awesome-ionic-mcp": {
254        "type": "stdio",
255        "command": "npx",
256        "args": ["-y", "awesome-ionic-mcp@latest"]
257      }
258    }
259  }
260}
261```
262 
263---
264 
265#### Windsurf Editor
266To configure Windsurf Editor, edit the file `~/.codeium/windsurf/mcp_config.json`:
267 
268```json
269{
270  "mcpServers": {
271    "awesome-ionic-mcp": {
272      "command": "npx",
273      "args": ["-y", "awesome-ionic-mcp@latest"]
274    }
275  }
276}
277```
278 
279## Credits
280Credits go to Firebase team- for using their code of their Firebase MCP server.
281https://firebase.google.com/docs/cli/mcp-server
282