Hydrogen 2.0 Dev Preview: Shopify's Framework-Agnostic Commerce Toolkit Adds Vue, AI Inbox, and Bundled GraphQL Tooling

What shipped on July 30#

Shopify pushed a second major update to the rebuilt Hydrogen developer preview on July 30, and the direction is now unmistakable: Hydrogen is no longer a framework. It is a framework-agnostic toolkit that Shopify rebuilt in partnership with the Next.js team at Vercel, and the new preview adds real substance to the pitch. From the release notes:

• Vue bindings. @shopify/hydrogen/vue mirrors the React API with providers and composables for cart, products, collections, and search. Vue 3.5+ is an optional peer dependency, same as React. Typed factories carry through: createCartComponents<typeof cartHandlers>() returns CartProvider, useCart, and useCartForm with cart state typed from your server handlers.
• Bundled GraphQL TypeScript tooling. No more installing gql.tada or hand-editing tsconfig schema paths. A TypeScript plugin ships in the package and covers both the Storefront and Customer Account schemas with one entry: {"compilerOptions": {"plugins": [{"name": "@shopify/hydrogen/ts-plugin"}]}}. The same validation runs headlessly with hydrogen gql check --fail-on-warn, so CI catches schema drift.
• Analytics and consent through ShopifyScripts. The analytics bus is inlined into the rendered HTML before framework code hydrates, living at window.Shopify.analytics. Consent starts in the same bootstrap, with consent: {mode: "default-banner"} using Shopify's privacy banner. Cart tracking is now framework-neutral: trackCartAnalytics(cartStore) works anywhere, and React gets a useCartAnalytics() hook.
• Shopify Inbox support. Shoppers can chat with your store's AI agent and get handed off to staff, all without signing in. The Inbox module loads through ShopifyScripts, and a <shopify-chat /> element controls widget placement.
• Suspense cart reads in React. useSuspenseCart lets the cart stream in behind its own fallback while the rest of the page renders. For Next.js apps, the app shell can stay static and CDN-cacheable while cart state hydrates after.

There are breaking changes too, worth flagging before you try the preview: private Storefront API calls now require requestContext.buyerIp (the proxy throws without it), and the ShopifyScripts shop option is now required and includes myshopifyDomain. createStorefrontAnalytics() is removed entirely; ShopifyScripts owns the analytics bus now.

Why the rebuild matters#

The context matters more than any single feature. The new Hydrogen, first previewed June 17, is a three-layer design: a plain-JavaScript core of Shopify storefront primitives, thin per-framework bindings, and agent skills that teach a coding agent how to wire it together. It runs anywhere fetch runs - Oxygen, Vercel, Cloudflare Workers, Node, Deno - and works with Next.js, React Router, SvelteKit, Astro, SolidStart, and Nuxt.

The agent story is the part Shopify clearly cares most about. The package ships agent skills that get copied into your project under .agents/skills/, versioned to the exact package you installed. The July 30 update refreshes them with framework references for Vue, Nuxt, SvelteKit, and Solid Start, and adds two new ones: hydrogen-image for CDN image URLs and hydrogen-oxygen for Oxygen and MiniOxygen setup. This is the same pattern we documented in why skills beat prompts for coding agents: instructions that live in the project and match the installed version beat stale blog-post advice every time. Hydrogen's own docs make the same argument - "no stale blog posts, no guessing at APIs that changed three releases ago."

On top of that, the July 8 update added WebMCP support, which exposes storefront tools to AI agents running in the browser - search the catalog, view a product, update the cart, start checkout - using Standard Actions, the same commerce contract Liquid storefronts use. The plumbing that powers your cart drawer is the same plumbing that lets an agent shop your store. We covered the broader WebMCP movement in WebMCP: The Browser Agent Standard That Actually Has a Spec.

Vercel's July 30 post frames the partnership in terms of agentic commerce: open source, runtime agnostic, with Standard Actions bringing agentic commerce to every storefront, and claims feature development dropped from months to a week for early retailer Paige. Treat the timeline claim as vendor-marketing math, but the direction is real: storefront work is being pushed into a typed core so neither humans nor agents reinvent money math, consent handling, or cart state per project.

My take#

The Vue bindings landing so quickly is the honest signal here. Shopify could have kept Hydrogen React-and-Remix-shaped, but the "rebuilt in partnership with Vercel" preview is aggressively multi-framework, and the July 30 update proves the toolkit claim with code rather than promises. For storefront developers, the practical win is the bundled GraphQL tooling: schema-typed queries with a CI check, no codegen step, no gql.tada wiring. That alone removes a whole class of storefront bugs.

The Inbox piece is the one to watch. An AI agent that can chat with shoppers and hand off to staff turns the storefront into a customer-service surface, and Shopify routing it through Hydrogen's standard events means a headless store and a Liquid theme now integrate with apps identically. If you build commerce tooling, that unification is the thing to build against.

Caveats, as always with a preview: the API is still churning - two breaking-change rounds in six weeks, with more promised. The migration diff between preview releases is real work if you started on the June build. And the Remix-based Hydrogen remains the fully supported production path for now, so the toolkit is something to evaluate, not migrate to. The deploy-to-Vercel one-click flow from June 30 makes the preview cheap to try: npx @shopify/hydrogen@preview setup in an existing Next.js or Nuxt app, then let your coding agent read the installed skills and wire the storefront up.

Continue Reading#

• WebMCP: The Browser Agent Standard That Actually Has a Spec
• Why Skills Beat Prompts for Coding Agents
• Seven AI Agent Orchestration Patterns
• When CopilotKit Is the UI Layer, Not the Agent Framework
• What Is an MCP Server? A Beginner's Guide

Sources#

• Hydrogen developer preview update: July 30, 2026 - Shopify Changelog
• Developer preview release notes: July 30, 2026 - Hydrogen docs
• Hydrogen developer preview - Hydrogen docs (June 17)
• Shopify and Vercel are rebuilding Hydrogen for faster storefronts - Vercel Blog
• Deploy a Hydrogen storefront to Vercel in one click - Hydrogen docs