Skip to main content

The WebMCP Challenge: Wishlist Concierge

· 3 min read
Stephan Hochdörfer
Stephan Hochdörfer
Head of IT Business Operations

Last weekend I learned about the OpenAI WebMCP Challenge. A hackathon organized by OpenAI and DevPost to explore what’s possible with WebMCP.

The catch?​

Just 10 days of time. When I learned about the hackathon last Sunday, I only had 4 days left to come up with a project idea and the implementation. Still, I decided to take the challenge.

What is WebMCP?​

WebMCP enables web applications to provide JavaScript-based tools to AI agents, allowing them to easily interact with the web application. Without WebMCP, AI agents have to parse HTML code to understand site structure and functionality. WebMCP simplifies this process by specifying callable functions and their arguments, enabling faster interaction with web applications.

The plan?​

Being an e-commerce enthusiast, I wanted to create some kind of e-commerce integration. However, not the usual boring "let's add a product to a cart" feature. And being sold on the Sylius platform, I knew I wanted to build a Sylius plugin.

The first thing I did was to brainstorm with my AI coding agent about what to build. We toyed around with several ideas, but one stood out: The Wishlist Concierge

The Wishlist Concierge is an agent + human co-curation themed, budget-aware wishlist solution for Sylius. Instead of clicking 30 filters, customers can tell their agents “birthday for my nephew” and the AI agent will search taxonomies, build a wishlist, optimize for budget, and move the best fit to cart.

The initial prototype was quickly built. However, running the first tests was challenging since this is still an experimental feature hidden behind a feature flag in the Chrome browser. At first, I tried using playwright-cli in combination with the Playwright skill, but that did not properly work for some reason. I then moved on to install the ChatGPT desktop application, and that made testing quite smooth.

In the end, the Sylius plugin exposes about 12 WebMCP tools to the AI agent, from product search to creating wishlists, adding and removing products from a wishlist, and converting a wishlist into a cart.

I managed to sneak in a few nice features, e.g. the plugin is using a custom #[ModelContextTool] attribute to annotate controller methods. Via a separate endpoint, the data is collected, and the Javascript frontend registers all tool calls with the WebMCP API:

final class WishlistController extends AbstractController
{
    #[ModelContextTool(
        name: 'wishlist.create',
        description: 'Create a new themed wishlist. The active channel is automatically inferred from the current Sylius context. Theme examples: birthday, gift, summer, casual, formal. Name should be human readable like "Birthday Wishlist — $150".',
        dtoClass: WishlistCreateRequest::class,
        emitsEvents: ['webmcp:wishlist-created'],
        routeName: 'bitexpert_concierge_wishlist_create',
    )]
    public function create(Request $request): JsonResponse
    {
    }
}

Participating in the OpenAI WebMCP Challenge was a valuable experience, providing good insights into the potential of WebMCP and AI agents in e-commerce transactions.

The Wishlist Concierge plugin has sparked ideas for future projects, potentially leading to a conference talk. Stay tuned for more!