MCP Server Example: E-commerce Integration

This repository demonstrates how to build a Model Context Protocol (MCP) server that integrates with a simple E-commerce API. It shows how AI assistants can interact with business systems through the MCP protocol.

Overview

This project consists of two main components:

1. E-commerce API: A simple RESTful API for an e-commerce store (products, cart, checkout)
2. MCP Server: Exposes the e-commerce functionality to AI assistants via MCP

With this integration, AI assistants like Claude can help users browse products, manage shopping carts, and complete purchases without needing direct access to the underlying API.

System Architecture

graph LR
    U[User] -- Chats with --> CD[Claude Desktop]

    subgraph "MCP Integration"
        CD -- Requests --> MCPS[MCP Server]
        MCPS -- Tool calls --> CD
    end

    subgraph "Business System"
        MCPS -- REST API calls --> ECOM[E-commerce API]
        ECOM -- JSON responses --> MCPS
        ECOM -- Persists data --> DB[(In-memory\nDatabase)]
    end

    style CD fill:#f9d6c5,stroke:#333,stroke-width:2px
    style MCPS fill:#c5e1f9,stroke:#333,stroke-width:2px
    style ECOM fill:#d6f9c5,stroke:#333,stroke-width:2px
    style DB fill:#e1c5f9,stroke:#333,stroke-width:2px

The MCP server acts as a bridge between Claude for Desktop and the E-commerce system. Claude can use MCP tools to interact with the e-commerce API without needing direct access to the API endpoints. This approach allows AI assistants to safely interact with business systems through standardized interfaces.

Project Structure

• /ecom - E-commerce API server (Express.js + TypeScript)
• /mcp - Model Context Protocol server connecting to the e-commerce API

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• npm or yarn
• Claude for Desktop (optional, for testing)

Installation & Setup

1. Set up the E-commerce API

   cd ecom
   npm install
   npm run dev
   

   Copy

   The API will be available at http://localhost:3000

2. Set up the MCP Server

   cd mcp
   npm install
   npm run build
   

   Copy

Note: You don't need to start MCP server as it will be run by MCP host automatically.

Using with Claude for Desktop

To use this MCP server with Claude for Desktop:

1. Make sure both the E-commerce API and MCP server are running

2. Open your Claude for Desktop configuration file:

   • On MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
   • On Windows: %AppData%\Claude\claude_desktop_config.json

   Alternatively you can go to Claude > Settings > Developer > Edit config which will lead you to this file.

3. Add the MCP server configuration:

   {
     "mcpServers": {
       "ecommerce": {
         "command": "node",
         "args": ["/ABSOLUTE/PATH/TO/mcp/build/index.js"]
       }
     }
   }
   

   Copy

   Replace /ABSOLUTE/PATH/TO/ with the actual path to your project.

4. Restart Claude for Desktop

5. Verify the server is connected by checking for the tools icon in the Claude interface

6. After that you can simply use provided functionalities on chat. // add claude-chat.png

Using with VS Code

If you're using the Claude AI extension for VS Code:

1. Open VS Code settings (File > Preferences > Settings)
2. Search for "Claude MCP Servers"
3. Add a new server with:
   • Name: ecommerce
   • Command: node
   • Args: ["/ABSOLUTE/PATH/TO/mcp/build/index.js"]

Features

The MCP server exposes the following tools:

• Product browsing and search
• Product details
• Cart management (view, add, update, remove)
• Checkout processing

Example Prompts

Try these prompts with Claude once connected:

• "Show me what products are available"
• "Find me a laptop under $1000"
• "Add the 4K TV to my cart"
• "How much is in my cart right now?"
• "Help me check out"

Contributing

Contributions are welcome! This is meant as a learning resource for the MCP community.

License

MIT

Resources

• Model Context Protocol Documentation
• Claude for Desktop