Description
Let’s plan and design the simplest possible demo for the Model Context Protocol (MCP), focusing on a quick, functional example that showcases its core capability: connecting an AI model to an external tool or data source. Given your background as a developer with experience in startups, infrastructure, and recent work in enterprise environments (like your use of AWS ECS and Active Directory), I’ll tailor this demo to be straightforward, leveraging tools you’re likely familiar with, and aim for something we can develop rapidly—potentially within this session.
Step 1: Define the Demo’s Purpose
MCP standardizes how AI models (like Claude) interact with external tools or data sources. The simplest demo should demonstrate this interaction: an AI model (via an MCP client) requesting a task from an MCP server, which then executes it and returns a result. Let’s choose a minimal use case: a translation service. The AI model will send a piece of text to an MCP server, which will "translate" it (we’ll fake the translation for simplicity) and return the result.
Step 2: Choose the Components
- MCP Client: We’ll use Claude Desktop as the client, since it natively supports MCP and is easy to set up. You’ll need the Claude Desktop app installed.
- MCP Server: We’ll build a tiny server that exposes a "translate" tool. This server will take a string and a target language, then return a mock translated string (e.g., "[Translated: 'Hello' to Spanish]").
- Tech Stack: We’ll use Node.js and TypeScript for the server, as MCP has a TypeScript SDK, and it’s lightweight and fast to set up. You’ve worked with React and TypeScript before (like in your render streaming frontend), so this should be comfortable.
- Transport: We’ll use stdio (standard input/output) for local testing, as it’s the simplest transport method for MCP and doesn’t require setting up HTTP or Server-Sent Events (SSE).
Step 3: Design the Workflow
- User Input: You’ll ask Claude Desktop, "Translate 'Hello' to Spanish."
- MCP Client (Claude Desktop): Claude recognizes it needs an external tool, identifies the "translate" tool from our MCP server, and sends a request with parameters (text: "Hello", targetLanguage: "Spanish").
- MCP Server: Receives the request, processes it (we’ll just mock the translation), and returns a result like "[Translated: 'Hello' to Spanish]".
- Result: Claude Desktop displays the result to you.
Step 4: Plan the Server Implementation
We’ll create a single file, index.ts
, that sets up an MCP server with one tool: translate
. We’ll use the MCP TypeScript SDK and Zod for schema validation (to define the tool’s input parameters). The server will:
- Define a tool named "translate" that accepts a string (
text
) and a target language (targetLanguage
). - Mock a translation by returning a formatted string.
- Use stdio transport to communicate with Claude Desktop locally.
Step 5: Prerequisites
- Node.js: Ensure you have Node.js installed (v16 or later should work).
- Claude Desktop: Install the Claude Desktop app if you haven’t already, as it’s our MCP client.
- Dependencies: We’ll need the MCP TypeScript SDK and Zod. We’ll install them via npm.
Step 6: Development Plan
Since this can be done quickly (likely in under 15 minutes), let’s proceed with developing it. Here’s the step-by-step plan:
- Set up a new Node.js project.
- Install the MCP SDK and Zod.
- Write the MCP server code in
index.ts
. - Run the server locally and connect it to Claude Desktop.
- Test the translation request.
Step 7: Develop the Demo
Let’s create the MCP server. Below is the code for index.ts
, which sets up the server, defines the "translate" tool, and uses stdio transport.
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
const server = new McpServer({
name: "Translation Service",
version: "1.0.0",
});
server.tool(
"translate",
{
text: z.string().describe("The text to translate"),
targetLanguage: z.enum(["spanish", "french", "german"]).describe("The target language"),
},
async ({ text, targetLanguage }) => {
// Mock translation for simplicity
const translatedText = `[Translated: "${text}" to ${targetLanguage}]`;
return {
content: [{ type: "text", text: translatedText }],
};
}
);
const transport = new StdioServerTransport();
server.connect(transport);
Step 8: Setup Instructions
- Create a Project Directory:
- Open a terminal and create a new directory:
mkdir mcp-translation-demo && cd mcp-translation-demo
.
- Open a terminal and create a new directory:
- Initialize a Node.js Project:
- Run
npm init -y
to create apackage.json
.
- Run
- Install Dependencies:
- Install the MCP SDK, Zod, and TypeScript:
npm install @modelcontextprotocol/sdk zod typescript @types/node
. - Initialize TypeScript:
npx tsc --init
.
- Install the MCP SDK, Zod, and TypeScript:
- Save the Code:
- Create a file named
index.ts
and copy the code above into it.
- Create a file named
- Compile and Run:
- Compile the TypeScript:
npx tsc
. - Run the server:
node index.js
.
- Compile the TypeScript:
- Connect to Claude Desktop:
- Open Claude Desktop.
- Go to Settings > Features > MCP > Add New MCP Server.
- Set the type to "command", name it "Translation", and for the command, use
node
with argumentsindex.js
(you’ll need the full path toindex.js
, e.g.,/path/to/mcp-translation-demo/index.js
).
- Test the Demo:
- In Claude Desktop, type: "Translate 'Hello' to Spanish."
- Claude should respond with something like "[Translated: 'Hello' to Spanish]".
Step 9: Notes and Next Steps
- Simplicity: This demo is intentionally minimal. The "translation" is mocked, but you could extend it by integrating a real translation API (e.g., Google Translate) in the
translate
function. - Speed: Setup and coding should take about 10-15 minutes if you have Node.js and Claude Desktop ready.
- Scaling Up: If this works, you could add more tools (e.g., a tool to fetch data from a database) or deploy the server remotely using Cloudflare, as MCP supports remote servers [Ref web ID: 17].
Let me know if you’d like to troubleshoot any setup issues or expand the demo!