WebMCP Catalog Bridge

Inspiration

Most online stores were built for humans, not agents. An AI agent that wants to find a product normally has to navigate the visible interface, read DOM content, open search results, visit product pages, and then guess whether the price and stock information it saw is still authoritative.

We wanted to explore a different future for the open web: the website remains useful and visible to the human, while also exposing structured capabilities directly to an AI agent through WebMCP.

The goal was not to replace the storefront with an API or chatbot. The goal was to let the human and the agent share the same live storefront.

What it does

WebMCP Catalog Bridge turns an existing OpenCart storefront into a shared human + AI commerce interface.

The storefront exposes browser-native WebMCP tools such as:

Search Products Get Product Add to Cart

An agent can search the live catalog using natural-language constraints such as product purpose, price range and availability.

Instead of scraping the DOM, the agent receives authoritative commerce data directly from the store, including current price, stock, product links, attributes and identifiers.

At the same time, the website displays a visible Shared Human + AI results panel containing the same products that were returned to the agent.

The human therefore sees what the agent sees.

For example, a user can ask:

“Find 3 animal repellents currently in stock between 5,000 and 15,000 UAH, compare them, recommend the best one and add it to my cart.”

The agent can perform the catalog search through WebMCP, retrieve additional structured information for the recommended product and, when explicitly requested by the user, add the selected product to the current shopping cart.

Why WebMCP

This use case is a strong fit for WebMCP because product discovery is an operation the website already understands better than a browser agent can reconstruct from the user interface.

Instead of forcing the agent to imitate a human by clicking filters and parsing pages, the storefront exposes the exact operations the agent needs.

The result is faster, more reliable and easier to verify.

The search response also includes a trust contract describing the result as authoritative live store data, with current price and stock and no requirement for browser verification.

This helps prevent unnecessary follow-up navigation after the website has already provided the final result.

Shared human + agent experience

A key part of the project is that WebMCP is not hidden from the human.

After Search Products executes, the storefront renders the same returned products in a Shared Human + AI results panel with real images, live price, live stock and links.

The agent receives a compact structured payload optimized for reasoning, while the human receives a visual presentation optimized for browsing.

Both representations originate from the same underlying result.

This creates a shared state between the human, the agent and the storefront.

How we built it

The project uses browser-native WebMCP through:

document.modelContext.registerTool(...)

The storefront registers structured tools with JSON Schema inputs and execute handlers.

WebMCP calls are sent to same-origin OpenCart endpoints.

The OpenCart backend:

searches active products assigned to the current store understands price and stock constraints ranks products using multiple relevance signals resolves the language of the currently open storefront hydrates current OpenCart price and inventory at call time returns canonical product URLs and structured product attributes provides a compact agent payload and a separate visual presentation payload

The implementation supports multilingual storefronts and binds WebMCP execution to the language currently visible to the human.

The endpoints are protected with same-origin checks, request-size limits, validation and rate limiting.

Write operations such as Add to Cart are intentionally separated from read-only discovery tools.

Trust contract

One experimental part of the project is an explicit trust contract between the storefront and the agent.

Search results can declare properties such as:

authoritative: true live_price: true live_stock: true all_constraints_applied: true result_is_final: true browser_verification_required: false navigation_required: false

This tells the agent that the store itself is the authoritative source and that reopening product pages only to verify the same information is unnecessary.

In our tests, the actual OpenCart catalog search completes in tens of milliseconds, while traditional browser navigation can take many seconds.

Challenges

One of the largest challenges was agent behavior rather than database performance.

Even after receiving structured product results, agents sometimes attempted to re-open search pages or verify products visually.

We therefore improved both the tool descriptions and the result contract so the website can explicitly communicate when a result is final and authoritative.

Another challenge was keeping human and agent presentation synchronized without sending unnecessarily large visual payloads to the model.

We solved this by separating the compact agent result from the storefront presentation while keeping both tied to the same products.

Multilingual storefront routing was another challenge. The WebMCP layer now derives its locale from the actual page the human is viewing rather than assuming a fixed store language.

What we are proud of

The project runs on a real production-style OpenCart storefront with real products, live inventory, real prices, product images and multiple languages.

It is not a static WebMCP demo with hard-coded products.

The same architecture can be added to existing OpenCart and ocStore websites without replacing their storefront, SEO structure or existing extension ecosystem.

What we learned

WebMCP is most useful when the website exposes operations that already represent its domain knowledge instead of forcing an agent to reconstruct that knowledge from the UI.

We also learned that human visibility matters.

A tool call is much easier to trust when the user can immediately see the same result represented on the website.

What's next

The same approach can extend beyond product discovery to:

shopping-cart management shipping-method discovery product compatibility checks inventory-aware recommendations order preparation customer-service workflows B2B purchasing workflows

Our broader goal is a reusable agent-native commerce layer for existing open-source storefronts.

The website does not disappear when the agent arrives.

The human and the agent share the storefront.

Дальше поля Devpost заполняйте так.

Project name:

WebMCP Catalog Bridge

Elevator pitch:

A shared human + AI storefront where agents search, compare and act on live commerce data through WebMCP.

Built with, если поле будет:

WebMCP JavaScript PHP OpenCart ocStore MySQL MariaDB OCMOD HTML CSS ChatGPT in-app browser

Try it out / Live demo:

https://fermateh.com.ua/en/

Code repository:

https://github.com/rayzer-dk/WebMCP

Suggested test prompt, если есть поле Instructions или Testing instructions:

Open https://fermateh.com.ua/en/ in the built-in browser and use the website's WebMCP tools. Find 3 animal repellents currently in stock between 5,000 and 15,000 UAH. Compare them and recommend the best option for a farm, field or garden. Use Get Product for the recommended item. If Add to Cart is available, add one unit of the recommended product to the cart. Do not place an order or make a payment.

Для Tags, если Devpost предложит:

WebMCP AI Agents E-commerce OpenCart Open Web Agentic Commerce