Présentation du produit Vercel (2026)

VVercel
AI/미래기술창업/스타트업컴퓨터/소프트웨어

Transcript

00:00:00Depuis plus de dix ans, des millions de développeurs bâtissent sur le cloud front-end de Vercel.
00:00:04Nous utilisons tous Vercel pour tout déployer, des projets personnels aux logiciels d'entreprise.
00:00:10Et quand vous créez des agents et des fonctions IA pour simplifier la vie de vos utilisateurs ou de votre équipe,
00:00:15la dernière chose que vous voulez, c'est une maintenance complexe en production.
00:00:21L'infrastructure autonome de Vercel rend le DevOps aussi simple que le déploiement.
00:00:25Vous générez le code et créez les agents, puis Vercel optimise l'ensemble pour une performance mondiale,
00:00:31alloue les ressources, orchestre les flux IA et enquête même sur les anomalies.
00:00:38Le tout, sans aucune configuration requise.
00:00:40Laissez-moi vous montrer ce que je veux dire avec une démonstration rapide.
00:00:43Relevons le défi de migrer une application web existante.
00:00:46Voici une application de démo : une plateforme de recrutement pour un torréfacteur de taille moyenne.
00:00:53C'est une app simple avec un front-end, une base de données pour les candidatures et les CV,
00:00:58et un service back-end qui résume les lettres de motivation pour accélérer l'examen des dossiers.
00:01:03Elle est actuellement chez un hébergeur ancestral, je ne vous dirai pas lequel,
00:01:07mais nous voulons absolument la moderniser, alors allons-y.
00:01:10Migrer vers Vercel va accélérer le développement de fonctions, le déploiement et la collaboration.
00:01:17Importons maintenant cette application dans Vercel.
00:01:19Je commence par le back-end, qui est un service Python FastAPI de base.
00:01:24Je clique d'abord sur "Add New".
00:01:26Mon compte Git est déjà connecté et je vois que mes dépôts sont ici.
00:01:31Je clique sur "Import" sur le dépôt de l'API.
00:01:33L'importation est entièrement configurable, y compris les paramètres de build et de sortie,
00:01:38mais Vercel supporte FastAPI et d'autres frameworks back-end nativement.
00:01:44Je peux donc juste cliquer sur "Deploy" et ça fonctionnera.
00:01:46En quelques secondes, mon service back-end Python est déployé et opérationnel sur Vercel.
00:01:52Vercel a automatiquement généré une URL pour ce projet.
00:01:55Je vais la copier pour l'ajouter comme variable d'environnement pour l'application suivante.
00:02:01J'ajoute un autre projet, je clique sur "Import" sur l'app suivante,
00:02:05et je vais importer mes variables d'environnement pour qu'elle puisse communiquer avec Supabase.
00:02:11Parfait, mon app communique avec Supabase. Pour la variable FastAPI,
00:02:15je colle l'URL copiée précédemment et je déploie l'application.
00:02:20Vercel build et déploie le projet,
00:02:23qui tournera sur l'infrastructure propulsant des millions de sites et d'applications.
00:02:27Les 126 points de présence mondiaux de Vercel rapprochent automatiquement le contenu de l'utilisateur,
00:02:33ce qui garantit une rapidité extrême.
00:02:37On voit ici que l'application a été déployée avec succès.
00:02:40Jetons-y un coup d'œil.
00:02:42Je vois les offres d'emploi, et dans le tableau de bord, le back-end avec notre fonction de résumé Python.
00:02:49Une fois en production, je pourrai surveiller l'intégralité de l'application.
00:02:53Mais pour l'instant, passons à un autre projet pour voir des données en direct.
00:02:57J'ai une vision complète avec l'analyse web, les Speed Insights, les logs et un dashboard d'observabilité.
00:03:04Voici par exemple les analyses de notre site skills.sh, où l'on trouve des compétences d'agents.
00:03:11Je peux voir le détail du trafic et des sources de référence, y compris les sites affluents.
00:03:15En cliquant sur Speed Insights, j'accède aux Core Web Vitals.
00:03:19Je peux ainsi diagnostiquer et corriger tout problème de vitesse ou de chargement.
00:03:23Et dans la section Observabilité, le dashboard me permet d'explorer chaque diagnostic de mon app,
00:03:29des logs aux fonctions, en passant par les requêtes edge et les transferts de données.
00:03:34Maintenant, je veux rendre la fonction de résumé plus utile pour les recruteurs.
00:03:38Actuellement, FastAPI résume simplement la lettre avec une bibliothèque Python.
00:03:43Mais nous pouvons créer un agent simple pour analyser la lettre ET le CV au format PDF,
00:03:48les comparer à la fiche de poste, faire une première évaluation du candidat,
00:03:52et générer un e-mail que le recruteur n'aura plus qu'à envoyer.
00:03:56J'ai déjà le dépôt cloné localement, je vais donc entrer dans le répertoire et installer mes outils.
00:04:01Je vais utiliser la CLI Vercel pour lier mon projet local à la plateforme.
00:04:06La CLI facilite le contrôle de Vercel directement depuis mon terminal.
00:04:11Je commence par "vercel link".
00:04:14Oui, je vais lier ce projet local.
00:04:16Ce sera l'organisation "Vercel demo" et le projet "coffee shop jobs".
00:04:21Il l'a déjà trouvé.
00:04:22Et nous allons récupérer les variables d'environnement.
00:04:24Voilà qui est fait.
00:04:25Je peux aussi lancer l'app localement avec "vercel dev", qui réplique l'environnement de déploiement.
00:04:31Testons cela : "vercel dev".
00:04:34Le serveur démarre, testons-le immédiatement.
00:04:37Et voilà.
00:04:38C'est plutôt cool.
00:04:40Installons maintenant les outils d'IA nécessaires pour construire l'agent.
00:04:43Vercel me fournit tous les outils IA pour créer des fonctionnalités et des agents.
00:04:47D'abord, je dois intégrer un modèle d'IA réel pour le résumé.
00:04:51Je peux utiliser des centaines de modèles via la Vercel AI Gateway,
00:04:55et l'exécution de "vercel dev" me donne un accès automatique avec des jetons OIDC, ce qui est génial.
00:05:00Ensuite, j'installe l'AI SDK, qui offre un ensemble de primitives pour résumer du texte.
00:05:07Faisons un "pnpm install ai".
00:05:12Parfait.
00:05:13Après cela, j'installe le kit de développement de workflow pour orchestrer chaque étape de l'agent.
00:05:21Si mon app générait du code, je pourrais aussi utiliser le bac à sable Vercel pour l'exécuter en sécurité.
00:05:26Mais comme c'est un simple agent de résumé, je n'en ai pas besoin ici.
00:05:31Enfin, le front-end utilise Next.js.
00:05:34Je vais ajouter la compétence "React best practices" pour m'assurer qu'il soit propre et rapide.
00:05:40Je vais utiliser skills.sh.
00:05:43Je cherche ici "React best practices".
00:05:47Je copie la commande d'installation.
00:05:50Et voilà.
00:05:53Assurons-nous de l'installer pour "clog code" et quelques autres éléments.
00:05:56Globalement, je préfère la version SimLink, et c'est installé.
00:06:01Construisons maintenant l'agent.
00:06:02C'est assez simple, je vais juste prompter "clog code".
00:06:06Voici le prompt de départ.
00:06:08Il dit à "clog code" de créer l'agent, de résumer la lettre et le CV PDF,
00:06:12de comparer les résumés à l'offre, de faire une recommandation et de générer un e-mail.
00:06:20Bien sûr, j'ai passé du temps à affiner cela en un prompt "one-shot",
00:06:25que je vais coller maintenant dans "clog code" avant de lancer l'exécution.
00:06:29Grâce à la magie du montage, supposons que j'ai enchaîné les prompts,
00:06:35ce que j'ai fait, et je vais simplement ouvrir le répertoire contenant le résultat.
00:06:39Très bien, déployons.
00:06:41Je vais commiter les changements et pusher la branche sur laquelle je travaille.
00:06:47L'infrastructure autonome de Vercel va reconnaître les charges de travail IA
00:06:51et allouer les ressources nécessaires pour ces tâches de calcul.
00:06:55Le système de tarification au calcul actif est ici très avantageux.
00:06:57Je ne suis facturé que pour le calcul réel, pas pour l'attente de la réponse de l'API du modèle.
00:07:03On peut voir l'application ; allons dans le dashboard voir cette nouvelle fonction sur une candidature.
00:07:10Et en effet, nous avons ici le texte de refus pour ce candidat et l'e-mail de rejet généré.
00:07:17Le meilleur aspect des environnements de prévisualisation est que l'équipe peut commenter n'importe où.
00:07:24Je vais le faire tout de suite en demandant à Eric d'ajouter un bouton.
00:07:31Cool, et ce n'est qu'une des fonctionnalités de la barre d'outils Vercel.
00:07:34Vous pouvez tester des flags, lancer des audits d'accessibilité, des traces, et plus encore.
00:07:38L'environnement de preview tourne sur la même infrastructure que la production,
00:07:42donc ce que je teste ici est exactement ce que verront mes utilisateurs finaux.
00:07:46L'agent est ajouté, mais je veux que d'autres membres de l'équipe puissent itérer sur l'interface.
00:07:52V0 permet de travailler sur le projet dans un environnement web,
00:07:57tout en gardant un contrôle de version sécurisé via les workflows Git.
00:08:01C'est vraiment génial.
00:08:03Je vais importer le projet GitHub, choisir "main" comme branche de base, et V0 va tout configurer.
00:08:13Comme vous le voyez, mes variables d'environnement ont aussi été importées.
00:08:19Et maintenant, en moins d'une minute, mon application tourne dans V0.
00:08:23Puisqu'il s'agit d'un projet existant, V0 lance un bac à sable pour exécuter le code.
00:08:28C'est la même technologie de sandbox que nous utilisons sur Vercel pour isoler les environnements.
00:08:33En cliquant sur Git, on voit que V0 a automatiquement créé une nouvelle branche de travail.
00:08:39Je veux ajuster un peu le design de la page des offres.
00:08:42C'est peut-être osé, mais affichons les fiches de poste sur toute la largeur de la page.
00:08:50V0 a généré ça. Je ne suis pas fan de mon choix, mais voyons ce qu'en pense l'équipe créative.
00:08:57Je peux envoyer ce chat V0 à mon équipe pour qu'ils continuent d'itérer,
00:09:00ou ouvrir une PR et partager l'environnement de preview pour collaborer.
00:09:06Une fois déployée et servie à l'échelle mondiale, Vercel garantit la sécurité de l'app par défaut.
00:09:13La même infrastructure autonome qui fait tourner l'app la protège aussi à la périphérie (edge).
00:09:18Voici la vue du pare-feu pour notre site Next.js.
00:09:20Il reçoit beaucoup de trafic, et tout n'est pas bienveillant.
00:09:24Le pare-feu WAF de Vercel inspecte et filtre les requêtes malveillantes avant qu'elles n'atteignent l'app.
00:09:33Bot ID distingue les vrais utilisateurs du trafic automatisé, bloquant les bots sans utiliser de CAPTCHAs.
00:09:40Le réseau edge mondial détecte et atténue les attaques massives, maintenant votre app réactive.
00:09:49Tout ce que vous avez vu — migration, IA, collaboration, sécurité — tourne sur une seule plateforme,
00:09:59sans aucune configuration. C'est ça, l'infrastructure autonome.
00:10:01La plateforme s'efface pour que vous puissiez vous concentrer sur vos déploiements.
00:10:05Nous en sommes à 11 millions de projets, et ce n'est qu'un début.
00:10:08Le vôtre est le prochain.

