Vercel Shop Launches: Making AI Agents First-Class Shoppers

When AI agents start shopping on e-commerce sites, they're faced with pages designed for human eyes and search engine crawlers. Vercel and Shopify think it's time to end this "making do" approach.

From "Workable" to "First-Class Citizen"

Vercel Shop—an open-source storefront template built on Next.js for Shopify—is now generally available. Its core idea isn't complicated: let agents browse products, retrieve information, and complete purchases as smoothly as humans do, rather than "guessing" page content by parsing HTML structure.

Before this, the agent shopping experience was essentially reverse engineering. Agents needed to render pages, understand layouts, extract text, and then pray that these parsing results wouldn't break due to page redesigns. Vercel Shop's approach skips this compromise entirely: the same product URL returns a visual page for humans and machine-readable structured content for agents—price, inventory status, available variants, all without parsing page layouts.

Behind this is Shopify's Hydrogen SDK. Earlier this year, Vercel and Shopify announced a rebuild of Hydrogen to support running across JavaScript frameworks, and this rebuilt version is now generally available. It allows development teams to access a store's product catalog, cart and order management, payment and checkout capabilities to build custom storefronts.

Hydrogen is Shopify's official e-commerce frontend development framework, originally built specifically for Remix. In 2024, Shopify partnered with Vercel to rebuild it, enabling it to run across multiple JavaScript frameworks including React, Next.js, and Remix. Hydrogen provides pre-built components, hooks, and utility functions that let developers directly connect to Shopify's backend capabilities for product catalog, cart, orders, payment, and checkout—without building e-commerce infrastructure from scratch. It's essentially a developer-friendly wrapper around the Shopify Storefront API, letting teams focus on designing the storefront experience rather than building underlying data pipelines. Vercel Shop is a template built on the rebuilt Hydrogen SDK, naturally inheriting this full set of capabilities.

UCP Protocol and MCP: A Standardized Path for Agent Shopping

The Universal Commerce Protocol (UCP), co-developed by Shopify, provides agents with a standardized way to operate: searching product catalogs, reading product details, checking inventory, building carts, and obtaining checkout links. Vercel Shop exposes these capabilities directly under the merchant's own domain, allowing agents to complete searches and add-to-cart operations via MCP without browsing the website.

The significance of this step goes beyond a single template. If MCP is becoming the universal interface for agents to interact with external tools, then UCP's role in e-commerce is to make the act of "shopping" itself programmable. Merchants don't need to adapt separately for each AI platform, and agents don't need to write a set of scraping logic for each e-commerce site.

Shopify CEO Tobi Lütke put it bluntly when discussing the checkout system: "Checkout is extremely hard to get right. It's the kind of software that genuinely takes 20 years to perfect." His attitude is open—Shopify invites developers to freely take components from its checkout system, "basically take all the infrastructure Shopify has built, and you can use it to build whatever you want."

MCP (Model Context Protocol) is an open protocol proposed by Anthropic and now widely adopted, designed to standardize how AI models interact with external tools and data sources. In e-commerce scenarios, MCP allows agents to call merchant-exposed tool interfaces in a structured, discoverable way, rather than relying on fragile page scraping. Agents obtain the list of available tools and their parameter definitions through MCP servers, then directly invoke operations like search, add-to-cart, and checkout. This means merchants only need to implement an MCP interface once to be callable by all AI platforms supporting the protocol, without adapting separately for each platform. The relationship between MCP and UCP is: UCP defines the operational semantics in the e-commerce domain (search, inventory, cart, etc.), while MCP provides the transport-layer standard for these operations to be discovered and invoked by agents.

Shopping Assistant and Storefront Coexist in the Same Codebase

Vercel Shop integrates product catalog, cart, checkout, and Next.js storefront together, with a built-in shopping assistant powered by eve. The storefront interface and assistant share the same codebase, meaning teams can customize both the store design and the assistant's interaction patterns simultaneously.

The Skills included in the template can guide coding agents through installation, customization, and template updates. Shoppers can browse product pages, or ask the assistant to help them find products and add them to cart—both experiences share the same cart, so users don't lose added items when switching.

Vercel CEO Guillermo Rauch's assessment maintains his characteristic directness: "You can use Vercel Shop to build highly customized, beautifully designed, agent-ready experiences. It runs on Next.js, is built on Shopify, and it's absurdly fast."

eve is Vercel's AI agent development framework, focused on building deployable, orchestratable intelligent assistants. In Vercel Shop, the eve-powered shopping assistant can understand natural language requests, call underlying product search and cart interfaces, and return results in conversational form. Since the assistant shares the same codebase and cart state with the storefront, items already added aren't lost when users switch from manual browsing to assistant interaction. The key advantage of this architecture is consistency: the store's customized design (theme, layout, brand elements) and the assistant's interaction logic can be iterated in sync, avoiding the fragmentation of traditional approaches where "the frontend is one system and the AI assistant is another." For development teams, this means significantly reduced maintenance costs and improved experience consistency.

Brand Case Studies Already Underway

Vercel simultaneously launched its own merchandise store, vercel.store, selling limited-edition items, which itself serves as a showcase for Vercel Shop.

More noteworthy is the practical data from existing brands. Brands including AG1, Bombas, and PAIGE are already using the combination of Shopify, Next.js, and Vercel to power their storefronts. After rearchitecting its e-commerce platform, PAIGE achieved 22% revenue growth and 76% conversion rate improvement during Black Friday and Cyber Monday, with no downtime.

These figures show that agent-ready storefront architecture isn't just a future-facing concept—it's already delivering measurable business returns during today's shopping peak seasons.

How to Get Started

Developers can quickly create a Vercel Shop storefront with the following command:

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

Vercel Shop is open source, and the documentation provides complete guidance for connecting a Shopify store and configuring the storefront. For teams considering how to make their e-commerce business AI agent-friendly, this is a starting point worth serious evaluation.