Googles neue kostenlose Vibe-Coding App: Das vollständige Tutorial

Google hat die Regeln geändert. Mit der Einführung von Vibe Coding in Google AI Studio müssen Entwickler und No-Code-Enthusiasten nicht mehr zwingend für teure Tools wie Lovable, Cursor oder Replit bezahlen. Diese neue Funktion ist völlig kostenlos und integriert Googles leistungsstärkste Modelle direkt in eine intuitive Entwicklungsumgebung.

In diesem Artikel erfährst du Schritt für Schritt, wie du diese neue Plattform nutzt, um funktionierende Apps zu erstellen, das Design visuell anzupassen und sogar leistungsstarke Backend-Automatisierungen mit n8n zu integrieren.

Was ist Google AI Studio Vibe Coding?

Vibe Coding in Google AI Studio ist eine Entwicklungsumgebung, die es dir ermöglicht, allein durch Texteingaben (Prompts) vollständige Webanwendungen zu erstellen. Im Gegensatz zu anderen Plattformen, die oft teure Abonnements erfordern, bietet Google diesen Service kostenlos an – inklusive Zugriff auf Premium-Modelle.

Die Plattform nutzt im Hintergrund:

• Gemini 2.5 Pro: Das neueste und leistungsfähigste Sprachmodell von Google für komplexe Logik und Code.
• Nano Banana (Gemini 2.5 Flash Image): Ein spezielles Modell zur Generierung und Bearbeitung von Bildern innerhalb deiner App.
• VO 3.1: Für Animationen (falls im Projekt benötigt).

Schritt 1: Zugang und Dashboard-Einrichtung

Um zu starten, gehe einfach auf aistudio.google.com. Nach der Anmeldung befindest du dich im Haupt-Dashboard. Klicke dort auf den Reiter „Build“ (Bauen).

Hier öffnet sich die „Build your ideas with Gemini“-Oberfläche. Sie erinnert stark an andere KI-Coding-Tools: Du hast ein Chat-Fenster für deine Prompts auf der linken Seite und eine Live-Vorschau deiner App auf der rechten Seite.

Wichtige Einstellungen vor dem Start:

• Modell-Auswahl: Stelle sicher, dass Gemini 2.5 Pro ausgewählt ist, da es aktuell die besten Ergebnisse für Code liefert.
• Framework: Standardmäßig nutzt Google AI Studio React. Du kannst in den Systemeinstellungen aber auch Angular auswählen, falls du das bevorzugst. Für die meisten Nutzer ist React jedoch die beste Wahl.

Schritt 2: Deine erste App bauen (Beispiel: AI Headshot Photographer)

Im Tutorial wird eine App erstellt, die professionelle Business-Fotos aus Selfies generiert. Der Prozess ist denkbar einfach:

1. Prompt eingeben: Beschreibe deine App-Idee im Chat-Fenster. Zum Beispiel: „Erstelle eine AI Headshot Photographer App. Nutzer sollen ein lässiges Selfie hochladen können und dann einen Stil wählen (z.B. Corporate, Tech-Office, Outdoor). Die App generiert daraus ein professionelles Foto.“
2. Build klicken: Google AI Studio generiert nun den Code und zeigt sofort eine funktionierende Vorschau auf der rechten Seite an.
3. Integration von Bild-Modellen: Das Besondere ist die native Integration von Nano Banana. Wenn deine App Bilder generieren soll, nutzt Google AI Studio automatisch dieses Modell, ohne dass du komplizierte API-Schlüssel einrichten musst.

Schritt 3: Visuelle Anpassung mit dem „Scratching“-Tool

Eine der stärksten Funktionen ist die visuelle Bearbeitung. Wenn dir ein Design-Element nicht gefällt, musst du nicht versuchen, es umständlich mit Worten zu beschreiben.

• Klicke auf das Stift-Symbol (Scratching Tool) in der Vorschau.
• Mache einen Screenshot von dem Bereich, den du ändern möchtest.
• Zeichne direkt auf dem Bild (z.B. einen Pfeil auf einen Button) und schreibe dazu: „Ändere die Farbe in Blau“ oder „Bewege diesen Text nach oben“.
• Klicke auf „Add to Chat“ und dann auf „Apply Changes“. Die KI versteht visuell, was du meinst, und setzt die Änderung im Code um.

Schritt 4: Backend-Automatisierung mit n8n verbinden

Für komplexere Anwendungen, die mehr können als nur gut auszusehen, kannst du deine App mit n8n verbinden. Dies ist besonders nützlich für Apps, die echte Arbeitsabläufe automatisieren sollen (z.B. User Generated Content Apps).

Der Workflow:

1. Frontend vorbereiten: Baue deine Benutzeroberfläche in Google AI Studio (z.B. ein Formular für Nutzereingaben).
2. n8n Webhook: Erstelle in n8n einen Workflow, der mit einem „Webhook“ beginnt. Kopiere die Webhook-URL.
3. Verbindung herstellen: Sage dem Google AI Studio im Chat: „Wenn der Nutzer auf ‚Senden‘ klickt, sende die Daten an diese Webhook-URL: [Deine URL].“
4. Daten verarbeiten: In n8n kannst du die empfangenen Daten nun weiterverarbeiten (z.B. in einer Datenbank speichern, eine E-Mail senden oder weitere KI-Modelle aufrufen).

Dies macht aus einer einfachen statischen Seite eine mächtige Webanwendung mit echter Logik.

Schritt 5: Deployment und Export

Wenn deine App fertig ist, hast du mehrere Möglichkeiten, sie zu veröffentlichen:

• Deploy to Google Cloud: Mit einem Klick kannst du die App direkt in der Google Cloud hosten.
• Push to GitHub: Ideal, wenn du den Code weiterentwickeln möchtest. Dies macht den Code „Production Ready“ und ermöglicht Versionskontrolle.
• Download / Google Drive: Du kannst den Quellcode auch einfach herunterladen oder als Kopie in deinem Google Drive speichern.

Fazit

Google AI Studio Vibe Coding ist ein mächtiger Angriff auf kostenpflichtige No-Code-Tools. Die Kombination aus dem kostenlosen Zugang, dem starken Gemini 2.5 Pro Modell und der nahtlosen Integration von Bildgenerierung (Nano Banana) macht es zur perfekten Plattform, um Ideen schnell zu testen (MVPs) oder sogar vollständige Anwendungen zu bauen.

Häufig gestellte Fragen (FAQ)

Ist Google AI Studio Vibe Coding wirklich kostenlos?

Ja, laut dem Video ist die Nutzung von Google AI Studio und den darin enthaltenen Vibe-Coding-Tools aktuell komplett kostenlos. Du erhältst Zugriff auf Premium-Modelle wie Gemini 2.5 Pro ohne monatliche Gebühren.

Welche Programmiersprachen werden unterstützt?

Standardmäßig erstellt die Plattform Apps mit dem React-Framework. Du kannst in den Systemeinstellungen jedoch auch Angular auswählen, wenn du dieses Framework bevorzugst. Andere Sprachen werden im Video nicht explizit als Auswahlmöglichkeit genannt.

Was ist „Nano Banana“?

„Nano Banana“ ist der im Video genannte Name für Googles Bildgenerierungsmodell Gemini 2.5 Flash Image. Es ist direkt in die Plattform integriert und ermöglicht es deiner App, Bilder zu erstellen oder zu bearbeiten, ohne externe APIs nutzen zu müssen.

Kann ich den Code exportieren?

Ja, du bist nicht an die Plattform gebunden. Du kannst dein Projekt direkt auf GitHub pushen, den Code lokal herunterladen oder ihn in deinem Google Drive speichern. Dies ermöglicht es dir, das Projekt später in einer professionellen IDE wie VS Code weiterzubearbeiten.

Wofür brauche ich n8n in diesem Prozess?

Google AI Studio erstellt hervorragende Frontends (Benutzeroberflächen). Um jedoch komplexe Logik im Hintergrund auszuführen (z.B. Daten speichern, E-Mails versenden, Workflows automatisieren), wird im Tutorial die Anbindung an n8n empfohlen. Dies dient als „Backend“ für deine No-Code-App.

Quelle

Original-Video: https://youtu.be/aIhveXDEjH8