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 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.
A short screen recording on the original post shows Claude Code listing Ionic Framework components through the 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_usageandlist_blog_posts. - A
versionparameter pins every answer to the major version your project installs. It defaults tov9.
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:
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:
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 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 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, 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. It comes from ionic-team/ionic-docs, converted from MDX to Markdown for delivery over MCP and otherwise served unmodified in substance. Blog excerpts come from the Ionic blog 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. That discussion is the place to say what it should cover.
Until it arrives, our Capacitor MCP server 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.
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 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. Questions and bug reports are welcome on the Capawesome Discord server, and the Capawesome newsletter is where the next server gets announced.
Originally published at capawesome.io.
Top comments (0)