Rewind

Inspiration

A shopping agent can change a cart faster than a shopper can inspect it. When the result is wrong, asking the agent to fix itself is another uncertain operation. I wanted people to have a direct way to return to the state they understood.

What it does

Rewind is a TypeScript SDK that records application mutations as before-and-after snapshots. In the storefront demo, agents can search products, inspect variants, replace a cart, and read its contents through WebMCP. Each registered cart mutation creates a commit.

The shopper can click Undo agent changes inside the cart and inspect the retained action in the history drawer. A new mutation after a restore creates a retry branch instead of erasing the earlier attempt. Agents can also inspect history and restore a specific snapshot using rewind_history and rewind_restore.

The contribution is the recovery SDK and its integration into the shopping experience. The storefront uses product data and visual references from Vercel Shop; this is a standalone prototype with a browser-local cart, not a live Shopify store.

Why WebMCP fits

WebMCP gives the application an explicit boundary for agent actions. Rewind records the tool name, inputs, before and after state, effects, and parent commit at that boundary.

The agent handles product discovery and cart changes. The person keeps a recovery control in the same interface, without needing to describe the previous state in another prompt. The result is a shared workflow: agents act through structured tools, while people can inspect and restore the application state.

How it was built

The landing page uses React and Vite; the storefront and SDK use TypeScript. Store tools are defined in examples/catalog/webmcp.ts. The SDK registers them with document.modelContext.registerTool, records registered mutations, and implements snapshot restoration and branching. A history panel displays the changes, and localStorage preserves the demo session across reloads.

There are ten store tools plus two recovery tools. The optional built-in copilot sends the shopper's prompt, product/cart context, and discovered tool schemas to a server-side OpenAI Responses API endpoint. Proposed calls execute through the page's WebMCP API, and tool results return to the planner. An external browser agent can call the same tools directly without using that planner.

The site is hosted on Vercel. SDK source is available in the repository and ESM bundles are available from the live site; the SDK is not currently published on npm.

Testing the project

No shop login is required. Open https://rewind-webmcp.vercel.app/examples/catalog/ in a WebMCP-capable browser.

1. Ask the agent to call search_catalog with {"query":"black","max_price":80}. It returns the VistaMesh Tee at $57. The built-in assistant also accepts “Find black products under $80”.
2. Call get_cart and note the current cart. Call update_cart with {"items":[{"product_id":"vistamesh","quantity":1,"size":"XL"}]}.
3. Open Bag. Verify one XL VistaMesh Tee at $57, then click Undo agent changes to restore the prior cart.
4. Open Action log. The reverted action remains in history.
5. Make another cart change, then call rewind_history to inspect the retry branch. Use rewind_restore with an ID from that history to restore a snapshot.
6. Reload to verify browser-local persistence.

Direct WebMCP search, cart changes, cart reads, history, and restoration were tested in Codex's in-app browser. The live built-in AI assistant was also tested with a catalog-search request. Chrome and the ChatGPT desktop browser were not separately tested.

Challenges and learning

Recovery needs a precise mutation boundary and preserved history. Retrying after a restore must not erase the first attempt. The SDK therefore keeps parent relationships and creates a branch when execution continues from a commit that already has a child.

Another boundary matters just as much: restoring browser state does not reverse a write to an external commerce service. The demo deliberately uses a local cart. A production Shopify integration would need compensating operations at the external cart mutation boundary.

AI tools used

The shop copilot uses the OpenAI API. Codex assisted with the submission review, source inspection, real-browser WebMCP checks, local recovery and validation fixes, regression tests, and preparation of this description. The local review fixes still need deployment; the live demo currently runs the earlier build.

Limitations and next steps

This prototype does not place or reverse real orders or payments. Checkout and order-history screens are illustrative. Only mutations registered through Rewind are recorded; read-tool calls do not create commits. Local history is mutable browser storage, and its deterministic checksums are not cryptographic evidence.

Next steps are to publish the reviewed recovery fixes, add the demo video, and extend the SDK with compensating operations for external services.

Built With

• css
• javascript
• openai
• react
• typescript
• vercel
• vite
• vitest
• webmcp