Key Takeaway

Vercel se positionne en 2026 comme une plateforme de cloud front-end tout-en-un qui automatise l'infrastructure, l'IA et la sécurité pour permettre aux développeurs de se concentrer exclusivement sur le déploiement de leurs applications.

Highlights

L'infrastructure autonome de Vercel simplifie le DevOps en gérant l'optimisation, l'allocation des ressources et l'orchestration de l'IA sans configuration.

La plateforme supporte nativement des frameworks back-end comme FastAPI (Python) et s'intègre facilement avec des bases de données comme Supabase.

Le déploiement mondial repose sur 126 points de présence pour garantir une performance et une rapidité optimales aux utilisateurs finaux.

Vercel propose une suite complète d'outils pour l'IA, incluant l'AI SDK, l'AI Gateway pour l'accès aux modèles et des environnements sécurisés (sandboxes).

La collaboration est facilitée par V0 pour le design génératif, les environnements de prévisualisation avec commentaires et la barre d'outils Vercel.

La sécurité est intégrée par défaut avec un pare-feu d'application web (WAF) et le système Bot ID qui bloque le trafic malveillant sans CAPTCHAs.

Timeline

Introduction et vision de l'infrastructure autonome

L'intervenant présente Vercel comme une solution utilisée par des millions de développeurs pour déployer des projets de toutes tailles. Le concept central est l'infrastructure autonome, qui élimine la complexité de la maintenance en production pour les agents et fonctions IA. Vercel s'occupe de l'optimisation des performances mondiales, de l'orchestration des flux et de l'enquête sur les anomalies sans configuration requise. Cette section souligne que le but est de rendre le DevOps aussi simple qu'un simple clic de déploiement. L'objectif est de libérer les équipes des tâches d'infrastructure pour qu'elles se concentrent sur la création de valeur.

