--- title: Ionic Framework MCP Server for Your AI Assistant description: A free, hosted MCP server that gives your AI assistant the current Ionic Framework documentation, component API reference, and usage examples per framework. date: created: 2026-09-08 updated: 2026-09-08 authors: - robingenz categories: - Announcements - Capacitor - Ionic Framework links: - Ionic Framework MCP Server: ai/mcp/ionic-framework.md - Capacitor MCP Server: ai/mcp/capacitor.md --- # Ionic Framework MCP Server for Your AI Assistant Ask your AI assistant which events `ion-modal` emits and get the v9 answer, with a usage example for your framework. The [Ionic Framework MCP server](../../ai/mcp/ionic-framework.md) gives the assistant the current documentation for v9 and v8, including the component API reference and the official usage examples for Angular, React, Vue and vanilla JavaScript, instead of whatever was in its training data a release or two ago. It is a community project built and hosted by Capawesome, not an official Ionic product, and it is free to use with no account and no token.
Claude Code listing Ionic Framework components through the MCP server
**Key takeaways:** - The Ionic Framework MCP server runs at `https://ionic-framework-mcp.capawesome.io/mcp`. No account, no token, no installation. - It serves the Ionic Framework documentation for v9 and v8, the component API reference, the official usage examples for Angular, React, Vue and vanilla JavaScript, and the Ionic blog. - Five tools: `search_docs`, `get_doc_page`, `list_components`, `get_component_usage` and `list_blog_posts`. - A `version` parameter pins every answer to the major version your project installs. It defaults to `v9`. ## Why assistants get it wrong Because a model answers from a snapshot of the web, and your project is not on that snapshot. Ionic Framework v9 landed after most training sets were assembled, so an assistant that learned v8 writes v8 property names, v8 event names, and v8 CSS custom properties, and nothing fails loudly. A `::part()` selector aimed at a shadow part that the release does not have still compiles and renders, and changes nothing. Component APIs are where this hurts most. `ion-datetime` alone carries dozens of properties, several events, and a list of CSS shadow parts that moves between major versions. No model holds those tables accurately for two releases at once, and it has no way to know which release you installed. With the MCP server connected, the assistant fetches the page it needs on its own and answers from it, without you pasting documentation into the chat or your agent parsing HTML from a web fetch. ## What the server provides The server exposes five tools, and the assistant decides on its own which one a question needs: | Tool | Description | | --- | --- | | `search_docs` | Search the documentation by keyword. | | `get_doc_page` | Fetch a full documentation page as Markdown. | | `list_components` | List Ionic Framework components with their API reference. | | `get_component_usage` | Read the official usage examples for a component, per framework. | | `list_blog_posts` | List recent posts from the Ionic blog. | Ask *"Which events does `ion-modal` emit?"* and the assistant calls `search_docs`, then `get_doc_page` on the modal page. Back comes the v9 event table, `ionModalDidPresent` and `ionModalDidDismiss` included, with the exact names instead of plausible ones. 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 the table an assistant needs to style a component correctly instead of inventing a selector that looks plausible. `get_component_usage` returns the official usage examples from the documentation and takes a `framework` of `angular`, `react`, `vue` or `javascript`. An Angular project gets the Angular template, not a React snippet the model translated on the fly. `list_blog_posts` covers the Ionic blog, so release notes and announcements are in reach as well. ## Version-aware answers Every documentation tool accepts a `version` parameter, with `v9` as the default and `v8` as the alternative. Set it to the major version of `@ionic/core`, `@ionic/angular`, `@ionic/react` or `@ionic/vue` in your `package.json`, so the properties and events your assistant suggests exist in the release you ship. Put a line in your `AGENTS.md` or `CLAUDE.md` so the assistant sets it without being asked every time: ```markdown When using the Ionic Framework MCP server, always pass the `version` parameter that matches the major version installed in package.json. ``` ## Setup It is a remote HTTP server, so most clients need one line. In [Claude Code](https://www.anthropic.com/claude-code){:target="_blank"}: ```bash claude mcp add --transport http ionic-framework https://ionic-framework-mcp.capawesome.io/mcp ``` Cursor, VS Code, Claude Desktop, Windsurf and Zed each want their own config file, and clients that cannot speak HTTP can run `npx -y @capawesome/ionic-framework-mcp` as a stdio proxy to the hosted server. The [Ionic Framework MCP server](../../ai/mcp/ionic-framework.md) documentation has the exact snippet for each. Once connected, ask your assistant something like *"Show me an inline `ion-datetime` in React"* to check that the tools are available. ## How it works The server runs as a Cloudflare Worker in front of a search index that is rebuilt daily from [`ionic-team/ionic-docs`](https://github.com/ionic-team/ionic-docs){:target="_blank"} at a pinned commit, with the source MDX converted to Markdown so pages arrive as text a model can read instead of a mix of JSX components. A daily rebuild means a documentation change reaches your assistant the next day without you touching anything. The client package is open source at [`capawesome-team/ionic-framework-mcp`](https://github.com/capawesome-team/ionic-framework-mcp){:target="_blank"}, and its issue tracker is the place to report a wrong search result or a missing parameter. ## Unofficial, with attribution The server is maintained by Capawesome. It is not affiliated with or endorsed by Ionic or OutSystems, and its documentation page says so at the top. The documentation content is © the Ionic team and licensed under [Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0){:target="_blank"}. It comes from [`ionic-team/ionic-docs`](https://github.com/ionic-team/ionic-docs){: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. ## Capacitor Most Ionic Framework apps ship on Capacitor, and the same version problem applies there. The Ionic team is working on an official Capacitor MCP server, discussed in [ionic-team/capacitor#8555](https://github.com/ionic-team/capacitor/discussions/8555){:target="_blank"}. That discussion is the place to say what it should cover. Until it arrives, our [Capacitor MCP server](../../ai/mcp/capacitor.md) serves the Capacitor documentation on the same terms: free, no token, a `version` parameter, a daily rebuild. It is a stopgap so the community has something to point an assistant at today, and its documentation page will link the official server once that ships. ## Stay in the loop New Capawesome plugins, Cloud features and tools like this one go out in the newsletter first. [Subscribe to the Capawesome Newsletter](https://capawesome.io/newsletter/){ .md-button .md-button--primary } ## Final Thoughts Add the server to the assistant you already use, then pin the `version` parameter in your project rules and leave it there. One command removes a class of wrong answers, the ones that look right because they were right in the previous major. If you also ship with Capawesome, add the [Capawesome MCP server](../../ai/mcp/capawesome.md) next; it covers the Capawesome plugins and Capawesome Cloud, and with an API token it can act on your apps rather than only read documentation. For the wider picture of agent-driven development, read [How to Use AI Agents in Capacitor App Development](./how-to-use-ai-agents-in-capacitor-app-development.md). Questions and bug reports are welcome on the [Capawesome Discord server](https://discord.gg/VCXxSVjefW){:target="_blank"}, and the [Capawesome newsletter](https://capawesome.io/newsletter/){:target="_blank"} is where the next server gets announced.