Purpose
Awesome Ionic MCP Server is a programming companion for the Ionic framework, based on the Model Context Protocol (MCP), providing intelligent assistance for developers building mobile apps with React, Angular, Vue, or vanilla JavaScript. It seamlessly integrates Ionic components, Capacitor plugins, developer resources, and CLI command execution to accelerate cross-platform mobile app development workflows.
Key Capabilities
The server provides 28 Ionic and Capacitor CLI tools that can execute commands through an AI assistant:
- Project information and diagnostics: ionic_info, capacitor_doctor, capacitor_list_plugins, ionic_config_get/set/unset, integrations_list.
- Development workflow: ionic_build, ionic_serve (manual launch recommended), capacitor_sync, capacitor_copy, capacitor_update.
- Code generation: ionic_generate (supports scaffolding of pages, components, services, guards, and pipes for Angular, React, and Vue frameworks).
- Project setup and management: ionic_start, ionic_start_list, ionic_init, capacitor_init, capacitor_add, integrations_enable/disable.
- Native development: capacitor_build, capacitor_run, capacitor_open, capacitor_migrate, ionic_repair. It can also provide AI assistants with real-time component definitions, API documentation, code examples, and plugin information to help improve code quality.
Usage
The server can be used with any MCP client that supports standard input/output (stdio) as the transport medium. Common configurations include:
- Claude Desktop: edit the claude_desktop_config.json file (via Claude > Settings > Developer tab > Edit Config).
- Cline: edit the cline_mcp_settings.json file (click the MCP Servers icon at the top of the Cline panel, then click Configure MCP Servers).
- Cursor: edit .cursor/mcp.json (specific projects only) or ~/.cursor/mcp.json (all projects).
- VS Code: edit .vscode/mcp.json in the workspace (single project), or edit user settings (all projects).
- Windsurf Editor: edit the ~/.codeium/windsurf/mcp_config.json file.
Optional environment variables:
- GITHUB_TOKEN (recommended): used to authenticate GitHub API requests and avoid rate limits. The server fetches plugin data from GitHub organizations (CapGo, Capacitor Community), making approximately 160+ API calls during initialization. Without authentication, the limit is only 60 requests per hour per IP; with a token, it increases to 5,000 per hour. To get a token: GitHub Settings → Developer settings → Personal access tokens → Tokens (classic), generate a new token (no special permissions required, only public repository access), and copy the token starting with ghp_.
- Another environment variable is used to suppress informational logs and show only errors.
Note: Some data fetching runs Puppeteer to open a browser window and then close it.
Use Cases
Suitable for cross-platform mobile app development scenarios using Ionic and Capacitor, especially for developers who want to quickly access component documentation, generate code, and execute CLI commands with the help of an AI assistant. Whether using React, Angular, Vue, or vanilla JavaScript, you can benefit.
Limitations
No other limitation information is currently provided.
