Hyperblur

@hyperblur/mcp

适用于 Hyperblur 的 MCP 服务。Hyperblur 是一个可复制粘贴的 React 视觉效果目录，涵盖效果、组件、微交互和页面区块。它让 Claude Code、Cursor 和 Claude Desktop 等 MCP 客户端能够按类别浏览目录、搜索内容、查看条目的 props 和用法、获取源代码，并通过 shadcn registry 将其安装到项目中。

要求

• Node.js 20 或更高版本
• 使用 install_effect 时：一个包含 package.json 且已配置 shadcn（components.json）的 React 项目

设置

Claude Code

claude mcp add hyperblur -- npx -y @hyperblur/mcp

Cursor

添加到项目中的 .cursor/mcp.json，或添加到 ~/.cursor/mcp.json 以供所有项目使用：

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

Claude Desktop

添加到 claude_desktop_config.json（Settings > Developer > Edit Config），然后重启应用：

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

配置

变量	默认值	说明
HYPERBLUR_SITE_URL	https://hyperblur.dev	提供目录（/r/index.json）和 registry 条目（/r/<slug>.json）的网站。在本地开发该网站时，将其指向 http://localhost:3000。

通过客户端配置的 env 字段传入，或使用 claude mcp add hyperblur -e HYPERBLUR_SITE_URL=http://localhost:3000 -- npx -y @hyperblur/mcp。

目录索引会缓存在内存中 5 分钟。

工具

工具	用途
list_categories	列出目录中的所有类别，以及每个类别的条目数和三个示例标题。
search_effects	按关键词和可选类别搜索。类别可以是目录中的任意类别（参见 list_categories）；如果类别无效，则会返回错误并列出可用类别。每个匹配项会返回 slug、标题、类别、说明和安装命令。
get_effect	单个条目的完整参考信息：props 表、用法示例、导入语句、依赖项、安装命令和文档链接。
get_effect_source	组件源代码及其目标路径；shadcn 不可用时，可据此手动创建文件。
install_effect	在给定的项目目录中运行 npx shadcn@latest add <registry-url> --yes（可选添加 --overwrite），并报告输出和已安装文件。

它还提供资源 hyperblur://catalog（完整目录索引的 JSON）和提示词 add_effect，用于引导用户按 slug 查找并安装效果、组件或区块。

开发

npm install
npm run build
npm test
HYPERBLUR_SITE_URL=http://localhost:3000 npm start

许可证

MIT