Applied Model Context Protocol (MCP) In 20 Minutes

Key Concepts

• Model Context Protocol (mCP)
• Server Tools vs. Client Tools
• mCP Server and mCP Client
• Tools Definition and Execution
• Message Flow in LLM Interactions
• Server-Sent Events (SSE) Transport
• Standard IO Transport
• System Prompt Engineering
• Max Steps in Tool Calls

E-commerce Application Overview

The video focuses on enhancing an e-commerce application using the Model Context Protocol (mCP) to integrate Large Language Models (LLMs) with backend services. The application consists of:

• Frontend: A TanStack Start application on port 3000, providing the user interface, including an AI assistant.
• Products API: An Express app on port 882, responsible for managing product information (guitars in this example).
• Fulfillment API: An Express app on port 880, handling order processing.
• Admin App: A TanStack Start app on port 3001, used for monitoring fulfilled orders and inventory.

The initial problem is that the AI assistant in the frontend doesn't have access to the Products API, leading to irrelevant recommendations.

Connecting AI Assistant to Products API using Server Tools

The solution involves using "server tools" to enable the LLM to access the Products API. The message flow is as follows:

1. The user inputs a query (e.g., "recommend a techy guitar") into the AI assistant.
2. The frontend sends the query to the server.
3. The server sends the query to the LLM, along with a "tools definition" (metadata about available tools, such as getProducts).
4. The LLM determines that it needs product information and requests the server to execute the getProducts tool.
5. The server calls the Products API (port 882) and retrieves the product data.
6. The server adds the product data (as JSON) to the message history as the result of the tool call.
7. The server sends the updated message history to the LLM.
8. The LLM analyzes the data and provides a relevant recommendation (e.g., "motherboard guitar").

Implementation Details:

• The AI tools.ts file defines the available tools using the tool function from the Vercel AI Library.
• The getProducts tool is defined with a description ("get all the products from the database"), no parameters (using Zod for schema definition), and an execute function that calls the fetchGuitars helper function.
• The ai.ts file uses Vercel AI's streamText function to communicate with the LLM (Anthropic in this case).
• The streamText function takes the model, messages, a system prompt ("You are an AI for a music store"), and the tools as arguments.
• maxSteps parameter is crucial for tool calls, as it defaults to 1. Tool calls often require multiple steps (requesting the tool, then analyzing the data), so maxSteps should be set to a value greater than 1.

System Prompt Engineering:

The system prompt can be tweaked to encourage the LLM to use the tools. For example, adding "There are products available for purchase. You can recommend a product to the user" and explicitly mentioning the getProducts tool.

Client Tools

Client tools are executed on the client-side (browser). mCP is not suitable for client tools because mCP servers typically don't have direct access to the client environment.

Example:

A recommendGuitar client tool could take a guitar ID as a parameter and display a special card on the UI with details about that guitar.

Implementation:

• A recommendGuitar tool is defined in AI tools.ts with an id parameter (using Zod).
• The useChat hook in the frontend handles the onToolCall event for recommendGuitar.
• The messages component in the UI checks for tool invocations of type recommendGuitar and renders a GuitarRecommendation component with the provided ID.

Integrating with Fulfillment API using mCP Server

To enable the AI assistant to make orders, an mCP server is introduced to act as an intermediary between the frontend and the Fulfillment API.

Flow:

1. The user asks the AI assistant to order a product.
2. The frontend sends a tool call request (orderProduct) to the server.
3. The server forwards the tool call request to the mCP order server.
4. The mCP order server interacts with the Fulfillment API (port 880) to place the order.
5. The mCP order server sends the result back to the server, which then relays it to the frontend.

mCP Server Implementation:

• An mCP order server is created using the @model-context/protocol SDK, Zod, and Express.
• The server defines tools like getInventory (to check product availability) and purchase (to place an order).
• The purchase tool takes parameters like items (cart items with quantity) and customerName.
• The server listens on port 881 and exposes two endpoints: /sse (for establishing a stateful connection using Server-Sent Events) and /sse/messages (for posting messages and receiving responses).

mCP Client Implementation:

• The frontend uses the experimentalCreateMCPClient function from the @model-context/protocol SDK to connect to the mCP order server.
• The sseEndpoint is set to localhost:881.
• The tools from the mCP client are added to the list of available tools in the frontend.
• The system prompt is updated to instruct the AI to use getInventory and purchase.

Transports:

The video demonstrates two transport mechanisms for mCP:

• Server-Sent Events (SSE): A unidirectional protocol where the server pushes updates to the client.
• Standard IO: Used for connecting Claude to the mCP order server.

Business Intelligence with Claude and Standard IO

The video demonstrates how to connect Claude to the mCP order server using Standard IO for business intelligence purposes.

Steps:

1. The server logic (tool definitions and execution) is extracted into a separate file (serverLogic.js).
2. Two server instances are created: an SSE server and a Standard IO server.
3. The Standard IO server uses the StandardIOServerTransport from the @model-context/protocol SDK.
4. In Claude's settings, the mCP server is configured with the command node and the path to the Standard IO server script.
5. A new tool, getOrders, is added to the server logic to allow Claude to access order data.
6. Claude is restarted to load the new configuration.
7. Claude is prompted to analyze the orders and generate a graph of sales projections.
8. Claude calls the getOrders tool, retrieves the order data, and generates JavaScript code to create a bar chart of sales data.

Conclusion

The video provides a detailed walkthrough of integrating LLMs with backend services using the Model Context Protocol. It covers server tools, client tools, mCP server and client implementation, different transport mechanisms (SSE and Standard IO), and demonstrates how to use mCP for both functional tasks (placing orders) and business intelligence (analyzing sales data). The key takeaway is that mCP provides a flexible and scalable way to connect LLMs to various data sources and services, enabling more powerful and context-aware AI applications.