Example front-ends on the Bluestone PIM MCP

Build a PIM UI in an afternoonOne MCP, many interfaces

Static HTML pages that call MCP tools by name — no framework, no build step. A small MCP proxy (Node or Cloudflare) holds your credentials; the browser only needs a proxy URL and shared secret.

Start with minimal.html → Fork & deploy guide

📄

Single HTML files

Copy mcpCall() from any demo and ship your own persona UI.

🔌

MCP tools/call

JSON-RPC through the Worker — same protocol agents use.

🔒

Deploy anywhere

Node proxy for local/Docker; optional Cloudflare Worker for edge.

Demos in this repo (MCP)

🧪

Start here

Minimal MCP UI

Hello-world: settings modal, mcpCall, and list_catalogs. The smallest copy-paste starting point.

Supplier Intake

One product per screen; suppliers fill attributes that write straight into PIM via MCP.

list_products_in_category set_product_attribute

Open demo →

📊

Product manager · Reference

PM Scorecard & Gap-Filler

Gold-standard patterns: settings, defensive MCP parsing, optimistic saves, completeness filters.

search_products get_product_completeness_detail set_product_attribute

Open demo →

👟

Store associate

Store Floor Lookup

Phone-sized published-catalog lookup — SKU search, variants, stock.

list_published_catalogs get_product

Open demo →

🌐

Localization

Translation Workbench

Parallel locale columns, gap counts, per-context writes back to PIM.

list_contexts get_product set_product_attribute

Open demo →

🤖

Advanced · Agent shell

The AI PIM

Full chat + data viewer shell — larger reference for agent-style UIs on the same MCP proxy.

create_product list_catalogs + many tools

Open demo →

MCP tools by demo

Each page calls tools through POST /api/mcp-call on the Worker. See MCP from the browser.

Page	MCP tools (representative)
minimal.html	`list_catalogs`
supplier-intake.html	`list_products_in_category`, `set_product_attribute`
pm-shoes.html	`list_catalogs`, `search_products`, `list_product_completeness_scores`, `get_product_completeness_detail`, `set_product_attribute`
store-floor.html	`list_published_catalogs`, `list_published_products_in_category`, `get_product`
translation-workbench.html	`list_contexts`, `get_product`, `set_product_attribute`
ai-pim.html	`create_product`, `list_catalogs`, `get_product`, `set_product_attribute`, …

How it's wired

Run proxy/node locally or deploy to your cloud — see run locally. Same mcpCall in every HTML file.

Browser  ─►  MCP proxy  ─►  Bluestone PIM MCP  ─►  Bluestone PIM
your.html      Node or CF Worker   JSON-RPC tools/call     tenant
X-Demo-Secret  server-side keys

Bluestone PIM MCP docs · Fork guide · Node proxy · Cloudflare · MIT