Skip to content

Add experimental WebMCP storefront tools - #498

Merged
laugharn merged 1 commit into
mainfrom
codex/webmcp
Aug 10, 2026
Merged

Add experimental WebMCP storefront tools#498
laugharn merged 1 commit into
mainfrom
codex/webmcp

Conversation

@gaojude

@gaojude gaojude commented Aug 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

What

  • progressively register four storefront tools through the native document.modelContext API
  • expose product search, product options, guest-cart reads, and an explicit add-to-cart capability
  • document Chrome's testing flag, the Model Context Tool Inspector, Chrome DevTools MCP, and optional origin-trial setup

Implementation notes

  • keeps the WebMCP integration in one null-rendering Client Component with direct registerTool calls and AbortSignal cleanup
  • validates tool arguments again in Server Actions and resolves exact, available, non-bundle variants before mutation
  • keeps cart writes on the existing /api/cart path, including BotID checks when enabled, and serializes browser cart writes
  • returns reduced, bounded tool results without cart IDs, checkout URLs, payment data, customer data, or upstream error text
  • reports ambiguous mutation outcomes as unsafe to retry

WebMCP remains experimental, so unsupported browsers keep the normal storefront experience.

Testing

  • pnpm --filter template lint
  • pnpm --filter template exec next typegen
  • pnpm --filter template exec tsc --noEmit
  • focused mocked checks for output budgets, exact option resolution, mutation serialization, redaction, and ambiguous outcomes
  • native Chrome lifecycle smoke: four tools registered, abort cleanup removed them, remount registered them again without duplicates, and cleanup removed them again
  • pnpm --filter template build completed GraphQL codegen, then stopped because the required Shopify storefront environment variables are not available locally

@vercel

vercel Bot commented Aug 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
Image shop-docs Ready Ready Preview Aug 10, 2026 10:25pm
Image shop-template Ready Ready Preview, v0 Aug 10, 2026 10:25pm

@gaojude
gaojude marked this pull request as ready for review August 10, 2026 22:35
@gaojude
gaojude requested a review from petehunt August 10, 2026 22:36
@laugharn
laugharn merged commit 600e9ff into main Aug 10, 2026
7 checks passed
@frandiox

frandiox commented Aug 12, 2026

Copy link
Copy Markdown

@laugharn @gaojude 👋 FYI Hydrogen already adds WebMCP tools via <ShopifyScripts> component. Just mentioning in case this is redundant here.

This was referenced Aug 13, 2026
Closed
Closed
@laugharn laugharn mentioned this pull request Aug 14, 2026
Merged
laugharn added a commit that referenced this pull request Aug 14, 2026
@laugharn
Replace hand-rolled WebMCP with Hydrogen's behind a config flag (#504)
fde90ff 
* Revert "add experimental WebMCP storefront tools (#498)"

This reverts commit 600e9ff.

Removes the hand-rolled WebMCP implementation, its README/AGENTS-adjacent
docs, env token, i18n strings, and cart-client support code. A follow-up
PR will implement Hydrogen's WebMCP behind a config flag instead.

* feat(template): add Hydrogen WebMCP behind webmcp.isEnabled config flag

Replaces the reverted hand-rolled WebMCP implementation with Hydrogen's
own. Setting webmcp.isEnabled in lib/config.ts makes the existing
ShopifyScripts component load Shopify's storefront webmcp.js on browsers
that expose document.modelContext.

The Shopify analytics script is now gated independently
(shopifyAnalytics) so WebMCP works without enabling analytics, and the
shared ShopifyScripts mount turns on when either feature needs it.

* Drop README note; rename ShopifyAnalyticsTracker to ShopifyScriptsTracker

The README bullet doesn't fit the repo's docs style. The component now
mounts ShopifyScripts for WebMCP too, so name it after what it renders.

* TEMP: enable webmcp by default for preview deployment

* docs: document experimental WebMCP feature

Adds an anatomy page for WebMCP with an explicit experimental
designation (in-progress browser API, Chrome-flag-only, disabled by
default), testing instructions, and a webmcp section in the shop-config
reference alongside the other isEnabled flags.

* Revert "TEMP: enable webmcp by default for preview deployment"

