Vercel Shop Reaches GA: Shopify Storefronts Learn to Sell to AI Agents

Vercel has made Vercel Shop generally available, an open-source Next.js storefront template for Shopify stores. At the same time, a rewritten Hydrogen SDK reached GA, and it now works not with a single framework but with a range of JavaScript stacks. The premise is simple: agents already shop on the web, but they use pages and tools built for humans and search engines. Vercel and Shopify propose treating the agent as a full-fledged buyer and giving it its own layer of data and actions. As evidence, the companies cite PAIGE. After rebuilding its e-commerce platform, the brand gained +22% revenue and +76% conversion over Black Friday and Cyber Monday, with no downtime.

One URL for the human and the agent

The core mechanic of Vercel Shop is that a product page exists in two forms at the same address. A human sees a visual page. An agent gets price, availability, and product variants as machine-readable content, so it does not need to parse the page layout to extract those fields. For search and answer engines, the template includes structured data on pages and in the sitemap, so they can find and understand products.

The foundation is the Hydrogen SDK. It provides access to the catalog, cart, order management, payments, and checkout. Earlier this year, Vercel and Shopify announced plans to rewrite Hydrogen to work with different JavaScript frameworks. That work is now done, and the SDK is generally available.

UCP and MCP: how an agent builds a cart

The second layer covers actions. Shopify took part in developing the Universal Commerce Protocol (UCP). It defines a standard way for an agent to search the catalog, read a product page, check availability, build a cart, and get a checkout link. Vercel Shop makes these capabilities available on the merchant's own domain. An agent connects over MCP, searches for products, and assembles a cart without navigating the site.

At Vercel Ship SF, Tobi Lütke and Guillermo Rauch discussed the topic. Lütke stressed that checkout is complex and took "20 years of refinement." That is why Shopify is open to developers taking parts of its checkout and building whatever they want from them. Rauch described the template as fast, well designed, and ready to work with agents.

What's in the template

• A Next.js storefront on top of Shopify's catalog, cart, and checkout.
• Machine-readable product pages: price, availability, options.
• Structured data and a sitemap for search and answer engines.
• UCP-based tools for agents, available over MCP on the merchant's domain.
• A built-in assistant based on eve that finds products and adds them to the cart.
• A single cart shared by the regular storefront and the assistant.
• Skills for coding agents: they help with setup, customization, and updating the template.

The storefront and the assistant live in one repository. A team can change the design and the assistant's behavior together, without maintaining two separate projects. A shopper can start by searching through the assistant, move to a product page, and keep the cart.

How to try it

The first live example is the merch store vercel.store, which runs limited drops. It is built on Vercel Shop, and its shopping agent picks products, adds them to the cart, and guides the shopper to checkout. The Shopify, Next.js, and Vercel combination already runs at AG1, Bombas, and PAIGE.

One command is enough to get started:

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

Next, connect a Shopify store and configure the storefront following the documentation. Teams with an existing Shopify catalog should check how their product pages look to an agent: whether price, availability, and options are present in a readable form. Those starting from scratch or rebuilding their frontend get the agent layer right in the template. The PAIGE figures reflect the platform rebuild as a whole, not the agent channel alone, so it is better to measure the effect of the agents themselves separately, on your own data.