Ionic Framework Mcp

io.capawesome由 capawesome.io 發布官方發布者v0.0.1更新於 Oct 24, 2026

Unofficial MCP server for the Ionic Framework documentation, components and blog.

發布方自己的服務:Capacitor Mcp

已驗證Streamable HTTP可網頁執行知識與記憶開發者工具

概覽

AI 產生的概覽

非官方的 MCP 伺服器,讓助理取得 Ionic Framework v9/v8 文件、元件 API 參考、用法範例與部落格內容。

可以做什麼
  • 以關鍵字搜尋 Ionic Framework 官方文件,可依章節與版本篩選
  • 以 Markdown 形式完整讀取單一文件頁面
  • 列出 UI 元件及其標籤名稱、描述與連結,可依關鍵字過濾
  • 讀取某個元件在 Angular、React、Vue 或原生 JavaScript 下的官方用法範例
  • 列出 Ionic 部落格最近 10 篇文章的標題、日期、標籤與摘要
適用情境
適合在開發或除錯 Ionic Framework 應用時,讓助理依據最新的 v9 或 v8 文件與實際元件用法範例回答,而不是憑空猜測 API。也適合查詢 Ionic 部落格中的近期發行、公告與棄用資訊。
執行需求
透過 streamable HTTP 連線遠端 MCP 端點,不需帳號、權杖或安裝。無法連線遠端 HTTP 的用戶端可用 npx 執行 npm 套件作為 stdio 代理,需 Node.js 22 以上版本。需要能連上託管端點;每個 IP 每分鐘限 100 次請求。
安裝前請注意
非官方專案,與 Ionic 或 OutSystems 無隸屬關係,也未獲其背書。查詢內容與工具參數會傳送到第三方託管服務;README 表示 IP 位址僅用於限流,查詢不會被儲存或用於訓練。工具僅讀取文件,不會寫入或變更資料。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Ionic Framework Mcp,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Web executable,透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式,或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南,先向你展示發布者、端點和登入方式,經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/io.capawesome%2Fionic-framework-mcp/install.md,並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前,先告訴我它的發布者、端點和登入方式,等我確認。不要把 API 金鑰寫進命令或我會提交的檔案;問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。

{
  "mcpServers": {
    "ionic-framework": {
      "type": "http",
      "url": "https://ionic-framework-mcp.capawesome.io/mcp"
    }
  }
}

README

Ionic Framework MCP Server

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.

Endpoint

The server is hosted and ready to use. No account, no token, no installation:

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

Installation

Claude Code

bash
claude mcp add --transport http ionic-framework https://ionic-framework-mcp.capawesome.io/mcp

Claude Desktop / Claude.ai

Go to Settings → Connectors → Add custom connector and enter:

  • Name: Ionic Framework
  • URL: https://ionic-framework-mcp.capawesome.io/mcp

Cursor

[Install in Cursor]

Or add .cursor/mcp.json to your project:

json
{  "mcpServers": {    "ionic-framework": {      "url": "https://ionic-framework-mcp.capawesome.io/mcp"    }  }}

VS Code

Install in VS Code

Or add .vscode/mcp.json to your project:

json
{  "servers": {    "ionic-framework": {      "type": "http",      "url": "https://ionic-framework-mcp.capawesome.io/mcp"    }  }}

Windsurf

Add the server to ~/.codeium/windsurf/mcp_config.json:

json
{  "mcpServers": {    "ionic-framework": {      "serverUrl": "https://ionic-framework-mcp.capawesome.io/mcp"    }  }}

Zed

Add the server to your Zed settings.json:

json
{  "context_servers": {    "ionic-framework": {      "url": "https://ionic-framework-mcp.capawesome.io/mcp"    }  }}

Any client via npx

Clients that cannot connect to a remote server over HTTP can run this package, which proxies stdio to the hosted server:

json
{  "mcpServers": {    "ionic-framework": {      "command": "npx",      "args": ["-y", "@capawesome/ionic-framework-mcp"]    }  }}

Requires Node.js 22 or later.

Tools

ToolPurposeParameters
search_docsSearch the documentation by keyword. Start here for any Ionic Framework question.query (required), section, version, limit
get_doc_pageRead a full documentation page returned by search_docs.url (required), version
list_componentsList Ionic Framework components with their API reference.query, version, limit
get_component_usageRead usage examples for a component, per framework.component (required), example, framework, version
list_blog_postsList recent posts from the Ionic blog.—

Versions

The documentation is available for Ionic Framework v9 (default) and v8. Pass the version parameter to target a specific version.

Rate limits

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.

Privacy

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. See the Privacy Policy for details.

Related

Attribution

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.

Development

bash
npm installnpm run buildnpm test

Set IONIC_FRAMEWORK_MCP_URL to point the proxy at a local server instead of the hosted one:

bash
IONIC_FRAMEWORK_MCP_URL=http://localhost:8787/mcp node dist/index.js

Release

Releases are managed by release-please. Merging its release pull request tags the version, publishes the package to npm and then publishes server.json to the MCP Registry. The version in server.json is bumped by release-please together with package.json, so it never has to be edited by hand. To publish to the registry manually, install mcp-publisher, run mcp-publisher login dns --domain=capawesome.io --private-key=<key> with the Ed25519 private key from the password manager and then mcp-publisher publish.

License

See LICENSE.

來源:README.md,提交 d3f3a06

工具

5

search_docs

Search Ionic Framework documentation

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).

輸入參數limitquery必填sectionversion

get_doc_page

Read a documentation page

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.

輸入參數url必填version

list_components

List Ionic Framework components

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.

輸入參數limitqueryversion

get_component_usage

Read component usage examples

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.

輸入參數exampleversioncomponent必填framework

list_blog_posts

List recent blog posts

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.

無需輸入參數。

版本歷史

1
  1. v0.0.1最新Sep 16, 2026

評分

已滿足適用檢查項的 100%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分

其他 Capawesome 整合