How everything in ShopMate connects
Three planes share one state store: the human UI, the WebMCP tool layer agents call, and the server-side Gemini assistant. Hover or tap any node to see what it does and where the code lives.
Human shopping plane
User → UI → tools → state → catalog
Agent plane
Agent → WebMCP tools → shopping state
Assistant plane
Chat → server function → Gemini key
Where the planes meet
The WebMCP tool layer and the human UI call the exact same functions in src/lib/shop-engine.ts and commit to the same context. That single shared state is what makes an agent action visible on screen immediately, and what lets the assistant describe your cart without inventing anything.
Shared state, not a mirror
Agents and humans mutate one store — no sync layer, no divergence.
Grounded assistant
Gemini only ever sees real catalog, cart and activity data from the app.
Portable by design
No database, no auth, no vendor AI gateway. Static catalog plus one server function.