mcpField
H
Hyperblur

Hyperblur

Local
hyperblur.devDeveloper Tools0Updated 4d ago
RepositoryVisit website

About Hyperblur

Hyperblur's MCP server connects AI clients to a catalog of copy-paste React effects, components, micro interactions, and page blocks. It supports searching and inspecting catalog entries, then installing them through the shadcn registry or retrieving source for manual use.

Key features

  1. 01Browse catalog categories
  2. 02Search by keyword and category
  3. 03Inspect props and usage examples
  4. 04Fetch component source and target path
  5. 05Install through the shadcn registry

Use cases

  1. 01Finding a React effect for a project
  2. 02Checking component props and dependencies
  3. 03Installing a catalog item in a shadcn project

MCP support

Exposes catalog browsing, search, detail, source, and installation tools to MCP clients. It also provides the `hyperblur://catalog` resource and the `add_effect` prompt.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "hyperblur": {
      "command": "npx",
      "args": [
        "-y",
        "@hyperblur/mcp"
      ],
      "env": {
        "HYPERBLUR_SITE_URL": "<HYPERBLUR_SITE_URL>"
      }
    }
  }
}
Run commandnpx -y @hyperblur/mcp
Environment variables to set
HYPERBLUR_SITE_URLSite that serves the catalog. Defaults to https://hyperblur.dev.

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@hyperblur/mcp0.2.0

Tools

5

Saved tool list · updated 5d ago

ParameterTypeRequiredDescription
limitintegerNoMaximum number of effects to return (1-50, default 10).
querystringNoWords to look for, e.g. "glitch", "retro crt", "hover tilt", "text reveal". Omit to list everything.
categorystringNoRestrict results to one category of the catalog, e.g. text, hover or micro. Call list_categories for the current list; an unknown value returns an error listing the available categories.

Details

From the project 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
claude mcp add hyperblur -- npx -y @hyperblur/mcp
Cursor

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

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

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

{
  "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

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

License

MIT

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.