Ionic Framework Mcp

Organization

capawesome-team

ionic-framework-mcp

Guides the agent through connecting an MCP client to the hosted, unofficial Ionic Framework MCP server by Capawesome, which serves the official 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. Covers client detection, setup for Claude Code, Claude Desktop, Cursor, VS Code, Windsurf, Zed and stdio-only clients, documentation version selection, verification, and troubleshooting. Do not use for Capacitor plugins or native iOS and Android configuration, upgrading or migrating apps to a newer version, Capawesome Cloud, or MCP servers other than the Ionic Framework one.

Overview

Publisher	capawesome-team
Repository	`skills`
Skill name	`ionic-framework-mcp`
Stars	54
Forks	1
Bundled files	1
License	MIT
Links	Skill source Repository

Markdown instructions
A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.
Works with any LLM
AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.
1 bundled files
Scripts, templates, and references the model can read while it works. Files are read-only and never executed.
Open source
Published by capawesome-team on GitHub. Read the source before you install it.

Installation

Install the Ionic Framework Mcp AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
https://github.com/capawesome-team/skills/tree/main/skills/ionic-framework-mcp
Enable the skill in any chat where you want it available.

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/capawesome-team/skills.git /tmp/skills
mkdir -p .claude/skills
cp -r /tmp/skills/skills/ionic-framework-mcp .claude/skills/ionic-framework-mcp

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Ionic Framework Mcp in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Ionic Framework Mcp on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Ionic Framework Mcp is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed
The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.
Switch models mid-chat
Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Ionic Framework MCP Server

Connect an MCP client to the hosted Ionic Framework MCP server for the current Ionic Framework documentation, the component API reference, the official usage examples per framework, and the Ionic blog.

The server is hosted by Capawesome — there is nothing to install, no account, and no token:


https://ionic-framework-mcp.capawesome.io/mcp

This is an unofficial server. It 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.

Prerequisites

An MCP client: Claude Code, Claude Desktop, Cursor, VS Code, Windsurf, Zed, or any other client that implements the Model Context Protocol.
Network access to https://ionic-framework-mcp.capawesome.io.
For clients that only start local commands: Node.js 22 or later.

Agent Behavior

Guide step-by-step. Walk the user through the process one step at a time. Never present multiple unrelated questions at once.
Auto-detect before asking. Detect the MCP client from the project before asking the user which one they use.
Never ask for credentials. The server needs no account and no token. Never prompt for one and never write an Authorization header into the configuration.
Pass the matching documentation version and framework. Read the Ionic package from package.json and pass the matching version on every call, and the project's framework when reading usage examples. See Documentation Versions.

Procedures

Step 1: Detect the MCP Client

Detect the client instead of asking, by checking the project root in this order:

.mcp.json or .claude/ → Claude Code
.cursor/mcp.json or .cursor/ → Cursor
.vscode/mcp.json or .vscode/ → VS Code

If none of these exist, or if more than one matches, ask the user which client to configure. Claude Desktop, Windsurf, and Zed keep their configuration outside the project, so they cannot be detected this way.

Step 2: Add the Server

Read references/client-setup.md and apply the section for the detected client. Register the server under the name ionic-framework.

Step 3: Restart the Client and Verify

Tell the user to restart their MCP client so it picks up the new server.
Verify the server by asking the client to run list_components with a query such as modal.
If the call fails, go to Error Handling.

Step 4: Use the Server

Once connected, prefer these tools over model knowledge and over reference files bundled with other skills whenever the topic is the Ionic Framework — a component, its API, theming, navigation, or the Ionic CLI.

Tool	Parameters	Use for
`search_docs`	`query` (required), `section`, `version`, `limit`	Finding the page that covers a topic. Start here.
`get_doc_page`	`url` (required), `version`	Reading a full page as Markdown, using a URL from `search_docs` or `list_components`.
`list_components`	`query`, `version`, `limit`	Finding the component that fits a piece of UI, and the tag it is used under.
`get_component_usage`	`component` (required), `example`, `framework`, `version`	Reading the official usage examples of a component.
`list_blog_posts`	—	Recent posts from the Ionic blog, for announcements and release notes.

Apply these rules:

