Her Shopping

• 

  External Chat action

• 

  Voice interaction

• 

  Voice intent understanding

• 

  Observable actions taken by agent

Inspiration

Online shopping is still organized around catalogs, but people usually think in outcomes: a trip, an event, a budget, a deadline, and a set of tradeoffs. We wanted to build a storefront where an agent in various interfaces could work with the shopper inside the actual interface, not just chat beside it or click through it.

Her as the name of the voice assistant and as a reference to the movie.

What it does

Her Shopping is an adaptive outdoor storefront that reshapes itself around a shopper’s mission. A user can say something like, “I’m going camping. Keep the total below $700, prioritize warmth and Friday delivery,” and the store reorganizes products into Essential, Useful, and Optional groups.

The agent can search products, compare options, change the layout, add items to the cart, open checkout review, and request a demo order. Every change is visible, reversible, and shared with the human. Checkout is simulated and requires explicit human confirmation.

How we built it

We built the app with React, TypeScript, Vinext, Vite, Tailwind CSS, Base UI, OpenAI Sites, and WebMCP.

The site registers 20 typed WebMCP tools using document.modelContext.registerTool(...). Those tools are backed by a shared capability registry, strict JSON Schemas, state-version checks, a single reducer, layout invariants, undo history, and an activity ledger.

Voice is powered by the OpenAI Realtime API over WebRTC. The in-page voice agent uses the same validated shopping actions as the WebMCP tools and the human UI.

Challenges we ran into

The main challenge was making the agent feel powerful without making the user lose control. We had to design tools that were semantic enough for agents, but bounded enough to be safe and predictable.

We also had to make agent actions legible on screen. That led to the shared activity ledger, change highlighting, undo support, strict schemas, and a checkout gate that an agent cannot bypass.

To find the right balance between human and agent interaction

Accomplishments that we're proud of

We are proud that WebMCP is load-bearing in the product. The agent does not just operate the page; it can reshape the storefront’s information architecture around the user’s mission.

We are also proud of the shared action layer. Human controls, voice, and WebMCP all mutate the same state through the same validation path, so the experience stays inspectable, deterministic, and reversible.

What we learned

We learned that WebMCP works best when the website exposes meaningful product-level actions instead of low-level UI clicks. The strongest experience came from treating the page as a shared workspace for both the person and the agent.

We also learned that trust depends on visibility. Users need to see what changed, why it changed, and how to undo it before they will comfortably let an agent help with a multi-step task.

Built With

• baseui
• react
• tailwind
• typescript
• vite