Prise en main

Avant de commencer

Il vous faut une clé API de l'un de ces fournisseurs. Chacun propose une façon gratuite ou peu coûteuse de l'essayer.

• Google Gemini : obtenez une clé dans Google AI Studio. Les clés de l'offre gratuite fonctionnent avec les modèles Flash ; les modèles Pro nécessitent d'activer la facturation.
• OpenAI : créez une clé secrète dans le tableau de bord OpenAI.
• Anthropic : créez une clé dans la console Anthropic.

Avec un compte payant, un brouillon coûte en général quelques centimes. La boîte de dialogue de clé indique la fourchette pour le modèle choisi.

Pas encore de clé ? Essayez les exemples

Lors de votre première visite, l'accueil propose Essayer un exemple, sans clé. Trois prototypes terminés s'ajoutent à votre bibliothèque et le premier s'ouvre : la page d'accueil d'un café, son écran de carte et un tableau de bord d'exploitation. Tout ce qui ne sollicite pas de modèle fonctionne avec eux, notamment sélectionner des éléments, comparer des versions, toutes les tailles, mesurer, les notes, Lire et l'export. Pour modifier un exemple avec une demande, ajoutez une clé. Plus tard, la boîte de dialogue de clé propose aussi Ouvrez un exemple, jusqu'à ce que vous enregistriez une clé.

Ajouter votre clé

1. Choisissez votre fournisseur dans le sélecteur Fournisseur d'IA de la barre supérieure.
2. Sélectionnez Ajouter une clé. La boîte de dialogue indique le fournisseur choisi.
3. Collez la clé et sélectionnez Enregistrer la clé. Le bouton devient Clé définie.

Vibr vérifie ce que vous collez avant de l'enregistrer. Il détecte les confusions courantes, comme un identifiant de clé à la place du secret, une clé d'un autre fournisseur, une clé Admin Anthropic ou un espace en trop, et vous indique quoi corriger. Vous pouvez enregistrer une clé par fournisseur (Gemini, OpenAI et Anthropic) et passer de l'un à l'autre à tout moment ; tous les modèles d'un fournisseur utilisent sa clé. Pour en définir une autre, choisissez ce fournisseur et sélectionnez à nouveau Ajouter une clé. Supprimer cette clé ne supprime que la clé du fournisseur actuel. Oublier toutes les clés supprime toutes les clés enregistrées dans ce navigateur.

Choisir un design system et un modèle

• Design system définit la bibliothèque de composants avec laquelle chaque brouillon est construit. En changer démarre une nouvelle session, car un brouillon ne peut pas changer de bibliothèque en cours de route. Consultez Design systems et modèles pour la liste complète et pour utiliser votre propre package npm.
• Fournisseur d'IA et Modèle déterminent qui construit le brouillon. Chaque fournisseur a une valeur par défaut adaptée, et Vibr mémorise votre choix dans ce navigateur.

Utiliser Vibr dans votre langue

Vibr s'ouvre dans la langue de votre navigateur si c'est l'une de celles-ci : anglais, allemand, arabe, chinois (simplifié), coréen, espagnol, français, hébreu, italien, japonais, néerlandais et portugais (Brésil). Sinon, il s'ouvre en anglais. Pour choisir vous-même une langue, utilisez le bouton Langue de l'interface (le globe) dans la barre supérieure. Sur un téléphone, il se trouve dans les paramètres, sous le design system. Choisissez Automatique pour suivre à nouveau votre navigateur.

En arabe et en hébreu, Vibr se lit de droite à gauche : la mise en page est inversée et les flèches pointent dans l'autre sens. Cela ne change que Vibr lui-même. Pour voir votre brouillon dans une autre langue, utilisez l'aperçu dans une autre langue sur le canevas. La documentation existe dans les mêmes langues : utilisez le menu des langues en haut de chaque page de la documentation.

Construire votre premier écran

Saisissez ce que vous voulez dans le champ en bas du chat, ou sélectionnez l'un des exemples, comme « Une page de tarifs avec trois formules et un bouton de facturation annuelle ». Appuyez sur Entrée ou sélectionnez Envoyer.

Le chat affiche chaque étape au moment où elle se déroule, et le canevas commence à dessiner l'écran pendant son écriture. La plupart des écrans sont prêts en moins d'une minute.

Et ensuite

• Demandez des modifications avec des mots simples : « Rendez la carte récapitulative fixe » ou « Ajoutez un champ de code promo ».
• Sélectionnez Enregistrer pour le conserver dans votre bibliothèque.
• Essayez les outils du canevas : largeurs mobile et tablette, versions et comparaison.