This reverts commit c40f6d1.
laugharn added a commit that referenced this pull request Aug 24, 2026
@laugharn @blurrah @molebox
Merge main into enterprise demo (#530)
391c96b 
* Replace hand-rolled WebMCP with Hydrogen's behind a config flag (#504)

* Revert "add experimental WebMCP storefront tools (#498)"

This reverts commit 600e9ff.

Removes the hand-rolled WebMCP implementation, its README/AGENTS-adjacent
docs, env token, i18n strings, and cart-client support code. A follow-up
PR will implement Hydrogen's WebMCP behind a config flag instead.

* feat(template): add Hydrogen WebMCP behind webmcp.isEnabled config flag

Replaces the reverted hand-rolled WebMCP implementation with Hydrogen's
own. Setting webmcp.isEnabled in lib/config.ts makes the existing
ShopifyScripts component load Shopify's storefront webmcp.js on browsers
that expose document.modelContext.

The Shopify analytics script is now gated independently
(shopifyAnalytics) so WebMCP works without enabling analytics, and the
shared ShopifyScripts mount turns on when either feature needs it.

* Drop README note; rename ShopifyAnalyticsTracker to ShopifyScriptsTracker

The README bullet doesn't fit the repo's docs style. The component now
mounts ShopifyScripts for WebMCP too, so name it after what it renders.

* TEMP: enable webmcp by default for preview deployment

* docs: document experimental WebMCP feature

Adds an anatomy page for WebMCP with an explicit experimental
designation (in-progress browser API, Chrome-flag-only, disabled by
default), testing instructions, and a webmcp section in the shop-config
reference alongside the other isEnabled flags.

* Revert "TEMP: enable webmcp by default for preview deployment"

This reverts commit c40f6d1.

* Keep storefront detail navigation stable (#506)

* fix(template): allow blocking product routes

* fix(template): allow blocking content routes

* fix(docs): drop env vars from the deploy button URL (#502)

* chore(docs): update Geistdocs to 1.20.4 (#508)

* chore(docs): update Geistdocs to 1.20.4

* chore(docs): allow agent readability releases

* fix(template): scope Shopify proxy routes (#505)

* fix(template): proxy Shopify consent requests locally

* chore(template): mount Hydrogen scripts by default

* fix(template): provide consent banner access token

* refactor(template): render consent token as script content

* fix(template): proxy versioned Storefront API routes

* chore(template): update Hydrogen preview

* experiment(template): use Hydrogen cart proxy handler

* refactor(template): delegate Shopify routes in proxy

* fix(template): scope Shopify proxy routes

* chore: bump dependencies

* chore: enforce release age for Hydrogen

* feat(template): complete Hydrogen cart integration (#512)

* feat(template): attribute carts to customer sessions

* fix(template): settle concurrent cart totals

* fix(template): update pending cart lines

* feat(template): attribute carts to storefronts

* fix(template): avoid duplicate page views

* fix(template): preserve cart line attributes

* fix(template): omit invalid storefront ID

* feat(template): track cart analytics (#513)

* fix(template): integrate Hydrogen discount updates (#514)

* fix(template): use Hydrogen discount forms

* fix(template): submit discount updates

* fix(template): preserve cart mutation errors

* feat(template): show line item discounts

* fix(template): refine cart discount display

* docs: correct cart implementation details (#515)

* refactor(template): remove cart seed shim (#516)

* Adopt Hydrogen storefront primitives (#524)

* Use Hydrogen predictive search

* Use Hydrogen collection browse state

* Fix taxonomy collection filters

* Remove legacy collection filter URLs

* Add Hydrogen storefront analytics events

* Preserve predictive search loading state

* Adopt Hydrogen cart form primitives

* Adopt Hydrogen storefront logging

* Start 2026-08-23 Hydrogen release

* Format integrated Hydrogen docs

* Scope client translation messages

* Rewrite docs around essential user outcomes

* Restore next-step guidance in feature docs

* Codify reader-focused docs endings

* Provide search client translations

* Improve template agent readability (#527)

* Improve template agent readability

* Remove template test scaffolding

* Upgrade template dependencies (#528)

* Restore full-bleed collection heroes

* Allow server actions through content negotiation

---------

Co-authored-by: Boris Besemer <borisbesemer@gmail.com>
Co-authored-by: Rich Haines <rich@vercel.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@laugharn laugharn laugharn approved these changes
@petehunt petehunt Awaiting requested review from petehunt

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@gaojude @frandiox @laugharn