Migration et déploiement d'une application existante

Le présentateur effectue une démonstration de migration d'une application de recrutement d'un hébergeur traditionnel vers Vercel. Il importe d'abord un back-end Python FastAPI, illustrant la compatibilité native de la plateforme avec divers frameworks. L'utilisation de variables d'environnement permet de connecter rapidement l'application à une base de données externe comme Supabase. On y voit également le déploiement automatique sur 126 points de présence mondiaux pour réduire la latence. Cette étape prouve la rapidité de mise en ligne et l'efficacité de la gestion des ressources lors du passage à une architecture moderne.

Observabilité et diagnostic de performance

Une fois l'application déployée, l'accent est mis sur les outils de surveillance et d'analyse intégrés à Vercel. Le tableau de bord offre une vision complète incluant l'analyse web, les Speed Insights pour les Core Web Vitals et les logs en temps réel. La section Observabilité permet d'explorer chaque aspect technique, des requêtes edge aux transferts de données. Ces outils sont cruciaux pour diagnostiquer et corriger les problèmes de vitesse avant qu'ils n'impactent les utilisateurs. Le présentateur montre comment naviguer entre les sources de trafic et les rapports de diagnostic détaillés pour maintenir une application saine.

Développement d'agents IA et outils CLI

Cette section détaille la transformation d'une fonction simple en un agent IA complexe capable d'analyser des PDF et de générer des recommandations. L'utilisation de la CLI Vercel permet de lier le projet local au cloud et de répliquer l'environnement de production avec la commande "vercel dev". L'intervenant présente l'AI SDK et l'AI Gateway, qui offrent un accès à des centaines de modèles avec une authentification simplifiée via OIDC. Des outils comme le workflow SDK permettent d'orchestrer les différentes étapes de l'agent de manière fluide. La plateforme fournit ainsi toutes les primitives nécessaires pour construire des expériences d'intelligence artificielle robustes et sécurisées.

