Vercel Produkt-Walkthrough (2026)

VVercel
Internet TechnologySmall Business/StartupsComputing/Software

Transcript

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.

Key Takeaway

Vercel positioniert sich als autonome Frontend-Cloud, die durch die Integration von KI-Entwicklungstools, globaler Performance-Optimierung und automatisierter Sicherheit die Lücke zwischen lokaler Entwicklung und globaler Bereitstellung schließt.

Highlights

Vercel bietet eine "Self-Driving"-Infrastruktur, die DevOps-Prozesse automatisiert und KI-Workflows ohne manuelle Konfiguration orchestriert.

Die Migration bestehender Web-Apps zu Vercel wird durch die direkte Unterstützung von Frameworks wie FastAPI und Next.js sowie die nahtlose Git-Integration vereinfacht.

Das Vercel AI SDK und das Workflow-Dev-Kit ermöglichen die schnelle Entwicklung komplexer KI-Agents, die Aufgaben wie Dokumentenanalyse und E-Mail-Generierung übernehmen.

Die Plattform nutzt ein globales Edge-Netzwerk mit 126 Standorten, um Performance zu optimieren und Sicherheit durch eine Web Application Firewall sowie Bot-Erkennung zu gewährleisten.

Kollaborations-Tools wie die Vercel-Toolbar und v0 erlauben es Teams, UI-Änderungen in Echtzeit zu kommentieren und in isolierten Sandboxes zu iterieren.

Ein effizientes Preismodell für "Active Compute" stellt sicher, dass Entwickler nur für die tatsächliche Rechenzeit bezahlen, während sie auf KI-Modell-Antworten warten.

Timeline

Einführung in die Self-Driving-Infrastruktur

Das Video beginnt mit der Vorstellung der Vercel-Vision für das Jahr 2026, wobei der Fokus auf der Reduzierung von Komplexität bei der Entwicklung von KI-Funktionen liegt. Der Sprecher erklärt das Konzept der "Self-Driving"-Infrastruktur, die autonom für globale Performance optimiert und KI-Workflows orchestriert, ohne dass Entwickler Zeit mit DevOps verbringen müssen. Als praktisches Beispiel wird eine veraltete Recruiting-Plattform einer Kaffeerösterei vorgestellt, die modernisiert werden soll. Diese App besteht aus einem Frontend, einer Datenbank für Bewerbungen und einem Python-Backend-Service für Zusammenfassungen. Ziel dieses Abschnitts ist es, den Mehrwert von Vercel für die moderne Softwareentwicklung und die schnelle Migration von Altsystemen zu verdeutlichen.

Migration und Deployment-Prozess

In diesem Teil wird der konkrete Migrationsprozess eines FastAPI-Python-Backend-Service und einer Next.js-App zu Vercel demonstriert. Der Sprecher zeigt, wie einfach Repositories über Git importiert werden können, wobei Vercel die Frameworks automatisch erkennt und innerhalb von Sekunden bereitstellt. Besondere Aufmerksamkeit wird der Verwaltung von Umgebungsvariablen gewidmet, die für die Kommunikation mit Diensten wie Supabase essenziell sind. Durch die Nutzung von 126 globalen Standorten wird der Inhalt automatisch nah am Nutzer platziert, was eine extrem niedrige Latenz garantiert. Dies unterstreicht die Effizienz der Vercel-Plattform bei der Skalierung von Infrastruktur ohne manuellen Konfigurationsaufwand.

Monitoring, Observability und Analytics

Nach dem erfolgreichen Deployment widmet sich der Sprecher den umfangreichen Überwachungstools von Vercel. Er präsentiert Funktionen wie Web Analytics, Speed Insights und ein detailliertes Observability-Dashboard, das Einblicke in Core Web Vitals und Server-Logs bietet. Anhand des Projekts skills.sh wird gezeigt, wie Traffic-Quellen und Performance-Engpässe in Echtzeit diagnostiziert werden können. Das System erlaubt es Entwicklern, jede Nuance der App-Performance zu untersuchen, von Edge-Requests bis hin zum Datentransfer. Diese Tools sind entscheidend, um die Zuverlässigkeit und Geschwindigkeit einer Anwendung in einer Produktionsumgebung sicherzustellen.

Entwicklung von KI-Agents mit dem AI SDK

Der Sprecher demonstriert die Erweiterung der App um einen intelligenten Recruiting-Agent unter Verwendung der Vercel CLI und des AI SDKs. Es wird erklärt, wie das Vercel AI Gateway Zugriff auf Hunderte von Modellen bietet und wie das Workflow-Dev-Kit zur Orchestrierung komplexer Aufgaben genutzt wird. Der Agent analysiert Anschreiben und PDF-Lebensläufe, vergleicht sie mit Stellenbeschreibungen und generiert personalisierte E-Mails für Personalverantwortliche. Zudem wird die Nutzung von Clog Code für das schnelle Prototyping durch One-Shot-Prompts hervorgehoben. Dieser Abschnitt zeigt, wie tiefgreifend Vercel die Entwicklung von KI-gestützten Funktionen in den Standard-Entwickler-Workflow integriert hat.

Kollaboration und UI-Iteration mit v0

In diesem Abschnitt steht die Zusammenarbeit im Team im Vordergrund, unterstützt durch Preview-Umgebungen und das Tool v0. Der Sprecher erläutert, wie Teammitglieder direkt in der App Kommentare hinterlassen und UI-Änderungen vorschlagen können, wobei die Preview-Umgebung exakt der Produktionsinfrastruktur entspricht. Das Tool v0 wird als webbasierte Entwicklungsumgebung vorgestellt, die es ermöglicht, Designänderungen wie die Anpassung von Job-Karten in einer Sandbox zu testen. Änderungen werden automatisch in neuen Git-Branches gespeichert, was einen sicheren und iterativen Designprozess erlaubt. Dies verdeutlicht, wie Vercel die Barrieren zwischen Design, Feedback und technischer Umsetzung abbaut.

Globale Sicherheit und Fazit

Zum Abschluss wird die Sicherheitsarchitektur von Vercel thematisiert, die jede App standardmäßig schützt. Die Web Application Firewall (WAF) filtert bösartige Anfragen an der Edge, während Bot ID zwischen echten Nutzern und automatisiertem Traffic unterscheidet, ohne die Nutzererfahrung durch CAPTCHAs zu beeinträchtigen. Der Sprecher betont, dass das globale Netzwerk großflächige Angriffe automatisch entschärft, sodass die App auch unter Last reaktionsfähig bleibt. Das Video schließt mit der Zusammenfassung, dass Vercel als "Self-Driving"-Plattform alle infrastrukturellen Sorgen übernimmt. Mit über 11 Millionen Projekten festigt Vercel seinen Status als führende Lösung für Frontend-Entwicklung und KI-Bereitstellung.

Community Posts

View all posts