Read the component page before styling or wiring a component. A component page returned by get_doc_page carries the full API reference — properties, events, methods, CSS shadow parts, CSS custom properties, and slots. Reading it is what prevents an invented property or class name.
Call get_component_usage without an example first to list the examples a component offers, then call it again with the chosen example id.
Pass framework as angular, react, vue, or javascript to get the variant that matches the project. Without it, every framework is returned.
Narrow with section when the question belongs to one part of the documentation: components, angular, react, vue, theming, guides, updating, or cli.
Pass limit up to 100 to list_components to list every component.
Route other topics elsewhere. Capacitor, its plugins, and the native iOS and Android projects belong to the Capacitor MCP server; Capawesome plugins and Capawesome Cloud belong to the Capawesome MCP server. See Related Skills.

Documentation Versions

The documentation is available for v9 (the default) and v8.

Read the version of @ionic/core, @ionic/angular, @ionic/react, or @ionic/vue from package.json and map it:

Ionic package	`version`
`9.x`	`v9`
`8.x`	`v8`

Pass it on every search_docs, get_doc_page, list_components, and get_component_usage call. Without it the server answers for v9, which documents properties and events an older release does not have.

The same package.json entry gives the framework for get_component_usage: @ionic/angular → angular, @ionic/react → react, @ionic/vue → vue, and @ionic/core on its own → javascript.

Error Handling

Server not listed after setup: The client was not restarted. Restart it. In Claude Code, run claude mcp list to confirm the server is registered.
429 Too Many Requests: The endpoint allows 100 requests per minute per IP. Retry after a short wait.
The client cannot reach a remote server: It only starts local commands. Use the @capawesome/ionic-framework-mcp stdio proxy as shown in references/client-setup.md. It requires Node.js 22 or later.
A component has no description in list_components: Some components carry none upstream. Read the component page with get_doc_page instead.
get_component_usage reports an unknown example: The response lists the available example ids. Call the tool again with one of them.
A tool reports that the index is being built: The server rebuilds its index daily. Retry after a short wait.
Answers mention properties the project does not have: The version parameter was omitted or wrong. See Documentation Versions.

Related Skills

capacitor-mcp — For the Capacitor MCP server, which covers Capacitor, its plugins, and the native projects this server does not.
capawesome-mcp — For the Capawesome MCP server, which covers the Capawesome plugins, the Capawesome CLI, and Capawesome Cloud.
ionic-app-development — For general Ionic Framework development.
ionic-expert — For a broad Ionic Framework reference covering components, theming, navigation, and framework-specific patterns.
ionic-angular, ionic-react, ionic-vue — For the framework-specific patterns behind the framework parameter.

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

references/client-setup.md3 KB

Frequently asked questions

What does the Ionic Framework Mcp AI skill do?

Why use Ionic Framework Mcp on TypingMind?

Because you install it once and use it with any model. Ionic Framework Mcp is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Ionic Framework Mcp in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/capawesome-team/skills/tree/main/skills/ionic-framework-mcp. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Ionic Framework Mcp?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Ionic Framework Mcp?

As many as you like. As long as a model supports skills, you can use Ionic Framework Mcp with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Ionic Framework Mcp AI skill free?

Yes. It is published on GitHub by capawesome-team under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Control Ui E2e

openclaw

OrganizationPopular

Use when designing, testing, fixing, or extending the OpenClaw Control UI GUI, including UI stress-test galleries with feedback inputs, Vitest + Playwright end-to-end checks, mocked Gateway flows,…

Deslop

Diff-scoped AI-slop cleanup pass: strip comment slop, defensive-check slop, type-laundering, and style drift from the current branch diff before autoreview.

Discord Clawd

Use to talk to the Discord-backed OpenClaw agent/session; not for archive search.

Discrawl

Discord archive: search, sync freshness, DMs, summaries, TUI, repo/release work.

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

Ionic Framework MCP Server

Prerequisites

Agent Behavior

Procedures

Step 1: Detect the MCP Client

Step 2: Add the Server

Step 3: Restart the Client and Verify

Step 4: Use the Server

Documentation Versions

Error Handling

Related Skills

Bundled files

Frequently asked questions

Related AI Skills

Set up your own AI workspace now