Naslag
Designsystemen en modellen
De designsystemen waarmee Vibr bouwt, hoe je elk pakket van npm gebruikt en welke modellen elke provider biedt.
Ingebouwde designsystemen
| Designsysteem | Soort | Pakketten |
|---|---|---|
| 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 | Webcomponenten | @shoelace-style/shoelace@2 |
| Octuple | React | @eightfold.ai/octuple@2 |
Concepten importeren echte componenten uit deze pakketten, geladen via een CDN, en renderen met React 19. Voordat Vibr gaat bouwen, leest het welke componenten elk pakket echt exporteert, zodat het model er geen kan verzinnen die niet bestaat. Het CDN is esm.sh. Reageert het niet meer, dan laadt Vibr concepten de rest van je bezoek uit een reserve (jsDelivr, of Vibrs eigen kopie van Fluent UI) en laat het je dat weten.
Als je het designsysteem wijzigt, begint er een nieuwe sessie. Sla eerst op wat je wilt bewaren.
Elk pakket van npm gebruiken
Kies Eigen npm-pakket… in de keuzelijst Designsysteem en vul in:
| Veld | Wat je invult | Voorbeeld |
|---|---|---|
| Pakket (met versie) | De pakketnaam en de hoofdversie. | @radix-ui/themes@3 |
| CSS-pad of URL | Optioneel. Het stylesheet van het pakket, als het er een heeft. | @radix-ui/themes@3/styles.css |
| Soort | React of Webcomponenten. | React |
| Registratiemodule | Optioneel, voor webcomponenten die een loader nodig hebben om ze te registreren. | my-ds@1/dist/loader.js |
Vibr controleert voor het bouwen of het pakket op npm bestaat. Als de naam of versie niet klopt, krijg je dat te horen.
Vibr bekijkt het pakket ook voordat iets het laadt. Een versiebereik wordt vastgezet op de nieuwste release die minstens 2 weken oud is (@radix-ui/themes@3 wordt in het veld bijvoorbeeld @radix-ui/themes@3.3.0), zodat een slechte release van vandaag niet wordt opgepikt. Een pakket dat als malware bekendstaat, wordt nooit geladen. Onder het veld meldt Vibr bekende beveiligingsmeldingen, een verouderde versie, een pakket dat jonger is dan 30 dagen of vorige week minder dan 1.000 downloads had, en een naam die een of twee letters afwijkt van een populair pakket. Deze controles gebruiken openbare gegevens van deps.dev, npm en OSV, en sturen alleen de naam en versie van het pakket.
Wil je ook grafiek- en tabelbibliotheken kiezen, lees dan Grafieken en tabellen.
Providers en modellen
| Provider | Modellen | Plant met |
|---|---|---|
| Google Gemini | gemini-3.5-flash (standaard), gemini-3.7-flash, gemini-flash-latest, gemini-3.1-pro-preview | gemini-3.5-flash |
| OpenAI | gpt-5.5 (standaard), gpt-5.4, gpt-5.4-mini | gpt-5.4-mini |
| Anthropic | claude-sonnet-5-5 (standaard), claude-opus-5-5 | claude-haiku-5-5 |
| OpenRouter | anthropic/claude-sonnet-5.5 (standaard), 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 |
Met OpenRouter heb je één sleutel voor Claude-, GPT- en Gemini-modellen. In plaats van een sleutel te plakken, kun je in het sleutelvenster Aanmelden met OpenRouter kiezen. OpenRouter maakt dan een sleutel alleen voor Vibr, die je in je OpenRouter-account kunt bekijken, begrenzen en intrekken.
De stap Plannen gebruikt een sneller model van dezelfde provider. Als je sleutel dat niet kan gebruiken, plant het model dat je hebt gekozen. Elk model heeft ook een back-up van dezelfde provider die inspringt als het druk is of geen quotum meer heeft; zie Zo werkt een run.
De gratis laag van Gemini werkt met de Flash-modellen. Pro-modellen vereisen dat facturering aanstaat in Google AI Studio.