Custom eCommerce ChatGPT Apps with Shopify

ChatGPT now has native Shopify integration — product recommendations, in-chat checkout, the works. It's a strong proof of concept for conversational commerce. But once you look closer, the tradeoffs become clear: a 4% commission on every sale, zero control over how ChatGPT presents your brand, and no access to the conversation data that would actually help you optimize.

At FocusReactive, we built an SDK that solves all of this. It lets you create a custom ChatGPT App — a purpose-built shopping assistant connected directly to your Shopify store via MCP, with interactive product components, full AI behavior control, and no commission taken. You keep your data, your brand, and your margins. This article breaks down how it works and why we made the technical decisions we did.

TLDR: What This SDK Does

Our SDK lets you build a custom ChatGPT App — a branded shopping assistant that lives inside ChatGPT — connected directly to a Shopify store. Instead of relying on OpenAI's generic product recommendations and Instant Checkout (where OpenAI controls the experience and takes a 4% cut), the merchant gets their own ChatGPT App with full control over how the AI presents products, handles conversations, and drives conversions.

What you get:

Why Not Just Use the Native Integration?

This isn't contrarianism for the sake of it. The native ChatGPT shopping integration is genuinely impressive for what it is — a new discovery channel. But for brands building serious e-commerce experiences, it has fundamental limitations.

Limited Control Over AI-Generated Responses

ChatGPT responds to shopping queries based on its pre-trained models and whatever product data it can access from Shopify's catalog. Merchants have little to no control over how products are presented, described, or compared. ChatGPT might describe a luxury skincare product the same way it describes a budget alternative. It might fail to mention a key differentiator.

For brands that have spent years crafting their positioning, handing product presentation to a generic AI model is a non-starter.

With our SDK, the system prompt is fully customizable per merchant. The AI knows the brand guidelines, which products to prioritize, how to handle competitor comparisons, and what language to avoid. It's the difference between a knowledgeable brand ambassador and a well-meaning stranger who read the product feed.

Attribution Gaps in Conversational Conversions

When a customer discovers and purchases a product through ChatGPT, assessing AI-driven performance is nearly impossible without proper reporting. ChatGPT can send traffic and facilitate in-chat sales, but the merchant has no visibility into what queries led to conversions, which product descriptions performed well, or how the AI influenced the buying decision.

Our SDK captures the full conversation funnel: what the customer asked, what the AI recommended, which products were viewed in the interactive cards, what was added to cart, and what converted. This data feeds directly into the merchant's existing analytics stack. No guessing. No attribution gaps.

Data Privacy and Security Compliance

Integrating Shopify with ChatGPT means customer interaction data flows through OpenAI's infrastructure. For merchants operating under GDPR, CCPA, or industry-specific compliance requirements, this creates real legal exposure. Customer queries often contain personally identifiable information — sizes, preferences, health conditions (for supplements or cosmetics), shipping addresses mentioned in conversation.

Our SDK keeps conversation data within the merchant's own infrastructure. The custom ChatGPT App connects to the merchant's backend, not OpenAI's generic shopping pipeline. The data pipeline stays first-party. No third-party data sharing. No compliance surprises.

The 4% Commission Problem

OpenAI charges merchants a 4% fee on every sale completed through ChatGPT's Instant Checkout, on top of Shopify's existing transaction and payment processing fees. For context, that pushes total platform costs close to 7% per sale before fulfillment, shipping, returns, or customer support.

For high-volume merchants, that 4% is significant. A store doing $1M/month through ChatGPT would pay $40,000/month to OpenAI alone — not for traffic, not for ads, just for the privilege of the checkout happening inside ChatGPT's interface rather than on the merchant's own site.

Our SDK eliminates this entirely. With a custom ChatGPT App, the merchant controls the shopping experience. Checkout redirects to the merchant's own Shopify store. The merchant pays their normal Shopify fees and nothing more.

Architecture: How It Works

