Shop Inside AI Chat

LIVE

Renders a live Shopify product grid — images, prices, buy links — inside Claude or ChatGPT via MCP so shoppers browse and buy without leaving chat.

date
tags
automation, ecommerce
stack
TypeScriptAI
context
Agentic commerce — Shopify Storefront API inside AI chat (Skybridge / Alpic)
links
liverepolinkedin

What it does

Shop Inside AI Chat puts a real Shopify storefront inside the conversation. Ask Claude or ChatGPT for products and a live grid renders in chat — images, prices, vendors, buy links — with no new tabs and no redirects. Commerce stays in the AI surface instead of bouncing shoppers out to a separate site.

How it works

  1. MCP connector — a Skybridge app on Alpic exposes a shopify-search tool that Claude/ChatGPT can call.
  2. Live catalog — the tool queries Shopify’s Storefront API (GraphQL) for real product data from the connected store.
  3. Inline UI — the MCP response returns the product grid UI itself, so cards render in the chat window rather than on a separate page.
  4. Stateless server — every request stands alone, so the deploy scales like ordinary web infra (no sticky sessions).
  5. Connect to AI — a storefront widget points shoppers at a one-click install page for the custom connector.

What I built

  • TypeScript MCP server (shopify-search tool + Storefront API client)
  • Inline product-grid view for chat (Skybridge)
  • Alpic production deploy with Storefront domain/token env vars
  • Local verify script and tunnel flow for Claude connector testing

Try it

Open the Alpic playground to try the app in-browser, or follow the install guide there to add it as a custom connector in Claude or ChatGPT. Then ask something like “Show me products.”

Stack

TypeScript · Skybridge · Alpic · Shopify Storefront API (GraphQL) · MCP