Provides access to Ionic Framework documentation, including component API references, usage examples for Angular, React, Vue, and vanilla JavaScript, and recent Ionic blog posts.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Ionic Framework MCP Server Show me how to use the Ionic toast component in React"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Unofficial MCP server for the official Ionic Framework documentation. It gives AI assistants the current documentation for Ionic Framework v9 and v8 — including the component API reference and the usage examples for Angular, React, Vue and vanilla JavaScript — plus the Ionic blog. Not affiliated with or endorsed by Ionic or OutSystems.
Maintained by Capawesome.
The server is hosted and ready to use. No account, no token, no installation:
https://ionic-framework-mcp.capawesome.io/mcp
https://ionic-framework-mcp.capawesome.io/mcpRelated MCP server: Angular MCP Server
claude mcp add --transport http ionic-framework https://ionic-framework-mcp.capawesome.io/mcpGo to Settings → Connectors → Add custom connector and enter:
Name: Ionic Framework
URL: https://ionic-framework-mcp.capawesome.io/mcp
Or add .cursor/mcp.json to your project:
{
"mcpServers": {
"ionic-framework": {
"url": "https://ionic-framework-mcp.capawesome.io/mcp"
}
}
}Or add .vscode/mcp.json to your project:
{
"servers": {
"ionic-framework": {
"type": "http",
"url": "https://ionic-framework-mcp.capawesome.io/mcp"
}
}
}Add the server to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"ionic-framework": {
"serverUrl": "https://ionic-framework-mcp.capawesome.io/mcp"
}
}
}Add the server to your Zed settings.json:
{
"context_servers": {
"ionic-framework": {
"url": "https://ionic-framework-mcp.capawesome.io/mcp"
}
}
}Clients that cannot connect to a remote server over HTTP can run this package, which proxies stdio to the hosted server:
{
"mcpServers": {
"ionic-framework": {
"command": "npx",
"args": ["-y", "@capawesome/ionic-framework-mcp"]
}
}
}Requires Node.js 22 or later.
Tool | Purpose | Parameters |
| Search the documentation by keyword. Start here for any Ionic Framework question. |
|
| Read a full documentation page returned by |
|
| List Ionic Framework components with their API reference. |
|
| Read usage examples for a component, per framework. |
|
| List recent posts from the Ionic blog. | — |
The documentation is available for Ionic Framework v9 (default) and v8. Pass the version parameter to target a specific version.
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.
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.
Capacitor MCP Server — the same for the Capacitor documentation, plugin list and blog.
Capawesome MCP Server — the official MCP server for the Capawesome documentation and the Capawesome Cloud management API.
Capawesome Cloud Live Updates — ship JavaScript, HTML and CSS changes to your app without an app store review.
Capawesome Cloud Native Builds — build native iOS and Android apps in the cloud, without a Mac.
Capawesome Cloud App Store Publishing — submit builds to the Apple App Store and Google Play Store.
The documentation content is © the Ionic team, licensed under Apache-2.0 and sourced from ionic-team/ionic-docs. It is converted from MDX to Markdown for delivery over MCP and otherwise served unmodified in substance. The component API reference comes from the @ionic/docs package (MIT). Blog excerpts come from the Ionic blog and link to the original post.
See NOTICE for the full attribution.
npm install
npm run build
npm testSet IONIC_FRAMEWORK_MCP_URL to point the proxy at a local server instead of the hosted one:
IONIC_FRAMEWORK_MCP_URL=http://localhost:8787/mcp node dist/index.jsSee LICENSE.
Read the official usage examples of one Ionic Framework component, as published on its documentation page. Use this before writing markup for a component to see how it is actually used in Angular, React, Vue or vanilla JavaScript — the template, the component class and the styles that belong together. Call it without an example first to see which examples the component offers. Returns the examples of the component with the frameworks each provides, or, when an example is given, its code per framework as fenced code blocks — one section per framework, and one block per file where an example spans several files. Do not use this for the component's API reference: its properties, events, methods, CSS shadow parts, CSS custom properties and slots are on the documentation page, which get_doc_page returns.
| Name | Required | Description | Default |
|---|---|---|---|
| example | No | The id of one example, e.g. "basic" or the nested "presentation/date". Defaults to listing the examples of the component instead of returning code. Optional. | |
| version | No | Optional. Ionic Framework docs version. Defaults to v9. Match the major version of @ionic/core (or @ionic/angular, @ionic/react, @ionic/vue) in the user's package.json. | |
| component | Yes | The component to read the examples of, e.g. "button". The tag is accepted too, e.g. "ion-button". | |
| framework | No | Optional. The framework to return the example for, e.g. "react". Match the framework of the user's project. Defaults to returning every framework the example provides. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already mark it read-only and non-destructive; the description adds the behavior that matters for calling: two call modes (list examples vs. return code), the return structure (fenced code blocks, one section per framework, one block per file for multi-file examples), and framework filtering. This is substantive disclosure beyond the readOnlyHint.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Five sentences with no filler, logically ordered: what → when → how → return format → explicit exclusion. The purpose is front-loaded in the first sentence, and every clause earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Without an output schema, the description carries the burden of explaining return values and does so in detail (frameworks per example, fenced blocks, multi-file handling). Combined with 100% schema coverage and readOnly annotations, an agent has everything needed to call this correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and each parameter is individually well-described, so the baseline is 3. The description adds above-baseline value by wiring the parameters into a workflow — 'Call it without an `example` first to see which examples the component offers' — and by clarifying what the returned code contains (template, component class, styles).
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource — 'Read the official usage examples of one Ionic Framework component' — and explicitly differentiates from a sibling: 'Do not use this for the component's API reference... which get_doc_page returns.' An agent can tell exactly what this does and what it is not for.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives explicit when-to-use ('Use this before writing markup for a component'), an explicit workflow ('Call it without an `example` first'), and an explicit when-not with the named alternative ('Do not use this for the component's API reference... which get_doc_page returns'). Nothing is left to inference.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Read the full markdown of a single page of the official Ionic Framework documentation. Use this after search_docs to read a page end to end before writing markup against a component, because search snippets are deliberately short and regularly omit required setup steps. A component page carries the complete API reference of that component: its properties with types and defaults, events, methods, CSS shadow parts, CSS custom properties and slots. Returns the page title, its URL, the documentation version and the complete page markdown including code samples. Do not use this to find a page: it needs an exact URL or path, so run search_docs first. Do not use it for pages outside ionicframework.com — Capacitor and native plugins are covered by the Capacitor MCP server at https://capacitor-mcp.capawesome.io/mcp, Capawesome plugins and Capawesome Cloud by the Capawesome MCP server at https://mcp.capawesome.io/mcp.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | The page URL or site-relative path, e.g. "https://ionicframework.com/docs/api/button", "api/button", "angular/navigation" or "v8/api/button". An anchor is ignored; the whole page is returned. | |
| version | No | Optional. Ionic Framework docs version. Defaults to v9. Match the major version of @ionic/core (or @ionic/angular, @ionic/react, @ionic/vue) in the user's package.json. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The readOnlyHint and openWorldHint annotations already indicate safety, and the description goes further by specifying that the whole page is returned, anchors are ignored, and the output includes page title, URL, version, and markdown. This provides concrete behavioral expectations beyond the annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is front-loaded with the primary purpose and every sentence serves a distinct role: purpose, usage relationship, output details, and exclusion rules. It is slightly verbose but not redundant, and each sentence adds necessary guidance.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Despite having no output schema, the description explicitly lists what will be returned, making the tool fully understandable. It also covers version defaults, URL formats, and exclusion boundaries, so an agent has all necessary context to invoke it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already covers required and optional parameters, but the description adds meaningful context: URL examples, the fact that anchors are ignored, and that the version defaults to v9 and should match the user's package.json. This goes well beyond the raw schema information.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool reads the full markdown of a single page of the official Ionic Framework documentation. It also distinguishes itself from sibling tools by explicitly saying to use it after search_docs to read a page rather than to find one.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit when-to-use guidance: after search_docs and before writing markup against a component. It also gives clear when-not-to-use instructions, including not to find a page and not to use it for pages outside ionicframework.com.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
List the 10 most recent posts from the official Ionic blog, newest first. Use this when the question is about what is new — recent releases, announcements or deprecations. The blog covers both Ionic Framework and Capacitor. Returns title, date, tags, url and excerpt per post. Do not use this to answer a documentation question: the feed only carries the newest posts, so search the documentation with search_docs instead.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already establish readOnly/openWorld/non-destructive behavior. The description adds meaningful context beyond annotations: the 10-post limit, the fact that the blog covers both Ionic Framework and Capacitor, and that the feed only carries the newest posts. It does not go into depth on rate limits or pagination, but that is minor given the safety profile is already covered.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Four sentences with no wasted words. The main action is front-loaded, followed by usage context, returned fields, and an explicit when-not-to-use with an alternative. Every sentence adds distinct value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter read-only tool with no output schema, the description is fully adequate: it explains what the tool does, when to use it, what it returns, and when to avoid it. An agent can invoke it correctly without any additional information.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
There are zero parameters and the schema coverage is 100%, so the schema leaves nothing to clarify. The description adds no parameter details, but none are needed; per the rubric a zero-parameter tool earns a baseline of 4.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific action ('List'), a precise resource ('the 10 most recent posts from the official Ionic blog'), and an ordering ('newest first'). It clearly differentiates from sibling documentation tools by framing this as a blog/announcement feed rather than a documentation resource.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is explicitly conditioned on 'when the question is about what is new — recent releases, announcements or deprecations.' It also names a specific exclusion (documentation questions) and directs to the alternative sibling 'search_docs'.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
List the UI components of Ionic Framework, optionally filtered by a keyword. Use this to find the component that fits a piece of UI before building it by hand, and to learn the custom element name it is used under. Use limit 100 to list every component. Returns tag, description and url per component, where url is the documentation page carrying its full API reference. Do not use this to read a component's API: call get_doc_page with the returned url. Do not use it for Capacitor plugins or native capabilities, which are covered by the Capacitor MCP server at https://capacitor-mcp.capawesome.io/mcp.
| Name | Required | Description | Default |
|---|---|---|---|
| limit | No | The maximum number of items to return, e.g. 5. Defaults to 25, maximum 100. | |
| query | No | A free-text filter matching the tag or the description, e.g. "modal". Defaults to no filter. Optional. | |
| version | No | Optional. Ionic Framework docs version. Defaults to v9. Match the major version of @ionic/core (or @ionic/angular, @ionic/react, @ionic/vue) in the user's package.json. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Beyond the readOnlyHint annotation, the description reveals the exact return fields (tag, description, url) and the semantic of url as the doc page, and clarifies that limit 100 retrieves every component.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is tight, direct, and logically organized into a purpose, a use case, return format, and explicit exclusions—no fluff or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Even without an output schema, the description sufficiently explains what will be returned and how it links to the documentation, making it fully actionable in context.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Though schema descriptions already cover all parameters, the description adds actionable guidance like 'Use limit 100 to list every component' and the instruction to match the version to the user's package.json, enriching parameter understanding.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states it lists Ionic Framework UI components with optional keyword filtering, and explicitly distinguishes from sibling tools by directing API reads to get_doc_page and Capacitor plugins to another server.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides explicit when-to-use guidance ('find the component that fits a piece of UI... learn the custom element name') and when-not-to-use guidance ('Do not use this to read a component's API... Do not use it for Capacitor plugins').
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Search the official Ionic Framework documentation from ionicframework.com by keyword. Use this first for any question about Ionic Framework itself — a UI component and its properties, events and CSS custom properties, theming and layout, the Angular, React and Vue integrations, navigation and routing, the Ionic CLI, or upgrading to a newer major version — because guessing a component property or a CSS variable produces markup that silently does nothing. Returns the best matching page sections with title, url, snippet, section and version, plus the parentTitle and parentUrl of the page a section belongs to. The same results are attached as structured content. Do not use this to read a whole page (call get_doc_page with a url from these results), for Capacitor core, Capacitor plugins or native iOS and Android configuration (use the Capacitor MCP server at https://capacitor-mcp.capawesome.io/mcp instead), or for Capawesome plugins and Capawesome Cloud services such as Live Updates, Native Builds and App Store Publishing (use the Capawesome MCP server at https://mcp.capawesome.io/mcp instead).
| Name | Required | Description | Default |
|---|---|---|---|
| limit | No | The maximum number of items to return, e.g. 5. Defaults to 10, maximum 25. | |
| query | Yes | The search terms, e.g. "modal dismiss" or "dark mode css variables". Plain keywords work best; no search operators are supported. | |
| section | No | Restrict the search to one part of the documentation, e.g. "components" for the component reference, "theming" for colors, CSS variables and layout, or "angular" for the Angular integration. Defaults to searching every section. | |
| version | No | Optional. Ionic Framework docs version. Defaults to v9. Match the major version of @ionic/core (or @ionic/angular, @ionic/react, @ionic/vue) in the user's package.json. |
| Name | Required | Description |
|---|---|---|
| results | Yes |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already mark this readOnlyHint=true and destructiveHint=false, and the description adds meaningful behavioral context beyond that: it returns best-matching page sections with specific fields, attaches results as structured content, and warns that guessing component properties or CSS variables produces silently broken markup. It also clarifies that the tool does not read whole pages, setting correct expectations for the result granularity.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is dense but every clause earns its place: purpose, scope, return shape, structured-content note, and routing to alternatives are all included. The first sentence immediately states the verb and resource, and the exclusions are batched at the end. No filler or repetition of the schema is present.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's search behavior, rich schema, output schema, and sibling tools, the description covers everything an agent needs: what it searches, what it returns, how results should be used, and when to select a different MCP server or sibling tool. No critical operational or contextual gap remains.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the baseline is 3. The description adds value by explaining the query behavior ('by keyword', 'best matching page sections') and explicitly directing agents to use returned urls with get_doc_page. It also reinforces that plain keywords work best and the tool returns structured content, which helps an agent form better queries beyond what the schema alone states.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific action ('Search the official Ionic Framework documentation from ionicframework.com by keyword') and enumerates the exact topics it covers, from UI components to migrations. It also clearly distinguishes itself from get_doc_page by specifying that search_docs returns page sections rather than whole pages. This is a precise, resource-specific purpose statement.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly says to use this tool first for any Ionic Framework question, and gives concrete exclusion cases: use get_doc_page for reading a full page, the Capacitor MCP server for Capacitor/native concerns, and the Capawesome MCP server for Capawesome Cloud services. This is model guidance with named alternatives and clear routing conditions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v0.0.1get_component_usageget_doc_pagelist_blog_postslist_componentssearch_docsEach tool has a clearly scoped responsibility: discover components, read usage examples, search docs, read full pages, and fetch blog posts. Descriptions explicitly direct the agent to the correct tool for adjacent tasks, so there is little chance of misselection.
All tool names follow a consistent snake_case verb_noun pattern: list_*, get_*, search_*. The names are predictable and readable, with only minor variation in object naming that does not hurt consistency.
Five tools is a well-scoped size for a documentation-focused MCP server. Each tool earns its place and covers a distinct user need without redundancy or obvious missing pieces.
The tool set covers the full documentation workflow: discovering components, searching documentation, reading full pages with API references, and inspecting framework-specific usage. Search results and component listings provide URLs that feed directly into get_doc_page, so there are no dead ends.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
The documentation, as a tool your agent can call: 950+ AI-dev guides. Search + fetch tools.
@latest documentation and code examples to 9000+ libraries for LLMs and AI code editors in a singl…
Get up-to-date, version-specific documentation and code examples from official sources directly in…
Versioned documentation registry and semantic search for AI tools and coding assistants.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/capawesome-team/ionic-framework-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
