ionic-framework-mcp 是什么？

Unofficial MCP server for the Ionic Framework documentation, components and blog. ionic-framework-mcp 是一个MCP Server，收录自官方 MCP Registry。支持 streamable-http、stdio 传输。本页提供产品介绍、配置教程、安装命令与适用场景，可复制到 Cursor、Claude Code、VS Code。

如何安装 ionic-framework-mcp？

推荐在 Claude Code（远程）中安装：1. 确保已安装 Claude Code CLI（终端可运行 claude 命令） 2. 点击下方「复制配置」，在终端粘贴并执行 3. 执行成功后重启 Claude Code 客户端命令示例：claude mcp add --transport http ionic-framework-mcp https://ionic-framework-mcp.capawesome.io/mcp

ionic-framework-mcp 适用于哪些场景？

ionic-framework-mcp 可用于需要该MCP Server能力的 AI Agent 工作流，建议结合官方文档与本页安装命令试用。

在 Cursor / Claude Code 中配置 ionic-framework-mcp 提示 connection closed 或 exit code 1？

通常由本地运行时环境缺失或命令路径未被 IDE 继承引起。排查步骤： 1. 确认已安装 Node.js 18+（支持 npx）或 Python 3.10+（支持 uvx）； 2. 尝试在终端运行 which npx 或 which uvx，把配置文件中的 "command" 字段改为完整绝对路径； 3. 修改 mcp.json 后，必须完全重载或重启客户端窗口。

提示 spawn npx ENOENT 或 command not found？

这是因为编辑器后台进程未加载完整的终端环境变量（PATH）。解决方案：在全局安装该包（如 npm install -g 包名），或在配置文件中将 command 设置为系统的实际路径（如 Windows 下的 C:\Program Files\nodejs\npx.cmd，Mac 下的 /usr/local/bin/npx）。

调用工具时响应超时或网络下载依赖失败？

国内环境下首次执行 npx 或拉取依赖时可能因网络受限而超时。建议将 npm 镜像源切换为国内高速镜像（npm config set registry https://registry.npmmirror.com），或在系统级开启开发代理工具。

ionic-framework-mcp MCP配置与使用教程

Q: 如何安装 ionic-framework-mcp？

推荐在 Claude Code（远程） 中安装：1. 确保已安装 Claude Code CLI（终端可运行 claude 命令） 2. 点击下方「复制配置」，在终端粘贴并执行 3. 执行成功后重启 Claude Code 客户端 命令示例：claude mcp add --transport http ionic-framework-mcp https://ionic-framework-mcp.capawesome.io/mcp

AgentHubMCP · Skill

ionic-framework-mcp MCP配置与使用教程 - AgentHub

按平台快速复制

选择你的平台查看安装方式

打开项目根目录下的 .cursor/mcp.json（没有就新建）
点击「复制配置」粘贴进去；若已有其他 MCP，只合并 mcpServers 里的本条目
将 env 中的 <占位符> 替换为真实密钥（见下方「环境变量」）
保存后按 Cmd+Shift+P（Windows：Ctrl+Shift+P）→ 输入 Reload Window 并执行

点击「复制配置」直接粘贴到客户端

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

配置教程

打开 ionic-framework-mcp 详情页，确认这是你需要的 MCP Server（来源官方 MCP Registry）。
按客户端选择 Cursor、Claude Code 或 VS Code，复制 JSON 配置或 CLI 命令。
将配置合并进 mcpServers，并把环境变量占位符替换为真实密钥。
重载窗口后，在 Agent 对话中调用该 MCP 提供的工具。

安装命令

以下安装命令与配置步骤已写入页面 HTML，搜索引擎与未启用 JavaScript 的浏览器均可直接读取。

Claude Code（远程）

确保已安装 Claude Code CLI（终端可运行 claude 命令）
点击下方「复制配置」，在终端粘贴并执行
执行成功后重启 Claude Code 客户端

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

Cursor — .cursor/mcp.json（远程）

