AI-powered assistants are becoming increasingly common in e-commerce applications, helping users find products, place orders, and improve the overall shopping experience. In this blog post, we will explore how to enhance an e-commerce AI assistant using the Model Context Protocol (mCP). We will connect our AI to product and order APIs using tool calls, integrate an mCP server, and enable business intelligence through external AI models like Claude.

Overview of the E-Commerce System

Before integrating mCP, let’s understand the architecture of our e-commerce system:

• Frontend Web App (Port 3000) – Built using TanStack Start, handles product display and AI interactions.
• Products API (Port 882) – An Express-based API providing product details.
• Fulfillment API (Port 880) – Handles customer orders and inventory.
• Admin App (Port 3001) – Monitors orders and stock levels.
• AI Assistant – A chatbot assisting users in selecting products and making purchases.

Currently, the AI assistant only interacts with a large language model (LLM) but does not have access to real-time product data. As a result, it often makes incorrect product recommendations.

Our goal is to:

• Connect the AI assistant to the Products API using tools.
• Implement an mCP server to handle order fulfillment.
• Enable external AI models (e.g., Claude) to interact with the mCP server for advanced analytics.

Step 1: Connecting AI to the Products API

The first step is to provide the AI assistant with access to real product data. We achieve this by implementing server-side tools that allow the AI to fetch products dynamically.

Tool Implementation

import { tool } from 'vercel-ai';
import { fetchGuitars } from '../apis';

export const getProducts = tool({
  description: 'Fetches all products from the database.',
  parameters: {},  
  execute: async () => {
    return await fetchGuitars();
  },
});
    

This tool is then registered in our AI setup:

import { getProducts } from './ai-tools';

const aiResponse = await streamText({
  model: 'anthropic',
  messages,
  tools: [getProducts], 
});
    

Now, when a user asks, “Can you recommend a techy-looking guitar?”, the AI will fetch real product data instead of generating random suggestions.

Step 2: Enhancing the AI with Client-Side Tools

In addition to server-side tools, we can implement client-side tools to improve the user experience. One such tool is recommendGuitar, which displays a highlighted product recommendation.

export const recommendGuitar = tool({
  description: 'Recommend a guitar to the user.',
  parameters: {
    id: 'string',
  },
  execute: async ({ id }) => {
    return { recommendation: id };
  },
});
    

This tool is handled on the frontend:

const onToolCall = (tool) => {
  if (tool.name === 'recommendGuitar') {
    setRecommendedGuitar(tool.parameters.id);
  }
};
    

Now, when a recommendation is made, the UI will display a special card for the suggested guitar instead of just text.

Step 3: Implementing an mCP Server for Order Fulfillment

mCP Server Implementation

import { MCPServer } from '@mcp/sdk';
import express from 'express';

const server = new MCPServer();

server.addTool({
  name: 'getInventory',
  description: 'Fetch product inventory.',
  execute: async () => {
    return await fetchInventory();
  },
});

server.addTool({
  name: 'purchase',
  description: 'Place an order for a product.',
  parameters: {
    items: 'array',
    quantity: 'number',
    customerName: 'string',
  },
  execute: async ({ items, quantity, customerName }) => {
    return await makePurchase(items, quantity, customerName);
  },
});

const app = express();
app.use('/sse', server.createSSEEndpoint());
app.use('/messages', server.createMessagesEndpoint());

app.listen(881, () => console.log('mCP Order Server running on port 881'));
    

Step 4: Connecting the AI Assistant to the mCP Order Server

import { experimental_createMCPClient } from 'vercel-ai';

const mcpClient = experimental_createMCPClient({
  url: 'http://localhost:881',
  name: 'order-service',
});

const tools = await mcpClient.getTools();
    

Step 5: Business Intelligence with External AI Models (Claude)

Now that our mCP order server is in place, we can connect external AI models (e.g., Claude) for business intelligence.

Claude, acting as an mCP client, can analyze order data and provide insights.

Final Thoughts

By integrating tool calls, mCP servers, and AI analytics, we’ve transformed our simple AI assistant into a fully functional shopping assistant that:

• ✅ Fetches real-time product data
• ✅ Provides intelligent recommendations
• ✅ Allows customers to place orders via AI
• ✅ Supports business intelligence via external AI

Next Steps:

• Expand AI capabilities with personalized recommendations.
• Integrate payment processing into mCP tools.
• Use AI to analyze customer reviews and feedback.

Stay tuned for more AI-driven innovations in e-commerce! 🚀