Eigene Apps mit Google AI Studio erstellen – Schnellstart für Anfänger

Moin und willkommen zu einem neuen Snip. Das Google AI Studio ist nicht nur praktisch, um Texte zu generieren oder Bilder zu generieren, sondern du kannst damit sogar eigene Apps bauen. Also quasi wie Lovable, Bolt, Replit oder andere Tools, um mit natürlicher Sprache eigene Apps zu bauen, eigene Webseiten oder auch kleine Applikationen, die du dann auch veröffentlichen kannst. Und das Ganze ist im AI Studio so, wie man es nutzen kann, auch komplett kostenlos. Das heißt, Google gibt hier ordentlich was aus, um Leute an Gemini zu gewöhnen. Und ich will dir heute einmal zeigen, wie du es selber nutzen kannst und wie du dann auch entsprechend etwas veröffentlichen kannst oder auch den Quellcode einfach weiternutzen kannst. Ähm, also man muss gar nicht in dem Google-Kosmos bleiben. Und dafür springen wir einmal ins Google AI Studio. Falls du das AI Studio nicht kennst: Ganz, ganz schnelle Version. Ein bisschen wie Gemini, aber mit dem Fokus auf Entwickler. Das heißt, du hast hier rechts die Möglichkeit, verschiedene Modelle zu wählen. Du siehst hier auch Nano Banana, verschiedene Möglichkeiten, diese Modelle auch zu testen mit verschiedenen Parametern wie Temperature, Thinking Mode, ausprobieren, was funktioniert für dich bei Gemini und was nicht. Und hier oben hast du auch immer die Möglichkeit, noch den Code zu bekommen, wenn du es dann auch einbauen möchtest. Das ist eigentlich hier die Entwicklungsumgebung. Du kannst aber hier auch chatten und verschiedene andere Sachen machen, kannst du dir im Menü immer mal anschauen. Du hast hier auch im Studio den Bereich Generate Media, Stream und was wir heute machen wollen: Build. Und Build ist eigentlich Der Name ist eigentlich schon Programm: Du hast hier die Möglichkeit, mit Gemini und natürlicher Sprache eigene Apps zu bauen. Du hast hier so einen kleinen Showcase auch, also so was wie Home Canvas - Drag, Drop, and Visualize Any Product in Your Personal Space. Du siehst ja auch, was für Sachen benutzt werden, also so was hier Gemini 2.5 Flash, Image, also das Nano Banana-Modell, Gemini Co-Drawing, PixShop, quasi einen kleinen Foto-Editor, Vibe Check, Chat with Docs, Veo 3 Gallery, Gemini OS, also viele, viele Sachen, die zeigen, was kann das Ding schon. Wir können uns hiermit auch entsprechend etwas aussuchen. Wir können aber auch hier oben sagen, wir haben hier eine dieser Vorschläge, wir können aber auch sagen 'Start from template', das heißt hier ein Prompt Template, ein Video Image Gen, Chat Example, auch hier ChatGPT theoretisch nachbauen. Viele, viele Möglichkeiten. Wir können aber auch hier ganz, ganz einfach starten und hier entsprechend einen ersten Prompt auswählen und dann das bauen lassen. Hier rechts können wir noch Dateien hochladen, also beispielsweise PDF-Dateien, Textdateien oder auch Bilder, um beispielsweise den Stil oder auch den Inhalt entsprechend über Dateien zu verändern. Ja, und das machen wir einfach mal. Wir sagen hier: 'Create an AI image generator'. Und das Schöne ist: Hier im Hintergrund ist die gesamte Gemini-Suite quasi bekannt. Das heißt, anders als z. B. bei Lovable oder auch bei Bolt hätte ich mit so einem Prompt natürlich die Möglichkeit, alle Bildmodelle mit anzusteuern. Müsste mich aber dann noch entscheiden, welche API ich da einbinde etc. Das Schöne ist: Hier ist halt Gemini im Hintergrund. Das heißt, das Modell ist verstanden, es ist klar, wie es funktioniert. Und wir schicken das mal ab und das Ganze wird dann auch so gebaut, dass es dann in der Regel auch beim ersten Prompt oder beim ersten Versuch dann auch entsprechend schon läuft. Und du siehst hier mit einem fancy quasi Ladebildschirm wird hier kurz erklärt, was gemacht wird. Und dann siehst du hier auch schon die Zauberei. Wir nutzen hier bzw. hier wird aktuell das Gemini 2.5 Pro-Modell benutzt. Du siehst hier, es wurde nachgedacht, ein Reasoning-Modell, und es werden hier in der Mitte entsprechende Dateien erstellt. Relativ fix. Du siehst, wir haben hier keinen langsamen Aufbau, sondern eine ordentliche Geschwindigkeit. Und sobald halt dieser Code hier entsprechend erstellt wurde, switcht das Modell bzw. das Tool dann auch direkt in den Preview-Modus. Wir wollen uns jetzt hier auch mal gleich anschauen, wie das Ganze funktioniert. Ja, du siehst: ziemlich schnell. Und ich habe hier schon verschiedene Möglichkeiten mit drin. Lass uns das Ganze mal bei 'One-on-One' und sag mal 'a dog'. Und gucken mal, ob das Ganze schon out of the box funktioniert. Es lädt hier eine Weile und ich habe hier ein Bild eines Hundes. Sehr, sehr cool. Du siehst ja auch links den Chat. Du kannst hier den Thought-Prozess noch mal aufmachen. Das heißt, hier siehst du auch, was für Funktionen mitgedacht wurden, was der User möchte, wie so eine App aufgebaut wurde. Du siehst hier die verschiedenen Dateien. Du kannst hier auch einen Checkpoint restoren. Das heißt, wenn du merkst: 'Boah, irgendwie ist es kaputtgegangen', kannst du immer noch einen Schritt zurückgehen. Und du hast hier immer noch die Möglichkeit, wenn hier Fehler entstehen, dass hier auch Gemini automatisch die Fehler fixen kann. Und jetzt hast du hier unten auch ja Vorschläge quasi, also so was wie eine Image History, Download Experience, Negative Prompt. Wir wollen aber jetzt hier mal eine Edit-Funktion mit reinpacken. Und zwar sagen wir hier: 'add a feature to edit the generated image with a prompt'. Schicken das Ganze ab und auch hier wird wieder in einer ordentlichen Geschwindigkeit... Wir gucken jetzt hier noch mal die Capabilities, wir haben hier Gemini 2.5 Flash Image Preview, aber das geht damit, müssen wir mal schauen. Und das Ganze wird dann auch hier wieder umgebaut in wenigen Sekunden und wir bekommen hier eine entsprechende neue Version. Das heißt, hier wird das Ganze neu geladen. Du siehst dann auch, wenn es neu geladen ist, was jetzt hier schon mal passiert ist, ist das Ganze schon einmal durch. Ich würde aber immer hier als Empfehlung immer abwarten, bis hier der Chat wirklich auch durchgeladen ist, weil manche Sachen im Hintergrund einfach noch erstellt werden müssen und es wäre doof, wenn du dann etwas nicht funktioniert. So. Hier ist die Summary. Das heißt, wir haben auch eine Möglichkeit hier mit dem Ding zu kommunizieren, was wurde geändert und hier sind noch mal die Code Changes. Das heißt, hier werden noch mal die Sachen kurz erstellt. Du siehst hier die Dateien, die angepasst werden. Das heißt, wir haben einen Denkprozess, wir haben einen Chat, einen Output und wir haben einen Prozess für die Dateiveränderung. So, dann testen wir hier noch mal: 'a dog'. Bleiben wir einfach bei dem Prompt. So. Und jetzt kann ich hier sagen: 'Edit'. Und jetzt zum Beispiel sagen: 'replace the dogs with with cats'. Gucken wir mal, ob die Editierung schon funktioniert hat, einfach mal als einfaches Beispiel. So, es wurde hier die rechte Katze entsprechend ausgetauscht. Machen wir hier: 'replace the left the left dog with a cat'. Aber du siehst: Innerhalb von wenigen Sekunden habe ich hier eine funktionierende App, das ist ein AI Image Generator. Genau, jetzt haben wir hier beide Cat und der Kontext ist wie im aktuellen Nano Banana, also Gemini 2.5 Flash-Modell, sehr, sehr gut. Und wie gut der Kontext ist, das würde ich mir jetzt auch gerne anschauen. Und zwar möchte ich jetzt gerne so 'n so 'n Comparison Slider, also so einen Slider, wo man sehen kann, wie denn das alte und das neue Bild ist. Und ich sage jetzt einfach mal wirklich Gemini: 'Add a comparison slider to see the difference between the newest image and the original image that the user can slide'. So, und auch obwohl ich hier einen Rechtschreibfehler habe in 'Comparison', sollte es Gemini eigentlich relativ klar sein, was hier passieren wird. Das heißt, wir warten hier wieder und haben das in wenigen Sekunden. Ich lasse hier Gemini mal einmal kurz durcharbeiten. Wir müssen ja nicht dem Modell beim Denken zugucken. So, Gemini ist jetzt durch und ich probiere das Ganze noch mal. Sage jetzt hier wieder 'a dog', bleiben wir mal bei dem Prompt. Was hier auch noch ganz wichtig ist, ist der API-Key, der im Hintergrund benötigt wird, um die Bilder zu generieren. Der ist auch von Google automatisch eingefügt worden. Das heißt, hier musst du gar nicht drauf achten. Ich generiere noch mal ein neues, weil der Hund war mir nicht schön genug. So, jetzt haben wir hier einen Hund. Das sieht erst mal gut aus. Und ich würde jetzt mal sagen: 'Change the dog to a cat'. Mal gucken, wie gut er auch den Kontext behält, auch gerade mit dem Menschen dazu. Und dann zeige ich dir gleich im Nachhinein oder im letzten Schritt noch, wie das Ganze dann noch exportierbar ist, dass du es nicht hier nur bei dir nutzen kannst. So. Ja, das ist eine riesengroße Katze, aber du siehst, ich habe hier sogar einen Slider, und der Kontext ist hier sehr, sehr gut behalten. Das heißt, du siehst hier ganz, ganz klein, wenn man reinzoomen würde, würde man sehen, dass die Haare sich ganz leicht ändern vom Menschen. Und die Katze selbst, die Frisbeescheibe, die ist drin geblieben, selbst der lange Schwanz. Ziemlich, ziemlich gut, das neue Modell von Google. Ja, und da haben wir jetzt erst mal ein Tool gebaut innerhalb von wenigen Minuten, was sonst vor ein paar Jahren noch Wochen oder Tage, besser gesagt, gedauert hätte und man hätte viel, viel mehr Erfahrung gebraucht. Das Ganze kannst du hier oben speichern und auch hier herunterladen. Das heißt, wenn du jetzt sagst, du möchtest diesen Quelltext hier, diesen Code herunterladen, kannst du hier auf 'Download App' gehen. Da bekommst du dann einen Speicherdialog. Du kannst das Ganze auf zu zu GitHub synchronisieren. Das heißt, wenn du GitHub nutzt, kannst du da ein Repository entsprechend nutzen. Du kannst aber auch direkt deployen. Das heißt, du kannst hier auch ein Google Cloud-Projekt auswählen und dann entsprechend, wenn du das hier auswählst, kannst du auf Deploy gehen und dann bekommst du auch eine URL. Das ist direkt bei Google deployed. Dafür brauchst du allerdings einen Google Cloud-Account. Den kannst du aber auch kostenlos einrichten. Da brauchst du dann nur eine Kreditkarte. Das heißt, da kannst du dann wirklich die Cloud-Services alle von Google entsprechend nutzen. Und ja, mit diesem Snip habe ich dir gezeigt, wie du in wenigen Minuten in dem Fall jetzt einen AI Image Generator baust. Du hast aber auch gesehen, dass ich hier verschiedene Sachen einfach selber mir überlegen kann, die ich hinzufügen kann, und diese Google-Tools und -Integration hier sehr, sehr einfach nutzen kann. Du kannst das Ganze natürlich mit allen Sachen weiterdenken: Veo 3 ist eine Möglichkeit, mit Voice-Input, mit Gemini-Textmodell, also viele, viele Möglichkeiten hier, so eine App besser zu machen nach deinen Vorstellungen, für interne oder externe Zwecke. Dadurch, dass du den Code hier herunterladen kannst und auch editieren kannst, hast du hier auch sehr, sehr viele Freiheiten. Ja, und beim Bauen deiner ersten Apps mit Gemini wünsche ich dir ganz viel Spaß. Und dadurch, dass das Ganze kostenlos ist, hast du hier auch echt viele, viele Möglichkeiten, hier einfach mal ja wild alles auszuprobieren, was dir so in den Kopf kommt. Und genau, dabei wünsche ich dir ganz viel Spaß und wir sehen uns beim nächsten Snip. Ciao.