MCP Server and Client Example (TypeScript)

This project demonstrates the creation and interaction of a simple Model Context Protocol (MCP) server and a standalone MCP client using TypeScript and the @modelcontextprotocol/sdk.

The setup includes:

1. my-mcp-greeter-server: An MCP server that provides greeting-related tools, resources, and prompts.
2. my-mcp-client-script: A simple command-line client script that launches the server, connects to it, and interacts with its capabilities programmatically.

Communication between the client and server in this example uses the stdio (standard input/output) transport mechanism.

Overview of the Process Followed

This project was built following these main phases:

1. Server Development: Creating the MCP service provider.
2. Client Development: Creating a script to consume the server’s services.
3. Testing & Interaction: Running the client script, which launches the server and demonstrates communication.
4. (Optional) Integration: Discussing how to integrate the server with existing MCP clients like VS Code extensions.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher recommended)
• npm (usually included with Node.js)
• A text editor or IDE (like VS Code)
• npx (usually included with npm) - useful for testing with MCP Inspector.

Phase 1: Building the MCP Server (my-mcp-greeter-server)

1. Project Setup:

   • Created the directory my-mcp-greeter-server.
   • Initialized an npm project: npm init -y.
   • Installed necessary dependencies: npm install @modelcontextprotocol/sdk zod.
   • Installed development dependencies: npm install -D typescript @types/node.
   • Initialized TypeScript configuration: npx tsc --init.
   • Configured tsconfig.json (setting "module": "Node16", "target": "ES2022", "outDir": "./build", "rootDir": "./src", etc.).
   • Updated package.json to include "type": "module" and added build/start scripts.
   • Created the source file src/index.ts.

2. Server Implementation (src/index.ts):

   • Imported required modules (McpServer, StdioServerTransport, z).
   • Defined constants for server name and version.
   • Instantiated McpServer, passing the name, version, and declaring its capabilities (tools, resources, prompts).
   • Defined a Tool (greet): Used server.tool() to create a function callable by clients. Included a description, defined input parameters with Zod (name, politeness), and implemented the handler to return a personalized greeting string.
   • Defined a Resource (server-info): Used server.resource() to expose static data. Provided a unique URI (info://greeter/about) and implemented the handler to return the server’s name and version.