00:00:00Millionen von Entwicklern bauen seit über einem Jahrzehnt auf der Frontend-Cloud von Vercel.
00:00:04Wir alle nutzen Vercel, um alles Mögliche bereitzustellen – von persönlichen Projekten bis hin zu Unternehmenssoftware.
00:00:10Und wenn Sie Agents und KI-Funktionen entwickeln, um Reibungsverluste für Ihre Nutzer oder Ihr Team zu reduzieren,
00:00:15ist das Letzte, was Sie wollen, etwas Kompliziertes, das in der Produktion gewartet werden muss.
00:00:21Die "Self-Driving"-Infrastruktur von Vercel macht DevOps so einfach wie das Deployment selbst.
00:00:25Sie generieren Code und bauen Agents, dann optimiert Vercel autonom für Performance auf globaler Ebene,
00:00:31stellt Rechenleistung bereit, orchestriert KI-Workflows und untersucht sogar Anomalien.
00:00:38Und das alles ganz ohne Konfigurationsaufwand.
00:00:40Lassen Sie mich Ihnen nun in einem Schnelldurchlauf zeigen, was ich meine.
00:00:43Nehmen wir die Herausforderung an, eine bestehende Web-App zu migrieren.
00:00:46Dies ist eine Demo-App einer Recruiting-Plattform für eine mittelgroße Kaffeerösterei mit eigenen Cafés.
00:00:53Es ist eine einfache App mit einem Frontend, einer Datenbank für Bewerbungen und Lebensläufe
00:00:58sowie einem Backend-Service, der Anschreiben für eine schnellere Überprüfung zusammenfasst.
00:01:03Momentan läuft sie bei einem uralten Hosting-Anbieter – ich verrate Ihnen nicht, bei welchem –
00:01:07aber wir wollen sie definitiv modernisieren. Packen wir es also an.
00:01:10Wir migrieren zu Vercel, was die Feature-Entwicklung, das Deployment und die Zusammenarbeit beschleunigen wird.
00:01:17Importieren wir diese App nun in Vercel.
00:01:19Ich beginne mit dem Backend, einem einfachen FastAPI-Python-Service.
00:01:24Zuerst klicke ich auf "Add New".
00:01:26Ich habe mein Git-Konto bereits verknüpft und sehe hier meine Repositories.
00:01:31Ich klicke beim API-Repo auf "Import".
00:01:33Der Import ist vollständig konfigurierbar, inklusive Build- und Output-Einstellungen,
00:01:38aber Vercel unterstützt FastAPI und andere Backend-Frameworks direkt ab Werk.
00:01:44Ich kann also einfach auf "Deploy" klicken und es wird funktionieren.
00:01:46Innerhalb weniger Sekunden ist mein Python-Backend-Service auf Vercel bereitgestellt und aktiv.
00:01:52Vercel hat automatisch eine URL für dieses Projekt generiert.
00:01:55Ich kopiere sie, um sie als Umgebungsvariable für die nächste App hinzuzufügen.
00:02:01Ich füge ein weiteres neues Projekt hinzu, klicke bei der nächsten App auf "Import",
00:02:05und importiere meine Umgebungsvariablen für diese App, damit sie mit Supabase kommunizieren kann.
00:02:11Großartig, jetzt kann meine App mit Supabase kommunizieren. Für die FastAPI-Variable
00:02:15füge ich die eben kopierte URL ein und starte das Deployment der App.
00:02:20Vercel erstellt und veröffentlicht das Projekt,
00:02:23und es wird auf derselben Infrastruktur laufen, die Millionen von Websites und Apps antreibt.
00:02:27Die 126 globalen Standorte von Vercel platzieren Inhalte automatisch nah am Nutzer,
00:02:33was bedeutet, dass die App immer superschnell sein wird.
00:02:37Und hier sehen wir, dass die App erfolgreich bereitgestellt wurde.
00:02:40Schauen wir sie uns an.
00:02:42Ich sehe die Jobs und im Dashboard das Backend mit unserer Python-Zusammenfassungsfunktion.
00:02:49Sobald dies in der Produktion ist, kann ich die gesamte App überwachen.
00:02:53Für den Moment springe ich in ein anderes Projekt, wo wir Live-Daten sehen können.
00:02:57Mit Web Analytics, Speed Insights, Logs und einem abfragbaren Observability-Dashboard erhalte ich das volle Bild.
00:03:04Hier sind zum Beispiel die Analysen für unsere Website skills.sh, wo man Agent-Skills findet.
00:03:11Ich kann detaillierte Traffic- und Referral-Informationen einsehen, einschließlich der verweisenden Seiten.
00:03:15Wenn ich hier auf "Speed Insights" klicke, werden mir die Core Web Vitals angezeigt.
00:03:19So kann ich etwaige Geschwindigkeits- oder Ladeprobleme diagnostizieren und beheben.
00:03:23Ein Klick auf "Observability" öffnet das Dashboard, mit dem ich jede Diagnose meiner App untersuchen kann –
00:03:29von Logs über Funktionen und Edge-Requests bis hin zum Datentransfer.
00:03:34Alles klar, jetzt möchte ich die Zusammenfassungsfunktion für Personalverantwortliche nützlicher machen.
00:03:38Derzeit nutzt FastAPI nur eine Python-Bibliothek, um das Anschreiben zusammenzufassen.
00:03:43Wir können jedoch einen einfachen Agent bauen, der sowohl das Anschreiben als auch den PDF-Lebenslauf analysiert,
00:03:48sie mit der Stellenbeschreibung vergleicht, eine erste Bewertung des Kandidaten vornimmt
00:03:52und eine E-Mail generiert, die der Personalverantwortliche versenden kann.
00:03:56Ich habe das Repo bereits lokal geklont, also springe ich ins Verzeichnis und installiere die nötigen Tools.
00:04:01Nun nutze ich die Vercel CLI, um mein lokales Projekt mit Vercel zu verbinden.
00:04:06Die CLI macht es mir leicht, die Vercel-Plattform direkt über meine Befehlszeile zu steuern.
00:04:11Ich beginne mit "vercel link".
00:04:14Ja, ich werde dieses lokale Projekt verknüpfen.
00:04:16Es wird die Vercel-Demo-Organisation und das Kaffeeladen-Job-Projekt sein.
00:04:21Ich habe es bereits gefunden.
00:04:22Und wir rufen die Umgebungsvariablen ab.
00:04:24Da haben wir's.
00:04:25Ich kann die App auch lokal mit "vercel dev" ausführen, was die Vercel-Deployment-Umgebung lokal repliziert.
00:04:31Probieren wir das: vercel dev.
00:04:34Server starten, und dann testen wir es einfach mal direkt.
00:04:37Und siehe da.
00:04:38Ziemlich cool.
00:04:40Jetzt installieren wir die KI-Tools, die wir für den Bau des Agents benötigen.
00:04:43Vercel bietet mir alle KI-Werkzeuge, um Features und Agents zu entwickeln.
00:04:47Zuerst muss ich ein echtes KI-Modell für die Zusammenfassung integrieren.
00:04:51Über das Vercel AI Gateway kann ich auf Hunderte verschiedener Modelle zugreifen,
00:04:55und die Ausführung von "vercel dev" gibt mir automatisch Zugriff mit OIDC-Token, was sehr praktisch ist.
00:05:00Als Nächstes installiere ich das AI SDK, das mir eine ganze Reihe von KI-Primitiven bietet, etwa für Textzusammenfassungen.
00:05:07Machen wir ein "pnpm install ai".
00:05:12Hervorragend.
00:05:13Danach installiere ich das Workflow-Dev-Kit, das jeden Schritt des Agents dauerhaft orchestriert.
00:05:21Wenn meine App Code generieren würde, könnte ich auch die Vercel Sandbox nutzen, um ihn sicher auszuführen.
00:05:26Aber dies ist ein einfacher Zusammenfassungs-Agent, daher brauche ich dafür keine Sandbox.
00:05:31Alles klar, zu guter Letzt: Das Frontend basiert auf Next.js.
00:05:34Ich füge den "React Best Practices"-Skill zu meinem Projekt hinzu, um ein sauberes und schnelles Frontend zu garantieren.
00:05:40Ich werde skills.sh verwenden.
00:05:43Gehen wir hier rüber und suchen nach "React best practices".
00:05:47Ich kopiere den Befehl zur Installation.
00:05:50Und fertig.
00:05:53Stellen wir sicher, dass es für Clog Code und ein paar andere Dinge installiert wird.
00:05:56Global bevorzuge ich die SymLink-Version, und sie ist installiert.
00:06:01Jetzt bauen wir den Agent aus.
00:06:02Es ist ziemlich simpel, also werde ich einfach Clog Code instruieren.
00:06:06Das ist der Prompt, mit dem ich begonnen habe.
00:06:08Er weist Clog Code an, den Agent zu bauen, das Anschreiben und den PDF-Lebenslauf zusammenzufassen,
00:06:12die Zusammenfassungen zu kombinieren, mit der Jobbeschreibung zu vergleichen, eine Empfehlung abzugeben und eine E-Mail zu generieren.
00:06:20Natürlich habe ich etwas Zeit mit Clog verbracht, um dies in einen One-Shot-Prompt zu verfeinern,
00:06:25den ich jetzt in Clog Code einfüge und einfach loslegen lasse.
00:06:29Durch die Magie von Video-Demos nehmen wir mal an, ich hätte mich einfach durch die Clog-Prompts gewagt –
00:06:35was ich natürlich getan habe – und ich rufe einfach das andere Verzeichnis mit diesem Output auf.
00:06:39Alles klar, Zeit fürs Deployment.
00:06:41Ich committe die Änderungen und pushe den Branch, an dem ich gerade arbeite.
00:06:47Jetzt wird die Self-Driving-Infrastruktur von Vercel automatisch die KI-Workloads erkennen
00:06:51und die entsprechende Infrastruktur für diese Rechenjobs bereitstellen.
00:06:55Und das Preismodell für Active Compute ist hier wirklich großartig.
00:06:57Mir wird nur die tatsächliche Rechenzeit berechnet, nicht die Wartezeit, während wir auf die Antwort der Modell-API warten.
00:07:03Gut, jetzt kann ich die App sehen. Gehen wir ins Dashboard, um das neue Feature zu prüfen und eine Bewerbung anzusehen.
00:07:10Und tatsächlich, hier haben wir den Ablehnungstext für diese Bewerbung und die generierte Ablehnungs-E-Mail.
00:07:17Das Beste an Preview-Umgebungen ist meiner Meinung nach, dass jeder im Team Kommentare zu jedem Teil der App abgeben kann.
00:07:24Das mache ich jetzt sofort und bitte Eric einfach darum, einen Button hinzuzufügen.
00:07:31Cool, und das ist nur eine Funktion der Vercel-Toolbar.
00:07:34Sie können Flags testen, Accessibility-Audits durchführen, Traces ausführen und vieles mehr.
00:07:38Die Preview-Umgebung läuft auf derselben Infrastruktur wie die Produktion,
00:07:42was ich also hier teste, ist exakt das, was meine Endnutzer in der Live-Umgebung sehen werden.
00:07:46Okay, wir haben der App einen Agent hinzugefügt, aber ich möchte, dass auch andere im Team an der UI iterieren können.
00:07:52v0 macht es anderen leicht, in einer webbasierten Entwicklungsumgebung am Projekt zu arbeiten,
00:07:57während durch Git-Workflows alles versionskontrolliert und sicher bleibt.
00:08:01Das ist wirklich klasse.
00:08:03Ich importiere das GitHub-Projekt, wähle "main" als Basis-Branch und v0 wird das Projekt einrichten.
00:08:13Und wie Sie sehen können, wurden auch meine Umgebungsvariablen übernommen.
00:08:19Und jetzt, in weniger als einer Minute, läuft meine App in v0.
00:08:23Da es sich um ein bestehendes Projekt handelt, startet v0 eine Sandbox, um den Code auszuführen.
00:08:28Es ist dieselbe Sandbox-Primitive, die wir auf Vercel nutzen können, um isolierte Umgebungen zu erstellen.
00:08:33Und wenn ich auf Git klicke, sehen Sie, dass v0 automatisch einen neuen Branch für meine Arbeit erstellt hat.
00:08:39Ich möchte das Design der Job-Seite ein wenig anpassen.
00:08:42Vielleicht ist es verrückt, aber lassen Sie uns die Job-Karten über die volle Breite der Seite anzeigen.
00:08:50v0 hat das umgesetzt, und... na ja, ich bin nicht ganz überzeugt von meiner Entscheidung, aber mal sehen, was das Design-Team denkt.
00:08:57Ich kann diesen v0-Chat an mein Team senden, damit sie weiter daran arbeiten können,
00:09:00oder ich kann einen PR eröffnen und die Preview-Umgebung für die Zusammenarbeit teilen.
00:09:06Sobald ich meine App bereitstelle und sie global ausgeliefert wird, sorgt Vercel dafür, dass sie standardmäßig sicher ist.
00:09:13Dieselbe Self-Driving-Infrastruktur, auf der meine App läuft, schützt sie auch an der Edge.
00:09:18Dies ist die Firewall-Ansicht für unsere Next.js-Seite.
00:09:20Sie bekommt viel Traffic ab, und nicht alles davon ist guter Traffic.
00:09:24Die Web Application Firewall von Vercel inspiziert und filtert bösartige Anfragen automatisch an der Edge, bevor sie Ihre App erreichen.
00:09:33Bot ID unterscheidet lautlos echte Nutzer von automatisiertem Traffic und blockiert missbräuchliche Bots ohne CAPTCHAs.
00:09:40Das globale Edge-Netzwerk von Vercel erkennt und entschärft großflächige Angriffe automatisch und hält Ihre App unter Last reaktionsfähig.
00:09:49Alles, was Sie gerade gesehen haben – Migration, KI-Workflows, Kollaboration, Sicherheit – lief auf einer Plattform ohne jegliche Infrastrukturkonfiguration.
00:09:59Das ist es, was wir unter "Self-Driving" verstehen.
00:10:01Die Plattform hält Ihnen den Rücken frei, damit Sie sich ganz auf das Ausliefern konzentrieren können.
00:10:05Wir stehen bei 11 Millionen Projekten und es werden stündlich mehr.
00:10:08Ihres ist das nächste.