Editor
The catalog, in your editor
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:
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.vsixThe 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.
What it does
| Part | What you get |
|---|---|
| Sidebar | All five tiers — effects, 54 primitives, 307 blocks, 126 pages, 32 templates — grouped by category, with the id on every row |
| Search | One palette command across all five at once. Results come from the server, so they match on tags and descriptions the row does not show |
| Preview | The 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 |
| Install | Runs 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 |
| MCP | The 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.
npx -y hoverlab mcp, which is what the MCP page documents.Settings
| Setting | Default | What it is for |
|---|---|---|
hoverlab.apiUrl | empty | Read 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.framework | auto | Output 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.registerMcpServer | true | Offer 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.