Introducing the UCP Playground Extension: An AI Shopping Agent in Your Side Panel

Our first extension answered one question while you browse: is this store agent-ready? A green dot in your toolbar, fired by a single probe to /.well-known/ucp. It quietly became our biggest discovery engine.

Today we're shipping our second extension — and it answers the obvious follow-up: okay, so what actually happens when an agent shops here? — without making you leave the page.

Meet the UCP Playground — AI Shopping Agent extension. Open Chrome's side panel on any UCP-enabled store, pick a model, and an AI agent shops it live — right beside the page. It searches, compares, builds a cart, and reaches checkout, driving the store through its own published UCP tools. No screen-scraping, no separate tab.

Install it free from the Chrome Web Store →

From a green dot to a live agent

We've been building toward this in three steps.

The first extension is passive detection: one HTTP request per domain, a badge that tells you whether a store speaks the protocol. UCP Playground on the web is the runtime layer: it runs live agent shopping sessions against real stores and shows every JSON-RPC message flowing between agent and merchant — now across 16 frontier models and dozens of real stores.

The gap was the hop between them. You'd spot a UCP store while browsing, then go to a separate site to watch an agent try it. We even teased closing that gap in the first extension's write-up — "see the green dot, click Open in Playground, and you're watching Claude shop."

This extension closes it. Detection and action now live in the same tab.

What it does

A side panel, side by side. Click the toolbar icon and Playground opens in Chrome's native side panel, next to the storefront. You see the human page and the agent's run at the same time.
Chat with any UCP store. Type what you'd ask a shop assistant — "find a waterproof jacket under £100" — and the agent executes the store's UCP tools to answer.
The full tool-call timeline. Every step is visible: search, product lookup, cart, checkout — with raw responses, timing, product cards, cart state, and the final checkout URL. It's the same observability the web Playground is known for, docked beside the page.
Pick your model. Run any model exposed by your Playground account, so you can compare how different agents handle the same store.
Structured, not scraped. The extension drives the store through its published MCP tools — the exact path a real agent takes — so what you see is the protocol behaving, not a DOM hack that breaks on the next redesign.

The side panel drives the store's own UCP tools — get_product_details, update_cart, checkout — beside the page, with timing on every call.

Why a side panel

Side-by-side is the whole point. When you can see the store's own page and the agent's tool calls together, the gaps jump out: a product the agent can't resolve, an option that doesn't map, a checkout that stalls where the website sails through.

For builders, that's a debugging loop measured in seconds — validate product schemas, option resolution, and checkout flows against a live agent without wiring up anything. For merchants, it's the first time you can watch how an agent experiences your store the way a customer's assistant soon will — the same kind of run that produced the first fully autonomous UCP purchase.

Multi-item search and option resolution on Kylie Cosmetics, side by side with the store.

How it works

The first extension was pure client-side: one fetch() to /.well-known/ucp, a badge, done. This one is a thin client in front of the UCP Playground engine — your browser handles detection and display; the agent itself runs server-side. Four moving parts:

1. Detection. On navigation, the extension probes the current host's /.well-known/ucp — the same one-request check the first extension uses, with the host permission scoped to that exact path. It only ever reads the hostname to know where to look.

2. The side panel. Clicking the toolbar icon opens Chrome's native side panel (sidepanel.html) docked beside the page. The tabs permission lets the panel follow you as you move between stores, so it always knows which store to target — without touching anything on the page itself.

3. The agent runs on the Headless API — not in your browser. The extension doesn't run a model locally or scrape the DOM. It sends your message and the store's hostname to the UCP Playground Headless API, authenticated with your personal access token. Playground orchestrates the chosen model and executes the store's published MCP tools server-side — the same engine behind the web Playground and our evals — then streams the session back to the panel. That's why setup needs a free account and a token.

4. The timeline. Every step renders in order — search_catalog, get_product_details, update_cart, complete_checkout — each with its raw response, latency, product cards, cart state, and the final checkout URL. The same observability the web Playground is known for, docked beside the storefront.

Everything heavy — the model, the tool execution, the session record — lives in Playground. The extension is the lens.

What it reads — and what it doesn't

The first extension made a point of its ultra-narrow permissions; we hold the same line here, with one honest difference — a side panel that follows you across stores needs tabs to know which store you're on.

Here's the full ledger: storage (your token and settings), activeTab + tabs (the current store's hostname), sidePanel (the panel itself), and host access scoped to /.well-known/ucp plus ucpplayground.com. What it never requests: content-script access to store pages, your cookies, your history, or <all_urls>. It reads which store you're looking at, not what's on the page — and that hostname is the only thing about your browsing that ever leaves the browser.

Set up in under a minute

Install from the Chrome Web Store (Chrome, Edge, Brave — any Chromium browser).
Create a free account at ucpplayground.com.
Generate a personal access token in settings and paste it into the extension options.
Browse. It auto-detects UCP-enabled stores; click the icon to open the side panel and start shopping.

Where it fits in the stack

Each of our tools answers a different question, and now they chain cleanly from your toolbar:

Detect — the UCP Checker extension: is this store agent-ready?
Score — UCP Checker: how agent-ready is it?
Act & observe — this extension + UCP Playground: what happens when an agent actually shops it?
Monitor — UCP Alerts: did anything change?

The first extension turned passive browsing into a discovery map. This one turns it into a test bench — point an agent at any store on the web and watch the protocol work, live, beside the page.

Sources

UCP Playground — AI Shopping Agent — Chrome Web Store
Our analysis — How a browser extension became our biggest discovery engine and Why we built UCP Playground
UCP Playground at 1,000+ agent sessions — what 16 models and real stores reveal

About UCP Checker

UCP Checker is the independent validation and monitoring layer for the Universal Commerce Protocol. We crawl, validate and grade every public UCP manifest we can find, run the merchant directory, the UCP Score and live adoption stats, and — through UCP Playground — test how real AI agents behave against real stores.