The Ultimate MCP Crash Course - Build From Scratch

The video introduces the Model Context Protocol (MCP) and outlines the goal of explaining its functionality, then demonstrating how to build an MCP server and client. It features a sponsor segment for Frontend Masters, highlighting their workshop-style web development content.

MCP is explained as a protocol for communication between an MCP server and client, similar to REST or GraphQL APIs. The four main components of an MCP server are detailed: tools, resources, prompts, and samplings. Tools allow clients to call server-side code (e.g., creating an Excel document), resources are data sets (e.g., database records, files), prompts are pre-formatted requests for specific tasks, and samplings allow the server to request information from the AI client.

The tutorial transitions to coding, using the TypeScript SDK for MCP. It covers installing the SDK, setting up a basic Node.js TypeScript project, creating a new MCP server instance, and defining its capabilities (resources, tools, prompts). The importance of transport protocols (standard I/O for local, HTTP streaming for remote) is discussed, with the example using standard I/O for local integration with tools like GitHub Copilot.

The video demonstrates building a 'create user' tool for the server. This involves defining the tool's name, description, and parameters (name, email, address, phone) using ZOD for schema validation. Annotation hints (read-only, destructive, idempotent, open-world) are explained for providing context to the AI. The tool’s function is implemented to save user data to a local JSON file, simulating a database interaction.

The MCP inspector tool is introduced for testing the server, allowing inspection of server capabilities and direct execution of tools. The 'create user' tool is tested via the inspector. Then, integration with GitHub Copilot is shown, demonstrating how to add the MCP server to Copilot and execute the 'create user' tool by direct command or natural language prompts within the chatbot.

Resources are implemented to allow the client to access data from the server. A 'users' resource is created to return all user data from the JSON file. The concept of URI templates is then introduced to create a 'user details' resource, allowing retrieval of individual user information based on a dynamic user ID. The process of restarting VS Code for Copilot to recognize new resources is highlighted.

The video explains prompts as structured requests the server can provide to the client. A 'generate fake user' prompt is created, which takes a name and returns a formatted prompt for the AI to generate fake user details. This demonstrates how servers can offer predefined, robust prompts to clients. The prompt is then used both in the MCP inspector and via GitHub Copilot.

Sampling is presented as a mechanism for the server to request information from the AI client. A 'create random user' tool is built, which uses sampling to ask the AI to generate fake user data. This data is then used by the server to create a new user in the database. Debugging a common error related to JSON parsing and markdown formatting is also demonstrated.

The tutorial moves to creating a separate MCP client for local interaction. The client configuration is detailed, including its name, version, and capabilities (sampling). Standard I/O is used for transport, connecting to the previously built server. Utility libraries like 'inquirer/prompts' and '.env' are installed for building a command-line interface (CLI) client and managing API keys for AI services like Gemini.

The CLI client is enhanced to allow interaction with the server's tools, resources, and prompts. Users can select an action (query, tool, resource, prompt), and the client guides them through providing necessary inputs. It demonstrates how to dynamically gather parameters for tools and resources, and how to display results from the server, including pretty-printing JSON data.

The client is integrated with an AI model (Google Gemini) using the AI SDK. The 'query' option in the client allows users to ask questions or issue commands to the AI, which can then intelligently use the server's tools. The critical 'set request handler' is implemented on the client to listen for 'sampling/create message' requests from the server, allowing the client's AI to respond to these requests and send data back to the server. The entire server-client interaction loop, including direct and indirect tool calls, is demonstrated.