Echo UI

echo-ui-mcp

一个适用于 Echo UI 的 MCP 服务。它通过 Echo UI 注册表提供十个工具，让编码 Agent 在使用组件编写代码前，查询组件的属性、用法、无障碍说明和反模式，检查所编写的代码，并查找和采用样式。

安装

所有客户端都运行同一条命令：

{
  "mcpServers": {
    "echo-ui": {
      "command": "npx",
      "args": ["-y", "echo-ui-mcp"]
    }
  }
}

• Claude Code： claude mcp add echo-ui -- npx -y echo-ui-mcp
• Codex： 将其添加到 ~/.codex/config.toml，配置节为 [mcp_servers.echo-ui]，并设置 command = "npx" 和 args = ["-y", "echo-ui-mcp"]。
• Cursor： 将上面的代码块添加到 .cursor/mcp.json。
• VS Code： 将其添加到 .vscode/mcp.json，放在 servers 下，而不是 mcpServers 下。
• 其他客户端： 任何能运行 stdio MCP 服务的客户端都使用同一条命令。

需要 Node.js 20 或更高版本。

托管服务

对于只能连接 Web 上服务的工具（ChatGPT、claude.ai、Lovable、v0、Bolt、Claude Design），同一组工具也运行在 https://mcp.echo-ui.com/mcp：无需安装，也无需账号。将其添加为自定义连接器（远程 MCP 服务），并填入该地址；或者：

• Claude Code： claude mcp add --transport http echo-ui https://mcp.echo-ui.com/mcp
• Cursor： { "mcpServers": { "echo-ui": { "url": "https://mcp.echo-ui.com/mcp" } } }

它读取与软件包相同的已发布文档，并且不会保留收到的任何内容：check_code 会读取你的代码，然后将其丢弃；请求日志只记录路径、状态和耗时，不会记录请求正文。托管该服务的 Cloudflare 会保留这些日志，日志中包含请求来源地址，最长 7 天（隐私政策）。check_code 最多接受 200,000 个字符；超过其处理所需大小的请求会在读取前被拒绝，并返回 413。单个地址每十秒最多可发送 300 个请求，每分钟可发送约 2 MB 的大段代码；请求每满 16 KB 按一次计数（任一限制超出时返回 429，并附带 Retry-After）。

在 Claude 和 ChatGPT 中使用 Echo 的技能

Echo 的插件将托管服务和 Echo 的三个技能（Echo UI、Design Eye 和 Style Fit）打包在一起安装：echo-ui.com/docs/plugin。在 ChatGPT 中，可从插件目录获取。在 Claude 的目录也列出该插件之前，可从文档安装：适用于 claude.ai 和 Claude Code 的 Claude ZIP，以及适用于 Codex 和 ChatGPT 桌面版的 Codex ZIP。

工具

工具	接收参数	返回内容
search_components	query?	某项工作对应的条目（如“一项设置开关”“确认删除”），或原样返回“Echo 暂无相关内容”，然后逐行列出每个匹配组件及其安装命令。返回内容与 CLI 的 which 相同。不提供查询时，返回所有组件。
get_component	name	完整记录：描述、安装命令、用法、组合方式、示例、无障碍、动效与声音、属性和反模式。接受 echo-hardware-button、hardware-button 或 HardwareButton。
get_tokens	—	颜色角色（--echo-*）、声音名称和动效名称。
get_examples	name	单个组件的示例。
get_accessibility	name?	Echo 使用者仍可能出错的规则。提供名称时，返回该组件自身的记录，说明测试过的内容和未测试的内容。
check_code	code、file?	Echo 对一段代码的检查结果：按照 npx echo-ui-cli check 的相同规则，针对默认主题检查，并为每项发现给出 Echo 风格的修复方法。适用于无法在终端中运行 CLI 的工具。
list_styles	name?	Echo 自有样式，每种样式均包含一行描述和指纹；提供名称时，返回该样式的完整信息。
fit_styles	profile、tolerance?、yours?	按产品在七个维度上的位置，对照 Echo 的样式和构建者自有样式（根据指纹）进行排序。计算方式与 npx echo-ui-cli style fit 相同。
check_style	style	检查 style.json 是否是 Echo 可应用的样式，结果与 npx echo-ui-cli style check 相同。
wear_style	name 或 style、files?	一个链接，可让 Echo 网站采用该样式（Echo 的完整样式之一，或使用其配色的自有样式）；还会返回将其应用到项目的命令，以及供没有终端的项目使用的主题 CSS 和 DESIGN.md。

连接后，服务还会发送说明：如何设置项目、接入主题和声音，以及 Agent 最常需要的修正（Base UI 的包是 @base-ui/react；Echo 组件通过 npx echo-ui-cli add 安装，而非 npm install）。

get_component 返回的内容与 Echo UI 文档中的组件页面及 llms-full.txt 中的条目相同，此外还会提供该组件随附的 版本、所需的 echo-ui-core 版本范围及其无障碍记录。这部分信息来自 echo-ui-cli 安装时使用的同一注册表，并使用相同的客户端，因此两者不会出现不一致。

配置

服务会读取两份已发布文档，并每隔五分钟重新读取：目录位于 https://echo-ui.com/r/catalog.json，注册表位于 https://echo-ui.com/e。 若要指向分支或本地构建，请设置以下任一项：

{
  "mcpServers": {
    "echo-ui": {
      "command": "npx",
      "args": ["-y", "echo-ui-mcp"],
      "env": {
        "ECHO_CATALOG": "/absolute/path/to/catalog.json",
        "ECHO_REGISTRY": "https://example.com/e"
      }
    }
  }
}

如果无法访问注册表，服务仍会根据目录返回结果，其中的版本号是构建该目录时使用的版本。若源文件无法读取，服务会继续使用已读取的副本响应，并每分钟重试一次。如果某个文件与注册表发布的哈希不匹配，服务会说明这一点，而不会返回结果。

许可证

MIT