Vibe Coding a Shopify Hydrogen Storefront: What Works, What Breaks, and What You Should Automate

Someone vibe-coded a MedusaJS ecommerce store this week. Cursor just launched version 3 with multi-agent coding mode. Andrej Karpathy's term "vibe coding" now has a Wikipedia page.

But nobody's done the Hydrogen equivalent publicly.

So we ran the experiment: take Cursor 3 with multi-agent mode and Claude Code, point them at a fresh Hydrogen scaffold, and see how far natural-language prompting gets you building a real Shopify storefront.

The short answer: the first 80% is shockingly fast. The last 20% is where vibe coding hits a wall, and where most teams lose the time they saved.

Here is what happened, what broke, and what you should actually automate.

The setup: Cursor 3, Claude Code, and a fresh Hydrogen scaffold

For this experiment, we used the stack a serious Hydrogen team would actually use in 2026:

Cursor 3 with its new multi-agent mode, launched April 2. Cursor now supports cloud-based agents that run in parallel and desktop agents for local editing and testing. You can switch between them mid-workflow. Composer 2, Cursor's in-house model, handles multi-file edits from a single prompt.
Claude Code as the alternative coding agent. It excels at understanding project structure and making targeted edits across connected files.
Hydrogen + React Router + Oxygen as the storefront stack. We scaffolded from Weaverse Pilot, our flagship open-source Hydrogen theme, so the baseline was already a production-grade setup. Weaverse offers 4+ production-ready Hydrogen themes, but Pilot is the go-to starter for most teams.
Storefront API for product data, cart operations, and checkout flows.

The prompt pattern we used follows what daily.dev documented as the standard vibe coding workflow: define intent, scaffold, build feature-by-feature, debug with full error logs, iterate one change at a time.

The goal was not to build a toy demo. It was to see how far an AI-assisted workflow gets on a real ecommerce storefront with real data, real routing, and real checkout complexity.

What worked shockingly well

The first 80% of a Hydrogen storefront build moved faster than we expected. Here is where AI agents genuinely shine.

Component generation and Tailwind styling

This is where vibe coding delivers on its promise.

Prompt: "Create a product card component for a Hydrogen storefront. Show product image, title, price, compare-at-price with strikethrough, and a quick-add button. Use Tailwind. Mobile responsive, 2-column grid on mobile, 4-column on desktop."

The output was production-quality on the first try. Clean markup, proper responsive classes, accessible alt text, hover states on the button.

For Hydrogen specifically, the AI handled GraphQL fragments for product data without being explicitly told the schema shape. It inferred from the file context and generated fragments that matched Storefront API conventions.

When we asked for a featured collection section, a hero banner with a CTA, and a promotional grid, each one took under 30 seconds from prompt to working component. That is genuinely faster than a senior developer typing it by hand.

Routing and data loading

Hydrogen uses React Router v7 with server-side data loading. This is one of the areas where generic AI agents usually struggle because the conventions are specific to Hydrogen's implementation.

But with Cursor's project-context awareness and Claude Code's ability to read the full codebase, the agents handled it well:

Generating route files with proper loader functions
Writing Storefront API queries that matched the existing schema patterns
Setting up nested layouts with correct outlet rendering
Handling dynamic segments for product and collection pages

The key was that the AI could see the existing project structure. When it can read your hydrogen.config.ts, your existing routes, and your GraphQL fragments, it generates code that fits rather than code that conflicts.

This matches what daily.dev reported: vibe coding works best when the AI has persistent context through files like .cursorrules or CLAUDE.md that ground it in your project's conventions.

Metafield queries and content modeling

Metafields are where a lot of Hydrogen projects get complex. Custom content models, structured data, and editorial content all live in metafields.

The AI handled basic metafield queries well. When we asked it to "create a section that pulls product reviews from metafields and displays them in a carousel," it generated a working implementation with proper GraphQL field references and a reasonable UI.

For straightforward content modeling tasks, the agents were fast and accurate.

What broke or needed hand-holding

The last 20% is where vibe coding's limitations become very real for ecommerce.

Storefront API pagination and complex queries

Simple product and collection queries worked. But when we moved to pagination, filtering, and compound queries, the AI started generating code that looked correct but failed at runtime.

Specific issues:

Cursor-based pagination on collections. The AI would generate a hasNextPage check but forget to pass the endCursor correctly to the next query. This is a common Storefront API gotcha that the AI did not internalize from docs alone.
Compound filters on product queries (price range + availability + tag filtering). The AI would generate the right field names but assemble the filter input incorrectly, producing queries that returned empty results silently.
Cart mutations with custom attributes and line item updates. The AI understood the mutation structure but struggled with the merge semantics of updating quantities vs. adding new lines.

Each of these required a human developer to read the error, understand what the Storefront API actually expected, and either fix the code or prompt the AI with much more specific context.

That last point is important: the debugging loop was longer than just writing the correct code in the first place. When the AI generates plausible-but-wrong code, you spend more time diagnosing the issue than you would have spent writing it correctly.

Custom session handling and authentication

Hydrogen's session management uses Shopify-specific patterns that go beyond what generic AI training data covers well.

The AI could generate a basic session setup from documentation, but anything involving:

custom cart persistence across sessions
customer authentication flows
OAuth callback handling for app-embedded contexts

required significant human intervention. The AI's suggestions were directionally correct but missed edge cases around cookie handling, session expiry, and multi-session scenarios.

This is the "last 20% problem" in action. The AI handles the happy path well but falls apart on the edge cases that define production reliability.

OAuth flows and app integration

