--- title: Ionic Framework MCP Server description: Connect Claude, Cursor, VS Code, and any MCP client to the official Ionic Framework documentation, component API, and usage examples for free. --- # Ionic Framework MCP Server The Ionic Framework MCP server gives your AI assistant the current [Ionic Framework](https://ionicframework.com){:target="_blank"} documentation for v9 and v8, including the component API reference and the usage examples for Angular, React, Vue and vanilla JavaScript, plus the Ionic blog. It implements the [Model Context Protocol](https://modelcontextprotocol.io){:target="_blank"}, so it works with Claude Code, Claude Desktop, Cursor, VS Code, and any other MCP client. !!! info "Unofficial server" This server is maintained by Capawesome and is not affiliated with or endorsed by Ionic or OutSystems. It serves the official Ionic Framework documentation, © the Ionic team and licensed under [Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0){:target="_blank"}. ## Endpoint The server is hosted by us and ready to use. No account, no token, no installation: ``` https://ionic-framework-mcp.capawesome.io/mcp ``` ## Setup Add the server to your MCP client and restart it. === "Claude Code" Run the following command in your project: ```bash claude mcp add --transport http ionic-framework https://ionic-framework-mcp.capawesome.io/mcp ``` Add `--scope user` to make the server available in every project instead of just the current one. === "Claude Desktop" Go to **Settings → Connectors → Add custom connector** and enter: - **Name**: `Ionic Framework` - **URL**: `https://ionic-framework-mcp.capawesome.io/mcp` The same connector works on [claude.ai](https://claude.ai){:target="_blank"}. === "Cursor" [![Install in Cursor](https://cursor.com/deeplink/mcp-install-dark.svg)](cursor://anysphere.cursor-deeplink/mcp/install?name=ionic-framework&config=eyJ0eXBlIjoiaHR0cCIsInVybCI6Imh0dHBzOi8vaW9uaWMtZnJhbWV3b3JrLW1jcC5jYXBhd2Vzb21lLmlvL21jcCJ9) Or add the following to `.cursor/mcp.json` in your project, or to `~/.cursor/mcp.json` to use the server everywhere: ```json { "mcpServers": { "ionic-framework": { "url": "https://ionic-framework-mcp.capawesome.io/mcp" } } } ``` === "VS Code" [Install in VS Code](https://insiders.vscode.dev/redirect/mcp/install?name=ionic-framework&config=%7B%22name%22%3A%22ionic-framework%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fionic-framework-mcp.capawesome.io%2Fmcp%22%7D){:target="_blank"} Or add the following to `.vscode/mcp.json` in your project: ```json { "servers": { "ionic-framework": { "type": "http", "url": "https://ionic-framework-mcp.capawesome.io/mcp" } } } ``` === "Windsurf" Add the server to `~/.codeium/windsurf/mcp_config.json`: ```json { "mcpServers": { "ionic-framework": { "serverUrl": "https://ionic-framework-mcp.capawesome.io/mcp" } } } ``` === "Zed" Add the server to your Zed `settings.json`: ```json { "context_servers": { "ionic-framework": { "url": "https://ionic-framework-mcp.capawesome.io/mcp" } } } ``` === "Any client" Clients that cannot connect to a remote server over HTTP can run the [`@capawesome/ionic-framework-mcp`](https://www.npmjs.com/package/@capawesome/ionic-framework-mcp){:target="_blank"} package, which proxies stdio to the hosted server: ```json { "mcpServers": { "ionic-framework": { "command": "npx", "args": ["-y", "@capawesome/ionic-framework-mcp"] } } } ``` Requires Node.js 22 or later. Once connected, ask your assistant something like *"Which events does `ion-modal` emit?"* or *"Show me an inline `ion-datetime` in React"* to check that the tools are available. ## Tools | Tool | Description | Parameters | | --- | --- | --- | | `search_docs` | Search the documentation by keyword. The starting point for any Ionic Framework question. | `query` (required), `section`, `version`, `limit` | | `get_doc_page` | Fetch a full documentation page returned by `search_docs` as Markdown. | `url` (required), `version` | | `list_components` | List Ionic Framework components with their API reference. | `query`, `version`, `limit` | | `get_component_usage` | Read the official usage examples for a component, per framework. | `component` (required), `example`, `framework`, `version` | | `list_blog_posts` | List recent posts from the Ionic blog. | — | A component page returned by `get_doc_page` carries the full API reference: properties, events, methods, CSS shadow parts, CSS custom properties, and slots. That is what an assistant needs to style a component correctly instead of inventing a class name. `get_component_usage` returns the official examples from the documentation. Pass `framework` as `angular`, `react`, `vue` or `javascript` to get the variant that matches your project. ## Versions The documentation is available for Ionic Framework **v9** (default) and **v8**. Pass the `version` parameter to target a specific version. Set it to the major version of `@ionic/core`, `@ionic/angular`, `@ionic/react` or `@ionic/vue` in your project, so the properties and events your assistant suggests exist in the release you ship. ## Documentation source The index is rebuilt daily from [`ionic-team/ionic-docs`](https://github.com/ionic-team/ionic-docs){:target="_blank"} at a pinned commit. The documentation content is © the Ionic team, licensed under [Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0){:target="_blank"}, converted from MDX to Markdown for delivery over MCP and otherwise served unmodified in substance. Blog excerpts come from the [Ionic blog](https://ionic.io/blog){:target="_blank"} and link to the original post. The server is open source at [`capawesome-team/ionic-framework-mcp`](https://github.com/capawesome-team/ionic-framework-mcp){:target="_blank"}. ## Rate limits The endpoint is limited to **100 requests per minute per IP**. Requests over the limit are answered with `429 Too Many Requests`; retry after a short wait. ## Privacy Your IP address is processed for rate limiting only. Queries and tool arguments are not stored, not logged beyond Cloudflare's standard edge logs, and never used for training. See our [privacy policy](https://capawesome.io/legal/privacy-policy/){:target="_blank"} for details. ## Related servers - [Capacitor MCP Server](capacitor.md) — the same for the Capacitor documentation, the official and community plugin list, and the Capacitor posts from the Ionic blog. - [Capawesome MCP Server](capawesome.md) — the Capawesome documentation and the Capawesome Cloud management API for Live Updates, Native Builds, and App Store Publishing.