Hyperblur

@hyperblur/mcp

コピーして貼り付けて使える React のビジュアルエフェクト集、Hyperblur 用の MCP サーバーです。このカタログには、エフェクト、コンポーネント、マイクロインタラクション、ページブロックが収録されています。Claude Code、Cursor、Claude Desktop などの MCP クライアントから、カテゴリ別にカタログを閲覧したり、検索したり、アイテムの props や使い方を確認したり、ソースを取得したり、shadcn レジストリ経由でプロジェクトにインストールしたりできます。

要件

• 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）とレジストリアイテム（/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	カタログ内のすべてのカテゴリと、各カテゴリのアイテム数およびタイトルの例を3件返します。
search_effects	キーワードと任意のカテゴリで検索します。カテゴリにはカタログ内の任意のカテゴリを指定できます（list_categories を参照）。不明なカテゴリを指定すると、利用可能なカテゴリを列挙したエラーを返します。一致した各項目について、slug、タイトル、カテゴリ、説明、インストールコマンドを返します。
get_effect	1つのアイテムの完全なリファレンスを返します。props の表、使用例、import 行、依存関係、インストールコマンド、ドキュメントへのリンクが含まれます。
get_effect_source	コンポーネントのソースと保存先パスを返します。shadcn が利用できない場合に、手動でファイルを書き込むために使用します。
install_effect	指定されたプロジェクトディレクトリで npx shadcn@latest add <registry-url> --yes を実行し、出力とインストールされたファイルを報告します（--overwrite は任意です）。

また、リソース hyperblur://catalog（完全なカタログインデックスの JSON）と、slug を使ってエフェクト、コンポーネント、ブロックを検索してインストールする手順を案内するプロンプト add_effect も公開します。

開発

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

ライセンス

MIT