Hyperblur

io.github.HyperblurPublished by GitHub account Hyperblurv0.2.0Updated Nov 8, 2026

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

VerifiedSTDIODesktop onlyDeveloper ToolsMedia & Design

Overview

AI-generated overview

Browses the Hyperblur catalog of copy-paste React effects, components and page blocks, and installs them into a project via the shadcn registry.

What you can do
  • List catalog categories with item counts and example titles
  • Search effects, components and blocks by keyword and optional category
  • Read an item's props, usage example, imports, dependencies and install command
  • Fetch an item's component source and target path to write the file by hand
  • Install an item into a project directory by running the shadcn add command
  • Expose the full catalog index as a resource and an add_effect prompt
When to use it
Useful when building React interfaces and you want an assistant to find suitable visual effects, micro interactions or page blocks and add them to the codebase, either through the shadcn registry or by writing the source file directly.
Requirements
Local process run through npx, requiring Node.js 20 or later. Network access to the catalog site; the HYPERBLUR_SITE_URL environment variable overrides the default site. Installing an item requires a React project with a package.json set up for shadcn (components.json).
Before you install
The install tool runs the shadcn add command in the given project directory and can overwrite existing files when the overwrite option is used, so review changes before accepting them. It fetches catalog data and component source from the configured site, which can be pointed at a local address.

Installation

In SourceWeft

  1. Open Hyperblur in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

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

Source: packages/mcp/README.md at commit 0e6b3f7

Tools

0
SourceWeft has not started this package in its sandbox yet, so its tools are not known.

Version history

1
  1. v0.2.0LatestNov 8, 2026

Score

50% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 days25 pts

    Keep the endpoint answering the MCP handshake; SourceWeft probes it every 30 days.

  • Auth declared10 pts

    Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.

  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts