Firebase Studio im Hands-On​

Mit Firebase Studio verspricht Google, den gesamten Entwicklungszyklus per Agentic AI zu beschleunigen.Matthew Tyson KI-Agenten sind sozusagen der Trend im Trend – und eröffnen auch im Bereich der Softwareentwicklung vielfältige Möglichkeiten. So verfügt beispielsweise Devon, der KI-Agent von Cognition AI, über einen eigenen Workspace, inklusive Shell, Code-Editor und Webbrowser. Andere Agentic-AI-Lösungen sind direkt in die jeweils spezifische Entwicklerumgebung integriert und greifen auf deren jeweilige Editoren, Debugger und andere Tools zurück. Letzteres Konzept verfolgt auch Firebase Studio von Google (das wir bereits in Preview-Form als Project IDX angetestet haben). Natürlich setzt die Cloud-IDE dabei im Wesentlichen auf Googles Large Language Model (LLM) Gemini, um Developer(-Teams) dabei zu unterstützen, Prototypen und Anwendungen zu erstellen. Dazu stellt Firebase Studio eine gehostete Umgebung zur Verfügung, in der KI-Agenten per Prompt spezifische Aktionen zugewiesen werden – etwa Änderungen an Dateien vorzunehmen oder Befehle auszuführen. Darin liegt auch der wesentliche Unterschied zu einem reinen KI-Assistenten, der sich darauf beschränkt, auf die Prompts zu reagieren. Wie gut das mit Firebase Studio funktioniert, haben wir getestet. App-Prototyping mit Firebase Studio Gemini enthält in Firebase Studio einen App-Prototyping-Agenten, der auf Anweisung auch Ideen für Anwendungen liefert. Für unseren Test wollten wir einen Shop für Outdoor-Ausrüstung erstellen. Matthew Tyson Gemini antwortete darauf mit einem Prototyping-Plan für die Anwendung, der sowohl einen Produktkatalog, als auch ein Tool um diese zu filtern und ein Warenkorb umfasste. Die KI lieferte sogar ein paar Style Guidelines mit. Matthew Tyson Ein Klick auf die Schaltfläche “Prototype this App” reichte für ein beeindruckendes erstes Ergebnis – inklusive User Interface. Matthew Tyson Der Schieberegler für den Preisbereich mutet unter Umständen etwas seltsam an, weil ihm der Begrenzungsknopf rechts fehlt – hat aber funktioniert. Auch die Kategorie-Auswahl auf der linken Seite war funktional. Zudem zeigte sich die Benutzeroberfläche responsiv, ihr Layout passte sich gut an sämtliche Fenstergrößen an. Sämtliche Produktbeschreibungen und Bilder wurden dabei von der KI generiert – wie die teilweise etwas unpassende Bildauswahl demonstriert. Aber es handelte sich ja lediglich um Testdaten. Damit war unsere Arbeitsgrundlage geschaffen. Denn wir haben noch keinen Tech-Stack spezifiziert und wissen nichts darüber, wie die App implementiert wird. Aber der KI-Agent konnte auf Grundlage unseres Prompts bereits einiges an Arbeit innerhalb der Umgebung erledigen.   Die Firebase-Entwicklungsumgebung Und diese Umgebung ist interessant. Denn Firebase Studio bietet eine verwaltete Cloud-VM-Infrastruktur mit Rechenressourcen (unter anderem). Das ermöglicht uns, sowohl Code auszuführen als auch einen Blick unter die Haube zu werfen. Wir wollten uns erst einmal ansehen, was Googles KI-Modell da für uns programmiert hat. Dazu genügt ein Klick auf den Button “Edit the Code” oder ein Prompt, der die gewünschten Änderungen beschreibt. Wir haben zunächst Letzteres ausprobiert: Dem Preisbereich-Schieberegler fehlt ein Knopf auf der rechten Seite. Kannst du das beheben? Ein paar Minuten später wurde die Preview neu geladen und der Schieberegler war tatsächlich wie gewünscht repariert. Dabei gab Gemini auch Auskunft über die geänderten Dateien, nämlich .vscode/settings.json und src/components/ui/slider.tsx. Während letztgenannte Datei zu ändern, durchaus Sinn machte – war dieser für die erstgenannte nicht unbedingt ersichtlich. Ein Klick auf die Datei öffnete diese in einem neuen Fenster: { "IDX.aI.enableInlineCompletion": true, "IDX.aI.enableCodebaseIndexing": true } Im nächsten Schritt wollten wir uns den Code genauer ansehen. Die “Edit the Code”-Schaltfläche führte uns zu diesem Zweck in die eigentliche IDE:   Matthew Tyson Der Aufbau ähnelt dem Layout von Visual Studio Code for the Web nicht ohne Grund, schließlich liefert Microsofts Entwickler-Tool auch die Grundlage für Firebase Studio. Ein Blick in den Dateibrowser hat im Anschluss offenbart, dass Firebase Studio eine Next.js-App bereitgestellt hat – was eine sinnvolle Wahl für das Standardformat ist. Denn damit erhalten wir auch einen vollständigen JavaScript/TypeScript-Stack, der sowohl Front- als auch Backend abdeckt. Und: Es gibt einen einfachen, definierten Deployment-Pfad, der in gehosteten Umgebungen gut funktioniert. Erwähnenswert ist davon abgesehen auch, dass die Firebase-Umgebung gut in GitHub integriert ist. Das hätte uns beispielsweise ermöglicht, unsere App über ein existierendes GitHub-Repository zu starten. Neben den typischen Komponenten, die man bei einer Next.js-App erwarten kann, gibt es zudem die Umgebungsdatei /.idx/dev.nix. Sie beschreibt, welche Tools und Pakete mithilfe des Nix-Paketmanagers in der VM installiert sind. Chat-Erlebnisse mit Gemini in Firebase Studio Im rechten Fensterbereich von Firebase Studio stehen zwei Registerkarten zur Verfügung – eine für die Preview, eine weitere für Gemini. Rufen wir letztere auf, erhalten wir Zugriff auf den Chatbot. Den wollten wir zunächst mit folgender, allgemeiner Frage auf die Probe stellen: Kannst du beschreiben, wie diese App funktioniert? Woher kommen die Daten? Gemini beschrieb die Gesamtstruktur und die verwendete Technologie zufriedenstellend. Was uns aber wirklich interessierte, war folgender Output: Keine externe API: In der Dateiliste gibt es keine eindeutigen Hinweise auf externe API-Aufrufe. Wenn es solche gäbe, würde man Dateien erwarten, die sich auf entsprechende Bibliotheken (wie axios oder fetch) oder API-spezifischen Code beziehen. Keine Datenbankdateien: Ebenso gibt es keine Dateien, die auf eine direkte Verbindung zu einer Datenbank innerhalb des Client-seitigen Codes hindeuten. In der Praxis würde es einigen Aufwand verursachen, die Architektur um diese Features zu erweitern. Deshalb wollten wir von Gemini wissen, wie man das besonders einfach bewerkstelligen könnte. Der Prompt dazu: Wenn wir diese Daten live schalten wollten, welche Schritte würdest du vorschlagen, um reale CRUD-fähige Daten nutzen zu können? Das verleitete Gemini zu mehreren vernünftigen Vorschlägen – darunter etwa MongoDB und PostgreSQL. Einer stach dabei jedoch besonders hervor: Firebase: Die Verwendung von Firebase Firestore als Datenbank und die Nutzung von Firebase SDKs in Ihrer Next.js-App kann ein sehr einfacher Ansatz sein, da dadurch der Bedarf für einen separaten Backend-Server minimiert wird und integrierte Authentifizierungs- und Sicherheitsregeln bereitgestellt werden. Bei Firestore handelt es sich um die von Google gehostete Daten-API – was keine schlechte Wahl darstellt. Schließlich nutzen wir bereits einen Google-Cloud-Dienst und Firestore würde einen API-basierten Data Store bieten, der jede benötigte Größe bewältigen kann. Zudem unterstreicht es, warum Google (begrenzt) kostenlosen Zugang zu Firebase Studio gewährt: die Integration mit anderen Cloud Services des Konzerns. Firestore-Fummeleien mit Firebase Das führte uns zum echten Härtetest für Gemini: Implementiere die Integration mit Firestore, erstelle alle erforderlichen Next.js-Services, verbinde sie mit dem neuen Data Store, befülle diesen mit Testdaten und sorge dafür, dass die Benutzeroberfläche mit dem neuen Backend funktioniert. Die Antwort der Google-KI: Das ist eine umfangreiche Anfrage, die mehrere Schritte in verschiedenen Bereichen der Anwendung umfasst (Backend-Dienste, Datenbankintegration und Frontend-UI). Um sicherzustellen, dass ich das implementieren kann ... Es tut mir leid, aber ich kann Ihnen dabei nicht helfen. Unser nächster Versuch: Das war uns irgendwie klar. Kannst Du uns helfen, den Prozess zu starten? Vielleicht indem du Firestore bereitstellst und einen Konnektor hinzuzufügst? Das bejahte Gemini antwortet, forderte aber vorher einige zusätzliche  Informationen: Firebase-Projekt: Haben Sie bereits ein Firebase-Projekt für diese Anwendung eingerichtet? Wenn ja, benötige ich die Projekt-ID. Wenn nicht, müssen Sie dieses in der Firebase-Konsole erstellen. Firebase-Initialisierung: Wie wird Firebase in Ihrer Next.js-App initialisiert? Haben Sie eine eigene Datei für die Firebase-Konfiguration? Authentifizierung: Haben Sie vor, die Firebase-Authentifizierung zu nutzen? Das ist wichtig, um einen sicheren Zugriff auf Firestore einzurichten. Eigentlich wollten wir genau diese Art von Arbeit an die KI auslagern – insbesondere den Aspekt Authentifizierung. Das sah also erst einmal nach einer Sackgasse aus – aber wir wollten nicht so schnell aufgeben. Und haben es noch einmal etwas spezifischer versucht: Kannst du eine Firestore-Instanz für mich einrichten und alle erforderlichen Authentifizierungsaspekte klären? Wenig überraschend hat das nicht funktioniert. Der nächste Prompt-Versuch: Wie wäre es, wenn du stattdessen eine lokale MongoDB-Instanz einrichtest? In der Konsequenz gab Gemini zwar alle dafür erforderlichen Schritte zurück – aber blieb tatenlos. Daraufhin folgte unsererseits der schon etwas verzweifelte Input: Kannst du alle erforderlichen Tools sowie den MongoDB-Server installieren und dort einen Testbenutzer und eine Datenbank erstellen? Gemini antwortete (unter anderem): Ich kann keine Befehle direkt auf Ihrem lokalen Rechner ausführen, um Software zu installieren oder Systemdienste wie einen Datenbankserver zu verwalten. Meine Fähigkeiten beschränken sich auf die Interaktion mit Ihren Projektdateien und die Ausführung von Befehlen innerhalb der bereitgestellten Terminalumgebung. Diese Einschränkung war uns vorher nicht bekannt – was sich durch einen Blick in die Dokumentation hätte ändern lassen. Aber wozu hat man schließlich KI, die auch direkt Auskunft über die eigenen Limitationen geben kann? Also haben wir unsere Strategie geändert: Versuchen wir etwas Einfacheres. Kannst du eine Admin-Seite erstellen, auf der ich neue Elemente zu unseren vorhandenen Daten hinzufügen kann? Nur eine einfache Backoffice-Seite, kümmere dich erst einmal nicht um die Authentifizierung. Daraufhin schlug Gemini einen Plan mit mehreren neuen Dateien vor: Beginnen wir damit, eine neue Seitendatei zu erstellen. Wie möchten Sie diese benennen? Wir könnten sie beispielsweise admin/page.tsx nennen. Auf die Anweisung, einfach alle nötigen Änderungen vorzunehmen, zeigte Gemini ein Dialogfeld an, in dem die Änderungen an der neuen Datei definiert sind und bot uns die Schaltflächen “Create File” und “Edit Changes” an. Der Klick auf letzteren Button rief eine Diff-Datei für die vorgeschlagene page.tsx auf. Weil die vernünftig aussah, ließen wir Gemini die Datei erstellen – woraufhin die KI ein Dialogfeld für die neue Datei src/app/api/products/route.ts öffnete, die die Next.js-Route im Backend verarbeitet. Dann meldet sich Gemini: Sie können nun in Ihrem Browser zur Route /admin navigieren, um auf die Admin-Seite zuzugreifen und neue Produkte hinzuzufügen. Nach dem Hinweis, dass wir auch einen Link zur Admin-Seite benötigen, zeigt sich Gemini einverstanden, forderte erneut eine Bestätigung für die nötigen Änderungen an und lud die Seite neu – inklusive dem gewünschten Seitenverweis. Ein Klick darauf führte zu einem simplen Input-Fenster, das sich anstandslos befüllen ließ. Matthew Tyson Allerdings haben wir im Nachgang festgestellt, dass die neue Admin-Seite keinen Link zurück zur Startseite enthält. Einziger Ausweg war in diesem Fall der Zurück-Pfeil des Browsers. Dennoch hat Gemini einen Großteil der Routinearbeit erledigt, die nötig war, um diese Admin-Seite erfolgreich einzurichten. Zurück auf der Hauptseite konnten wir die eben hinzugefügten Stiefel nicht in der Liste finden. Also haben wir Gemini gebeten, den Inhalt der Datei products.tsx anzuzeigen. Das führte zu folgendem, beunruhigendem Code-Output: export const products = [ { "name": "Warg Boots", "description": "Keeps the dire wolf's paws warm and clean.", "price": 1000, "imageUrl": "foo", "id": "1746565585872" } ]; Es ist zwar cool, dass Gemini Zugriff auf die Inhalte hat. Aber der Eintrag hätte zur Liste hinzugefügt werden sollen – statt sie zu ersetzen. Also zurück zur Hauptseite und noch einmal neu laden. Dachten wir. Matthew Tyson App kaputt? Der POST-Handler scheint die Produktliste neu geschrieben zu haben, anstatt sie zu aktualisieren – scheinbar ist dabei irgendwo ein grundlegender Fehler aufgetreten, sodass die Seite nicht geladen werden konnte. Das ist aber normal, wir reden hier schließlich über Softwareentwicklung. Firebase Studio – Testfazit Machen wir uns nichts vor: Nicht-Programmierer können auch mit Firebase Studio keine komplexen Applikationen erstellen. Diese Einschränkung gilt allerdings allgemein für alle agentenbasierten KI-Systeme. Ungeachtet dessen können Developer schon heute von Tools wie Firebase Studio und Gemini profitieren, wenn es darum geht, Routineaufgaben an die KI auszulagern – wie auch unser Test gezeigt hat. Die dadurch eingesparte Zeit lässt sich idealerweise für wichtigere Tasks verwenden. Wie lange es dauern wird, bis Firebase Studio und ähnliche Tools wirklich ausgereift sind, steht in den Sternen. Zwar scheint die Agentic-AI-Zukunft ganz allgemein gesetzt, allerdings könnte sie noch etwas länger auf sich warten lassen, als KI-Enthusiasten prophezeien. Vielleicht wird aber auch nie wirklich etwas daraus: Das Konzept der KI-Agenten, die autonom verwaltete Data Stores bereitstellen und Benutzer authentifizieren, könnte auch in einer üblen Cloud-Kostenspirale enden. (fm) Sie wollen weitere interessante Beiträge zu diversen Themen aus der IT-Welt lesen? Unsere kostenlosen Newsletter liefern Ihnen alles, was IT-Profis wissen sollten – direkt in Ihre Inbox!