Skip to content

Editor

The catalog, in your editor

A sidebar over all five tiers, one search across them, the real component previewed beside your code, and install into the project you are standing in. Plus the MCP server registered for you, which is the part that saves a config file.

Why this exists

Everything else the catalog ships starts by leaving the editor. The CLI is a terminal, the API is a fetch, the registry is a command you have to know exists, and browsing is a browser. That is three surfaces and a website, none of which are where the work happens.

This one is. It reads the same public API, installs with the same writer the CLI uses, and previews by framing the same chrome-less render the detail pages use for their width control — so nothing here is a second implementation that can disagree with the first.

Installing it

It works in VS Code, Cursor and Windsurf. It is not on the Marketplace yet, so it installs from a checkout — either as a development host, or as a real .vsix you keep:

terminal
git clone https://github.com/Vijetbhat6/hoverlab
cd hoverlab/packages/vscode
npm install

# either: run it in a development host
code .            # then F5

# or: build a .vsix and install it for good
npm pack ../cli --pack-destination .
npm install ./hoverlab-0.3.0.tgz
npx @vscode/vsce package
code --install-extension hoverlab-vscode-0.1.0.vsix

The npm pack step is there because the extension’s one runtime dependency is the CLI package in the same repository. A file: dependency installs as a symlink and vsce would package the link instead of the files, producing an extension that loads and then fails on its first command. Packing it first is the same shape npm will serve once the CLI is published, at which point the step disappears.

The extension is plain CommonJS with no bundler and no compile step. An extension asks for write access to your repository, and every line that ships should be readable without running a build first.

What it does

PartWhat you get
SidebarAll five tiers — effects, 54 primitives, 307 blocks, 126 pages, 32 templates — grouped by category, with the id on every row
SearchOne palette command across all five at once. Results come from the server, so they match on tags and descriptions the row does not show
PreviewThe actual component in a tab beside your code, framed from /preview/{level}/{id} — not a re-rendered copy that can drift from the source you are about to paste
InstallRuns the same writer as npx hoverlab add: a page brings the blocks it imports, and an existing file is never overwritten without being named first
MCPThe server contributed to agent mode, so there is no JSON file to find and edit. See below

The part worth installing it for

The MCP server has existed for a while, and using it meant hand-editing a config file in a location that differs per editor. That step is where most people who would have used it stopped.

VS Code lets an extension contribute an MCP server. So installing this one is configuring it: agent mode gets search_catalog, install_artifact, get_kit, match_design, init_template, get_design_dna and review_code over all five tiers, with nothing typed. It runs npx -y hoverlab mcp on demand rather than bundling a copy, because the tool definitions teach an agent what the catalog can do and a frozen copy would teach it last quarter’s answer.

The API this uses is recent, and Cursor and Windsurf track upstream VS Code on their own schedule. Where it is missing the extension detects that and everything else still works — and the server can always be added by hand with npx -y hoverlab mcp, which is what the MCP page documents.

Settings

SettingDefaultWhat it is for
hoverlab.apiUrlemptyRead the catalog from a preview deployment or http://localhost:3000. Needs a window reload — the origin is resolved once, when the catalog module first loads
hoverlab.frameworkautoOutput target for effects. auto reads it off your dependencies, so a Vue app gets an SFC. Primitives, blocks and pages are React and ignore it
hoverlab.registerMcpServertrueOffer the MCP server to agent mode

What it does not do

No account and no wall. The catalog is readable without a key and the extension does not change that. The licence commands exist because the Pro templates need one, and they write to the same ~/.hoverlab/config.json the CLI reads — one credential, whichever surface set it, so signing in once covers both.

Installing needs a workspace on disk. It writes through the filesystem, by way of the CLI’s own writer. Browsing and previewing work in a remote or virtual workspace; installing does not.

There is no builder inside it. /builder composes blocks into a page by dragging them around a canvas that renders every one of them live, and the composition is a shareable URL. A webview reimplementation would be a worse copy of something one click away, so the command opens the real one.

Something wrong or missing here? Browse the catalog — every page in it links back to the source it documents.