Création
Vibr MCP
Utilisez Vibr depuis Claude Code ou n'importe quel client MCP : listez et construisez des prototypes, importez depuis Figma, lisez les thèmes sous forme de tokens et exportez dans votre projet.
Vibr MCP est un petit serveur que vous exécutez sur votre ordinateur. Il permet à un agent comme Claude Code, Cursor ou Claude Desktop de travailler avec Vibr : lister vos prototypes, construire et modifier des écrans, importer un fichier Figma, lire vos thèmes sous forme de design tokens et exporter un prototype dans votre projet.
Votre bibliothèque et vos clés se trouvent dans votre navigateur : le travail se fait donc dans un onglet Vibr que vous connectez. L'agent demande, et l'onglet fait le travail avec votre design system et votre clé de modèle, comme lorsque vous saisissez vous-même une demande.
Configurer
Il vous faut Node 20 ou une version ultérieure. Dans Claude Code, ajoutez le serveur une fois :
claude mcp add vibr -- npx -y vibr-mcp
Les autres clients MCP prennent la même commande dans leur fichier de paramètres :
{ "mcpServers": { "vibr": { "command": "npx", "args": ["-y", "vibr-mcp"] } } }
Connecter un onglet
- Demandez à votre agent de se connecter à Vibr. Il vous donne un lien vers une page que le serveur affiche sur votre propre ordinateur.
- Ouvrez le lien dans le navigateur où vous utilisez Vibr, puis sélectionnez Open Vibr. Vibr s'ouvre dans sa propre fenêtre, avec votre bibliothèque et votre clé. Si Vibr n'a pas encore de clé, ajoutez-en une à cet endroit.
- Vibr demande si le MCP de cet ordinateur peut travailler dans cette fenêtre. Sélectionnez Autoriser.
- La fenêtre affiche MCP connecté en bas. Sélectionnez Déconnecter pour y mettre fin à tout moment.
Gardez la page du serveur et la fenêtre Vibr ouvertes pendant que l'agent travaille. Chaque lien vaut pour une session du serveur ; quand le serveur redémarre, demandez un nouveau lien.
Ce qu'il peut faire
- Lister et lire. Vos prototypes enregistrés, le code et les demandes d'un prototype, les mentions de votre bibliothèque et les réglages de l'onglet (fournisseur, modèle, design system, jamais votre clé).
- Construire. Faire passer une demande par Planifier, Construire, Vérifier, Relire et Corriger, comme nouveau prototype ou comme révision d'un prototype existant, et l'enregistrer dans votre bibliothèque. Il utilise votre clé : cela coûte donc autant que la même demande dans Vibr.
- Importer depuis Figma. Importer un fichier
.vibr-figma.jsonissu du plugin Send to Vibr et construire ses frames comme des écrans reliés. Consultez Importer depuis Figma. - Lire les thèmes. Un thème sous forme de propriétés personnalisées CSS ou de design tokens, avec ses rôles clairs et sombres.
- Exporter. Écrire un prototype dans un dossier, sous forme de page unique, de parcours relié ou de son code source React. Il ne remplace jamais un fichier sauf si vous le demandez, et n'écrit jamais en dehors du dossier que vous indiquez.
Confidentialité et sécurité
- Vos clés ne quittent jamais l'onglet. Le serveur ne les voit jamais, et les requêtes partent de l'onglet vers votre fournisseur de modèle, comme toujours.
- Le serveur n'écoute que sur 127.0.0.1. Il transmet le travail à Vibr par sa propre page dans votre navigateur : vibr.art ne se connecte donc jamais à votre ordinateur.
- Vibr n'accepte du travail que de la page qui l'a ouvert, uniquement avec le code aléatoire à usage unique contenu dans le lien du serveur, et seulement après que vous avez sélectionné Autoriser.
- Le contenu de votre bibliothèque parvient à l'agent sous forme de données : le texte d'un prototype ou un fichier importé ne peut pas donner d'instructions à votre agent, sauf si votre agent le traite ainsi. Relisez donc ce qu'il construit comme n'importe quel brouillon.
Plus de détails dans Clés, confidentialité et stockage.
Paramètres
VIBR_MCP_PORT: le port sur votre ordinateur (4517, sauf s'il est déjà pris).VIBR_MCP_APP: la page Vibr qu'ouvre le lien (https://vibr.art/, sauf si vous exécutez Vibr vous-même).
Dépannage
- Vibr ne se connecte jamais. Vérifiez que vous avez sélectionné Autoriser dans la fenêtre Vibr et que la page du serveur est toujours ouverte. Si le navigateur a bloqué la fenêtre, autorisez les fenêtres pop-up pour cette page et sélectionnez à nouveau Open Vibr.
- L'agent indique qu'aucun onglet n'est connecté. Le serveur a redémarré, ou une fenêtre a été fermée. Demandez un nouveau lien et ouvrez-le.
- Une construction échoue. Ouvrez la fenêtre Vibr : l'exécution affiche chaque étape, comme lorsque vous saisissez une demande.