Vercel Shop passe en GA : les vitrines Shopify apprennent à vendre aux agents IA

Vercel annonce la disponibilité générale de Vercel Shop, un template open source de vitrine Next.js pour les boutiques Shopify. Dans le même temps, le SDK Hydrogen, entièrement réécrit, passe en GA : il ne fonctionne plus avec un seul framework, mais avec plusieurs stacks JavaScript.

Le point de départ est simple : les agents achètent déjà sur le web, mais ils utilisent des pages et des outils conçus pour les humains et les moteurs de recherche. Vercel et Shopify proposent de considérer l'agent comme un acheteur à part entière et de lui offrir sa propre couche de données et d'actions. Pour l'illustrer, les deux entreprises citent PAIGE.

Après la refonte de sa plateforme e-commerce, la marque a enregistré +22% de revenus et +76% de conversion pendant le Black Friday et le Cyber Monday, sans interruption de service.

Une seule URL pour l'humain et pour l'agent

Le principe central de Vercel Shop : la fiche produit existe sous deux formes à la même adresse. L'humain voit une page visuelle. L'agent reçoit le prix, la disponibilité et les variantes du produit sous forme de contenu lisible par machine, sans avoir à analyser la mise en page pour en extraire ces champs. Pour les moteurs de recherche et les moteurs de réponse, le template intègre des données structurées dans les pages et dans le sitemap, afin qu'ils trouvent et comprennent les produits.

Le socle est le SDK Hydrogen. Il donne accès au catalogue, au panier, à la gestion des commandes, aux paiements et au checkout. Plus tôt cette année, Vercel et Shopify avaient annoncé leur intention de réécrire Hydrogen pour plusieurs frameworks JavaScript. C'est désormais fait, et le SDK est en disponibilité générale.

UCP et MCP : comment l'agent compose un panier

La seconde couche concerne les actions. Shopify a participé à l'élaboration de l'Universal Commerce Protocol (UCP). Celui-ci définit une méthode standard pour qu'un agent cherche dans le catalogue, lise une fiche, vérifie la disponibilité, compose un panier et obtienne un lien de checkout. Vercel Shop rend ces fonctions accessibles sur le domaine du marchand lui-même. L'agent se connecte via MCP, cherche des produits et constitue le panier sans naviguer sur le site.

À Vercel Ship SF, Tobi Lütke et Guillermo Rauch ont abordé le sujet. Tobi Lütke a souligné que le checkout est complexe et a demandé « 20 ans de mise au point ». C'est pourquoi Shopify est ouverte à ce que les développeurs reprennent des morceaux de son checkout pour assembler ce qu'ils veulent. Guillermo Rauch a décrit le template comme rapide, bien conçu et prêt à fonctionner avec des agents.

Ce que contient le template

• Une vitrine Next.js au-dessus du catalogue, du panier et du checkout de Shopify.
• Des fiches produits lisibles par machine : prix, disponibilité, options.
• Des données structurées et un sitemap pour les moteurs de recherche et les moteurs de réponse.
• Des outils pour agents basés sur l'UCP, accessibles via MCP sur le domaine du marchand.
• Un assistant intégré reposant sur eve, qui trouve des produits et les ajoute au panier.
• Un panier unique pour la vitrine classique et l'assistant.
• Des skills pour les agents de code : ils aident à configurer, personnaliser et mettre à jour le template.

La vitrine et l'assistant vivent dans le même dépôt. Une équipe peut faire évoluer le design et le comportement de l'assistant ensemble, sans maintenir deux projets distincts. Le client peut commencer par une recherche via l'assistant, passer à la page produit et conserver son panier.

Comment l'essayer

Le premier exemple en production est la boutique de merchandising vercel.store, avec ses drops en édition limitée. Elle repose sur Vercel Shop, et son agent d'achat sélectionne des produits, les ajoute au panier et accompagne jusqu'à la commande. L'association de Shopify, Next.js et Vercel fonctionne déjà chez AG1, Bombas et PAIGE.

Pour démarrer, une seule commande suffit :

`pnpm create next-app@latest my-store --example https://github.com/vercel/shop`

Il faut ensuite connecter la boutique Shopify et configurer la vitrine en suivant la documentation. Les équipes qui disposent déjà d'un catalogue Shopify ont intérêt à vérifier comment leurs fiches apparaissent pour un agent : le prix, la disponibilité et les options y figurent-ils sous une forme lisible ? Celles qui partent de zéro ou refondent leur frontend obtiennent directement la couche agent dans le template. Les chiffres de PAIGE concernent la refonte globale de la plateforme, et non le seul canal des agents ; il vaut donc mieux mesurer séparément l'impact des agents sur ses propres données.