v0 von Vercel: Ein Leitfaden mit Demo-Projekt

Was ist Vercels v0?

v0 von Vercel ist ein KI-gestütztes Tool zur Codegenerierung, das Entwicklern hilft, UI-Komponenten (oder ganze Seiten!) mithilfe von natürlichsprachlichen Anweisungen zu erstellen. Anstatt eine Schaltfläche, ein Formular oder ein Dashboard manuell zu programmieren, beschreibst du über die Chat-Schnittstelle, was du brauchst, und v0 generiert in Sekundenschnelle produktionsfertigen React- und Tailwind-CSS-Code.

Vercel ist eine Plattform, die für die Bereitstellung und das Hosting von Webanwendungen entwickelt wurde. Der Schwerpunkt liegt dabei auf der Optimierung der Leistung und der Rationalisierung des Entwicklungsprozesses. Es ist vor allem bekannt für Next.js (ein beliebtes React-Framework) und bietet das Hosting von Frontend-Anwendungen mit automatischer Skalierung und einfacher Integration.

Ich denke, v0 ist eine großartige Ergänzung zu Vercels Tool-Suite und wirkt Wunder für die Produktivität ihrer Kunden (uns, die Entwickler). Und wie viele andere KI-Tools auf dem Markt ist es eine gute Möglichkeit, auch nicht-technischen Nutzern wie Designern und Produktmanagern die Möglichkeit zu geben, zum Entwicklungsprozess beizutragen.

Es ist besonders nützlich für das Rapid Prototyping, die Produktivitätssteigerung durch die Verringerung sich wiederholender Frontend-Arbeiten und die Design-to-Code-Automatisierung, z. B. die direkte Umwandlung von Figma-Dateien in funktionierende Komponenten. Außerdem kannst du dein Projekt mit Vercel schnell freigeben, was das Hosting und die Bereitstellung vereinfacht.

Wie viel kostet die v0?

v0 hat derzeit 3 Preisstufen für Einzelpersonen. Die erste Stufe ist kostenlos, aber die Anzahl der verfügbaren Nachrichten pro Tag ist begrenzt. Du kannst für $20/Monat oder für $200/Monat bei intensiver Nutzung upgraden. 

Die Preise für Unternehmen sind unterschiedlich und beginnen bei $30/Nutzer pro Monat.

Demo-Projekt: Abo Management App mit v0

Lass uns ein Dashboard für die Abonnementverwaltung erstellen, mit dem du alle deine Abonnements (z. B. Software, Zeitschriften, Mitgliedschaften) an einem Ort verfolgen und verwalten kannst. Die App kann Nutzer/innen über anstehende Zahlungen, das Auslaufen von Testversionen und nicht genutzte Abonnements informieren.

Die obige Beschreibung ist genau die Aufforderung, die ich über die v0-Chat-Schnittstelle eingegeben habe.

Nach etwa 30 Sekunden hat v0 10 Dateien erzeugt. Auf der Registerkarte "Code" kann ich diese Dateien sehen, während das Chat-Interface verfügbar bleibt und den erzeugten Code erklärt.

Du kannst auf das Feld Vorschau oben klicken, um die Anwendung zu sehen:

Am besten kannst du es dir aber vorstellen, indem du auf das zweite Symbol von rechts in der oberen Ecke klickst.

Dadurch wird auf deinem Gerät ein neuer Tab mit der vollständigen Vorschau deiner Bewerbung geöffnet. Lass uns einen Blick auf unsere werfen:

Wie du siehst, hat v0 aus einer einzigen Eingabeaufforderung eine voll funktionsfähige Web-App erstellt. Ziemlich beeindruckend. Das Hinzufügen eines neuen Abonnements funktioniert wirklich und spiegelt sich auch im Rest der App wider.

Die Navigationsleiste auf der linken Seite ist jedoch nicht funktional und eine ziemliche Platzverschwendung. Gehen wir zurück zu unserer Vorschau und entfernen sie. Wir könnten im Chat darum bitten, sie zu entfernen, aber wir können auch eine schnelle Änderung vornehmen, indem wir die Maustaste oben drücken (erstes Symbol von links). Wir wählen die Komponente aus, die wir ändern wollen (in diesem Fall die Navigationsleiste) und bitten v0 einfach, sie zu entfernen.

Und hier ist das Ergebnis!

Okay, und was jetzt?

Es gibt noch ein paar weitere Schaltflächen am oberen Rand, die erwähnenswert sind. Wenn du auf die Schaltfläche "Historie" klickst, kannst du die verschiedenen Versionen deiner App sehen, und wenn du auf eine bestimmte Version klickst, kommst du zu ihr zurück.

Du kannst deine App mit Vercel auch mit einem Klick bereitstellen:

Auf die neue App kannst du über einen Link zugreifen, den du in demselben Modal findest, sobald die Bereitstellung abgeschlossen ist, und weitere Details über die Bereitstellung selbst werden in deinem Vercel-Konto angezeigt.