打开项目根目录下的 .cursor/mcp.json（没有就新建）
点击「复制配置」粘贴进去；若已有其他 MCP，只合并 mcpServers 里的本条目
保存后按 Cmd+Shift+P（Windows：Ctrl+Shift+P）→ 输入 Reload Window 并执行

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

VS Code — .vscode/mcp.json（远程）

统一 Manifest

{
  "id": "io.capawesome/ionic-framework-mcp",
  "type": "mcp-server",
  "version": "0.0.1",
  "displayName": "ionic-framework-mcp",
  "description": "Unofficial MCP server for the Ionic Framework documentation, components and blog.",
  "repository": {
    "url": "https://github.com/capawesome-team/ionic-framework-mcp",
    "source": "github"
  },
  "homepage": "https://capawesome.io/",
  "distribution": {
    "packages": [
      {
        "registryType": "npm",
        "identifier": "@capawesome/ionic-framework-mcp",
        "version": "0.0.1",
        "transport": "stdio"
      }
    ],
    "remotes": [
      {
        "transport": "streamable-http",
        "url": "https://ionic-framework-mcp.capawesome.io/mcp"
      }
    ]
  },
  "dependencies": [],
  "installTargets": [
    "claude-code",
    "claude-desktop",
    "cursor",
    "vscode",
    "trae",
    "cherry-studio",
    "lingma",
    "windsurf",
    "cline",
    "workbuddy"
  ],
  "keywords": [],
  "provenance": {
    "origin": "official-mcp-registry",
    "originalId": "io.capawesome/ionic-framework-mcp",
    "originalUrl": "https://registry.modelcontextprotocol.io/v0.1/servers/io.capawesome%2Fionic-framework-mcp/versions/latest",
    "isOfficial": true,
    "status": "active"
  }
}

Claude Desktop — claude_desktop_config.json（远程）

打开 Claude Desktop 配置文件：macOS ~/Library/Application Support/Claude/claude_desktop_config.json；Windows %APPDATA%\Claude\claude_desktop_config.json
点击「复制配置」合并到 mcpServers
完全退出并重启 Claude Desktop

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

Trae — .trae/mcp.json（远程）

打开 Trae → 设置 → MCP，或编辑项目根目录 .trae/mcp.json（也可在全局 mcp.json 粘贴）
选择「手动添加 / 原始配置（JSON）」，点击「复制配置」粘贴；若已有其他 MCP，只合并 mcpServers 本条目
保存后选择支持 MCP 的智能体（如 Builder with MCP）并必要时重载窗口

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

Cherry Studio — MCP 设置（远程）

打开 Cherry Studio → 设置 → MCP 服务器
点击添加，选择从 JSON / 配置文件导入，或手动选 SSE/HTTP 并填 URL
点击「复制配置」粘贴 mcpServers 条目后启用该服务

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

通义灵码 — MCP 配置（远程）

通义灵码插件/IDE：头像 → 个人设置 → MCP 服务（需智能体模式，插件约 v2.5+）
点击「+」选择配置文件添加，或手工添加 SSE/HTTP 并填写服务地址
点击「复制配置」合并到 JSON；图标正常即连接成功

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

Cline — MCP Servers（远程）

在 VS Code 打开 Cline 面板 → 设置齿轮 → MCP Servers
点击「复制配置」，将 mcpServers 条目粘贴到 Cline 的 MCP 配置中
保存后 Cline 会自动重连；可在面板中确认工具列表

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

WorkBuddy — .workbuddy/mcp.json（远程）

打开 WorkBuddy：侧边栏「插件」→ MCP 服务器 → 配置 MCP；或编辑用户级 ~/.workbuddy/mcp.json / 项目级 .workbuddy/mcp.json
点击「复制配置」合并到 mcpServers（腾讯云代码助手 / WorkBuddy 通用）
保存后查看连接状态为绿色；必要时完全重启客户端

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

Windsurf — mcp_config.json（远程）

编辑全局配置 ~/.codeium/windsurf/mcp_config.json（Windows：%USERPROFILE%\.codeium\windsurf\mcp_config.json）
点击「复制配置」合并；远程 MCP 必须用 serverUrl 字段（不是 url）
保存后在 Windsurf Cascade 中刷新 MCP 连接

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

