Build Anything with Firebase Studio + n8n AI Agents (beginner's guide)

Hallo Legends! In diesem Video zeige ich euch, wie man mit Googles Firebase Studio, das derzeit kostenlos nutzbar ist, und n, einem AI Agenten, absolut alles bauen kann. Firebase Studio ermöglicht es euch, Apps mithilfe von KI zu erstellen. Alles, was ihr tun müsst, ist, einfache Prompts in englischer Sprache einzugeben, und es erstellt die gesamte App für euch. Ihr braucht nichts zu coden, es kümmert sich um alles im Backend. n ist ein Workflow-Automatisierungstool mit Zugriff auf coole Dinge wie KI-Agenten. Die Kombination aus Firebase und n ermöglicht es euch, eine App zu erstellen, die tatsächlich Aktionen ausführt.

Dies ist die hochrangige Infrastruktur dessen, was wir heute aufbauen. Wir bauen eine sehr alberne App namens Excuse Generator 3000. Ich habe mir tatsächlich Nate Herks Video über Lovable und n angesehen, daher wollte ich hier ein ähnliches Beispiel erstellen. Wir verwenden Firebase Studio, um das Frontend für uns zu erstellen, auf dem ein Benutzer eine Anfrage für eine Entschuldigung stellt. Dann senden wir diese Anfrage an n, und verarbeiten sie mit diesem KI-Agenten. Der KI-Agent nimmt die Anfrage entgegen, generiert eine Entschuldigung und sendet sie direkt zurück in die Firebase Studio App. Das ergibt diesen Workflow.

Die gesamte App muss dies tun: Sie muss die Eingabe des Benutzers, also die Anfrage nach der zu generierenden Entschuldigung, empfangen. Dann muss sie diese Eingabe an n zur Verarbeitung senden, damit der KI-Agent sie entgegennehmen und die Entschuldigung generieren kann. Das ist Schritt drei. Schritt vier ist, die Ergebnisse dem Benutzer anzuzeigen. Wie ihr seht, haben wir ein paar Schritte in unserem Firebase Studio (Schritt 1, 2 und 4), und n ist der eigentliche AI-Agenten-Aufbau.

In Firebase beginne ich nun mit der Erstellung des Prompts, damit wir diese App generieren können. Ich werde diesen Workflow als Ausgangspunkt für meinen Prompt verwenden. Das habe ich bisher: „Build an app that helps users generate excuses. Call the app Excuse Generator 3000.“ Dann brauche ich ein Eingabetextfeld und eine Schaltfläche mit der Bezeichnung „Generate Excuse“. Bisher haben wir Firebase im Wesentlichen den Kontext der App, die wir erstellen wollen, gegeben. Wir haben die Anweisungen zum Empfangen der Eingabe vom Benutzer gegeben. Da wir diese Schaltfläche haben, können wir die Eingabe zur Verarbeitung an n senden. Aber jetzt müssen wir einen Endpunkt in n einrichten, um diese Anfrage von Firebase zu empfangen.

Um damit zu beginnen, klicke ich in n auf „Add first step“ und suche nach „Webhook“. Ein Webhook ist im Grunde eine benutzerdefinierte Adresse im Internet für uns. Er erlaubt uns, eine spezifische URL zu definieren, die Informationen von Firebase direkt in dieses n-Szenario übernehmen kann. Das erste, was ich tun möchte, ist, dies auf eine POST-Methode umzustellen. Dann möchte ich auf diese URL hier gehen und sie kopieren. Es gibt eigentlich zwei Modi für diesen Webhook: einen Testmodus und einen Produktionsmodus. Beide haben verschiedene URLs. Für den Test verwenden wir diese hier, wenn wir diesen eigentlichen n-Workflow erstellen. Sobald wir bereit sind, live zu gehen und dies die ganze Zeit aktiv zu haben, verwenden wir diesen anderen Webhook. Ich gehe zu Test, und kopiere das.

Okay, jetzt habe ich den Prompt aktualisiert. Jetzt sage ich: „Hey, wenn diese Schaltfläche gedrückt wird, also wenn „Generate Excuse“ gedrückt wird, sende die Eingabetext-Payload, also alles, was der Benutzer eingegeben hat, über eine POST-Anfrage an diese Webhook-URL.“ Das ist dieselbe, die wir gerade von n kopiert haben. Ich klicke auf „Prototype with AI“. Ich spule jetzt schnell vor, bis dieser erste Schritt abgeschlossen ist. Ich habe festgestellt, dass dies beim erstmaligen Einrichten etwas langsam ist. Google hat es glaube ich vor weniger als einem Tag veröffentlicht, also dauert es etwas. Diesmal ist es ziemlich schnell. Wir haben hier unsere anfängliche Anfrage in Firebase, und Firebase hat einen Aktionsplan erstellt. Ich klicke auf „Edit“. Ich habe die Möglichkeit, alles, was ich möchte, hier zu ändern. Ich kann es entweder manuell ändern, indem ich sage: „Okay, ich möchte diesen anderen Farbcode verwenden, oder ich möchte verschiedene Kernfunktionen hinzufügen.“ Oder ich kann hier einfach weiter Prompts eingeben, bis ich mit den Änderungen zufrieden bin. Aber ich möchte nur dies ändern: den App-Namen in Excuse Generator 3000, wie ich es ursprünglich wollte. Ich bin damit zufrieden, also klicke ich auf „Save“. Jetzt gehe ich zu… Okay, wenn dies fertig geladen ist, prototypiere ich diese App. Ja, ich hätte einfach noch etwas mehr hinzufügen können, das ändern, das ändern und mit dem ursprünglichen Aktionsplan fortfahren können, aber das reicht mir, um anzufangen. Jetzt könnt ihr sehen, dass Firebase die gesamte App im Backend erstellt, alle verschiedenen Dateien, alles, was benötigt wird. Wir müssen nichts programmieren. Wir sehen das zunächst, aber dann wird uns die tatsächlich erstellte Benutzeroberfläche angezeigt. Wir geben ihr noch ein paar Sekunden, und dann sollten wir mit etwas interagieren können. Okay, okay, super! Excuse Generator 3000. In diesem Stadium kann ich tatsächlich einfach etwas eingeben. Ich sage einfach „Hallo“, ich teste nur die Verbindung zwischen n und Firebase. Wir haben diesen Webhook live… eigentlich ist er noch nicht live, er ist nur im Testmodus. Ich klicke einfach auf „Test Workflow“. Jetzt ist er offen für den Empfang von Ereignissen. Zurück hier, klicke ich auf „Generate Excuse“. Okay, hier ist nichts passiert. Cool!

Wir können sehen, dass wir in n tatsächlich diese Informationen erhalten haben. Und wie sieht es aus? Okay, hier. Wir haben „Body“, und innerhalb von „Body“ haben wir „Context“, und es sagt „Hallo“. Wir konnten diese Informationen tatsächlich von der Excuse Generator App direkt an n senden. Das bedeutet, dass wir tatsächlich einige Funktionen für die App erstellen können. Als Nächstes möchte ich diesen KI-Agenten einführen. In diesem KI-Agenten möchte ich zunächst die Anfrage einfügen. Welche Nachricht auch immer wir von der Firebase-App, von dieser Excuse Generator-App, erhalten, möchte ich in diesen Agenten einfügen. Ich möchte den Agenten dann auch dazu auffordern, zu wissen, was er tun muss, z. B.: „Generiere eine Entschuldigung für dieses spezielle Ding.“ Das kann ich alles in den Einstellungen tun. Ich zoome einfach heran. Als Erstes ändere ich die Quelle für den Prompt. Ich gehe zu „Define below“. Jetzt kann ich einfach nach unten scrollen und diese Kontextvariable direkt hierher ziehen. Das bedeutet, dass jeder Wert, den ich hier habe, wie „Hallo“ oder „Generiere eine Entschuldigung dafür, dass ich meine Hausaufgaben nicht gemacht habe“, in diesen Agenten eingegeben wird. Jetzt haben wir auch die Möglichkeit, einige Systemanweisungen für diesen Agenten hinzuzufügen. Das ist ziemlich typisch, wenn man z. B. ein benutzerdefiniertes ChatGPT für sich selbst erstellt. Die Systemanweisungen sind die übergeordneten Anweisungen, die wir befolgen werden. Um das zu erstellen, gehe ich einfach zu ChatGPT und gebe einen Prompt ein, damit es mir bei der Erstellung eines Prompts für diesen Excuse Generator-Agenten helfen kann.

Okay, wir haben: „Hey, du bist ein Experte für die Erstellung von Prompts. Bitte erstelle mir einen Prompt für einen KI-Agenten, der urkomische und grenzwertig absurde Entschuldigungen für die Eingabe des Benutzers generiert. Gib dies im Markdown-Format aus.“ Mal sehen, was wir daraus bekommen. Hoffentlich generiert es einige funky Prompts… sorry, funky Entschuldigungen für uns. Wir haben das Markdown-Format, das sieht ziemlich gut aus. Vielleicht ist das Beispiel hier etwas zu weit hergeholt, egal. Kopieren wir das einfach und fügen es in n hier ein. Wir haben „System Message“. Müssen wir etwas bereinigen? Benutzer-Eingabe. Ich lösche das einfach. Ich denke, das ist… ja, das ist gut genug für mich. Und jetzt haben wir unseren KI-Agenten. Ja, und im Grunde haben wir in diesem Stadium die Eingabe, die von der Excuse Generator App kommt, und den eigentlichen Prompt für unseren Agenten, um einfach nur alberne, sehr, sehr alberne Entschuldigungen zu generieren. Als Nächstes müssen wir, um dieses rote Ausrufezeichen loszuwerden, eine Art Gehirn für dieses KI-System einführen. Ich klicke einfach auf diese kleine Plus-Schaltfläche. Jetzt haben wir eine Reihe verschiedener LLMs, auf die wir zugreifen können, und ich gehe zu „OpenAI Chat Model“. Wenn ihr n zum ersten Mal verwendet, müsst ihr einige Anmeldedaten erstellen. Geht einfach zu „Create new credentials“ und folgt den Anweisungen. Ihr müsst nur einen API-Schlüssel von eurem OpenAI-Konto erhalten. Und dann können wir auch eine Reihe verschiedener Modelle auswählen. Da ich möchte, dass dies etwas schneller geht, bleibe ich bei GPT-4 Mini. Es ist wie eine Echtzeitautomatisierung, die wir hier ausführen müssen, aber normalerweise verwende ich einfach GPT-4. Für alles, was nicht in Echtzeit erfolgt, werde ich das tun. In diesem Stadium verschiebe ich das einfach. Jetzt verschwindet der Fehler. Ich teste den Workflow noch einmal und sehe Schritt für Schritt, dass wir die Eingabe empfangen, sie in den Agenten einfügen und sehen können, dass der Agent eine Entschuldigung generiert. Zurück in der App sende ich einfach noch einmal „Hallo“ und sehe, was passiert. In n… Okay, wir haben eine Entschuldigung generiert: „Warum warst du bei einem Meeting nicht anwesend?“ Ich denke, das hat hier buchstäblich seine eigene Eingabe generiert, aber wenn ich heranzoomen, könnt ihr sehen, dass „Hallo“ tatsächlich als Kontext hinzugefügt wurde. Ein besseres Beispiel wäre vielleicht, einfach etwas Cooleres zu senden. „Entschuldigung, warum ich meine Hausaufgaben nicht gemacht habe.“ Okay, „Generate Excuse“. Okay, wir hatten hier tatsächlich einen Fehler, aber dieser Fehler liegt daran, dass ich nicht auf „Test Workflow“ geklickt habe, um diesen Webhook einfach zu öffnen. Ich kann das noch einmal drücken, und jetzt funktionierte der Workflow. Mal sehen. Die Ausgabe dieses KI-Agenten: „Mein Haustier-Goldfisch Sir Bubbles McFluffy Tail entwickelte plötzlich existenzielle Angst und verlangte ein Herz-zu-Herz-Gespräch.“ Das ist albern, und ich finde es ehrlich gesagt ziemlich gut.

Das letzte, was wir tun müssen, ist, die Antwort hier irgendwo anzuzeigen. In n müssen wir, um diese Informationen an unseren Excuse Generator 3000 zurückzusenden, einen weiteren Knoten hier haben. Ich suche nach „Webhook“ und klicke auf „Respond to Webhook“. Im Großen und Ganzen ist der Workflow folgender: Wir haben einen eingehenden Webhook, der diese Informationen von der Excuse Generator App empfängt, wir verarbeiten sie mit dem KI-Agenten, und jetzt senden wir die Entschuldigung vom KI-Agenten direkt in demselben API-Aufruf zurück, sodass sie in der Generator-App angezeigt wird. Damit das funktioniert, müssen wir in diesen anfänglichen Webhook gehen. Doppelklicken wir darauf, und wir müssen diese Konfiguration ändern. „Respond“ müssen wir von „Immediately“ ändern, was einfach bedeutet, dass sobald ihr die Anfrage von der Excuse-App erhaltet, einfach etwas zurücksendet. Das wollen wir nicht. Wir wollen es ändern, um mit dem Webhook-Knoten zu antworten. Jetzt haben wir das im Grunde mit dem verbunden, sodass dieses Ding die Antwort zurücksendet. Und solange wir schon dabei sind, klicken wir auf „Respond to Webhook“, und ich zoome einfach hier hinein. Jetzt haben wir auch diese Option, nämlich „Respond with“. „Respond with“ gibt uns etwas Kontrolle darüber, welche Informationen wir an die Excuse Generator App zurücksenden. Ich klicke einfach auf das Dropdown-Menü und klicke auf „JSON“. Jetzt haben wir eine strukturierte Antwort, und ich möchte das in „Excuse“ ändern. Und solange ich schon dabei bin, kopiere ich das einfach. Ich kopiere das, weil ich in unsere Firebase-App gehen und sagen werde: „Hey, das ist das Antwortformat, das ihr erhaltet. So solltet ihr es verarbeiten.“ Wir haben das Wort „Excuse“ und den Wert hier. Ich lösche das einfach und nehme diese Ausgabe und setze sie zwischen die Anführungszeichen. Diese Ausgabe ist die Entschuldigung, die wir von dem KI-Agenten hatten, und ich möchte sie einfach in diese Antwort einbauen, die wir zurücksenden. Eigentlich muss ich hier nur… das löschen und dann zwischen diese Anführungszeichen gehen und es jetzt einfügen. Und dann könnt ihr hier sehen, wie das tatsächliche Ergebnis, das dieses Mal zurückgesendet worden wäre, „Excuse“ und dann das tatsächliche „Mein Haustier-Goldfisch…“ Ding gewesen wäre. Okay, kopieren wir das noch einmal. Jetzt zoomen wir hier heraus. Alles ist eingerichtet. Jetzt müssen wir zurück in unsere Excuse Generator App gehen, und hier sage ich einfach: „Hey, wenn du die Anfrage an n stellst, erhältst du diese Antwort zurück.“ Alles, was ich getan habe, ist im Grunde gesagt zu haben: „Hey, die Antwort vom Webhook wird so formatiert, sie wird „Excuse“ und dann die Zeichenkette haben. Das sagt im Grunde nur: Das ist die Entschuldigung, die du zurückbekommst, also zeige die Entschuldigung dem Benutzer an.“ Zoomen wir hier heraus und drücken die Eingabetaste. Okay, jetzt werden im Backend alle Änderungen vorgenommen. Wir müssen keinen Code selbst ändern. Hier ist eine Vorschau dessen, was passiert. Es ist ziemlich schnell. Ich denke, wir können diesem Workflow tatsächlich einen Lauf geben. Testen wir den Workflow. Jetzt hier für „Generate Excuse“… sagen wir tatsächlich: „Generiere eine Entschuldigung, warum ich zu spät zur Arbeit gekommen bin.“ „Generate Excuse“. Und jetzt… Okay, das war tatsächlich ziemlich schnell. Das war sehr, sehr schnell, das ist super! Und jetzt haben wir unsere Entschuldigung hier: „Es tut mir so leid, dass ich zu spät komme. Eine Familie von zeitreisenden Igeln hat mich in ein endloses Schachspiel gefangen, gerade als ich dachte, ich würde von ihnen überlistet werden.“ Das ist verrückt, richtig? Ich meine, es ist eine sehr alberne App, aber wir konnten sie relativ schnell erstellen. Und jetzt könnt ihr buchstäblich jetzt jede App erstellen, die ihr wollt. Ihr seht genau, wie man hier mit einfachem Englisch Prompts erstellt. Ihr seht, wie man in den Code geht, um selbst einige Änderungen vorzunehmen. Die gesamte Erfahrung ist super einfach, aber der wahrscheinlich wichtigste Teil davon ist, noch einmal zu unterstreichen, dass n der Vermittler für alle Funktionen eurer App ist. Ihr müsst keine komplizierten API-Aufrufe oder Verarbeitungen im Frontend programmieren. Ihr könnt einfach sagen: „Hey, lass das Design gut aussehen, füge einen Ladeindikator hinzu, erstelle die gesamte Website, erstelle einige schöne anklickbare Schaltflächen, mache all das Frontend-UI-Zeug in Firebase, aber überlasse all die komplizierten mehrstufigen Funktionen einfach n.“ Wenn ihr also bereits viel Erfahrung mit n habt, um Agenten zu erstellen, ist dies buchstäblich eure Domäne für die gesamte Automatisierung. Und ihr könnt sehen, wie einfach es ist. Ihr erstellt einfach einen Webhook, sendet einige Informationen an n, und das startet euren Workflow. Euer Workflow kann nach Belieben angepasst werden. Ihr könnt mehrere Workflows haben. Und ja, dies ist eine super einfache Möglichkeit, Apps oder Websites, öffentliche Tools, interne Tools zu erstellen und sie in Produktion zu bringen. Ich hoffe, ihr hattet Spaß an diesem Video. Wenn ihr mehr von dieser Art von Sachen sehen wollt, hinterlasst bitte einen Kommentar unten. Danke!