ionic-framework-mcp

Ionic Framework MCP 服务

将 MCP 客户端连接到托管的 Ionic Framework MCP 服务，以获取最新的 Ionic Framework 文档、组件 API 参考、各框架的官方用法示例以及 Ionic 博客。

该服务由 Capawesome 托管，无需安装、无需账户，也无需令牌：

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

这是一个非官方服务，由 Capawesome 维护，与 Ionic 或 OutSystems 无关，也未获得其认可。该服务提供 Ionic 团队的官方 Ionic Framework 文档，© Ionic 团队，授权许可采用 Apache-2.0。

前置条件

1. 一个 MCP 客户端：Claude Code、Claude Desktop、Cursor、VS Code、Windsurf、Zed，或任何其他实现了 Model Context Protocol 的客户端。
2. 可访问 https://ionic-framework-mcp.capawesome.io 的网络。
3. 对于只能启动本地命令的客户端：Node.js 22 或更高版本。

Agent 行为

• 逐步引导。 一次引导用户完成一个步骤。不要一次提出多个无关问题。
• 先自动检测，再询问。 询问用户使用哪个客户端之前，先从项目中检测 MCP 客户端。
• 绝不索要凭据。 该服务无需账户和令牌。绝不提示用户提供凭据，也绝不在配置中写入 Authorization 标头。
• 传递匹配的文档版本和框架。 从 package.json 中读取 Ionic 包，并在每次调用时传递匹配的 version；读取用法示例时，还需传递项目的 framework。请参阅文档版本。

操作流程

步骤 1：检测 MCP 客户端

按以下顺序检查项目根目录，以检测客户端，而不是询问用户：

1. .mcp.json 或 .claude/ → Claude Code
2. .cursor/mcp.json 或 .cursor/ → Cursor
3. .vscode/mcp.json 或 .vscode/ → VS Code

如果以上路径均不存在，或有多个匹配项，请询问用户要配置哪个客户端。Claude Desktop、Windsurf 和 Zed 的配置保存在项目之外，因此无法通过这种方式检测。

步骤 2：添加服务

阅读 references/client-setup.md，并按照检测到的客户端对应部分进行设置。将服务注册为 ionic-framework。

步骤 3：重启客户端并验证

1. 告知用户重启 MCP 客户端，以便加载新服务。
2. 让客户端使用 modal 之类的查询运行 list_components，以验证服务。
3. 如果调用失败，请转到错误处理。

第 4 步：使用服务

连接后，在讨论 Ionic Framework（组件、API、主题、导航或 Ionic CLI）时，优先使用这些工具，而不是依赖模型知识或其他技能附带的参考文件。

工具	参数	用途
search_docs	query（必填）、section、version、limit	查找涵盖某个主题的页面。从这里开始。
get_doc_page	url（必填）、version	将完整页面读取为 Markdown，使用来自 search_docs 或 list_components 的 URL。
list_components	query、version、limit	查找适合某项 UI 的组件，以及它所使用的标签。
get_component_usage	component（必填）、example、framework、version	阅读组件的官方用法示例。
list_blog_posts	—	获取 Ionic 博客的近期文章，用于查看公告和发行说明。

请遵循以下规则：

• 为组件设置样式或连线前，先阅读组件页面。 get_doc_page 返回的组件页面包含完整的 API 参考，包括属性、事件、方法、CSS shadow 部件、CSS 自定义属性和插槽。阅读页面可以避免编造属性或类名。
• 首次调用 get_component_usage 时不传 example，先列出组件提供的示例，然后使用选定的 example ID 再次调用。
• 将 framework 设为 angular、react、vue 或 javascript，以获取与项目匹配的变体。不指定时会返回所有框架的内容。
• 当问题涉及文档的某个部分时，使用 section 缩小范围：components、angular、react、vue、theming、guides、updating 或 cli。
• 将 limit 设为最高 100，以通过 list_components 列出所有组件。
• 将其他主题转交给相应服务。 Capacitor、其插件以及原生 iOS 和 Android 项目属于 Capacitor MCP 服务；Capawesome 插件和 Capawesome Cloud 属于 Capawesome MCP 服务。请参阅相关技能。

文档版本

文档提供 v9（默认）和 v8 版本。

从 package.json 中读取 @ionic/core、@ionic/angular、@ionic/react 或 @ionic/vue 的版本，并按以下方式对应：

Ionic 包	version
9.x	v9
8.x	v8

每次调用 search_docs、get_doc_page、list_components 和 get_component_usage 时都要传入版本。否则，服务会返回 v9 文档，其中包含旧版本并不具备的属性和事件。

同一个 package.json 条目也能确定 get_component_usage 的 framework：@ionic/angular → angular、@ionic/react → react、@ionic/vue → vue，而单独使用 @ionic/core 时 → javascript。

错误处理

• 设置后未列出服务：客户端尚未重启。请重启客户端。在 Claude Code 中，运行 claude mcp list 以确认服务已注册。
• 429 Too Many Requests：此端点允许每个 IP 每分钟发送 100 次请求。稍等片刻后重试。
• 客户端无法连接到远程服务：它只会启动本地命令。请使用 references/client-setup.md 中所示的 @capawesome/ionic-framework-mcp stdio 代理。它要求 Node.js 22 或更高版本。
• list_components 中的组件没有描述：上游的某些组件没有描述。请改用 get_doc_page 阅读组件页面。
• get_component_usage 报告示例未知：响应会列出可用的示例 ID。使用其中一个再次调用该工具。
• 工具报告正在构建索引：服务每天重建索引。稍等片刻后重试。
• 回答提到了项目中不存在的属性：遗漏了 version 参数，或参数值不正确。请参阅文档版本。

相关技能

• capacitor-mcp — 适用于 Capacitor MCP 服务，涵盖 Capacitor、其插件以及本服务未涵盖的原生项目。
• capawesome-mcp — 适用于 Capawesome MCP 服务，涵盖 Capawesome 插件、Capawesome CLI 和 Capawesome Cloud。
• ionic-app-development — 适用于 Ionic Framework 的通用开发。
• ionic-expert — 适用于全面的 Ionic Framework 参考资料，涵盖组件、主题、导航和框架特定模式。
• ionic-angular、ionic-react、ionic-vue — 适用于 framework 参数对应的框架特定模式。