Any integration that involves Shopify's OAuth flow, installing an app, exchanging tokens, and managing scopes, was beyond what the AI could reliably generate.

The AI understood the concept of OAuth. It could describe the flow accurately. But generating working code that handles the specific Shopify OAuth sequence with correct HMAC validation, nonce handling, and access token persistence required human expertise.

This is not surprising. OAuth implementations are notoriously difficult for AI agents because small errors in token handling or validation produce silent failures that are hard to debug.

Where vibe coding wastes the most time: layout and content editing

This was the biggest surprise of the experiment, and it is where the conversation shifts from "AI is great" to "what should AI actually be doing?"

When we asked the AI to make visual layout changes, things like:

"Move the hero banner below the announcement bar"
"Change the product grid from 4 columns to 3 on tablet breakpoints"
"Add padding between the navigation and the first section"
"Reorder these three sections on the homepage"

Each prompt produced working code. But the iteration loop was painfully slow compared to just dragging things in a visual editor.

Here is the problem: describing visual changes in natural language is fundamentally less efficient than making visual changes visually.

A designer or content editor can reorder three homepage sections in about 5 seconds using drag-and-drop. Describing that same change to an AI agent, verifying the output, and correcting mistakes takes 2-5 minutes per change.

Multiply that across a typical storefront with 15-30 sections across homepage, product pages, collection pages, and landing pages, and you are looking at hours of prompting that could have been minutes of visual editing.

This is exactly the gap Weaverse was built to fill. Let AI agents handle the custom logic, the integrations, and the code that benefits from natural-language generation. Use a visual CMS for layout editing, section composition, and content management where direct manipulation is simply faster.

The best workflow we found was:

AI agents scaffold components, generate routes, write queries, and handle boilerplate
Weaverse Studio for layout editing, section ordering, and content management
Human developers for the hard 20%: session handling, OAuth, complex mutations, and production edge cases

That is not anti-AI. That is using each tool for what it is genuinely best at.

The counter-narrative: why some teams are migrating back to Liquid

There is a quiet trend worth acknowledging. Some teams that went all-in on Hydrogen are migrating back to Liquid themes.

A recent Shopify community thread on Hydrogen-to-Liquid migration highlights the reasons: maintenance burden, the complexity of managing a full React codebase for what is essentially a storefront, and the realization that AI coding agents can produce Liquid templates just as fast as Hydrogen components for many use cases.

But that trend misses the bigger picture.

The teams migrating back are usually teams that went headless for performance or developer experience but did not have a real content management layer. They ended up with a codebase that required developer time for every layout change, every content update, and every seasonal refresh.

The problem is not Hydrogen. The problem is Hydrogen without a CMS.

That is where Weaverse themes plus Weaverse Studio create a different outcome. You keep the developer control and performance of Hydrogen. You add the visual editing layer that makes Liquid themes attractive. And you keep the structured API surface that makes Storefront MCP and agentic commerce possible.

Weaverse also maintains open-source Shopify Hydrogen Skills — reusable patterns and integrations that AI coding agents can reference directly. Instead of letting your AI guess at Hydrogen conventions, point it at battle-tested implementations.

Practical takeaways for Hydrogen teams in 2026

If you are building with Hydrogen and experimenting with AI-assisted development, here is what the experiment taught us:

Use AI agents for scaffolding, not for finishing

The AI is outstanding at generating the first pass. Components, routes, basic queries, and Tailwind styling. Use it there.

Do not trust it for the final implementation of complex flows. Pagination, cart mutations, session handling, and OAuth need human review.

Keep your prompt context clean

Cursor's .cursorrules file and Claude's CLAUDE.md are not optional extras. They are the difference between an AI that generates code that fits your project and one that generates code that conflicts with it.

Include your tech stack, your naming conventions, your file structure, and your Storefront API version. The more grounded the AI is, the better the output.

Pair AI with visual editing for the fastest workflow

The fastest Hydrogen development workflow in 2026 is not pure AI. It is AI scaffolding plus visual editing plus human judgment on the hard parts.

That is what Weaverse provides: visual editing for layout and content on top of a Hydrogen foundation that AI agents can build faster than ever.

Commit early and often

This is standard advice for any development workflow, but it matters more with vibe coding. The AI will sometimes generate code that looks right but introduces subtle regressions. Having clean checkpoints to roll back to saves hours of debugging.

Read the code the AI generates

This sounds obvious, but the temptation with vibe coding is to accept output without reading it. That works for simple components. It is dangerous for data-fetching logic, state management, and anything that touches the cart or checkout.

The 45% vulnerability rate in AI-generated code that daily.dev reported is real. Code review is not optional just because the code was fast to produce.

The bottom line

Vibe coding a Shopify Hydrogen storefront is a real workflow in 2026. It is not hype.

AI agents generate working Hydrogen components, routes, and queries faster than any developer can type them. Cursor 3's multi-agent mode and Claude Code both produce impressive results for the first 80% of a storefront build.

But the last 20% still needs human expertise. Complex Storefront API usage, session management, OAuth, and production edge cases are where vibe coding stalls.

And layout editing via prompts is fundamentally slower than visual editing for anything beyond trivial changes.

The best approach is not pure vibe coding and it is not avoiding AI. It is using AI for what it does best, visual editing for layout and content, and human developers for the hard problems.

That is the workflow we build for at Weaverse.

Start with Weaverse Pilot, let your AI agents scaffold the custom logic using our Shopify Hydrogen Skills as reference, and use Weaverse Studio for everything else.

Stop vibe-coding your layout from scratch. Let AI handle the code that actually needs code.