▲ Community Session: Schneller veröffentlichen und validieren mit PostHog + v0

VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00[KEIN AUDIO]
00:00:30[KEIN AUDIO]
00:01:00[KEIN AUDIO]
00:01:29>> Hallo zusammen.
00:01:32Willkommen zur dieswöchigen Vercel Community-Session.
00:01:36Wir freuen uns riesig, dass ihr dabei seid.
00:01:41Es ist wirklich schön, diese Live-Sessions zu machen, da ich das Gefühl habe,
00:01:44schon länger keine mehr gemacht zu haben.
00:01:46Also hallo an alle.
00:01:47[LACHT] Falls dies eure erste Teilnahme an einer unserer Community-Sessions ist:
00:01:53Ich bin Pauline Navas vom Community-Team hier bei Vercel.
00:01:57Vielleicht habt ihr mich schon in den Community-Bereichen unserer eigenen Plattform
00:02:03[www.vercel.com](https://www.vercel.com) oder auf X oder LinkedIn gesehen, wo ich Fragen beantworte
00:02:08und mich mit der Community austausche, um zu verstehen, was ihr alle
00:02:12auf Vercel aufbaut.
00:02:13Dies ist immer eine gute Gelegenheit, um mit unserer Community,
00:02:18unseren Kunden und unseren Nutzern live in Kontakt zu treten.
00:02:22Cool, es ist toll zu sehen, dass schon so viele von euch hier sind.
00:02:25Ich sehe ein „Guten Abend“ von Adam im Chat.
00:02:29Hallo, hallo, hallo.
00:02:31Schreibt uns doch mal eine Nachricht in den Chat und lasst uns wissen, von wo aus ihr heute zuseht.
00:02:36Wenn ihr auf X, YouTube oder LinkedIn zuschaut und
00:02:39live am Chat teilnehmen wollt, geht auf [community.vercel.com/live](https://community.vercel.com/live).
00:02:46Dort solltet ihr die Session direkt ganz oben finden und könnt einen Kommentar hinterlassen.
00:02:53Ich freue mich immer sehr auf die heutigen Sessions zu den
00:02:58Vercel-Marktplatz-Integrationen, weil es einfach cool ist zu sehen,
00:03:03was man mit unseren Integrationen alles auf Vercel aufbauen kann.
00:03:07Heute sprechen wir mit PostHog.
00:03:11Falls ihr sie noch nicht kennt: Die Kurzversion ist, dass PostHog
00:03:16eine Open-Source-Plattform für Produktanalysen ist.
00:03:19Man kann es sich als Paket aus Feature-Flags, A/B-Tests, Event-Tracking und
00:03:25im Grunde allen Tools vorstellen, die einem helfen zu verstehen, was eigentlich passiert,
00:03:29wenn Leute das Produkt benutzen.
00:03:31Was die heutige Session so spannend macht, ist, dass PostHog jetzt
00:03:36direkt in v0 integriert ist.
00:03:38Das bedeutet, dass ihr von einer Idee direkt zu einem Live-Experiment gehen könnt,
00:03:43ohne jemals euren Builder verlassen zu müssen.
00:03:45Es heißt also nicht mehr: Erst veröffentlichen und sich später um die Analysen kümmern.
00:03:50Ihr könnt Feature-Flags einrichten, Tests durchführen und benutzerdefinierte Events tracken –
00:03:55und zwar direkt während des eigentlichen Erstellungsprozesses.
00:03:58Ich höre jetzt auf zu quatschen, aber hey, ich sehe, dass viele von euch hier im Chat dazukommen.
00:04:06Schön.
00:04:06Verratet uns, von wo aus ihr zuschaltet, Leute.
00:04:09Cool.
00:04:10Ohne Umschweife möchte ich nun unseren Gast Brooker von PostHog begrüßen.
00:04:16Hey, Brooker.
00:04:17- Hallo.
00:04:17Freut mich sehr, hier zu sein.
00:04:19Genau, wie Pauline schon sagte, mein Name ist Brooker.
00:04:21Ich bin Product Engineer im Growth-Team.
00:04:25Zu Beginn werde ich euch ein wenig darüber erzählen, was PostHog bietet
00:04:30und warum man so etwas wie PostHog in v0 nutzen möchte.
00:04:34Dann werden wir einige Anwendungsfälle in Vercel und v0 durchgehen.
00:04:41Ich werde eine Live-Demo machen.
00:04:42Wir werden also einige dieser Anwendungsfälle tatsächlich implementieren.
00:04:46Zwei Punkte möchte ich dabei besonders hervorheben. Zuerst fange ich damit an,
00:04:49was PostHog überhaupt ist und warum es für euch als Nutzer von v0
00:04:54und Vercel interessant ist.
00:04:56Also, ihr nutzt v0, habt die coolste App aller Zeiten gebaut und sie live geschaltet,
00:05:02nun wollt ihr wissen, wie sie läuft. Wie findet ihr das heraus?
00:05:06Wie versteht ihr, wie die Leute eure App nutzen, was sie daran mögen
00:05:11und was vielleicht nicht?
00:05:12Wie merkt ihr, wenn etwas schiefläuft?
00:05:15Oft ist es so: Man veröffentlicht eine App, und im Preview-Modus
00:05:19funktioniert alles super.
00:05:20Vielleicht habt ihr selbst ein paar Tests gemacht, aber im Live-Betrieb
00:05:26treten Probleme auf, die ihr nicht vorhergesehen habt.
00:05:29Vielleicht wird eine Exception ausgelöst, und da wäre es hilfreich,
00:05:33Einblick in diese Vorgänge zu haben. Vor allem, diesen Einblick
00:05:39und Kontext direkt in v0, in den Agenten, zu bringen, damit der Agent versteht,
00:05:45was in der Produktion passiert, und das Problem für euch beheben kann,
00:05:50ohne dass ihr mühsam Kontext aus verschiedenen Quellen zusammensuchen müsst –
00:05:55sei es aus eurem Logging-System, dem Fehler-System oder indem ihr den Fehler
00:05:59selbst reproduziert und Code aus den Chrome-DevTools kopiert.
00:06:02Nicht, dass ich das jemals hätte machen müssen.
00:06:04- Ich glaube, das haben wir alle schon mal gemacht.
00:06:07- Ja.
00:06:09Das ist also ein Anwendungsfall, den ich zeigen möchte: Fehlerbehandlung.
00:06:13Und der andere sind Feature-Flags und A/B-Tests.
00:06:17Ich persönlich genieße diese Art der Entwicklung sehr.
00:06:23Stellt euch vor, ihr arbeitet im Team.
00:06:26Ihr sprecht über eine neue Funktion, die ihr hinzufügen wollt.
00:06:29Und vielleicht hast du eine andere Meinung als dein Teamkollege darüber,
00:06:33wie man diese Funktion implementieren sollte.
00:06:34Du willst es auf diese Weise machen,
00:06:36die andere Person auf jene.
00:06:39Ein toller Weg, das zu lösen, ist einfach beides zu machen, es in der Produktion
00:06:42zu testen und zu sehen, was bessere Ergebnisse liefert.
00:06:46Das werden wir also auch durchgehen.
00:06:48Lange Rede, kurzer Sinn: Ich teile jetzt mal meinen Bildschirm.
00:06:51Ich werde euch durch den gesamten Prozess von Anfang bis Ende führen.
00:06:55Ein kleiner Teil ist bei diesem Account schon vorbereitet.
00:06:58Ich wechsle daher kurz zu einem Account, auf dem PostHog noch nicht installiert ist.
00:07:06Sagt mir bitte Bescheid, wenn mein Bildschirm zu sehen ist.
00:07:09- Der Bildschirm ist sichtbar, Brooker. Leg los.
00:07:11- Super.
00:07:11- Toll.
00:07:12Okay.
00:07:12Wir sind also in Vercel.
00:07:14Wir gehen zu den Integrationen und suchen nach PostHog.
00:07:18Ich weiß nicht, warum hier steht... ah, „Marktplatz durchsuchen“.
00:07:21Wir gehen also auf den Marktplatz.
00:07:22Wir suchen nach PostHog, wählen es aus und klicken auf „Installieren“.
00:07:29Nun werde ich gefragt, ob ich ein neues Konto erstellen oder ein bestehendes verknüpfen möchte.
00:07:32Falls ihr bereits ein PostHog-Konto habt, könnt ihr diese verknüpfen.
00:07:35Und was das für mich tun wird... wir installieren es einfach mal hier.
00:07:39Es wird... Moment... Entschuldigung, ich kann nicht gleichzeitig klicken und reden.
00:07:46Warum muss ich eine Rechnungsadresse angeben?
00:07:48Okay.
00:07:49Ihr füllt also dieses Formular aus.
00:07:52Klickt auf „Weiter“.
00:07:53Das wird eure... ich zeige euch mal, was es bewirkt.
00:07:59Es wird eure Umgebungsvariablen synchronisieren, sodass wenn ich zu den Einstellungen gehe...
00:08:06Oh, ich gehe mal zur Übersicht.
00:08:09Oh, ich dachte, ich hätte das schon installiert.
00:08:14Machen wir das kurz.
00:08:15Wir werden es für ein Projekt installieren.
00:08:17Ich wähle also aus, für welches Projekt ich es installieren möchte.
00:08:20Klicke auf „Weiter“.
00:08:22Prima.
00:08:23Das geht... ich habe also das Projekt ausgewählt.
00:08:25Mal sehen.
00:08:30Entschuldigung, ich dachte, ich hätte hier eines.
00:08:32Oh, ich weiß, woran es liegt.
00:08:33Ich habe einfach den falschen Account hier offen.
00:08:35Ich glaube, ich bin in diesem hier.
00:08:37- Das ist übrigens das Beste: die Fehlersuche und das gemeinsame Durchgehen der Schritte.
00:08:41Das ist toll.
00:08:42- Ja.
00:08:44Okay, ja, hier bin ich verbunden.
00:08:47Was ich zeigen wollte: Das wirklich Coole an dieser Integration ist, dass man
00:08:51die Umgebungsvariablen nicht selbst verwalten muss.
00:08:55Wer Erfahrung damit hat, weiß, dass das nicht viel Spaß macht, besonders wenn man
00:08:59seine Keys austauschen muss, was man regelmäßig tun sollte.
00:09:03Die Vercel-Integration mit PostHog erledigt das alles für euch.
00:09:08Man muss sich im Grunde nur durch den Installationsprozess klicken,
00:09:12den ich gerade gezeigt habe.
00:09:13Es kümmert sich auch um die Abrechnung, wobei wir ein sehr großzügiges kostenloses Kontingent haben.
00:09:17Hoffentlich müsst ihr euch also erst einmal keine Sorgen darum machen, bis euer Produkt
00:09:21richtig durchstartet – und dann wird das eure kleinste Sorge sein.
00:09:24Aber ja, das wird eure Umgebungsvariablen synchronisieren.
00:09:28Die wichtigsten Dinge hier sind... der PostHog-Host ist... ich zeige die jetzt nicht im Detail,
00:09:33um keine Kritik zu riskieren, aber der Host ist einfach eine URL.
00:09:39Das wird so etwas wie us.i.posthog.com sein.
00:09:43Der PostHog-Key ist der entscheidende Teil, denn er sagt PostHog,
00:09:48um welches Projekt es sich bei PostHog handelt.
00:09:50Wenn eure Anwendung also in der Produktion läuft und Fehler, Nutzung
00:09:58und Feature-Flags an PostHog zurückgemeldet werden, identifiziert dieser Key
00:10:02euer Produkt innerhalb eines PostHog-Projekts.
00:10:07Es ist also sehr nützlich, dass das hier alles automatisch für einen eingerichtet wird.
00:10:12Gibt es irgendwelche Fragen zur Vercel-Seite?
00:10:16Es ist ziemlich simpel.
00:10:17Ich bin ein wenig drübergegangen und hatte auch ein paar Probleme, tut mir leid.
00:10:21Aber im Grunde: Installieren, mit dem Vercel-Projekt verknüpfen, in dem man es
00:10:25nutzen möchte, und schon kann es losgehen.
00:10:28Es gibt hier auch einige Anleitungen für den Einstieg.
00:10:32Ihr könnt eure Feature-Flags hier sehen, falls ihr welche eingerichtet habt.
00:10:35In diesem hier habe ich noch keine, aber das wird sich gleich ändern.
00:10:40- Ja, das ist klasse.
00:10:41Ich wollte gerade sagen, es gibt aktuell keine Fragen, was wohl zeigt, wie nahtlos das Ganze ist.
00:10:47Ich habe im Chat gefragt, ob schon mal jemand diese Integration ausprobiert hat.
00:10:51Falls ja, lasst es uns wissen und stellt gerne Fragen währenddessen.
00:10:54- Ja, und unterbrecht mich gerne jederzeit.
00:10:58Kommen wir nun zur Demo.
00:10:59Ich habe eine App am Laufen.
00:11:01Ich habe ein kleines Spiel gebaut.
00:11:02Es heißt „Hog Hop“.
00:11:04Und hier habe ich einen kleinen PostHog.
00:11:06Da laufen ein paar Käfer rum und ich versuche, Datenpunkte zu sammeln.
00:11:12Max springt also herum und sammelt Datenpunkte.
00:11:15Ich habe einen Bug.
00:11:16Wenn ich bestimmte Datenpunkte einsammle, friert es einfach ein.
00:11:21Ich kann jetzt gar nichts mehr machen.
00:11:23Das ist mir in der Produktion passiert, und ich brauche Hilfe, um herauszufinden, was da los ist.
00:11:28Ich könnte, wie vorhin erwähnt, die DevTools öffnen.
00:11:32Ich könnte in den Vercel-Logs nach Fehlern suchen.
00:11:41Aber ich werde euch zeigen, wie ihr das alles gar nicht machen müsst.
00:11:44In v0 könnt ihr den gesamten Kontext zum Fehler sammeln und ihn direkt dort
00:11:50beheben.
00:11:51Zuerst zeige ich euch, wie wir das MCP hinzufügen.
00:11:54Unten links in eurem Chat in v0 gibt es diesen kleinen Plus-Button,
00:12:01und dort gibt es einen Bereich für MCPs.
00:12:04Ihr könnt einfach auf „MCP hinzufügen“ klicken.
00:12:06PostHog ist dort als eine Art voreingestelltes MCP aufgeführt.
00:12:10Ich habe es hier schon verbunden, also werde ich die Verbindung nicht trennen.
00:12:13Aber ihr klickt einfach auf das Plus, und werdet dann gebeten, euch
00:12:18mit eurem PostHog-Konto anzumelden.
00:12:19Eine Sache, die ich vorhin nicht gezeigt habe: Wenn man diese Integration von PostHog
00:12:25und Vercel erstellt, bekommt man diesen „In PostHog öffnen“-Button, der einen
00:12:30bei PostHog anmeldet, sodass man sich nicht um Zugangsdaten oder Ähnliches kümmern muss.
00:12:36Ich bin hier also angemeldet, und wenn ich in v0 das MCP verbinden möchte,
00:12:42klicke ich einfach auf Authentifizieren, und es öffnet sich ein PostHog-Tab,
00:12:48um das MCP zu bestätigen.
00:12:50Mir fällt gerade auf, dass ich MCP gar nicht definiert habe, tut mir leid.
00:12:52MCP steht für Model Context Protocol. Es ist im Grunde eine Möglichkeit,
00:12:58dem Agenten – dem v0-Agenten – die Fähigkeit zu geben, Informationen zu sammeln oder
00:13:03Funktionen aufzurufen, die mit diesem Konto verknüpft sind.
00:13:07In diesem Fall sagen wir: „Hey v0, wenn du Fragen stellen oder Dinge
00:13:14in PostHog verwalten musst“ – und das MCP von PostHog ist ein sehr
00:13:19umfangreiches Produkt, man kann damit eine Menge machen.
00:13:24Ich zeige es mal kurz... wir haben die PostHog-Docs zum Model Context Protocol.
00:13:29Hier sieht man all die Dinge, die man damit machen kann.
00:13:33Lassen Sie sich von dieser Liste nicht abschrecken.
00:13:35Das ist alles bereits in den Agenten geladen.
00:13:36Sie könnten also einfach fragen: "Was kann ich mit dem PostHog-MCP machen?"
00:13:42Und er wird es Ihnen sagen.
00:13:43Ich stelle nur sicher, dass dieser kleine Schalter hier aktiviert ist.
00:13:50Und, ja, was ich hier zeigen wollte, ist wieder Folgendes:
00:13:55Wenn ich versuche, diesen dritten Datenpunkt zu erfassen, stoße ich auf einen Fehler.
00:14:00Es friert einfach ein.
00:14:01Das werde ich hier jetzt beschreiben.
00:14:04Er hat mir all diese Funktionen des PostHog-MCPs genannt.
00:14:08Das werde ich dem Agenten jetzt so schildern.
00:14:10Ich sage also: "Wenn ich Datenpunkte mit Max sammle, friert es manchmal ein."
00:14:23"Kannst du den Fehler mithilfe der PostHog-MCP-Fehler finden und für mich beheben?"
00:14:35Während er das macht, zeige ich Ihnen kurz das PostHog-Dashboard.
00:14:39In PostHog kann ich auf Apps und dann auf Error Tracking gehen.
00:14:47Und wie gesagt, PostHog kann eine Menge.
00:14:50Es gibt dort also ziemlich viele Funktionen zu entdecken.
00:14:55Wir konzentrieren uns nur auf ein paar, um Ihnen eine konkrete Vorstellung zu geben.
00:15:01Wenn Sie technisch versierter sind und genau sehen wollen, was da los ist,
00:15:04können Sie das öffnen und zum Beispiel...
00:15:11...auf den Fehler klicken und einen Stacktrace einsehen.
00:15:14Sie sehen auch, wie oft der Fehler auftritt.
00:15:17Und was sieht man dort noch?
00:15:20Ähnliche Probleme.
00:15:21Mal sehen, ob das hier noch läuft.
00:15:25Oh, er hat es repariert.
00:15:26Okay. Ich zeige Ihnen noch etwas, wenn wir das nächste Mal auf den Agenten warten.
00:15:30Hier steht also, dass es behoben wurde.
00:15:32Mal sehen, ob ich es bereitstellen oder in der Vorschau testen kann.
00:15:37Lassen Sie uns das einfach machen.
00:15:39Alles klar.
00:15:39Ich springe mal herum und sammle etwas ein.
00:15:41Oh, es funktioniert!
00:15:42Klasse. So einfach geht das.
00:15:46Ich hatte also einen Bug.
00:15:48Ich habe ihm grob beschrieben, was passiert ist.
00:15:51Selbst wenn man nicht viele Infos zur Reproduktion hat,
00:15:55kann man dem Agenten weniger sagen und ihn einfach nach Fehlern suchen lassen.
00:15:59Ich könnte fragen: "Gibt es andere Fehler im PostHog-MCP, die wir fixen sollten?"
00:16:09Ich sage "von heute", damit wir nicht zu weit in die Vergangenheit gehen.
00:16:12Was ich auch noch zeigen wollte: Das Session Replay ist ein ziemlich cooles Feature.
00:16:21Damit kann ich tatsächlich sehen – oh, das sieht hier nicht so gut aus.
00:16:27Oh, das ist interessant.
00:16:28Okay. Wir überspringen das, aber ich werde mir das ansehen.
00:16:33Normalerweise kann man genau sehen, was die Leute machen.
00:16:36Ich vermute, wegen der Technologie, die wir für dieses Spiel nutzen,
00:16:42wird die Aufnahme fehlerhaft dargestellt.
00:16:44Aber bei anderen App-Typen funktioniert das definitiv.
00:16:50So etwas habe ich bei keiner anderen App gesehen.
00:16:51Man sieht also, wie die Leute die App nutzen und auf welche Probleme sie stoßen.
00:16:58Dieses Live-Video davon zu sehen, hilft enorm bei der Kontextualisierung.
00:17:04Es liefert so viel mehr Informationen, als wenn man nur versucht,
00:17:08Aktivitäten, Events oder Logs zu analysieren.
00:17:13Gut, wir haben also noch ein paar andere Fehler.
00:17:16Diesen Punkt möchte ich auch betonen.
00:17:18Als Entwickler weiß man oft gar nicht, was den Nutzern in der Live-Umgebung passiert.
00:17:25Vielleicht melden sie es Ihnen nicht.
00:17:26Vielleicht sind Sie selbst noch nie darauf gestoßen.
00:17:28Sichtbarkeit für alle Fehler zu haben, kann also extrem hilfreich sein.
00:17:34In diesem Fall haben wir also noch ein paar andere Fehler, die auftreten.
00:17:40Oh, sieht so aus, als wären beide behoben worden.
00:17:43Cool. Gibt es dazu Fragen?
00:17:47Ich würde dann gerne zu den Feature-Flags übergehen.
00:17:51Im Chat gibt es gerade keine Fragen, aber Kommentare.
00:17:54Jemand schreibt, sie hätten viele Tools an einem Ort, ein extrem großzügiges Gratis-Angebot
00:18:01und eine großartige Developer Experience, was natürlich schön zu hören ist.
00:18:05Ich hätte da eigentlich eine Frage – wahrscheinlich sprichst du das gleich noch an.
00:18:11Was sind neben Fehlern noch andere wertvolle Dinge, die das PostHog-MCP
00:18:19für v0-Nutzer tun kann, die vielleicht oft übersehen werden?
00:18:23Ja. Meiner Meinung nach sind Feature-Flags und Experimente mit am nützlichsten.
00:18:30Ich denke, viele Teams und Anwendungen nutzen sie noch nicht, obwohl sie es sollten.
00:18:38Das zeige ich jetzt mal kurz.
00:18:40Ja, absolut.
00:18:41Perfekte Überleitung.
00:18:42Genau. Also, fügen wir etwas hinzu – in diesem Fall habe ich dieses Spiel.
00:18:46Aktuell habe ich keine Möglichkeit, die Käfer zu erledigen.
00:18:48Besonders dieser eine Käfer hier, der auf der Plattform hin und her läuft.
00:18:52Ich habe echt Mühe, diesen Datenpunkt zu bekommen.
00:18:55Und meinen Nutzern geht es genauso.
00:18:57Ich möchte also eine Zusatzfunktion einbauen.
00:19:01Geben wir meinem Igel die Fähigkeit, Laser aus seinen Augen zu schießen.
00:19:16Aber ich möchte das gegen eine andere Funktion testen.
00:19:22Ich überlege gerade... Laser.
00:19:24Wir könnten auch den Klassiker machen, wie bei Mario.
00:19:27Erstellen wir also ein multivariantes Feature-Flag mit Lasern als eine Variante
00:19:43und der Fähigkeit, auf die Käfer zu springen, um sie zu besiegen, als andere.
00:19:52Und dann – ich möchte hier ein paar Dinge demonstrieren.
00:19:59Das MCP ist sehr mächtig.
00:20:02Man kann es für fast alles nutzen, wofür man sonst das Dashboard nimmt.
00:20:07Man kann das zwar im Dashboard machen,
00:20:10ich zeige es Ihnen mal unter Apps.
00:20:17Und dann Feature-Flag.
00:20:21Fast alles, was im MCP geht, geht auch hier im Chat.
00:20:25Wenn man – ich öffne hier mal einen neuen Tab.
00:20:29Oh, in dem Tab kann man gar nicht chatten.
00:20:33Hoppla.
00:20:34Jetzt hab ich's verloren.
00:20:37Hier, einen neuen Chat öffnen.
00:20:39Ich könnte einen ähnlichen Prompt eingeben.
00:20:43Der einzige Unterschied ist, dass dieser Chat natürlich nicht meinen v0-Code ändern kann.
00:20:48Ich muss das erst akzeptieren.
00:20:52Aber ich könnte ihn trotzdem zur Verwaltung der Feature-Flags nutzen.
00:20:55Oder ich erstelle hier ein Feature-Flag – und es sollte jetzt gerade erstellt werden.
00:21:01Da haben wir's.
00:21:02Experiment, erstellen.
00:21:03Ich könnte es über die Benutzeroberfläche machen.
00:21:04Aber ich zeige es über den v0-Agenten mittels MCP,
00:21:07weil ich finde: Je mehr ich direkt im Agenten wie v0 erledigen kann, desto besser.
00:21:16Ich will meine Zeit nicht damit verbringen, herumzuklicken und ein neues UI zu lernen.
00:21:20Obwohl das Dashboard super cool ist und mir das Interface gefällt,
00:21:24verbringe ich lieber mehr Zeit direkt in v0 beim Bauen.
00:21:31Sehr gut.
00:21:35Das Experiment wurde also eingerichtet.
00:21:36Und wir haben Metriken festgelegt.
00:21:39Das ist einer der Schlüssel für Experimente: Was genau ist die Hypothese,
00:21:40die man testen möchte?
00:21:47v0 hat einfach mal eine Hypothese für uns entworfen.
00:21:49Das ist ziemlich praktisch.
00:21:53Vielleicht lese ich mir das durch und passe es noch an.
00:21:55Hier steht, es wird getestet, was zu einer besseren Abschlussrate des Spiels führt.
00:21:58Das ist gut.
00:22:02Vielleicht ist mein Ziel die Abschlussrate.
00:22:03Vielleicht aber auch einfach die im Spiel verbrachte Zeit.
00:22:05Ich denke, die Abschlussrate ergibt Sinn.
00:22:09Das wurde also als primäre Metrik festgelegt.
00:22:13Man stellt also zuerst eine Hypothese auf.
00:22:16Was teste ich eigentlich?
00:22:18In diesem Fall teste ich: Ist Draufspringen oder Laser motivierender?
00:22:19Dann legen wir die primären Metriken fest.
00:22:26Und dann gibt es noch das Konzept der sekundären Metriken, die ich für sehr wichtig halte.
00:22:29Primäre Metriken sind die Hauptziele, die man erreichen will.
00:22:33Aber bei jedem neuen Feature oder jeder Änderung kann es
00:22:38sekundäre Effekte geben.
00:22:43Vielleicht werden pro Sitzung mehr oder weniger Käfer erledigt.
00:22:44Vielleicht beenden sie das Spiel öfter, töten aber weniger Käfer.
00:22:49Eher unwahrscheinlich.
00:22:52Oder die Tode pro Sitzung sind ein weiterer Punkt.
00:22:53Wann immer man ein Experiment aufsetzt, sollte man überlegen: Was ist mein Ziel?
00:22:57Und was sind Dinge, die davon beeinflusst werden könnten,
00:23:02die zwar nicht das Hauptziel sind, die ich aber im Blick behalten will.
00:23:03Kurze Frage dazu, Brooker.
00:23:09Wenn jemand versehentlich zuerst die falsche Zielmetrik einstellt,
00:23:14wie einfach kann man das in PostHog anpassen, ohne in v0 alles zu verlieren?
00:23:17Das geht entweder wieder über das MCP, den Chat oder hier im UI.
00:23:23Da ist dieses kleine Stift-Symbol neben der Metrik.
00:23:30Da klickt man einfach drauf.
00:23:36Und wenn man es von "Spiel beendet" zu "Zeit in der App"
00:23:39oder so etwas ändern möchte...
00:23:41...klickt man hier rein und sucht ein Event aus – oder wir wollen vielleicht prüfen,
00:23:46ob die Abbruchrate höher ist.
00:23:47Ich könnte es also auf "Page Leave" ändern.
00:23:53In dem Fall wäre das Ziel, diesen Wert zu verringern.
00:23:58Ich möchte, dass die Leute die Seite seltener verlassen.
00:24:00So einfach ist das.
00:24:03Man kann dafür wie gesagt auch das MCP nutzen, was ich persönlich viel einfacher finde.
00:24:08Aber gut, mal beide Wege zu sehen.
00:24:10Ja.
00:24:16Schön.
00:24:19Genau.
00:24:20Und es wird dann alles neu berechnet.
00:24:21Manchmal passiert es mir, dass ich ein Experiment starte,
00:24:22die Ergebnisse sehe und dann merke, dass ich eigentlich
00:24:23noch eine ganz andere Frage klären möchte.
00:24:27Wie du sagtest, ich möchte die getrackten Metriken aktualisieren.
00:24:32Manchmal habe ich noch gar kein passendes Event dafür.
00:24:33Auch da ist das MCP wieder extrem hilfreich.
00:24:36Man kann sagen: "Füge ein Event hinzu".
00:24:43Zum Beispiel... keine Ahnung, Sprünge.
00:24:46Ich könnte sagen: "Erfasse ein Event jedes Mal, wenn der Igel springt."
00:24:48In dem Fall hätte man diese Events wahrscheinlich erst ab dem Zeitpunkt,
00:24:53an dem man sie zur App hinzufügt.
00:25:02Dann kann man den Zeitraum des Experiments so anpassen,
00:25:08dass er erst ab einer bestimmten Zeit beginnt.
00:25:10Man könnte auch – oh, Verzeihung.
00:25:15Tut mir leid.
00:25:21Aber wenn man das mitten im Experiment ändert, gibt es da eine
00:25:22Empfehlung? Sollte man den Test neu starten oder ist es sicher,
00:25:24einfach weiter Daten im selben Experiment zu sammeln?
00:25:25Ja, gute Frage.
00:25:31Solange man sich der verschiedenen Änderungen bewusst ist, die das beeinflussen könnten,
00:25:38sehe ich kein Problem darin, das Experiment einfach weiterlaufen zu lassen.
00:25:40Es könnte Szenarien geben, in denen gleichzeitig andere Änderungen passieren,
00:25:42die die Ergebnisse verfälschen.
00:25:48Man muss also genau wissen, welche Tests gerade laufen und
00:25:49wie sie sich gegenseitig beeinflussen könnten.
00:25:55Deshalb haben wir hier eine multivariante Version gemacht,
00:25:59mit "Sprung" und "Laser". Er hat den Laser wohl als Kontrollgruppe gesetzt.
00:26:02Aber vielleicht will ich eine Kontrollgruppe ganz ohne Waffe.
00:26:06Es hilft oft, alles in einem Experiment zu bündeln, damit sich verschiedene
00:26:09Versuchsreihen nicht gegenseitig in die Quere kommen.
00:26:15Ergibt das Sinn?
00:26:20Ja, das leuchtet ein.
00:26:30Genau.
00:26:35Mal sehen, wie weit wir... oh, ich hab das gar nicht in die Warteschlange gestellt.
00:26:38Okay, es ist fertig.
00:26:39Wir haben jetzt Laser-Augen.
00:26:41Schauen wir mal, was passiert, wenn wir die App jetzt nutzen.
00:26:42Okay, cool. Ich habe einen Laser, aber er tötet die Typen nicht.
00:26:45Okay, es ist fertig.
00:26:47Wir haben jetzt Laser-Augen.
00:26:48Schauen wir mal, was passiert, wenn wir die App jetzt benutzen.
00:26:51Alles klar, cool.
00:26:52Ich habe einen Laser, aber er tötet die Gegner nicht.
00:26:57Das ist ja lahm.
00:26:58Wie dem auch sei, so etwas kann einem eben passieren.
00:27:02Ich habe v0 nicht effektiv genug gebrieft.
00:27:05Wir geben also nicht v0 die Schuld dafür.
00:27:07Ich habe nur gesagt: “Schieß Laser aus den Augen”.
00:27:10Aber ich habe nicht gesagt: “Töte die Käfer mit dem Laser”.
00:27:12Man kann damit auch verschiedene Nutzer anvisieren.
00:27:16Ich könnte zum Beispiel sagen: “Wende die Stampf-Funktion nur auf meinen User an”.
00:27:23Dann schauen wir mal, ob es herausfinden kann, wer mein User ist.
00:27:26Damit reizen wir den Agenten und MCP zwar etwas aus, aber das MCP
00:27:31verfügt durchaus über die Fähigkeit, einen Nutzer zu finden
00:27:35und dann die entsprechende Experiment-Variante für diesen Nutzer festzulegen.
00:27:41Man kann verschiedene Kohorten für unterschiedliche Varianten anvisieren.
00:27:46Wenn man also sagen will: “Jeder in Australien bekommt Laser-Augen”, dann
00:27:51wäre auch das machbar.
00:27:53Und ja, ich glaube, unsere Zeit ist fast um, oder? Ich weiß nicht mehr,
00:27:56wie lange genau...
00:27:57Ja, das stimmt.
00:27:58Ich habe das gerade eben erst überprüft.
00:27:59Aber ja.
00:28:00Okay, verstehe.
00:28:02Ich kann das hier im Hintergrund weiterlaufen lassen.
00:28:03Aber falls es noch weitere Fragen gibt oder etwas, das ich noch nicht
00:28:08behandelt habe, wäre das sehr interessant.
00:28:09Ja, eine weitere Frage, die reingekommen ist: Gibt es für v0-Nutzer,
00:28:15die neu im Bereich Experimente sind, so etwas wie eine Checkliste,
00:28:21um fehlerhafte oder irreführende Experimente zu vermeiden?
00:28:27Ja, das ist eine gute Frage... Da bin ich mir nicht zu 100 % sicher.
00:28:31Ich weiß, dass wir Leitfäden haben.
00:28:32Ich möchte jetzt hier live nicht danach suchen.
00:28:34Aber ich kann definitiv im Nachgang einen Leitfaden zur Verfügung stellen.
00:28:38Das könnten wir machen.
00:28:39Ja, wir können ihn auf jeden Fall in den Ressourcen-Bereich dieses Chats packen.
00:28:43Also ja, absolut.
00:28:44Genau.
00:28:45Und man kann das über die KI lösen. Ich würde die Leute ermutigen,
00:28:50den Chat zu nutzen oder durch die UI zu gehen. Da gibt es viele hilfreiche Dinge,
00:28:55wie die Hypothesen, die ich erwähnt habe. Das hat man in v0 nicht gesehen.
00:28:58Es könnte also helfen, die UI zu öffnen und zu schauen, was es sonst noch
00:29:02gibt, womit man herumspielen kann.
00:29:05Oder man fragt einfach v0 selbst: “Welche Aspekte übersehe ich hier
00:29:10möglicherweise noch?
00:29:11Was können wir damit sonst noch machen?”
00:29:13Ich würde also raten, v0 so gut es geht für solche Dinge zu nutzen,
00:29:18oder die PostHog-KI als weitere Option im PostHog-Chat zu verwenden.
00:29:23Wow, ich wusste gar nicht, dass ihr das auch habt.
00:29:26Das ist ja cool.
00:29:27Ich glaube, ich frage das in jeder unserer Integrations-Sessions, aber
00:29:35langfristig gesehen: Was habt ihr in Planung?
00:29:36Gibt es etwas, das du uns verraten kannst?
00:29:38Ja, also wir sehen die Zukunft der Software- und Produktentwicklung deutlich autonomer.
00:29:45Und ich denke, dieser Prozess ist bereits in vollem Gange.
00:29:47Aber ich glaube, es liegt noch ein Stück Weg vor uns.
00:29:53Dinge wie die Fehlerbehebung, die ich gezeigt habe – ich glaube nicht,
00:29:59dass es noch lange dauert, bis das zum Standard in Apps wird.
00:30:04Man hat eine laufende Anwendung,
00:30:09und im Hintergrund läuft etwas, das Fehler einfach behebt,
00:30:15ohne dass ich es explizit anweisen muss. Vielleicht kriege ich einen Bericht darüber.
00:30:20Aber letztlich will ich in Zukunft keine KI mehr zum Fehlersuchen auffordern müssen,
00:30:24oder nachts von einer Fehlermeldung geweckt werden.
00:30:26Ich denke, künftig wird eine Art System – vielleicht PostHog,
00:30:35vielleicht Vercel oder beide zusammen –
00:30:38im Grunde alle Informationen sammeln. Fehler sind da nur ein Teil.
00:30:43Es gibt Session-Replays, Produktanalysen und Experimente,
00:30:49bei denen man sich fragt: Muss ich wirklich manuell verschiedene Metriken erstellen?
00:30:53Es war hier tatsächlich interessant zu sehen, dass v0 bereits
00:30:57einige spannende Metriken für uns ausgewählt hat.
00:31:00Aber in Zukunft wird wahrscheinlich ein Agent diese Dinge überwachen und Code-Updates
00:31:05vornehmen, ohne dass ich ihn so spezifisch anweisen muss.
00:31:14Ich werde natürlich weiterhin die strategische Richtung vorgeben, also welche Art
00:31:19von Erfahrung ich für mein Spiel will.
00:31:20Welche Ziele und Metriken verfolge ich?
00:31:22Aber was die Details auf der unteren Ebene angeht, wird vieles davon wohl
00:31:26autonom ablaufen.
00:31:28In der Entwicklung, ja.
00:31:30Stimmt.
00:31:31Ja, ich liebe diese Vision, denn sie deckt sich mit allem, was wir
00:31:37bei Vercel und auch v0 besprechen.
00:31:40Es geht darum, den Kreis vom Deployment zu schließen.
00:31:43Man beobachtet alles in PostHog, um es dann automatisch zu reparieren und zu verbessern.
00:31:49Das ist fantastisch.
00:31:50Eine letzte Frage noch, bevor wir zum Schluss kommen, da die Zeit um ist.
00:31:56Wie kann man sich in der PostHog-Community engagieren?
00:32:00Ich sagte eingangs, dass PostHog Open Source ist.
00:32:03Akzeptiert ihr Beiträge? Ich weiß nicht, ob ich
00:32:05das richtig in Erinnerung hatte.
00:32:06Nur mal so nebenbei.
00:32:07Ich habe das gelesen.
00:32:08Ja.
00:32:09Zu 100 %.
00:32:10Es kommen Pull-Requests von überall her rein, die wir prüfen.
00:32:16Es gibt auch ein PostHog-Forum, in dem man Fragen stellen kann.
00:32:21Wir veranstalten Live-Events.
00:32:22Ich wünschte, ich hätte die URL gerade parat, aber ich schicke sie dir nachher.
00:32:26Ja, sehr gerne.
00:32:27Genau, es gibt Live-Events.
00:32:29Meldet euch einfach an.
00:32:30Nutzt die App.
00:32:31Sagt uns, was ihr denkt.
00:32:32Kontaktiert uns auf X, LinkedIn oder was auch immer ihr nutzt.
00:32:37Lasst uns wissen, was ihr meint. Wir sind auf diesen Plattformen sehr aktiv.
00:32:40Großartig.
00:32:41Vielen Dank, Brooke.
00:32:43Das war unglaublich.
00:32:44Und für alle Zuschauer: Wenn ihr noch weitere Fragen habt, schreibt sie in
00:32:49den Chat. Wir sorgen dafür, dass das PostHog-Team sie beantwortet.
00:32:54Aber ja, herzlichen Dank, Brooke.
00:32:56Ich weiß deine Zeit hier sehr zu schätzen.
00:32:58Danke.
00:32:59Gerne.
00:33:00Danke für die Einladung.
00:33:02Fantastisch.
00:33:03Vielen Dank an alle, die heute bei diesem Chat und unserer Live-Session dabei waren.
00:33:08Falls ihr es noch nicht wisst: Wir veranstalten fast jede Woche eine Community Live-Session.
00:33:14Auf [community.vercel.com/events](https://www.google.com/search?q=https://community.vercel.com/events) findet ihr einen tollen Kalender mit
00:33:21all unseren Vor-Ort- und Online-Events.
00:33:24Lasst uns wissen, welche Integration ihr als Nächstes in unserer Community-Session sehen wollt.
00:33:31Und wir werden sie definitiv umsetzen.
00:33:33Unglaublich.
00:33:34Nun, vielen Dank an alle, die heute dabei waren.
00:33:39Ich hoffe, wir sehen uns bei der nächsten Live-Session wieder.

Key Takeaway

Die Integration von PostHog in v0 und Vercel ermöglicht eine geschlossene Feedbackschleife, in der Produktanalysen und Fehlerbehebungen direkt während des Entwicklungsprozesses durch KI-gestützte Automatisierung erfolgen.

Highlights

PostHog ist eine Open-Source-Plattform für Produktanalysen, die Tools wie Feature-Flags, A/B-Tests und Event-Tracking vereint.

Die neue Integration ermöglicht es Entwicklern, PostHog-Funktionen direkt in v0 zu nutzen, ohne den Builder verlassen zu müssen.

Das Model Context Protocol (MCP) erlaubt es dem v0-Agenten, Fehler in der Produktion autonom zu identifizieren und direkt im Code zu beheben.

Die Vercel-Integration automatisiert die Verwaltung von Umgebungsvariablen und API-Schlüsseln für eine nahtlose Developer Experience.

Mit multivarianten Feature-Flags können verschiedene App-Funktionen gleichzeitig an unterschiedlichen Nutzergruppen getestet werden.

Session Replays bieten visuelle Einblicke in das Nutzerverhalten, um komplexe Fehler schneller zu kontextualisieren.

Die Zukunft der Entwicklung liegt laut PostHog in autonomen Systemen, die Fehler selbstständig erkennen und Code-Updates vorschlagen.

Timeline

Einführung und Vorstellung von PostHog

Pauline Navas vom Vercel Community-Team begrüßt die Teilnehmer zur Live-Session über die Marktplatz-Integrationen. Sie stellt PostHog als umfassende Open-Source-Plattform für Produktanalysen vor, die Funktionen wie Feature-Flags und A/B-Tests bietet. Das Hauptthema der Session ist die neue direkte Einbindung von PostHog in den v0-Builder. Diese Neuerung erlaubt es Entwicklern, Experimente zu validieren, während sie noch an der ersten Idee arbeiten. Ziel ist es, den klassischen Workflow von "erst veröffentlichen, dann analysieren" zu einem integrierten Prozess zu machen.

Vorteile der Integration für v0-Nutzer

Brooker, ein Product Engineer bei PostHog, erklärt die Relevanz des Tools für moderne Web-Entwickler. Er betont, dass man nach dem Live-Gang einer App verstehen muss, wie Nutzer mit dem Produkt interagieren und wo Probleme auftreten. Besonders hervorgehoben wird die Fähigkeit des v0-Agenten, Kontext aus Produktionsfehlern zu sammeln, um diese sofort zu beheben. Dies erspart das mühsame manuelle Durchsuchen von Logs oder das Reproduzieren von Fehlern in den Chrome-DevTools. Brooker kündigt an, im Verlauf der Demo die Fehlerbehandlung sowie A/B-Tests praxisnah zu demonstrieren.

Installation und Setup in Vercel

In diesem Abschnitt zeigt Brooker den Installationsprozess der PostHog-Integration auf dem Vercel-Marktplatz. Ein entscheidender Vorteil ist die automatische Synchronisierung der Umgebungsvariablen, wie dem PostHog-Host und dem Projekt-Key. Entwickler müssen diese sensiblen Daten nicht mehr manuell verwalten oder bei einem Austausch händisch aktualisieren. Brooker weist zudem auf das großzügige kostenlose Kontingent von PostHog hin, das den Einstieg für neue Projekte erleichtert. Trotz kleinerer technischer Schwierigkeiten während der Live-Demo wird deutlich, wie nahtlos die Verknüpfung zwischen den Plattformen funktioniert.

Live-Demo: Fehlerbehebung mit dem PostHog MCP

Die Demo präsentiert ein kleines Spiel namens "Hog Hop", bei dem ein Bug das Spiel beim Einsammeln bestimmter Datenpunkte einfrieren lässt. Brooker demonstriert, wie man das Model Context Protocol (MCP) in v0 aktiviert, um dem Agenten Zugriff auf PostHog-Daten zu gewähren. Der v0-Agent analysiert daraufhin den Fehler-Stacktrace aus PostHog und schlägt eine Korrektur vor, die sofort in der Vorschau getestet wird. Zusätzlich wird das Feature "Session Replay" erwähnt, welches visuelle Aufnahmen der Nutzersitzungen zur besseren Fehlerkontextualisierung liefert. Dieser Prozess zeigt die enorme Zeitersparnis durch die KI-gestützte Diagnose direkt im Editor.

Experimente und Feature-Flags implementieren

Der Fokus wechselt nun zur Implementierung von multivarianten Feature-Flags, um neue Spielmechaniken wie Laser-Augen oder Sprung-Attacken zu testen. Brooker erklärt, wie man im v0-Chat Experimente anlegt und dabei primäre sowie sekundäre Metriken definiert. Die KI hilft dabei, Hypothesen aufzustellen, wie etwa die Steigerung der Abschlussrate des Spiels durch die neuen Funktionen. Es wird diskutiert, ob man Metriken während eines laufenden Tests ändern sollte und wie man spezifische Nutzergruppen anspricht. Die Flexibilität des MCP wird deutlich, da fast alle Dashboard-Funktionen von PostHog auch per Texteingabe in v0 steuerbar sind.

Zukunftsvision: Autonome Softwareentwicklung

Auf die Frage nach der langfristigen Planung skizziert Brooker eine Vision von weitgehend autonomer Software. Er prognostiziert, dass Systeme in Zukunft Fehler nicht nur erkennen, sondern diese im Hintergrund selbstständig beheben, ohne dass menschliches Eingreifen erforderlich ist. Agenten werden Metriken überwachen und Code-Updates proaktiv vornehmen, während Entwickler sich auf die strategische Richtung konzentrieren. PostHog und Vercel arbeiten gemeinsam daran, den Kreislauf von Deployment, Beobachtung und Verbesserung vollständig zu automatisieren. Diese Entwicklung soll nachts auftretende Fehlermeldungen und manuelle Überwachung für Programmierer überflüssig machen.

Abschluss und Community-Ressourcen

Zum Ende der Session betont Brooker den Open-Source-Charakter von PostHog und lädt die Community zur Mitarbeit ein. Er verweist auf das Forum, Live-Events und die Kommunikation über soziale Medien wie X und LinkedIn für direkten Support. Pauline Navas bedankt sich für die tiefen Einblicke und erinnert die Zuschauer an die wöchentlichen Community-Events von Vercel. Teilnehmer werden ermutigt, Wünsche für zukünftige Integrations-Sessions zu äußern, um die Plattform stetig zu verbessern. Die Session schließt mit einem positiven Ausblick auf die wachsende Synergie zwischen Analyse-Tools und KI-Buildern.

Community Posts

View all posts