Agents

Three ways to let a coding agent add effects for you: a prompt, an MCP server and a Claude Code plugin.

Copy prompt

Every effect page has a Copy prompt button. It puts a ready-to-paste instruction on your clipboard that works in Claude Code, Cursor, Lovable, v0 or any other agent that can edit a React project. No setup is needed.

The prompt contains everything the agent needs to finish the job without browsing:

The exact shadcn install command for that effect.
The file path it creates, and whether it has dependencies beyond React.
The import line and a usage example.
The full props list with types, defaults and descriptions.
A link back to the effect page.

MCP server

The @hyperblur/mcp server lets any MCP client search the catalog and install effects itself. It needs Node.js 20 or later. For installs, the project must have a package.json and be set up for shadcn.

In Claude Code, add it with one command.

terminal

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

In Cursor, add this to .cursor/mcp.json in your project, or to ~/.cursor/mcp.json for all projects. In Claude Desktop, put the same block in claude_desktop_config.json under Settings, Developer, Edit Config, then restart the app.

mcp.json

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

Tools

Tool	Returns
search_effects	Matches for a keyword and an optional category. Each result has the slug, title, category, description and install command.
get_effect	The full reference for one effect: props table, usage example, import line, dependencies, install command and docs link.
get_effect_source	The component source and its target path, for writing the file by hand when shadcn is not available.
install_effect	Runs the shadcn add command in the project directory you give it, with an optional overwrite, and reports the output and the installed file.

Configuration

The server reads the catalog from the site set in HYPERBLUR_SITE_URL, which defaults to https://hyperblur.dev. Point it at your local site while developing Hyperblur itself.

terminal

claude mcp add hyperblur -e HYPERBLUR_SITE_URL=http://localhost:3000 -- npx -y @hyperblur/mcp

Claude Code plugin

The plugin bundles the MCP server and a skill that teaches Claude Code the workflow: search, read the props, install, wire the effect in, then report the file and the props worth tuning. Install it from the Hyperblur marketplace.

terminal

claude plugin install hyperblur --marketplace Hyperblur/Hyperblur

After that, ask for an effect in plain language, for example a glitching headline, and Claude Code picks the closest match and adds it. For manual setups, see Installation.

← Installation