Optimisation Front-end et Collaboration avec V0

L'intégration des meilleures pratiques React via skills.sh et l'utilisation de l'outil V0 marquent une avancée dans la collaboration créative. V0 permet d'itérer sur l'interface utilisateur dans un environnement web tout en restant synchronisé avec les workflows Git. Les membres de l'équipe peuvent ajouter des commentaires directement sur les environnements de prévisualisation grâce à la barre d'outils Vercel. Cette barre d'outils propose également des tests de flags, des audits d'accessibilité et des traces techniques. Le passage du code à la conception visuelle se fait de manière transparente, garantissant que ce qui est testé correspond exactement à la production.

Sécurité Edge et Conclusion

Pour clore la présentation, l'aspect sécurité est abordé avec le pare-feu WAF (Web Application Firewall) de Vercel opérant à la périphérie du réseau. Le système Bot ID est mis en avant pour sa capacité à distinguer les humains des scripts automatisés sans utiliser de CAPTCHAs intrusifs. L'infrastructure protège automatiquement l'application contre les attaques massives tout en maintenant une réactivité constante. La conclusion réaffirme que la plateforme gère la migration, l'IA, la collaboration et la sécurité sous une seule bannière. Vercel invite les développeurs à rejoindre les 11 millions de projets déjà hébergés sur leur infrastructure autonome.

Community Posts

View all posts