Vercel Shop

Agent-ready commerce, powered by Shopify, Next, and Eve.

• Shopify owns commerce. Catalog, cart, checkout, customer accounts, predictive search, and policies come from Shopify through the framework-agnostic Hydrogen SDK (not the Hydrogen React Router framework).
• Next.js owns the app. Routing, Server Components, caching and invalidation, metadata, and the storefront's machine-readable surface for answer engines: Markdown representations, /llms.txt, structured data, and the sitemap.
• Eve owns the agent. Shop Agent's sessions, tools, and connections; its tools call Shopify directly.

See vercel.shop for full documentation.

Vercel prompts for the three required Shopify values before the first deployment.

Getting Started

1. Create a new project with pnpm 12 and Node.js 24:

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

The project includes the Shop skills for your agent in .agents/skills/.

2. In Shopify admin, create a storefront token in Settings → Apps and sales channels → Headless, enable the required Storefront API permissions, then add your Shopify credentials:

cp .env.example .env.local

NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-token
NEXT_PUBLIC_SHOPIFY_SHOP_ID=123456789

3. Start the development server:

pnpm dev

For local HTTPS, install Portless globally with pnpm add -g portless, then run pnpm dev:portless.

See vercel.shop/docs/getting-started for the full setup guide and Storefront API Permissions for the complete scope reference.

Features

Shopify

• Product, collection, search, blog, page, and policy content from the Storefront API with validated, typed GraphQL
• Optimistic cart with Hydrogen forms, shared cart state, and server handlers
• Customer accounts through the Customer Account API, opt-in
• Shopify analytics, consent, and WebMCP tool registration, opt-in

Next.js

• Next.js 16 App Router, React 19, React Compiler, Tailwind CSS 4, shadcn/ui
• Partial prerendering with tagged caches invalidated by Shopify webhooks
• Markdown representations, /llms.txt, Schema.org data, sitemap, and robots for answer engines
• Single-locale storefront by default; skills add next-intl and Shopify Markets

Eve

• Shop Agent for product discovery, store questions, and cart updates in a side drawer, opt-in
• Shopify catalog and policy MCP connections plus Hydrogen cart handlers

Customer authentication is disabled by default. Follow the authentication guide to configure Shopify credentials and callback URLs before enabling auth.isEnabled in lib/config/index.ts.

Shop Agent is disabled by default. Set agent.isEnabled to true in lib/config/index.ts and follow the Shop Agent guide to configure AI Gateway access and review privacy and spending safeguards before enabling public chat.

Skills

Shop skills guide agents through storefront setup and common commerce patterns. They ship in .agents/skills/, and Claude Code reads them through the .claude/skills symlink. To add them to an existing storefront, run this from its root:

pnpm dlx skills add vercel/shop --skill '*' --yes

Use the plain skill names below. Shopify AI Toolkit is separate external tooling for authoritative Shopify documentation, API schemas, and operation validation; the Shop skills do not include it. If it is unavailable, use official Shopify documentation and validation tooling.

Documentation

Full documentation is available at vercel.shop.

License

MIT