Voice-Bot mit Google AI Studio bauen (kostenlos starten!)
Baue deinen eigenen interaktiven Voice-Bot mit Google AI Studio und Gemini Live: Vom Prompt über den React-Export bis zum Cloud-Deployment.
Über diesen Snip
Sprich live mit deiner eigenen KI – ganz ohne Programmierkenntnisse. In diesem Snip erfährst du, wie du im Google AI Studio per Prompting in wenigen Minuten einen interaktiven Voice-Bot baust, der in Echtzeit mit natürlicher Sprache antwortet.
Anhand eines Beispiels für einen KI-Interview-Simulator siehst du den kompletten Ablauf: vom Gemini-Live-Prompt über die automatisierte React-Codegenerierung samt Fehlerbehebung bis hin zum Testen im Browser, dem Code-Export und dem Deployment auf Google Cloud.
Transkript nachlesen
Moin und willkommen zu einem neuen Snip. Heute will ich dir einmal zeigen, wie du mit dem Google AI Studio für geringe Kosten, und du kannst auch kostenlos starten, deinen ersten Voice-Bot bauen kannst. Das heißt, du kannst dir KI-Tools bauen, die in Echtzeit mit dir kommunizieren und auch Antwort geben, auch mit Sprachoutput. Das Ganze aber mit natürlicher Sprache und das im AI Studio von Google auch kostenlos. Wir gucken uns das Ganze mal kurz hier an. Wir springen mal kurz rein. Du siehst hier schon einen AI-Interview-Simulator, sehr, sehr einfach gehalten. Und ich nehme jetzt einfach mal den Manager und ich nehme hier German. Und jetzt klicke ich mal auf Start. Hi! Guten Tag! Schön, dass Sie Zeit gefunden haben. Ja, cool. Stell direkt mal die erste Frage. Schildern Sie mir bitte einmal kurz Ihren... Nee, nee, eine weitere Frage. Alles klar. Was sind Ihrer Meinung nach die wichtigsten... Okay, danke. Das Gespräch ist beendet. Gut. Vielen Dank für Ihre Antworten. Wir werden uns bei Ihnen melden. So, du siehst jetzt hier: Das war eine krasse Geschwindigkeit. Ich habe innerhalb von einer Sekunde quasi einen Output bekommen, eine Antwort auf meine Frage. Das Ganze haben wir hier sehr, sehr einfach über ein Chat-Interface gebaut. Und das machen wir jetzt einfach mal zusammen und ich werde dir mal zeigen, wie einfach das geht. Dafür musst du ins AI Studio gehen von Google. Das ist quasi die Entwicklungsumgebung von Google, von den ganzen Gemini-Modellen. Du siehst hier verschiedene Tools: von einem Chat-Modul bis hin zu einem Vibe Coding GenAI Tool und natürlich auch das Usage-Tracking. Aber was jetzt hier das Interessante ist, ist wirklich das Ding in der Mitte: das Vibe Coding, GenAI-enabled Apps in Build. Dann klickst du hier drauf oder links auf Build, kommt dasselbe hinaus. Und dann hast du hier die Wahl, entweder über den Showcase reinzugehen – also hast verschiedene Apps, die du dir hier anschauen kannst, die du mit einem Klick nutzen kannst – oder du kannst dir selber was prompten. Und ich habe mal was vorbereitet: Zwar haben wir hier: „Build an AI Voicebot powered by Gemini Live“ – das ist ganz, ganz wichtig, dass du hier Gemini Live eingibst – „that acts as an interactive job interview simulator, allowing users to select their target role and preferred language...“ und der stellt quasi hier Einstiegsfragen für ein Jobinterview. Und was wir jetzt hier machen müssen, ist eigentlich nur das Ganze abschicken. Wir haben neuerdings auch hier links die Speech-to-Text-Sache, das heißt, wir können auch reinquatschen, wenn wir wollen. Wir können ja auch noch erwähnen, dass wir beispielsweise die Bildgenerierung mit Gemini nutzen wollen. Dadurch, dass Gemini hier von Google stammt, haben wir hier die Möglichkeit, sehr, sehr schnell genau diese KI-Integration einzubauen. Und ich habe es jetzt einfach mal abgeschickt und lasse das Ganze hier mal kurz arbeiten. Das dauert in der Regel ein bis wahrscheinlich maximal zwei Minuten. Und hier siehst du auch schon: Es startet der Voice-Bot auch bzw. es startet hier auch die Idee der Codegenerierung. Das heißt, du kannst dir anschauen, was für Dateien gerade erstellt werden. Du hast links auch den Thought-Prozess, also den Denkprozess des Modells. Dadurch, dass wir hier ein Gemini-Modell haben, sind die in der Regel relativ fix und können ganz gut arbeiten. Und jetzt wird hier quasi der Quellcode erzeugt für deine interaktive App. So, wir warten noch mal kurz, bis er hier fertig ist mit der kompletten Codegenerierung. Je nachdem, wie viele Features du hast, wie kompliziert das Ganze ist, unterschiedlich kompliziert, dauert das manchmal mehr oder weniger lange, um das hier zu generieren. Wie gesagt, mit dem Feature-Set, was wir jetzt haben, dauert das ein paar Minuten. Du siehst ja auch links als schönes Beispiel: Hier entstehen auch Fehler. Aber das bekommt Gemini in der Regel mit. Das heißt, wenn jetzt Fehler irgendwo wegen Quellcode-Thematiken entstehen, dann kann Gemini die selber erkennen und – du siehst es hier unten in der Beschreibung – diese Fehler auch erkennen und ausführen bzw. beheben. Und das ist ganz, ganz cool. So, jetzt warten wir mal kurz, bis er hier die Fehler behoben hat und dann auch das ganze Ding mal fertig gebaut hat. So, und nach knapp zwei bis drei Minuten ist hier Gemini auch fertig und wir werden hier mit einem kleinen Intro-Screen begrüßt. Du siehst hier schon: Diese App möchte gerne mit meinem Mikrofon arbeiten. Das macht hier natürlich super Sinn. Ich klicke auf „Allow“ und bin hier in meinem Interface drin. Kann hier eine Rolle auswählen – wir nehmen jetzt mal hier den UX Designer –, wir können eine Sprache auswählen, German beispielsweise, und können das Interview starten. Diese Features, die wir hier haben, die habe ich mir hier so ein bisschen mit in den Prompt reingepackt. Also zum Beispiel, was habe ich hier: „...allowing users to select their target role and preferred language at the start“, das heißt, hier habe ich diese Funktion, die wir hier gerade gesehen haben, auch mit eingepromptet. So, klicke ich mal auf „Start Interview“. Hallo! Guten Tag! Vielen Dank, dass Sie sich heute Zeit genommen haben. Erzählen Sie mir doch ein wenig über Ihre Erfahrung und Ihre Motivation für diese Position als UX Designer? Du kannst mich duzen. Alles klar. Du kannst dich gerne duzen. Erzähl mir doch ein wenig über Ihre Erfahrung und Ihre Qualifikation für diese Position. Nee, du kannst mich duzen. Verstanden, wir verwenden die Du-Form. Erzähl mir doch ein wenig über deine Erfahrung und deine Qualifikationen für diese Position. Ja, nö. Alles klar. Magst du mir ein bisschen etwas über deine Erfahrung... So, und du siehst hier: Das Ganze sehr, sehr schnell und einfach gebaut. Das Ganze können wir jetzt auch noch mal weiterverarbeiten. Wir können es exportieren. Dafür hast du oben rechts die entsprechenden Einstellungen. Wir können hier die App herunterladen, das heißt, du kannst hier auf diesen Download-Button gehen und dann wird dieser komplette Quellcode hier entsprechend runtergeladen. Das ist hier auf React basiert. Das heißt, wenn du es eh weiterverarbeiten willst, kannst du das machen. Du kannst es auch mit einem Klick zu GitHub rüberschieben. Dass du mit deinem GitHub-Repository arbeitest, kannst du das auch machen. Und last but not least das sogar direkt deployen. Das heißt, wenn du hier auf die kleine Rakete klickst, kommst du hier in einen Screen, wo du sagst: „Deploy an app on Google Cloud“. Hier musst du entsprechend dann ein Projekt auswählen, musst hier ganz, ganz wichtig eine Rechnungsadresse hinzufügen, damit das hier funktioniert, denn hier kosten diese Calls immer noch ein bisschen Kohle. Ich komme gleich auch zu den Preisen noch mal ganz kurz. Aber hier kannst du quasi ein Google Cloud-Projekt anlegen. Wenn du keins hast, kannst du das hier über „Create project“ machen, dann leitet dich Google da relativ einfach durch, und dann kannst du hier auf „Deploy app“ gehen. Und dann dauert das ein paar Sekunden und du bekommst hier entsprechend eine URL zum fertigen Video. Und so würde das dann aussehen: Du hast hier eine URL, die du auch auswählen kannst, kannst hier draufklicken und hast dann genau dieses Interface. Aber wie gesagt, es kostet natürlich ein bisschen was, und ich will mit dir kurz über die Preise reden, denn wir haben hier das Gemini 2.5 Flash Modell von Google mit entsprechenden Live-API-Sachen. Da haben wir eine kostenlose Stufe, die ist ja auch bis zum gewissen Rahmen gedeckt. Wenn du darüber hinausgehst, zahlst du hier für 1 Million Token an Eingabe 50 Cent, 3 Euro bzw. 3 Dollar für Input auf Audioebene, und die Ausgabe ist dann mit 2 Dollar bzw. 20 Dollar für Audio ein bisschen teurer. Generell bewegen sich die Preise immer hier in dem Million-Token-Kontextfenster. Wenn man sagt, man bleibt im Textbereich, ist 1 Million Token ungefähr 750.000 Wörter, das ist ein bisschen was. Also hier wirst du auch im Cent-Bereich erstmal arbeiten, außer du hast wirklich dann ein großes Projekt dahinter, aber dann lohnt sich halt ein Budget auch. Und damit kannst du eigentlich schon ziemlich gut arbeiten und hier entsprechend die ersten Tests fahren und dann das auch deployen. Natürlich kannst du es auch auf deine Domain deployen, da steht dir natürlich alles frei, je nachdem, was für Integrationen du hast. Ja, und damit haben wir jetzt unseren ersten eigenen Voice-Bot gebaut. Wir gucken, ob er mal auch hier funktioniert. Wir nehmen mal hier wieder German und UX Designer. Hallo, wie geht's dir? Guten Tag! Mir geht es gut, danke der Nachfrage. Wir beginnen jetzt das Vorstellungsgespräch für die Position User Experience... So, das hat prima funktioniert. Und damit haben wir uns in ein paar Minuten unseren eigenen Live-Voice-Bot gebaut. Und denk das Ganze mal weiter: Wo könnte es bei dir, bei deinem Use Case, in deinem Arbeitsalltag helfen, wenn du plötzlich dich unterhalten kannst mit einer beliebigen Stimme, das Ganze sehr, sehr gut qualitativ und auch sehr menschlich wirkt? Vielleicht hast du coole Ideen, schreib's gern unters Video oder schreib uns, wenn du deine ersten Projekte hast. Freuen wir uns immer und würden wir auch immer ganz gerne veröffentlichen und in der Community teilen. Also von daher wünsche ich dir ganz viel Spaß mit dem Ausprobieren, mit dem Experimentieren, mit dem Quatschen der KI, und wir sehen uns beim nächsten Snip. Ciao!
Vom Anschauen zum Anwenden
Was möchtest du aus diesem Snip in deinem Arbeitsalltag ausprobieren? Wähle eine konkrete Aufgabe und überlege, wie du das Ergebnis überprüfen kannst.




