Coolest MCP Demo You'll See!

Yams Cheese Stakes E-commerce Application Demo Summary

Key Concepts:

• MCP (Model Context Protocol): A protocol for connecting AI agents to HTTP endpoints.
• MCP Remote: A component that allows AI agents (like Claude) to interact with MCP servers.
• Clerk: An authentication service used for user login and authorization.
• SSE (Server-Sent Events): A technology for pushing real-time updates from the server to the client.
• Agentic Workflow: An AI workflow where an agent (like Claude) autonomously performs tasks by interacting with multiple data sources and services.
• JSON RPC 2.0: A remote procedure call protocol encoded in JSON.
• Off Info: Authentication information, including user ID, passed with requests.

Application Overview

The demo showcases an e-commerce application called "Yams Cheese Stakes" integrated with AI using Claude and MCP. The application allows users to order food, and the demo explores how to connect Claude to the application to automate ordering, even incorporating data from external sources like HR systems.

Authentication and Authorization with Clerk and MCP

1. Clerk Integration: The application uses Clerk for standard user sign-in and authentication on the web UI.
2. MCP Remote Configuration: An MCP remote server is configured to connect Claude to the Yams Cheese Stakes API (Localhost 3000 API SSE).
3. Authentication Bridging: The MCP remote authenticates Claude through the same Clerk service, ensuring Claude and the web application are connected to the same user.
4. Tool Discovery: The Yams Cheese Stakes site exposes tools like get menu, add to cart, get cart items, and clear cart to Claude via the MCP server.
5. well-known/ooth-protected-resource Endpoint: MCP remote initially calls this endpoint to get information on how to connect to the server, including the resource URL (localhost 3000) and the authorization server (Clerk).
6. API SSE Endpoint: After authentication, MCP remote makes requests to this endpoint, which uses with MCP off to verify authorization.
7. with MCP off Utility: This utility bridges Clerk and MCP by checking authorization and adding the off response to the request as request.off.
8. Authorization in API Messages: The API messages handler uses with MCP off to extract the user's identity (subject) from the off info and pass it to the handle message function.
9. User Identification: The user ID is extracted from the off info and used to associate actions like adding items to the cart with the correct user.

AI-Powered Ordering with Claude

1. Basic Ordering: Claude can be instructed to order items from the Yams Cheese Stakes menu, demonstrating basic AI integration.
2. Multi-Agent Agentic Workflow: The demo extends this by connecting Claude to an HR server containing employee food preferences.
3. HR Server Integration: A local MCP server simulates an HR system with a static list of employees and their food preferences.
4. Data Retrieval: Claude retrieves employee food preferences from the HR server.
5. Intelligent Ordering: Claude uses the retrieved preferences to place orders from Yams Cheese Stakes that cater to individual employee tastes.
6. Agentic Behavior: Claude acts as an agent by gathering data from one source (HR server) and using it to perform actions in another (Yams Cheese Stakes).

Real-Time Cart Updates with Server-Sent Events (SSE)

1. Cart Storage: The application uses an in-memory cart storage with a list of subscribers.
2. subscribe to cart Function: This function allows components to subscribe to cart changes for a specific user ID.
3. Notification Mechanism: When an item is added to the cart, all subscribers for that user are notified.
4. API Cart Endpoint: This endpoint creates a readable stream that sends pings to the client every second to maintain the connection.
5. SSE Flow: The API cart endpoint uses subscribe to cart to send the updated cart contents to the client as a text event stream whenever the cart changes.
6. Client-Side Updates: The client-side cart component uses use effect to create an event source that listens for server-sent events from the API cart endpoint.
7. Real-Time Synchronization: When a message is received from the server, the cart component updates its state with the new cart contents, ensuring real-time synchronization between the client and server.
8. Symmetric Updates: Cart updates initiated from either the web UI or the MCP UI (AI side) are reflected in real-time on both sides due to the SSE mechanism.

Code Structure and Key Components

1. env.example: Contains Clerk API keys and other configuration settings.
2. utils/off.ts: Contains the with MCP off utility for bridging Clerk and MCP authentication.
3. public/well-known/ooth-protected-resource: Defines the resource and authorization server for MCP remote.
4. pages/api/sse.ts: Implements the API SSE endpoint for handling MCP requests.
5. pages/api/messages.ts: Handles incoming JSON RPC 2.0 requests and calls the appropriate server functions.
6. server/cart.ts: Implements the in-memory cart storage with subscription and notification capabilities.
7. pages/api/cart.ts: Creates the SSE stream for pushing cart updates to the client.
8. components/cart.tsx: The client-side component that uses event source to listen for SSE events and update the cart display.

Conclusion

The demo illustrates a powerful approach to integrating AI agents with web applications using MCP and Clerk. The use of SSE enables real-time updates and a seamless user experience. While MCP for HTTP is still evolving, this demo provides a glimpse into the future of AI-powered applications where agents can intelligently interact with various data sources and services. The key takeaway is the ability to create agentic workflows where AI can autonomously perform tasks by connecting to multiple MCP servers and acting on the data retrieved.