Your agent doesn’t paste components. It installs them.
One command puts the whole catalog in your editor as 11 tools — 3 of which write files into your project. Ask for a pricing section and it arrives at a path in your repo, with its dependencies named, not in a code fence you have to copy out of.
No API key. No account. Works with Claude Code, Cursor, Windsurf and any other MCP client.
Add a pricing section with a monthly/yearly toggle.
search_catalog{ query: "pricing monthly yearly toggle" }Searched 307 blocks and 126 pages.
block · pricing-tiers — Three-Plan Pricing Toggle
Three plans with a monthly/yearly switch, yearly prices derived from the monthly figure so the two can never disagree.
install_artifactwrites files{ id: "pricing-tiers" }wrote components/pricing-tiers.tsx
still to install: lucide-react
get_design_dna{ id: "pricing-tiers" }Returned the design system as this section uses it —
colour roles for both themes, radius, spacing, type, motion.
Anything written next matches instead of inventing a palette.
Good. Now scaffold the rest of the marketing site around it.
init_templatewrites files{ id: "saas-starter", directory: "./site" }Scaffolded SaaS Starter into ./site —
49 files, 8 routes, 30 blocks.
cd site && npm install && npm run dev
Nothing was pasted. The section and the project are in the repo, as source you own.
Most catalog servers can only read
Agent access is table stakes in this category now — several vendors ship an MCP server and one of them charges for it. The difference is not how many tools each has. It is whether the conversation ends with a file.
Read-only agent access
- Search the catalog, view an item, get back the code — or a command for you to run.
- The agent is a search box with a better interface. The paste, the path and the imports are still yours.
- A page of composed sections has to be assembled by hand, one id at a time, guessing what it depends on.
- Nothing to call when the ask is “scaffold the whole thing”.
This one writes
install_artifactandinstall_effectdetect the framework, pick the paths and report what landed.- A page brings the blocks it is composed of, so what lands compiles instead of leaving broken imports.
init_templatescaffolds a whole runnable project — routing, layout, tokens, every page and block.match_designtakes a Figma frame or a screenshot and ranks the catalog against it, region by region.
We keep a dated, per-vendor record of what each competitor’s agent access actually offers — including the rows where they beat us.
One minute, and nothing to sign up for
There is no key to paste and no account to make. Register the server, restart the client, and the tools are there.
Claude Code
One command in the project you want it in.
claude mcp add hoverlab -- npx -y hoverlab mcpCursor, Windsurf, anything else
The same server, as a config-file entry. It talks stdio, so every MCP client speaks it.
{
"mcpServers": {
"hoverlab": {
"command": "npx",
"args": ["-y", "hoverlab", "mcp"]
}
}
}Or skip the config file entirely
The VS Code extension contributes this same server to the editor, so agent mode finds it with nothing registered by hand — and adds a sidebar over all five tiers for the times you would rather browse than ask.
11 tools. 3 of them write files.
Reaching every tier: 1,126 effects, 307 blocks, 126 pages and 32 templates, plus the design system behind them.
search_effectsreadsSearch the effects catalog
Hover states, loaders, entrances — anything that is one element rather than one section. Returns metadata; the code comes from the next two.
get_effectreadsRead one effect as source
Returns ready-to-paste code in the framework you ask for, plus the caveats for that target. For showing the user, or adapting it yourself.
install_effectwrites filesWrite an effect into the project
Detects the framework from the project, picks the directory, writes the files, and reports the paths. Recolour and retime it on the way in.
list_categoriesreadsList the category vocabulary
The exact spellings a search will accept. Cheap, and it stops an agent guessing a category that does not exist.
search_catalogreadsSearch all five tiers at once
Effects, primitives, blocks, pages and templates in one call. The right first move when the ask is bigger than one element.
get_kitreadsGet everything for one kind of product
A curated answer to "build me a storefront" — the template, the screens and the sections, as a ready-made list of ids rather than a search the agent has to assemble.
install_artifactwrites filesWrite a block or a page into the project
A page brings the blocks it is composed of, so what lands compiles instead of leaving broken imports. Returns the paths and any packages still to install.
match_designreadsRank the catalog against a design
A Figma frame, a screenshot or a written spec, one region at a time. Unlike search, designer vocabulary is translated and partial matches still rank.
init_templatewrites filesScaffold a whole runnable project
Routing, layout, theme tokens, every page and every block, into a new directory. Refuses a non-empty directory unless forced.
get_design_dnareadsHand over the design system
Tokens for both themes, radius, spacing, type and motion rules. Called before the agent writes UI of its own, so it does not invent a second palette.
review_codereadsCheck UI code for design defects
Accessibility, right-to-left, reduced motion and overflow, on code the agent has not saved yet, on named files, or on what changed in git. Runs on your machine, reads files only, uploads nothing. The agent calls it before saying the work is done.
This list is generated from the server the npm package publishes, and a test fails the build if the two ever disagree.
Pair it with Figma
Register Figma’s own Dev Mode server next to this one and the agent reads a design from one and builds it from the other. Select a frame, describe it in the words a designer would use, and match_design translates them into catalog vocabulary and ranks partial matches by how much of the description they actually cover.
The honest limit: a static frame shows layout, so this matches blocks and pages. Hover and motion are invisible in a mockup — ask for those in words and the effect tools take over.
claude mcp add --transport http figma http://127.0.0.1:3845/mcp
claude mcp add hoverlab -- npx -y hoverlab mcpGoing the other way — code to Figma — is the design system export: your palette as W3C design tokens, one file per mode, which is what Figma’s variable import reads.
Questions people actually ask
Do I need an account or an API key?
No. The server talks to the same public, unauthenticated API the website does. There is nothing to sign in to and nothing to configure beyond the one line above.
Is it free?
The server is free and so is everything it can read. The Pro licence covers what you do with the source commercially, not whether an agent may fetch it — the gates are listed on the pricing page, and agent access is not one of them.
What does it actually write into my project?
Plain React and Tailwind source, at paths it picks from your project's layout, plus a list of any npm packages you still need. It is the same output as the CLI. Nothing is imported from us at runtime, so nothing in your app breaks when we deploy.
Will it overwrite my files?
Not unless it is told to. Every writing tool refuses an existing file and every scaffold refuses a non-empty directory, until force is passed — which is a decision the agent has to make out loud rather than a default.
Does it work with something other than Next.js?
Effects convert to CSS, Tailwind, React, Vue, Svelte and more on the way out. Blocks and pages are React and ship as written; templates are Next.js projects. The frameworks page prints the real generated output for each target.
How is this different from the shadcn registry?
They are two rails to the same catalog and both are supported — the registry exposes it to the shadcn CLI under the @hoverlab namespace, the MCP server exposes it to an agent as tools it can call mid-conversation, including matching a design and scaffolding a whole project.
Can the agent see a Figma design?
Yes, paired with Figma's own Dev Mode MCP server. It reads a selected frame's structure from Figma, calls match_design once per region, installs what matches and restyles it to your tokens. A pasted screenshot works too.
What if the agent picks the wrong component?
What lands is source in your repo, so it is edited or deleted like anything else — there is no lock-in to undo. Every artifact is also browsable on the site, so you can name the id yourself instead of leaving the choice to a search.
Give your agent the catalog
One line, and the next thing you ask for arrives as a file.
claude mcp add hoverlab -- npx -y hoverlab mcp