AI Commerce Architecture

Overview

This platform by Melt Digital demonstrates how traditional ecommerce can be extended to serve both human customers and AI agents through standardized protocols.

The architecture bridges the gap between human-facing web interfaces and AI-native commerce capabilities using two key protocols: MCP (Model Context Protocol) and UCP (Universal Commerce Protocol).

System Architecture

     Claude Desktop (Multi-User)
              |
              | HTTPS (Custom Connector)
              |
      Cloud MCP Server (/api/mcp)
              |
              +------------------+
              |                  |
         Commerce API       UCP Endpoints
              |                  |
              +--------+---------+
                       |
                  MongoDB Atlas
              (Products, Orders, Carts)
                       |
                Next.js Website
               (Human Interface)

✨ Cloud-hosted MCP server enables multi-user access with no local installation required!

MCP Integration (Cloud-Hosted)

The Model Context Protocol (MCP) allows AI assistants like Claude to interact with the product catalogue and complete purchases through natural language.

How to Connect:

  1. Open Claude Desktop → Customize → Connectors
  2. Click "+ Add custom connector"
  3. Enter: https://aicommerce.meltdigital.com/api/mcp
  4. Enable the connector in your conversation

Available Tools (7 total):

  • search_products- Search by query, category, price range
  • get_product- Get detailed product information
  • check_inventory- Check stock availability
  • create_cart- Create shopping cart with products
  • view_cart- View cart contents and total
  • update_cart- Add/remove items from existing cart
  • checkout- Generate checkout URL for purchase

Example: "I want to buy 2 bucket hats and a mug" triggers create_cart and checkout tools automatically.

UCP Integration

The Universal Commerce Protocol (UCP) enables AI commerce agents to execute transactions programmatically via HTTP endpoints.

Available Endpoints:

  • GET /.well-known/ucp- Discover capabilities
  • GET /api/ucp/products- List products
  • POST /api/ucp/cart- Create shopping cart
  • POST /api/ucp/checkout- Complete purchase
  • GET /api/ucp/orders/:id- Track order status

Example AI Journey

User Request

"I want to buy 2 bucket hats and a mug"

Step 1: Discovery (MCP)

Claude searches products, finds "SEO Legends Bucket Hat" and "Keyword Research Mug"

Step 2: Cart Creation (MCP)

Claude creates cart with 2 bucket hats (£49.98) and 1 mug (£14.99), total: £64.97

Step 3: Checkout (MCP)

Claude generates checkout URL, user clicks to complete purchase with shipping details

Step 4: Confirmation

Order created, inventory updated, confirmation page displayed

Technology Stack

Frontend

  • Next.js 15 (App Router)
  • TypeScript
  • Tailwind CSS
  • React

Backend

  • Next.js API Routes
  • MongoDB Atlas (Cloud DB)
  • Cloud MCP Server (HTTP)

AI Protocols

  • MCP (Model Context Protocol)
  • UCP (Universal Commerce Protocol)
  • Custom Connectors (Claude Desktop)

Infrastructure

  • Vercel (Deployment)
  • MongoDB Atlas (Database)
  • HTTPS (Secure MCP Connection)

Built by Melt Digital - Demonstrating the future of AI-native commerce