Jipsa

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Jipsa

Inspiration

Custom cake shopping is surprisingly difficult. Price changes with size, filling, lettering, and extras. Pickup inventory differs by maker, and every local shop supports a different set of options. People usually open many pages and manually reconcile those constraints. We built Jipsa to show what becomes possible when a polished human storefront and an AI agent share the same commerce state.

What it does

Jipsa is a real visual marketplace for 20 independent cake makers. Shoppers can browse stores, inspect current availability and policies, personalize a cake, receive an itemized quote, and review the exact order before confirmation.

Through WebMCP, an agent can perform the same workflow with ten focused tools: search_local_stores, get_store_details, search_products, get_product_options, check_availability, configure_product, get_quote, prepare_order, place_order, and get_order_status.

A single natural-language request can check all 20 makers against distance, exact configured price, servings, ingredients, supported cream colors, lettering, and pickup inventory. Jipsa returns three ranked candidates and exposes criterion-level rejection counts so the recommendation is inspectable.

Why WebMCP

This use case is full of structured but inconsistent constraints. Traditional visual automation has to repeatedly navigate cards, menus, forms, and calendars. WebMCP exposes those capabilities directly while preserving the same interface for the person.

The result is not a detached chatbot or a single opaque automation endpoint. The agent composes purpose-built tools across search, comparison, availability, configuration, quoting, confirmation, ordering, and status. Every mutation remains visible to the shopper. If the agent changes lavender cream to light pink, the product photography and selected option update immediately while the lettering, flavor, filling, size, and pickup time remain intact.

How we built it

Jipsa is a React and TypeScript app using the WebMCP imperative API. src/webmcp.ts registers the ten English-language tools through document.modelContext.registerTool(), with JSON Schema inputs, focused descriptions, annotations, validation, structured output, and recoverable errors.

src/marketplace.ts is the shared domain layer used by both the UI and WebMCP callbacks. It owns catalog search, ranking, pickup availability, partial configuration updates, exact pricing, confirmation tokens, local prototype persistence, and the developer audit trail. src/data.ts provides 20 distinct sample makers.

Search price, quote, final review, and the persisted prototype order all use the same pricing engine. prepare_order only creates a short-lived confirmation token and opens human review. place_order requires that exact token plus confirmed: true.

The production build is deployed on ChatGPT Sites with the headers required for WebMCP discovery. The app also includes a clearly labeled preview drawer for browsers where WebMCP is unavailable, without pretending that the protocol is connected.

Challenges we ran into

The hardest part was keeping search ranking, visual state, and order safety consistent. A candidate price is only useful if it reflects the same configuration used at checkout. We solved that by centralizing validation and pricing instead of duplicating estimates in the UI and tool handlers. We also designed partial updates so a follow-up request changes only the named field rather than resetting the order.

Accomplishments that we're proud of

• A compound request evaluates 20 makers and explains both matches and rejections.
• Ten small, composable WebMCP tools cover the complete workflow.
• Human and agent actions update one shared, visible order state.
• Exact configured pricing remains consistent from search through confirmation.
• Ordering is confirmation-gated and produces no external payment or real-world order.
• The deployed app, public repository, automated tests, and a sub-three-minute narrated demo are ready for judges.

What we learned

WebMCP is most valuable when tools are narrow, descriptive, and composable. The human interface remains essential: it provides context, trust, and final control, while structured tools give agents reliability. The strongest experience comes from letting both sides take turns on the same task rather than creating separate human and agent products.

What's next for Jipsa

A production version would connect maker inventory, secure checkout, live pickup calendars, and verified merchant onboarding. The same pattern can extend beyond cakes to florists, tailors, caterers, and other local businesses whose products are highly configurable and time-sensitive.

Built With

• chatgpt
• webmcp