Hyperblur

io.github.Hyperblur由 GitHub 账号 Hyperblur 发布v0.2.0更新于 Nov 8, 2026

Search, inspect and install copy-paste React effects, components and page blocks.

已验证STDIO仅桌面开发者工具媒体与设计

概览

AI 生成的概览

浏览 Hyperblur 的 React 特效、组件与页面区块目录，并通过 shadcn registry 将其安装到项目中。

可以做什么
  • 列出目录中的分类，含条目数量与三个示例标题
  • 按关键词和可选分类搜索特效、组件与区块
  • 查看条目的属性表、用法示例、导入语句、依赖与安装命令
  • 获取组件源码与目标路径，以便手动写入文件
  • 在指定项目目录中执行 shadcn 添加命令完成安装
  • 以资源形式提供完整目录索引，并提供 add_effect 提示
适用场景
适合在开发 React 界面时，让助手查找合适的视觉特效、微交互或页面区块，并通过 shadcn registry 或直接写入源码的方式加入代码库。
运行要求
通过 npx 在本机运行的进程，需要 Node.js 20 或更高版本。需要访问目录站点的网络；可用环境变量 HYPERBLUR_SITE_URL 覆盖默认站点。安装条目需要带有 package.json 且已配置 shadcn（components.json）的 React 项目。
安装前请注意
安装工具会在指定项目目录中执行 shadcn 添加命令，使用覆盖选项时可能覆盖已有文件，接受前请检查改动。它会从所配置的站点获取目录数据与组件源码，该地址可指向本地服务。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Hyperblur，将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Desktop only，通过 STDIO。 STDIO 服务会启动本地进程，因此需要 SourceWeft 桌面宿主。

其他 MCP 客户端

参照 仓库 中的启动说明。

README

@hyperblur/mcp

An MCP server for Hyperblur, the catalog of copy-paste React visual effects. The catalog covers effects, components, micro interactions and page blocks. It lets MCP clients such as Claude Code, Cursor and Claude Desktop browse the catalog by category, search it, read an item's props and usage, fetch its source, and install it into a project through the shadcn registry.

Requirements

  • Node.js 20 or later
  • For install_effect: a React project with a package.json, set up for shadcn (components.json)

Setup

Claude Code

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

Cursor

Add to .cursor/mcp.json in your project, or ~/.cursor/mcp.json for all projects:

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

Claude Desktop

Add to claude_desktop_config.json (Settings > Developer > Edit Config), then restart the app:

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

Configuration

VariableDefaultDescription
HYPERBLUR_SITE_URLhttps://hyperblur.devSite that serves the catalog (/r/index.json) and registry items (/r/<slug>.json). Point it at http://localhost:3000 when working on the site locally.

Pass it through the env field of your client config, or with claude mcp add hyperblur -e HYPERBLUR_SITE_URL=http://localhost:3000 -- npx -y @hyperblur/mcp.

The catalog index is cached in memory for five minutes.

Tools

ToolPurpose
list_categoriesEvery category in the catalog with its item count and three example titles.
search_effectsSearch by keyword and optional category. The category can be any category present in the catalog (see list_categories); an unknown one returns an error that lists the available categories. Returns slug, title, category, description and install command for each match.
get_effectFull reference for one item: props table, usage example, import line, dependencies, install command and docs link.
get_effect_sourceThe component source and its target path, for writing the file by hand when shadcn is not available.
install_effectRuns npx shadcn@latest add <registry-url> --yes in the given project directory (--overwrite optional) and reports the output and installed file.

It also exposes the resource hyperblur://catalog (the full catalog index as JSON) and the prompt add_effect, which walks through looking up and installing an effect, component or block by slug.

Development

sh
npm installnpm run buildnpm testHYPERBLUR_SITE_URL=http://localhost:3000 npm start

License

MIT

来源：packages/mcp/README.md，提交 0e6b3f7

工具

0
SourceWeft 尚未在沙箱中启动过该软件包，因此其工具未知。

版本历史

1
  1. v0.2.0最新Nov 8, 2026

评分

已满足适用检查项的 50%

该评分衡量此收录条目的完整程度，依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价，也不表示服务器安全或当前可用：可连通性是带日期的检查结果，评分也不包含安装量或用户评价。

  • 近 30 天内可连通25 分

    请保持端点能够响应 MCP 握手；SourceWeft 每 30 天探测一次。

  • 已声明认证方式10 分

    请在注册中心条目中声明凭据请求头，或保持端点能够响应探测，以便判定其认证方式。

  • 已列出工具15 分

    请让服务器在无凭据时响应 tools/list，或发布可在沙箱中无凭据启动的软件包。

  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分