Desksembly

An agent-ready desk, assembled in front of you.

Comment

Problem

Buying a complete desk setup is a multi-product decision disguised as unrelated product pages. Shoppers must compare categories, resolve exact variants, track budget and availability, remember their choices, and reproduce the final decision in a cart. A generic browser agent can imitate clicks, but it has no reliable contract for non-DOM state inside a visual workspace and can overwrite a choice made while it was planning.

Solution

Desksembly gives the shopper and their browser agent one shared, directly manipulable miniature desk world. The experience starts with a human-locked orange lamp and a natural-language request for a cozy US work-from-home setup under $350.

The browser agent reads the current scene, composes Shopify-native discovery with Desksembly's site-owned WebMCP tools, validates exact product IDs, and stages the proposal through visible parcels. The shopper can inspect, drag, move, lock, unlock, or remove products through either the 3D canvas or its equivalent accessible list.

When the shopper changes the constraints to a 90 cm desk, a $300 budget, and US availability, a stale agent call is rejected. After refreshing, the agent preserves the locked keyboard and all unaffected IDs, returns only the conflicting plant, and stages one replacement.

Before any cart consequence, Desksembly produces an exact, versioned review. Approval is digest-bound, expiring, and single-use. Partial cart outcomes remain partial and block checkout.

Why WebMCP

Desksembly demonstrates an open interaction model where the human owns taste, spatial corrections, locks, and approval; the agent owns repetitive discovery, validation, and precise execution; the website owns state correctness and consequential-action boundaries; and commerce facts never come from model output.

The defining WebMCP moment is a browser agent operating a non-DOM 3D world, surviving a concurrent human edit through optimistic versioning, and composing site-owned capabilities without scraping buttons or embedding a store-specific chatbot.

Human + Agent Collaboration

The shopper can manually reshape the desk and lock products they want to keep. The agent works from the same versioned scene, stages visible proposals, and must refresh after a human edit instead of silently overwriting it. The final cart action happens only after an exact human review and one-time approval.

Implementation

Desksembly exposes five focused site-owned WebMCP tools alongside Shopify-native tools:

deskbuilder.get_scene
deskbuilder.preview_plan
deskbuilder.stage_plan
deskbuilder.move_product
deskbuilder.get_review

Tool inputs use strict Zod schemas, and every scene mutation carries an expected version. Next.js and Shopify Hydrogen provide SSR, typed Storefront queries, ShopifyScripts, native WebMCP, Standard Actions, and request routing. Zustand supplies fresh synchronous state reads. React Three Fiber and Three.js render the world; GSAP owns cancellable transactions; Motion renders the activity ribbon.

Key Features

  • Five focused deskbuilder.* tools alongside Shopify-native tools
  • Retryable STALE_SCENE failures and exact scene versioning
  • Cancellable parcel arrival, opening, reveal, and placement
  • Accessible product list plus keyboard and manual controls
  • Visible human-owned product locks
  • Constraint shock that preserves exact unaffected IDs
  • Reduced-motion replay with the same five-item result
  • SHA-256 proposal/review digests and one-time approval
  • Partial deterministic cart truth and disabled-checkout disclosure
  • Manual and deterministic fallback when WebMCP is unavailable

AI and Codex

The deployed application hosts no model API. It relies on a compatible browser agent to interpret free-form requests and compose Shopify's native tools with Desksembly's WebMCP tools. AI output is never trusted as price, availability, cart, or checkout truth.

OpenAI Codex supported WebMCP and Shopify research, product planning, architecture review, implementation, debugging, automated testing, browser verification, deployment, evidence capture, repository publication, and submission preparation.

Testing

Open the live app in ChatGPT's in-app browser or Chrome with WebMCP enabled. Confirm the Shopify tool family plus exactly five deskbuilder.* tools. Run the deterministic replay, lock the QuietType keyboard, apply the 90 cm / $300 / US constraint shock, and prepare the exact review. The final deterministic cart flow demonstrates accepted-only receipts, single-use approval, preservation of an unrelated line, and explicitly unavailable Shopify Checkout.

Verified matrix: 30 Vitest tests, 10 integration tests, 5 Playwright journeys, and 10 prompt-family evals. A clean public clone passed npm ci, typecheck, and production build. No credentials are required.

Links

Known Limitations

No participant Shopify development store was available. The desk catalog and final scene cart are clearly labeled deterministic data. mock.shop separately proves native tool coexistence and the cart gate, but not exact desk-scene carting. Shopify Checkout remains disabled. The scene uses primitive geometry, and scene state is session-only.

Built With

  • gsap
  • next.js
  • openai-codex
  • playwright
  • react
  • react-three-fiber
  • shopify-hydrogen
  • three.js
  • typescript
  • vercel
  • vitest
  • webmcp
  • zod
  • zustand
Share this project:

Updates