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 分