WebMCP Vision

WebMCP Vision

WebMCP Vision is an agent-native shopping experience for visual product decisions. It combines fast, structured commerce actions with focused product imagery, so an AI agent can answer questions about appearance without relying on full-page screenshots or guesswork.

Problem

Shopping agents can search product data, but questions such as “which finish fits my room?” or “which of these looks best in a minimalist kitchen?” require visual context. Full-page screenshots are noisy, slow, and force an agent to locate the relevant product before it can reason about it.

Solution

WebMCP Vision exposes two deliberate tool tiers. Structured tools handle catalog discovery, specifications, compatibility, cart actions, and checkout. Five vision tools return bounded product-image references and, when explicitly selected, a temporary browser photo URL so a multimodal agent can make a visual judgment without pretending the server is an image model.

People and agents can collaborate on a decision that was previously difficult to express through structured product data: a person supplies a style or space, while the agent compares relevant visual candidates and explains visible trade-offs. Routine actions remain fast and deterministic, and visual context is used only when it helps.

WebMCP implementation

The existing structured commerce tools remain the default. The vision tier adds getProductImage, compareProductAesthetics, highlightVisualDifference, matchToUserPhoto, and pickBestFit. These tools return deterministic, bounded image references; the multimodal agent performs the visual reasoning. User photos use session-only browser object URLs with explicit selection and removal.

Architecture

One Wasp 0.25 source repository generates a React/Vite client and Node server. The client is deployed on Vercel, the Wasp server on Railway, and Postgres on Neon. The public live app exposes the WebMCP tools directly in the browser.

Testing

The public app was verified in a WebMCP-capable browser. The catalog, comparison route, product routes, structured tool registration, and five vision tools are available at the live URL. The repository contains the source, tests, setup instructions, deployment notes, and demo script.

Built With

• neon
• postgresql
• railway
• react
• typescript
• vercel
• vite
• vitest
• wasp
• webmcp