Begin hier
Aan de slag
Voeg een sleutel toe, kies een designsysteem en een model, en bouw binnen een paar minuten je eerste scherm.
Voordat je begint
Je hebt een API-sleutel nodig van een van deze providers. Bij elke provider kun je het gratis of goedkoop uitproberen.
- Google Gemini: vraag een sleutel aan in Google AI Studio. Sleutels uit de gratis laag werken met de Flash-modellen; Pro-modellen vereisen dat facturering aanstaat.
- OpenAI: maak een geheime sleutel in het OpenAI-dashboard.
- Anthropic: maak een sleutel in de Anthropic Console.
Met een betaald account kost een concept meestal een paar cent. Het sleutelvenster toont de marge voor het gekozen model.
Nog geen sleutel? Probeer de voorbeelden
Bij je eerste bezoek biedt het welkomstscherm Probeer een voorbeeld, zonder sleutel. Er komen drie kant-en-klare prototypes in je bibliotheek en het eerste gaat open: de homepage van een koffiebar, het menuscherm en een operationeel dashboard. Alles wat geen model aanroept werkt ermee, zoals elementen selecteren, versies vergelijken, alle formaten, meten, notities, Afspelen en exporteren. Voeg een sleutel toe om een voorbeeld met een verzoek te wijzigen. Later biedt ook het sleutelvenster Open een voorbeeld, tot je een sleutel opslaat.
Je sleutel toevoegen
- Kies je provider in de keuzelijst AI-provider in de bovenbalk.
- Kies Sleutel toevoegen. Het dialoogvenster noemt de provider die je hebt gekozen.
- Plak de sleutel en kies Sleutel opslaan. De knop verandert in Sleutel ingesteld.
Vibr controleert wat je plakt voordat het wordt opgeslagen. Het herkent veelvoorkomende vergissingen, zoals een sleutel-ID in plaats van het geheim, een sleutel van een andere provider, een Admin-sleutel van Anthropic of een losse spatie, en vertelt je wat je moet verbeteren. Je kunt per provider een sleutel opslaan (Gemini, OpenAI en Anthropic) en er op elk moment tussen wisselen; elk model van een provider gebruikt de sleutel van die provider. Om een andere sleutel in te stellen, kies je die provider en kies je opnieuw Sleutel toevoegen. Deze sleutel verwijderen verwijdert alleen de sleutel van de huidige provider. Alle sleutels vergeten verwijdert alle opgeslagen sleutels uit deze browser.
Een designsysteem en model kiezen
- Designsysteem bepaalt de componentbibliotheek waarmee elk concept wordt gebouwd. Als je het wijzigt, begint er een nieuwe sessie, omdat een concept niet halverwege van bibliotheek kan wisselen. Zie Designsystemen en modellen voor de volledige lijst en voor het gebruik van je eigen npm-pakket.
- AI-provider en Model bepalen wie het concept bouwt. Elke provider heeft een verstandige standaardinstelling, en Vibr onthoudt je keuze in deze browser.
Vibr in je eigen taal gebruiken
Vibr opent in de taal van je browser als dat een van deze talen is: Engels, Arabisch, Chinees (vereenvoudigd), Nederlands, Frans, Duits, Hebreeuws, Italiaans, Japans, Koreaans, Portugees (Brazilië) en Spaans. Anders opent Vibr in het Engels. Om zelf een taal te kiezen, gebruik je de knop Interfacetaal (de wereldbol) in de bovenbalk. Op een telefoon staat die in de instellingen onder het designsysteem. Kies Automatisch om weer de taal van je browser te volgen.
In het Arabisch en Hebreeuws leest Vibr van rechts naar links: de lay-out wordt gespiegeld en pijlen wijzen de andere kant op. Dit verandert alleen Vibr zelf. Om je concept in een andere taal te bekijken, gebruik je Voorbeeld in een andere taal op het canvas. De documentatie is er in dezelfde talen: gebruik het taalmenu bovenaan elke pagina van de documentatie.
Je eerste scherm bouwen
Typ wat je wilt in het invoerveld onder aan de chat, of kies een van de voorbeelden, zoals “Een prijspagina met drie abonnementen en een schakelaar voor jaarlijkse betaling”. Druk op Enter of kies Verzenden.
De chat toont elke stap terwijl die gebeurt, en het canvas begint het scherm al te tekenen terwijl het nog wordt geschreven. De meeste schermen zijn binnen een minuut klaar.
Wat je daarna kunt doen
- Vraag in gewone woorden om wijzigingen: “Maak de samenvattingskaart sticky” of “Voeg een veld voor een kortingscode toe”.
- Kies Opslaan om het te bewaren in je bibliotheek.
- Probeer de tools van het canvas: telefoon- en tabletbreedte, versies en vergelijken.