Vibr MCP

Vibr MCP ist ein kleiner Server, den Sie auf Ihrem Computer ausführen. Damit kann ein Agent wie Claude Code, Cursor oder Claude Desktop mit Vibr arbeiten: Ihre Prototypen auflisten, Screens bauen und überarbeiten, eine Figma-Datei importieren, Ihre Themes als Design-Tokens lesen und einen Prototyp in Ihr Projekt exportieren.

Ihre Bibliothek und Ihre Schlüssel liegen in Ihrem Browser, deshalb geschieht die Arbeit in einem Vibr-Tab, den Sie verbinden. Der Agent fragt an, und der Tab erledigt die Arbeit mit Ihrem Designsystem und Ihrem Modellschlüssel, genauso wie wenn Sie selbst eine Anfrage eingeben.

Einrichten

Sie brauchen Node 20 oder neuer. Fügen Sie den Server in Claude Code einmal hinzu:

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

Andere MCP-Clients übernehmen denselben Befehl in ihrer Einstellungsdatei:

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

Einen Tab verbinden

1. Bitten Sie Ihren Agenten, sich mit Vibr zu verbinden. Er gibt Ihnen einen Link zu einer Seite, die der Server auf Ihrem eigenen Computer anzeigt.
2. Öffnen Sie den Link in dem Browser, in dem Sie Vibr verwenden, und wählen Sie Open Vibr. Vibr öffnet sich in einem eigenen Fenster, mit Ihrer Bibliothek und Ihrem Schlüssel. Wenn Vibr noch keinen Schlüssel hat, fügen Sie dort einen hinzu.
3. Vibr fragt, ob das MCP auf diesem Computer in diesem Fenster arbeiten darf. Wählen Sie Zulassen.
4. Das Fenster zeigt unten MCP verbunden an. Wählen Sie Trennen, um die Verbindung jederzeit zu beenden.

Lassen Sie die Seite des Servers und das Vibr-Fenster geöffnet, während der Agent arbeitet. Jeder Link gilt für eine Sitzung des Servers; wenn der Server neu startet, bitten Sie um einen neuen Link.

Was es kann

• Auflisten und lesen. Ihre gespeicherten Prototypen, den Code und die Anfragen eines Prototyps, die Erwähnungen Ihrer Bibliothek und die Einstellungen des Tabs (Anbieter, Modell, Designsystem, nie Ihr Schlüssel).
• Bauen. Eine Anfrage durch Planen, Bauen, Prüfen, Review und Reparieren laufen lassen, als neuen Prototyp oder als Überarbeitung eines bestehenden, und das Ergebnis in Ihrer Bibliothek speichern. Es verwendet Ihren Schlüssel und kostet daher so viel wie dieselbe Anfrage in Vibr.
• Aus Figma importieren. Eine .vibr-figma.json-Datei aus dem Plugin Send to Vibr importieren und ihre Frames als verlinkte Screens bauen. Siehe Aus Figma importieren.
• Themes lesen. Ein Theme als CSS Custom Properties oder Design-Tokens, mit seinen hellen und dunklen Rollen.
• Exportieren. Einen Prototyp in einen Ordner schreiben, als eine Seite, als verlinkten Flow oder als React-Quellcode. Es ersetzt nie eine Datei, außer Sie sagen es, und schreibt nie außerhalb des Ordners, den Sie angeben.

Datenschutz und Sicherheit

• Ihre Schlüssel verlassen den Tab nie. Der Server sieht sie nie, und Anfragen gehen wie immer vom Tab an Ihren Modellanbieter.
• Der Server lauscht nur auf 127.0.0.1. Er übergibt Arbeit über seine eigene Seite in Ihrem Browser an Vibr, sodass vibr.art nie eine Verbindung zu Ihrem Computer herstellt.
• Vibr nimmt Arbeit nur von der Seite an, die es geöffnet hat, nur mit dem zufälligen Einmalcode im Link des Servers und erst, nachdem Sie Zulassen gewählt haben.
• Inhalte aus Ihrer Bibliothek erreichen den Agenten als Daten: Der Text eines Prototyps oder eine importierte Datei kann Ihrem Agenten keine Anweisungen geben, es sei denn, Ihr Agent behandelt sie so. Prüfen Sie daher, was er baut, wie jeden Entwurf.

Mehr unter Schlüssel, Datenschutz und Speicher.

Einstellungen

• VIBR_MCP_PORT: der Port auf Ihrem Computer (4517, sofern er nicht belegt ist).
• VIBR_MCP_APP: die Vibr-Seite, die der Link öffnet (https://vibr.art/, sofern Sie Vibr nicht selbst betreiben).

Fehlerbehebung

• Vibr verbindet sich nie. Prüfen Sie, ob Sie im Vibr-Fenster Zulassen gewählt haben und ob die Seite des Servers noch geöffnet ist. Wenn der Browser das Fenster blockiert hat, erlauben Sie Pop-ups für diese Seite und wählen Sie erneut Open Vibr.
• Der Agent meldet, dass kein Tab verbunden ist. Der Server wurde neu gestartet oder ein Fenster geschlossen. Bitten Sie um einen neuen Link und öffnen Sie ihn.
• Ein Build schlägt fehl. Öffnen Sie das Vibr-Fenster: Der Durchlauf zeigt jeden Schritt, genau wie wenn Sie eine Anfrage eingeben.