In diesem Video wird demonstriert, wie man mit Emergent AI und dem Konzept des Vibe Coding eine voll funktionsfähige SaaS-Webanwendung von Grund auf neu erstellt – und das ganz ohne traditionelles Programmieren. Der Prozess zeigt, wie man durch natürliche Spracheingaben (Prompts) ein System steuert, das plant, baut, testet und Fehler behebt.
Was ist Agentic Vibe Coding?
Vibe Coding mit Emergent AI ermöglicht es Nutzern, komplexe Seiten und Apps mit tiefer Funktionalität zu erstellen, ohne eine einzige Zeile Code verstehen zu müssen. Das System basiert auf einem Multi-Agenten-Framework. Das bedeutet, mehrere KI-Agenten arbeiten zusammen:
- Ein Agent plant die Struktur.
- Ein anderer schreibt den Code.
- Ein weiterer führt Tests durch.
Der Nutzer fungiert dabei eher als Produktmanager, der die Vision vorgibt, während die KI die technische Umsetzung übernimmt.
Die richtige Prompt-Struktur für Emergent AI
Damit die KI genau das liefert, was man möchte, sind präzise Anweisungen entscheidend. Im Video werden drei fundamentale Best Practices für den initialen Prompt vorgestellt:
1. Klare und prägnante Anweisungen
Spezifische Agenten reagieren besser auf deutliche Instruktionen. Ein Beispiel aus dem Video: Wenn eine Titelfunktion erweitert werden soll, erkläre genau, was beim Klick passieren soll (z. B. „Erlaube Nutzern, von jedem Titel aus eine neue Spalte rechts zu generieren, während alle vorherigen Spalten erhalten bleiben“).
2. Kontext und Motivation liefern
Es reicht oft nicht, nur zu sagen, was gebaut werden soll. Man sollte auch erklären, warum eine Funktion wichtig ist. Bei einer „Script Critique“-Sektion wurde beispielsweise der Kontext gegeben: „Das Ziel ist es, ehrliches Feedback zu geben, aber dabei die Stimme und den Stil des Autors beizubehalten.“ Dies hilft der KI, die Nuancen der Aufgabe zu verstehen.
3. Positive Framing (Positives Formulieren)
Man sollte dem Agenten sagen, was er tun soll, anstatt ihm zu sagen, was er nicht tun soll. Im Video wird betont: „Ich habe den Agenten in diesem gesamten Prompt kein einziges Mal gebeten, etwas nicht zu tun.“ Anstatt zu sagen „Füge die neuen Titel nicht unten an“, lautet die positive Anweisung: „Generiere eine neue Spalte rechts.“ Dies verhindert Missverständnisse, die bei Verneinungen oft auftreten.
Integrationen: LLMs, Bilder und Zahlungen
Ein Kernvorteil von Emergent AI ist die Nutzung sogenannter Universal Keys. Das bedeutet, man benötigt keine eigenen API-Schlüssel für verschiedene Dienste; Emergent stellt diese bereit. Im Video werden folgende Integrationen in die App eingebaut:
- LLMs (Large Language Models): Für die Textgenerierung und Logik der App.
- Nano Banana Pro: Ein spezifisches KI-Modell für die Bildgenerierung. Im Video fragt der Agent explizit nach der Nutzung von „Nano Banana Pro“ über den Emergent LLM Key, was bestätigt wird.
- Stripe: Für die Zahlungsabwicklung. Der Nutzer bestätigt die Verwendung eines Test-Keys während der Planungsphase, sodass die App direkt über eine Bezahlfunktion verfügt.
Der Bauprozess: Von der Idee zur App
Der Workflow im Video folgt einem strukturierten Ablauf, den die KI autonom durchläuft:
- Design-System:
- Der Agent erstellt einen umfassenden Plan und arbeitet diesen systematisch ab. Er kann sogar seinen eigenen Ansatz modifizieren, wenn er auf Probleme stößt (z. B. das Beheben eines Lazy-Loading-Problems).
- Testing Agent: Nach dem Bau ruft der Haupt-Agent einen spezialisierten Testing Sub-Agent auf. Dieser:
- Prüft die Dateien und Pläne.
- Führt umfassende Tests durch (Backend und Frontend).
- Findet Fehler und behebt sie selbstständig.
- Erstellt sogar kleine Skripte, um spezifische Features (wie die „Script Critique“-Funktion) zu validieren.
- Sendet am Ende einen Testbericht zurück an den Haupt-Agenten.
Fehlerbehebung und Iteration
Das Video zeigt eindrucksvoll, wie „Vibe Coding“ auch das Debugging umfasst. Als der Thumbnail-Generator getestet wird, läuft der Prozess autonom ab. Wenn die KI auf Fehler stößt, startet sie das Frontend neu oder passt den Code an, bis alle Tests bestehen. Der Nutzer muss nicht manuell im Code nach Fehlern suchen.
Ergebnis
Am Ende steht eine polierte, moderne Webanwendung mit echten Integrationen, einem ästhetischen UI (inklusive Mikro-Interaktionen) und einer funktionierenden Zahlungsabwicklung. Das Projekt zeigt, dass man mit Tools wie Emergent AI und der richtigen „Vibe Coding“-Strategie in weniger als 20 Minuten Ergebnisse erzielen kann, für die früher technische Teams und Monate an Entwicklungszeit nötig waren.
Quelle
Original-Video: https://youtu.be/sdH7YPAmHes
Häufig gestellte Fragen (FAQ)
Was ist Vibe Coding?
Vibe Coding bezeichnet das Erstellen von Software durch natürliche Sprache und KI-Agenten, ohne selbst Code schreiben zu müssen. Der Fokus liegt auf der Beschreibung der Funktionalität und des „Vibes“ (Design, Verhalten), während die KI die technische Umsetzung übernimmt.
Was ist Nano Banana Pro?
Nano Banana Pro ist ein im Video erwähntes KI-Modell zur Bildgenerierung, das innerhalb der Emergent AI Plattform über Universal Keys genutzt werden kann.
Warum ist "Positive Framing" bei Prompts wichtig?
KI-Modelle verstehen positive Anweisungen (was sie tun sollen) besser als negative (was sie nicht tun sollen). Positive Formulierungen verhindern Missverständnisse und führen präziser zum gewünschten Ergebnis.
Benötige ich eigene API-Keys für Stripe oder OpenAI?
Nein, Emergent AI nutzt sogenannte "Universal Keys", die den sofortigen Zugriff auf Tools wie LLMs oder Bildgeneratoren ermöglichen, ohne dass der Nutzer eigene API-Schlüssel einrichten muss. Für Stripe wurde im Video ein Test-Key verwendet.