Référence
Design systems et modèles
Les design systems avec lesquels Vibr construit, comment utiliser n'importe quel package npm et les modèles proposés par chaque fournisseur.
Design systems intégrés
| Design system | Type | Packages |
|---|---|---|
| Material UI (MUI) | React | @mui/material@6, @mui/icons-material@6, Emotion |
| Ant Design | React | antd@5 |
| Fluent UI React | React | @fluentui/react-components@9 |
| Mantine | React | @mantine/core@7, @mantine/hooks@7 |
| Shoelace | Web components | @shoelace-style/shoelace@2 |
| Octuple | React | @eightfold.ai/octuple@2 |
Les brouillons importent de vrais composants depuis ces packages, chargés depuis un CDN, et s'affichent avec React 19. Avant de construire, Vibr lit les composants réellement exportés par chaque package : le modèle ne peut donc pas en inventer un qui n'existe pas. Le CDN est esm.sh. S’il ne répond plus, Vibr charge les brouillons depuis une source de secours (jsDelivr, ou la copie de Fluent UI propre à Vibr) pour le reste de votre visite et vous le signale.
Changer de design system démarre une nouvelle session. Enregistrez d'abord ce que vous voulez conserver.
Utiliser n'importe quel package npm
Choisissez Package npm personnalisé… dans le sélecteur Design system, puis renseignez :
| Champ | Que saisir | Exemple |
|---|---|---|
| Package (avec version) | Le nom du package et sa version majeure. | @radix-ui/themes@3 |
| Chemin ou URL du CSS | Facultatif. La feuille de style du package, s'il en a une. | @radix-ui/themes@3/styles.css |
| Type | React ou Web components. | React |
| Module d'enregistrement | Facultatif, pour les web components qui ont besoin d'un chargeur pour s'enregistrer. | my-ds@1/dist/loader.js |
Vibr vérifie que le package existe sur npm avant de construire. Si le nom ou la version est incorrect, il vous le signale.
Vibr examine aussi le package avant que quoi que ce soit ne le charge. Une plage de versions est fixée sur la version la plus récente publiée depuis au moins 2 semaines (@radix-ui/themes@3 devient par exemple @radix-ui/themes@3.3.0 dans le champ), pour qu'une mauvaise version publiée aujourd'hui ne soit pas reprise. Un package répertorié comme logiciel malveillant n'est jamais chargé. Sous le champ, Vibr signale les alertes de sécurité connues, une version obsolète, un package de moins de 30 jours ou de moins de 1 000 téléchargements la semaine dernière, et un nom à une ou deux lettres d'un package populaire. Ces vérifications utilisent les données publiques de deps.dev, npm et OSV, et n'envoient que le nom et la version du package.
Pour choisir aussi des bibliothèques de graphiques et de tableaux, consultez Graphiques et tableaux.
Fournisseurs et modèles
| Fournisseur | Modèles | Planifie avec |
|---|---|---|
| Google Gemini | gemini-3.5-flash (par défaut), gemini-3.7-flash, gemini-flash-latest, gemini-3.1-pro-preview | gemini-3.5-flash |
| OpenAI | gpt-5.5 (par défaut), gpt-5.4, gpt-5.4-mini | gpt-5.4-mini |
| Anthropic | claude-sonnet-5-5 (par défaut), claude-opus-5-5 | claude-haiku-5-5 |
| OpenRouter | anthropic/claude-sonnet-5.5 (par défaut), anthropic/claude-opus-5.5, openai/gpt-5.5, google/gemini-3.5-flash, google/gemini-3.1-pro-preview | anthropic/claude-haiku-5.5 · openai/gpt-5.4-mini · google/gemini-3.5-flash |
OpenRouter vous donne une seule clé pour les modèles Claude, GPT et Gemini. Au lieu de coller une clé, vous pouvez sélectionner Se connecter avec OpenRouter dans la boîte de dialogue de la clé. OpenRouter crée une clé réservée à Vibr, que vous pouvez consulter, plafonner et révoquer dans votre compte OpenRouter.
L'étape Planifier utilise un modèle plus rapide du même fournisseur. Si votre clé ne peut pas l'utiliser, c'est le modèle que vous avez choisi qui planifie. Chaque modèle dispose aussi d'un modèle de secours du même fournisseur, qui prend le relais quand il est occupé ou à court de quota ; consultez Déroulement d'une génération.
L'offre gratuite de Gemini fonctionne avec les modèles Flash. Les modèles Pro nécessitent d'activer la facturation dans Google AI Studio.