CoDesign WebMCP

What We Built

CoDesign WebMCP makes a Shopify product configurator agent-ready. It is an open-source integration layer for custom products that already have a visual designer, coupled choices and production rules.

Shopify agents can discover products. Custom products are different. A request such as “make 100 branded totes in two versions” still requires someone to work through materials, handles, artwork, placement and manufacturing constraints. CoDesign lets the shopper describe the result in ordinary language while the merchant's existing configurator remains in control.

The Studio Tote is the public, anonymous reference implementation. The protocol is the product. The tote makes it reproducible for judges and developers, while KORRHAUS proves the same core inside a real Shopify business.

Try the Public Demo

Open the public tote demo. No login is required. Paste this request without mentioning WebMCP or tool names:

I need 100 premium branded studio totes for North Form. Give me a natural customer version and a darker staff version, show me both options, check whether they are ready to make, and do not save anything yet.

The agent then:

1. Reads the merchant's available choices.
2. Creates two 50-unit designs in the live product renderer.
3. Returns genuine previews from that renderer.
4. Detects that the darker tote's upper-left branding is too large for the merchant's safe area.
5. Applies the only repair the merchant allows, reducing the scale from 95% to 78%.
6. Renders a fresh preview and confirms that both designs are ready to make.

The natural version remains unchanged. The proposal stays temporary and reports persisted: false throughout. The customer can inspect the result and choose Keep or Revert on the page. Revert restores the original design without a write.

Why WebMCP Fits

The gap is not product discovery. It is the work inside a made-to-order configurator: dependent choices, artwork, visual layout, coordinated variants and production validation.

CoDesign exposes exactly six narrow webpage capabilities:

• Read the current design.
• Read the merchant's available choices.
• Stage supplied artwork temporarily.
• Create or refine an atomic proposal.
• Return current renderer previews.
• Check configuration and production readiness.

The agent chooses how to combine these capabilities for the shopper's request. The merchant defines the allowed values, renderer and manufacturing rules. The page also shows truthful activity from the actual calls, so the shopper can see what the agent is doing.

A Reusable Shopify Layer

CoDesign is not another tote designer and it is not a universal renderer. A merchant installs the TypeScript core, describes the public customizer surface in a manifest, and connects a small adapter to the store's existing state, renderer, previews and validation functions. The normal human interface keeps working when WebMCP is unavailable.

The same public core is connected to KORRHAUS's pre-existing live Shopify Custom Sock Designer through a private adapter. The KORRHAUS designer existed before 25 August 2026. During the challenge, we created the reusable CoDesign core and integrated it with that existing designer. This separation lets us show a real business implementation without publishing customer data, pricing, suppliers or private application logic.

See the live KORRHAUS Custom Sock Designer for the real Shopify integration.

This pattern can support apparel, teamwear, packaging, uniforms, promotional products, furniture and other Shopify products that need more than a normal variant picker.

Safety and Human Control

• Agent changes are temporary and do not use the customizer's normal autosave.
• Invalid atomic proposals leave no partial changes.
• A newer human edit makes an agent proposal stale instead of overwriting it.
• A current preview is required before Keep is available.
• There are no CoDesign tools for save, upload, quote acceptance, order, cart, checkout, payment, pricing, customer records or administration.

How It Is Implemented

The public package registers webpage tools through document.modelContext.registerTool(...). Its proposal engine handles revision checks, idempotent retries, temporary assets, preview freshness and Revert. A guarded adapter rebuilds public results field by field so private merchant state does not reach the agent.

The Apache-2.0 repository contains the source, public assets, clean-clone instructions, integration guide and tests. The verified release passes 28 test files and 235 tests, plus typecheck, production builds, browser checks and tote parity checks.

Agent designs. Human approves. Shopify completes the sale.

Built With

• cloudflare-pages
• github-actions
• openai-codex
• playwright
• shopify
• typescript
• vite
• vitest
• webmcp