The SDK is built on four core technologies: ChatGPT Apps (OpenAI's custom GPT/app platform) as the conversational interface, MCP UI for interactive commerce components, Shopify Storefront API for commerce data, and Next.js for the backend orchestration and optional website embedding.

System Overview

┌───────────────────────────────────────────────────────┐
│                   ChatGPT App                         │
│              (branded shopping assistant)             │
│                                                       │
│  ┌──────────────┐                                     │
│  │  Chat UI     │  (ChatGPT's native interface)       │
│  │  + MCP UI    │  (interactive product components)   │
│  │  components  │                                     │
│  └──────┬───────┘                                     │
│         │                                             │
│         ▼                                             │
│  ┌──────────────────────────────────┐                 │
│  │  Next.js Backend                 │                 │
│  │  (AI Orchestration Layer)        │                 │
│  │  - System prompt management      │                 │
│  │  - Tool routing & function calls │                 │
│  │  - Conversation state            │                 │
│  └──────────┬───────────────────────┘                 │
│             │                                         │
│      ┌──────┴──────────┐                              │
│      │                 │                              │
│  ┌───▼──────────┐  ┌───▼─────────────┐                │
│  │ Shopify MCP  │  │ MCP UI Server   │                │
│  │ Server       │  │ (product cards, │                │
│  │ (data layer) │  │  cart widgets)  │                │
│  └───┬──────────┘  └─────────────────┘                │
│      │                                                │
│  ┌───▼────────────────┐                               │
│  │ Shopify Store      │                               │
│  │ (Products, Cart,   │                               │
│  │  Checkout, Orders) │                               │
│  └────────────────────┘                               │
└───────────────────────────────────────────────────────┘

The MCP UI Layer

This is the piece that makes conversational commerce actually work for shopping. Traditional chatbots return text. Text is fine for answering questions about return policies. It's terrible for selling products.

MCP UI extends the Model Context Protocol to return fully interactive UI components instead of just text responses. When a customer asks "show me running shoes under $150," the AI doesn't return a text list — it returns rendered product cards with images, variant selectors, price displays, and "Add to Cart" buttons.

Our SDK uses Shopify's MCP UI implementation with custom components tailored to each merchant's design system. The components are delivered as sandboxed iframes with an intent-based messaging system:

1. Customer asks a question → The chat widget sends the query to the orchestration layer
2. AI processes the query → OpenAI interprets the intent and determines which Shopify data to fetch
3. MCP server returns data + UI → The Shopify MCP server returns product data along with embeddable UI resources
4. Components render in chat → Interactive product cards appear inline in the conversation
5. Customer interacts → Clicks on a variant, changes a size, hits "Add to Cart"
6. Intents bubble up → The component sends an intent (e.g., add_to_cart) back to the AI agent
7. Agent processes the action → The AI executes the cart operation via Shopify's API and confirms

This intent-based architecture is critical. The UI components don't directly modify state. They declare what the user wants to do, and the AI agent mediates. This keeps the AI in control of the conversation flow while delivering a rich, app-like shopping experience.

Shopify Integration via MCP Server

The SDK connects to Shopify through a dedicated MCP server that exposes the store's commerce data to the AI agent. This isn't a generic API wrapper — it's a context-aware interface that gives the AI structured access to:

• Product catalog: Full product data including variants, pricing, availability, images, metafields
• Cart operations: Create carts, add/remove items, apply discount codes, calculate totals
• Store policies: Shipping, returns, FAQ content — so the AI can answer operational questions accurately
• Order management: Track order status and process returns for logged-in customers
• Inventory: Real-time stock levels to prevent the AI from recommending out-of-stock items

Each merchant storefront gets its own MCP server endpoint, configured with their specific catalog, policies, and business rules.

E-Commerce Platform Agnostic by Design

While this article focuses on Shopify — because it's the integration we've built and shipped first — the SDK architecture is deliberately e-commerce platform agnostic. The AI orchestration layer doesn't speak "Shopify." It speaks a generic commerce interface: search products, get product details, manage cart, initiate checkout, check order status, retrieve store policies.

Shopify is one implementation of that interface, connected via MCP. The same pattern applies to any commerce backend:

┌─────────────────────────────────────────────────┐
│           AI Orchestration Layer                │
│           (platform-agnostic)                   │
└──────────────────┬──────────────────────────────┘
                   │
         Commerce Adapter Interface
                   │
    ┌──────────────┼──────────────────┐
    │              │                  │
┌───▼────┐   ┌─────▼─────┐   ┌───────▼────────┐
│Shopify │   │BigCommerce│   │ Commercetools  │
│  MCP   │   │  adapter  │   │   adapter      │
│  ✅    │   │  (planned)│   │   (planned)    │
└────────┘   └───────────┘   └────────────────┘

We started with Shopify because it's where the majority of our agency clients operate and because Shopify's MCP ecosystem is the most mature in e-commerce. But the adapter pattern means we can extend to BigCommerce, Commercetools, Medusa, Saleor, or any headless commerce platform with an API — without rewriting the AI logic, conversation flows, system prompts, or frontend components. The commerce backend becomes a swappable dependency, not a hard-wired integration.

The AI Orchestration Layer

This is the backend that powers the ChatGPT App. It's built with Next.js and serves as the bridge between ChatGPT's conversational interface and the Shopify store. The orchestration layer handles:

Tool routing: The AI uses function calling to decide when to search products, when to add items to cart, when to show a product card, and when to just answer a question in text. The orchestration layer routes these tool calls to the appropriate MCP server endpoints.

Conversation state management: Shopping conversations are stateful. The AI needs to remember what the customer has already looked at, what's in their cart, and what preferences they've expressed. The orchestration layer maintains this state across the conversation session.

Streaming responses: Product recommendations stream in real-time, with MCP UI components rendering progressively as the AI processes the query. No waiting for the full response to load.

Next.js Backend & Website Embedding

The Next.js application serves two purposes. First, it's the backend for the ChatGPT App — handling API routes, MCP server communication, and system prompt logic. Second, it enables embedding the same conversational experience as a chat widget on the merchant's own website.

When embedded on the storefront, the widget handles:

• Responsive chat interface that matches the merchant's design system
• MCP UI component rendering with sandboxed iframes for security
• Cart synchronization between the chat widget and the main storefront cart
• Authentication passthrough so logged-in customers get personalized recommendations

This means the same AI assistant — same product knowledge, same MCP UI components — works both as a standalone ChatGPT App and as an embedded widget. Customers can discover the brand through ChatGPT or interact with the assistant directly on the merchant's site. The experience is identical.

MCP UI Component Customization

MCP UI doesn't lock you into pre-built templates. The components rendered inside the chat are standard React components — you can build literally anything you want with any styling approach. Tailwind, CSS Modules, styled-components, vanilla CSS, a full design system — it all works. The components are delivered inside sandboxed iframes, so they're fully isolated and don't conflict with the host environment.

This means product cards, cart widgets, comparison tables, size guides, lookbooks, promotional banners — whatever the merchant's shopping experience demands — are all built as React components with complete creative freedom:

// This is a real React component rendered inside the chat via MCP UI
// You have full control — any JSX, any styles, any interactivity

const ProductCard = ({ product, onAddToCart, onSelectVariant }) => {
  const [selectedVariant, setSelectedVariant] = useState(product.variants[0]);
  const [imageIndex, setImageIndex] = useState(0);

  return (
    <div className="font-brand bg-white rounded-2xl shadow-lg overflow-hidden">
      <ImageCarousel
        images={product.images}
        activeIndex={imageIndex}
        onChange={setImageIndex}
      />

      <div className="p-6">
        <h3 className="text-xl font-semibold tracking-tight">
          {product.title}
        </h3>

        <div className="flex gap-2 mt-4">
          {product.variants.map((variant) => (
            <button
              key={variant.id}
              onClick={() => {
                setSelectedVariant(variant);
                onSelectVariant(variant); // bubbles intent to the AI agent
              }}
              className={`w-8 h-8 rounded-full border-2 transition-all ${
                selectedVariant.id === variant.id
                  ? 'border-black scale-110'
                  : 'border-transparent'
              }`}
              style={{ backgroundColor: variant.colorHex }}
            />
          ))}
        </div>

        {/* Any custom UI — reviews, sustainability badges, you name it */}
        <SustainabilityBadge score={product.metafields.ecoScore} />
        <StarRating rating={product.rating} count={product.reviewCount} />

        <button
          onClick={() => onAddToCart(selectedVariant)}
          className="w-full mt-6 py-3 bg-brand-black text-white rounded-lg
                     hover:bg-brand-charcoal transition-colors font-medium"
        >
          Add to Cart — {formatPrice(selectedVariant.price)}
        </button>
      </div>
    </div>
  );
};

There are no constraints on what the component looks like or how it behaves. A luxury fashion brand can render a minimalist card with editorial photography and a muted color palette. A sports equipment store can show detailed spec comparison tables with interactive filters. A beauty brand can embed shade-matching swatches with skin-tone previews. Each merchant gets components that look and feel like a natural extension of their brand, not a generic chatbot widget.

The components communicate back to the AI agent through an intent-based messaging system — onAddToCart, onSelectVariant, onViewDetails — so the AI stays in control of the conversation flow while the customer interacts with a fully custom UI.

Deployment Model

The SDK ships as an npm package. You use it to build and deploy a custom ChatGPT App connected to a Shopify store. Deployment looks like this:

1. Install the SDK via npm in a new Next.js project
2. Configure the MCP server with the Shopify store credentials and catalog settings
3. Write the system prompt defining product knowledge
4. Customize the MCP UI components to match the merchant's brand and design system
5. Register the ChatGPT App with OpenAI, pointing to the Next.js backend
6. Optionally embed the same experience as a widget on the merchant's storefront
7. Deploy — the ChatGPT App goes live, and if embedded, the widget ships with the next storefront deployment

The entire setup takes a day for a standard Shopify store. Complex stores with thousands of products, multiple collections, and sophisticated business rules take longer, but the SDK handles the complexity — not the merchant.

Hosting and Infrastructure

The Next.js backend runs on Vercel, AWS, or any Node.js hosting. For Vercel-hosted setups (the most common for headless Shopify stores), the orchestration layer runs on serverless functions. The MCP server can be deployed as part of the same application or as a standalone service.

ChatGPT App interactions are handled by OpenAI's infrastructure — the backend only processes incoming requests from ChatGPT's function calling. For the optional embedded widget, the same backend serves direct API calls from the storefront.

OpenAI API costs are the merchant's responsibility, billed directly through their OpenAI account. For typical e-commerce conversation volumes, this runs significantly less than the 4% per-transaction fee OpenAI charges on native Instant Checkout.

What's Next

The current SDK handles the core ChatGPT App shopping experience with Shopify integration. Here's what we're building next:

Multi-channel deployment: Extending the same AI assistant beyond ChatGPT and the website — to WhatsApp, Instagram DMs, and email. One system prompt, one MCP backend, multiple touchpoints.

Visual search integration: Customers upload a photo ("I want something like this") and the AI matches it against the product catalog using image embeddings. MCP UI components render the results with visual comparison.

Post-purchase AI: The same ChatGPT App handles order tracking, returns, and re-engagement. "When will my order arrive?" gets a real-time answer. "I'd like to return the blue sweater" initiates the return flow, all within the chat.

The Bigger Picture

The ChatGPT + Shopify native integration is a distribution play. It puts products in front of ChatGPT's hundreds of millions of users. That has value.

But for brands that care about their customer experience — the journey, the data, the margin — a custom ChatGPT App is the path forward. You get the distribution of ChatGPT's massive user base with the control of a first-party experience. The AI speaks your brand's language, shows your products the way you want them shown, and you keep every percentage point of margin.

Our SDK gives e-commerce brands the technology to build their own ChatGPT App without starting from scratch. Same ChatGPT platform. Full brand control. Zero commission.

Tech stack: ChatGPT Apps · MCP UI · Shopify · Next.js

If you're a Shopify merchant and want your own ChatGPT App for conversational shopping, get in touch.

FAQ

How does this compare to Shopify's own Storefront MCP?

Shopify's Storefront MCP provides the data layer — it's the protocol for AI agents to access product catalogs, carts, and policies. Our SDK builds on top of it to create a complete ChatGPT App. We add the AI orchestration (with customizable system prompts), the branded ChatGPT App registration, the MCP UI component customization, and the optional website embedding. Think of Shopify's MCP as the engine, and our SDK as the car.

Is the SDK limited to Shopify?

No. The SDK is e-commerce platform agnostic by design. The core architecture — the AI orchestration layer, MCP communication protocol, conversation state management, and system prompt engine — has no dependency on Shopify. Shopify is the first integration we've built and shipped because it's where the majority of our agency clients operate, and because Shopify's MCP ecosystem is the most mature in e-commerce today.

But the abstraction layer between the AI and the commerce backend is deliberately generic. The SDK defines a commerce adapter interface: product search, cart operations, checkout initiation, order tracking, store policies. Shopify is one implementation of that interface. Adapters for other platforms — BigCommerce, Commercetools, Medusa, Saleor, or any headless commerce backend with an API — plug in without touching the AI logic, conversation flows, or frontend components.

The same system prompt, the same analytics events. Only the commerce data source changes. If a client migrates from Shopify to Commercetools, the AI shopping experience stays identical — you swap the adapter, not the SDK.

What about stores not on Next.js?

The core MCP server and AI orchestration layer are framework-agnostic. The chat widget currently ships as a React component optimized for Next.js, but the underlying API can be consumed by any frontend. Hydrogen (Shopify's own React framework), Remix, or even vanilla JavaScript storefronts can integrate with the orchestration layer directly.

How do AI costs compare to the 4% commission?

OpenAI's API pricing for GPT-4o is roughly $2.50 per million input tokens and $10 per million output tokens. A typical shopping conversation uses around 2,000-4,000 tokens total. That's roughly $0.01-0.03 per conversation. Even if only 5% of conversations convert, and average order value is $100, the AI cost per conversion is well under $1 — versus $4 at the 4% commission rate. The economics aren't even close.

Can the ChatGPT App handle multiple languages?

Yes. ChatGPT supports 50+ languages natively. The system prompt can include language-specific instructions, and MCP UI components render localized product data from Shopify (which supports multi-language stores). The AI automatically detects the customer's language and responds accordingly.