Vibr MCP

Vibr MCP is een kleine server die je op je computer draait. Daarmee kan een agent zoals Claude Code, Cursor of Claude Desktop met Vibr werken: je prototypes opsommen, schermen bouwen en aanpassen, een Figma-bestand importeren, je thema's lezen als designtokens en een prototype naar je project exporteren.

Je bibliotheek en sleutels staan in je browser, dus het werk gebeurt in een Vibr-tabblad dat je verbindt. De agent vraagt, en het tabblad doet het werk met je designsysteem en je modelsleutel, net zoals wanneer je zelf een verzoek typt.

Instellen

Je hebt Node 20 of nieuwer nodig. Voeg de server in Claude Code één keer toe:

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

Andere MCP-clients nemen hetzelfde commando op in hun instellingenbestand:

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

Een tabblad verbinden

1. Vraag je agent om verbinding te maken met Vibr. Die geeft je een link naar een pagina die de server op je eigen computer toont.
2. Open de link in de browser waarin je Vibr gebruikt en kies Open Vibr. Vibr opent in een eigen venster, met je bibliotheek en sleutel. Heeft Vibr nog geen sleutel, voeg er daar dan een toe.
3. Vibr vraagt of de MCP op deze computer in dat venster mag werken. Kies Toestaan.
4. Het venster toont onderaan MCP verbonden. Kies Verbreken om de verbinding op elk moment te beëindigen.

Houd de pagina van de server en het Vibr-venster open terwijl de agent werkt. Elke link werkt voor één sessie van de server; als de server opnieuw start, vraag je om een nieuwe link.

Wat het kan

• Opsommen en lezen. Je opgeslagen prototypes, de code en verzoeken van een prototype, de vermeldingen in je bibliotheek en waarop het tabblad is ingesteld (provider, model, designsysteem, nooit je sleutel).
• Bouwen. Een verzoek door Plannen, Bouwen, Controleren, Beoordelen en Repareren laten gaan, als nieuw prototype of als revisie van een bestaand prototype, en het opslaan in je bibliotheek. Het gebruikt je sleutel, dus het kost wat hetzelfde verzoek in Vibr kost.
• Importeren uit Figma. Een .vibr-figma.json-bestand uit de plug-in Send to Vibr importeren en de frames ervan bouwen als gelinkte schermen. Zie Importeren uit Figma.
• Thema's lezen. Een thema als CSS custom properties of designtokens, met de lichte en donkere rollen ervan.
• Exporteren. Een prototype naar een map schrijven als één pagina, een gelinkte flow of de React-broncode. Het vervangt nooit een bestand tenzij je dat zegt, en schrijft nooit buiten de map die je opgeeft.

Privacy en veiligheid

• Je sleutels verlaten het tabblad nooit. De server ziet ze nooit, en verzoeken gaan zoals altijd van het tabblad naar je modelprovider.
• De server luistert alleen op 127.0.0.1. Hij geeft werk door aan Vibr via zijn eigen pagina in je browser, dus vibr.art maakt nooit verbinding met je computer.
• Vibr neemt alleen werk aan van de pagina die het heeft geopend, alleen met de willekeurige eenmalige code in de link van de server, en pas nadat je Toestaan hebt gekozen.
• Inhoud uit je bibliotheek bereikt de agent als data: de tekst van een prototype of een geïmporteerd bestand kan je agent geen instructies geven, tenzij je agent die zo behandelt. Controleer dus wat hij bouwt zoals je elk concept zou controleren.

Meer in Sleutels, privacy en opslag.

Instellingen

• VIBR_MCP_PORT: de poort op je computer (4517, tenzij die bezet is).
• VIBR_MCP_APP: de Vibr-pagina die de link opent (https://vibr.art/, tenzij je Vibr zelf draait).

Problemen oplossen

• Vibr maakt nooit verbinding. Controleer of je Toestaan hebt gekozen in het Vibr-venster en of de pagina van de server nog open is. Als de browser het venster heeft geblokkeerd, sta dan pop-ups toe voor die pagina en kies opnieuw Open Vibr.
• De agent zegt dat er geen tabblad verbonden is. De server is opnieuw gestart, of een venster is gesloten. Vraag om een nieuwe link en open die.
• Een build mislukt. Open het Vibr-venster: de run toont elke stap, net als wanneer je een verzoek typt.