Vibr MCP

Vibr MCP is a small server you run on your computer. It lets an agent such as Claude Code, Cursor or Claude Desktop work with Vibr: list your prototypes, build and revise screens, import a Figma file, read your themes as design tokens, and export a prototype into your project.

Your library and keys live in your browser, so the work happens in a Vibr tab you connect. The agent asks, and the tab does the work with your design system and your model key, the same way it does when you type a request yourself.

Set up

You need Node 20 or later. In Claude Code, add the server once:

claude mcp add vibr -- npx -y vibr-mcp

Other MCP clients take the same command in their settings file:

{ "mcpServers": { "vibr": { "command": "npx", "args": ["-y", "vibr-mcp"] } } }

Connect a tab

1. Ask your agent to connect to Vibr. It gives you a link to a page the server shows on your own computer.
2. Open the link in the browser where you use Vibr, and select Open Vibr. Vibr opens in its own window, with your library and key. If Vibr has no key yet, add one there.
3. Vibr asks whether the MCP on this computer may work in that window. Select Allow.
4. The window shows MCP connected at the bottom. Select Disconnect to end it at any time.

Keep the server's page and the Vibr window open while the agent works. Each link works for one session of the server; when it restarts, ask for a new link.

What it can do

• List and read. Your saved prototypes, a prototype's code and requests, your library's mentions, and what the tab is set to (provider, model, design system, never your key).
• Build. Run a request through Plan, Build, Check, Review and Repair, as a new prototype or a revision of one, and save it to your library. It uses your key, so it costs what the same request costs in Vibr.
• Import from Figma. Import a .vibr-figma.json file from the Send to Vibr plugin and build its frames as linked screens. See Import from Figma.
• Read themes. A theme as CSS custom properties or design tokens, with its light and dark roles.
• Export. Write a prototype into a folder as one page, a linked flow, or its React source. It never replaces a file unless you say so, and never writes outside the folder you name.

Privacy and safety

• Your keys never leave the tab. The server never sees them, and requests go from the tab to your model provider, as they always do.
• The server listens on 127.0.0.1 only. It passes work to Vibr through its own page in your browser, so vibr.art never connects to your computer.
• Vibr takes work only from the page that opened it, only with the random one-time code in the server's link, and only after you select Allow.
• Content from your library reaches the agent as data: a prototype's text or an imported file can't give your agent instructions unless your agent treats it that way, so review what it builds as you would any draft.

More in Keys, privacy and storage.

Settings

• VIBR_MCP_PORT: the port on your computer (4517 unless it's taken).
• VIBR_MCP_APP: the Vibr page the link opens (https://vibr.art/ unless you run Vibr yourself).

Troubleshooting

• Vibr never connects. Check that you selected Allow in the Vibr window and that the server's page is still open. If the browser blocked the window, allow pop-ups for that page and select Open Vibr again.
• The agent says no tab is connected. The server restarted, or a window was closed. Ask for a new link and open it.
• A build fails. Open the Vibr window: the run shows each step, the same as when you type a request.