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.