Claude Code（本地）

确保已安装 Claude Code CLI
复制下方命令，将 <占位符> 替换为真实环境变量值后，在终端执行
若下方列出了环境变量，请对照填写

claude mcp add ionic-framework-mcp -- npx -y @capawesome/ionic-framework-mcp

Cursor — .cursor/mcp.json（本地）

打开项目根目录下的 .cursor/mcp.json（没有就新建）
点击「复制配置」粘贴进去；若已有其他 MCP，只合并 mcpServers 里的本条目
将 env 中的 <占位符> 替换为真实密钥（见下方「环境变量」）
保存后按 Cmd+Shift+P（Windows：Ctrl+Shift+P）→ 输入 Reload Window 并执行

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

VS Code — .vscode/mcp.json（本地）

确保 VS Code 已安装 GitHub Copilot 扩展并支持 MCP
打开项目根目录下的 .vscode/mcp.json（没有就新建）
点击「复制配置」粘贴；若已有其他 MCP，只合并 mcpServers 里的本条目
将 env 中的 <占位符> 替换为真实密钥（见下方「环境变量」）
保存后重新加载 VS Code 窗口

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

Claude Desktop — claude_desktop_config.json（本地）

打开 Claude Desktop 的 claude_desktop_config.json（路径见远程指引）
点击「复制配置」合并到 mcpServers
将 env 中的 <占位符> 替换为真实密钥
完全退出并重启 Claude Desktop

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

Trae — .trae/mcp.json（本地）

打开 Trae → 设置 → MCP，或编辑 .trae/mcp.json / 全局 mcp.json
点击「复制配置」粘贴并合并 mcpServers
将 env 中的 <占位符> 替换为真实密钥
保存后重载 Trae 窗口

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

Cherry Studio — MCP 设置（本地）

打开 Cherry Studio → 设置 → MCP 服务器 → 添加（STDIO）
也可直接导入下方 JSON：点击「复制配置」合并到 mcpServers
将 env 中的 <占位符> 替换为真实密钥，并确保本机已安装 Node.js / uv（npx、uvx）
启用服务并查看工具列表是否加载成功

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

通义灵码 — MCP 配置（本地）

通义灵码：个人设置 → MCP 服务 → 「+」→ 手工添加（STDIO）或配置文件添加
点击「复制配置」合并 mcpServers；命令/参数/环境变量与 JSON 一致
将 env 中的 <占位符> 替换为真实密钥；本机需 Node.js 18+（npx）或已安装 uv（uvx）
确认服务状态为已连接后再在智能体对话中调用

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

Windsurf — mcp_config.json（本地）

编辑 ~/.codeium/windsurf/mcp_config.json
点击「复制配置」合并 mcpServers（本地 stdio 与 Cursor 格式相同）
将 env 中的 <占位符> 替换为真实密钥后保存并刷新 Cascade

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

Cline — MCP Servers（本地）

Cline 面板 → 设置 → MCP Servers
点击「复制配置」粘贴并合并
将 env 中的 <占位符> 替换为真实密钥后保存

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

WorkBuddy — .workbuddy/mcp.json（本地）

编辑 ~/.workbuddy/mcp.json（用户级）或项目目录 .workbuddy/mcp.json
也可在界面：插件 → MCP 服务器 → 配置 MCP，粘贴下方 JSON
将 env 中的 <占位符> 替换为真实密钥；Windows 下 command/脚本路径建议用绝对路径
保存并重启 WorkBuddy，确认连接器状态为绿色

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

ionic-framework-mcp MCP配置与使用教程

产品介绍

AgentHub Verified 可用性验证技术测试通过

按平台快速复制

配置教程

常见报错排查与运行避坑 (Troubleshooting)FAQ

免安装模拟调用 (Playground)

选型与决策建议（为什么选它？）

相关资源

MarkItDown MCP Server

飞书文档

高德地图

Bilibili

Puppeteer

Playwright

常搭配使用

polymarket-weather-trader

Tavily Search

API Gateway

Planning with files

继续逛 AgentHub