Das Erstellen und Bereitstellen dieser App hat mich... 15 Minuten gekostet. Und das schließt die Zeit ein, die ich gebraucht habe, um die Screenshots für dieses Tutorial zu machen! 

So etwas von Grund auf zu programmieren, hätte mich einen ganzen Tag gekostet, wenn nicht sogar mehr.

Bonus: Den Code lokal ausführen

Wenn du diesen Code zu deinem Rechner hinzufügen und über VS Code (oder einen anderen Code-Editor, den du verwendest) darauf zugreifen möchtest, kannst du über das Terminal einen neuen Projektordner erstellen.

Richte dann ein neues Next.js-Projekt ein:

npx create-next-app@latest my-folder-name

Stelle sicher, dass du dich mit cd my-folder-path im richtigen Verzeichnis befindest.

Von dort aus kannst du zurück zum v0-Projekt navigieren und oben rechts auf die Schaltfläche "Zur Codebasis hinzufügen" klicken, den generierten Befehl kopieren und im Terminal einfügen. Wenn du aufgefordert wirst, eine components.json-Datei zu erstellen, gibst du Y ein und drückst bei allen folgenden Aufforderungen die Eingabetaste.

Du kannst jetzt den richtigen Ordner in VS Code öffnen und den gesamten generierten Code sehen. Starte npm run dev und navigiere in deinem Browser zu http://localhost:3000, um deine App lokal auszuführen .

Mehr als nur die Grundlagen: Was kann v0 sonst noch tun?

Okay, v0 ist also ziemlich gut darin, Code aus einer einfachen Eingabeaufforderung zu erzeugen. Aber was kann es sonst noch tun?

1. Figma-Dateien für sofortigen Code hochladen

Du kannst einen Figma-Entwurf in v0 hochladen und es werden automatisch entsprechende React + Tailwind Komponenten generiert. Das ist perfekt für Designer, die Mockups schnell in funktionierenden Code umwandeln wollen.

2. Community-Vorlagen verwenden

Du musst nicht bei Null anfangen. v0 bietet von der Community entwickelte Vorlagen für gängige UI-Muster, die du abzweigen, verändern und in dein Projekt integrieren kannst.

3. Integrationen (Beta-Funktion)

v0 führt Integrationen von Drittanbietern ein, um die Verbindung mit Datenbanken und anderen Speicherwerkzeugen zu erleichtern. Diese Funktion ist noch in der Beta-Phase, aber sie verspricht, die v0 noch leistungsfähiger zu machen. Du kannst eine Liste der verfügbaren Integrationen sehen, indem du zu den Einstellungen deines Projekts navigierst und auf das + Symbol neben dem Abschnitt Integrationen klickst.

4. Umgebungsvariablen

v0 ermöglicht die Definition von Umgebungsvariablen, damit du API-Schlüssel, Datenbankverbindungen und andere Geheimnisse sicher konfigurieren kannst.

Beschränkungen von v0

Leider ist v0 nicht für jeden Anwendungsfall perfekt. Das sind die Einschränkungen, die du beachten musst:

• Keine Backend-Vorschau: v0 generiert Backend-Code, wenn du danach fragst, aber du kannst keine Vorschau einer App anzeigen, wenn sie Backend-Logik enthält.
• Keine echte GitHub-Integration: v0 integriert sich noch nicht mit GitHub. Die einzige Möglichkeit, deinen Code zu synchronisieren, besteht darin, den Code in dein lokales Projekt zu kopieren (oder die Funktion "Zur Codebasis hinzufügen" zu verwenden) und ihn dann manuell auf Github zu pushen.
• Der generierte Code muss verfeinert werden: Der Code ist zwar sauber, muss aber möglicherweise noch optimiert werden. Die Dateien sind manchmal sehr lang, und es kann sein, dass die Komponentenbibliothek deiner Wahl nicht unterstützt wird.
• Nicht ideal für komplexe Zustandsverwaltung: v0 ist wirklich gut für die Benutzeroberfläche geeignet, aber nicht für die gesamte Anwendungslogik.
• Nicht ideal für Nicht-EntwicklerInnen: Sobald du versuchst, eine etwas komplexere Logik hinzuzufügen, hat v0 Schwierigkeiten, funktionierende Funktionen bereitzustellen. Wenn du kein Entwickler bist, wirst du ziemlich schnell auf Fehler stoßen, die du nicht beheben kannst, oder die App nicht nach deinen Wünschen anpassen können. 

Fazit

v0 von Vercel ist ein nützliches Tool für die Generierung von UI-Komponenten, das Prototyping und sogar die Umsetzung von Entwürfen in Code. Es befindet sich noch in der Entwicklung, ist aber schon jetzt eine gute Wahl für Entwickler, die ihre Frontend-Arbeit beschleunigen wollen. 

Probiere es aus unter v0.dev und finde heraus, ob es zu deinem Entwicklungsprozess passt!