A Model Context Protocol server for Ionic and Capacitor
npm install awesome-ionic-mcpData 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.
ionic_info - Get project, system, and environment informationcapacitor_doctor - Check setup for configuration errorscapacitor_list_plugins - List all installed pluginsionic_config_get/set/unset - Manage configuration valuesintegrations_list - List available integrationsionic_build - Build web assets with optimizationsionic_serve - Start development server (manual launch recommended)capacitor_sync - Sync web assets and update native dependenciescapacitor_copy - Copy web assets to native platformscapacitor_update - Update native pluginsionic_generate - Generate pages, components, services, guards, pipesionic_start - Create new Ionic projectionic_start_list - List available templatesionic_init - Initialize existing project with Ioniccapacitor_init - Initialize Capacitor configurationcapacitor_add - Add iOS or Android platformintegrations_enable/disable - Manage project integrationscapacitor_build - Build native app releasecapacitor_run - Run on device or emulatorcapacitor_open - Open Xcode or Android Studiocapacitor_migrate - Migrate to latest Capacitor versionionic_repair - Fix dependencies and regenerate filesCreate a new project:
``typescript
// 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" })
`
Check project health:
`typescript`
ionic_info({ format: "json" })
capacitor_doctor({ platform: "ios" })
capacitor_list_plugins({})
Generate components:
`typescript`
ionic_generate({ type: "page", name: "home" })
ionic_generate({ type: "component", name: "user-card" })
ionic_generate({ type: "service", name: "auth" })
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.
#### 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.
`json`
{
"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.
`json`
{
"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):
`json`
{
"mcpServers": {
"awesome-ionic-mcp": {
"command": "npx",
"args": ["-y", "awesome-ionic-mcp@latest"]
}
}
}
The server supports optional environment variables for enhanced functionality:
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.
How to get a token:
1. Go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)
2. Click "Generate new token (classic)"
3. Give it a descriptive name (e.g., "Awesome Ionic MCP")
4. No special scopes/permissions needed for public repository access
5. Copy the generated token (starts with ghp_)
Configuration example:
`json`
{
"mcpServers": {
"awesome-ionic-mcp": {
"command": "npx",
"args": ["-y", "awesome-ionic-mcp@latest"],
"env": {
"GITHUB_TOKEN": "ghp_your_token_here"
}
}
}
}
When to use: If you want minimal logging output
Configuration example:
`json`
{
"mcpServers": {
"awesome-ionic-mcp": {
"command": "npx",
"args": ["-y", "awesome-ionic-mcp@latest"],
"env": {
"MCP_QUIET": "true"
}
}
}
}
---
#### Visual Studio Code Copilot
To configure a single project, edit the .vscode/mcp.json file in your workspace:
`json`
{
"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:
`json`
{
"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:
`json``
{
"mcpServers": {
"awesome-ionic-mcp": {
"command": "npx",
"args": ["-y", "awesome-ionic-mcp@latest"]
}
}
}