drio
Open app

Example MCP Server + Client Implementation

Source

A demo implementation of a MCP server (consuming a dummy API) and basic client.

Catalog onlyCatalog onlySTDIO

Overview

This project is a demonstration of a Model Context Protocol (MCP) server and client implementation that consumes a dummy API. It showcases how to set up a backend service and a simple AI chatbot client that interacts with the server.

To use this project, ensure you have Node.js 23.x or higher installed. Create a .env file in the client folder with your OpenAI API key. Then, navigate to each folder (service, server, client) and run npm install followed by npm run dev to start the respective processes.

  • A backend service that can be consumed by an MCP server. - A simple AI chatbot client that utilizes OpenAI. - Standardized communication between the server and client using MCP.
  1. Building a custom AI chatbot that can store and retrieve information.
  2. Demonstrating the use of MCP for standardized API communication.
  3. Learning how to set up a Node.js application with TypeScript support.

Add to your AI client

Use these steps to connect Example MCP Server + Client Implementation in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "demo-mcp-server-client-implementation-mschwarzmueller": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-demo-mcp-server-client-implementation-mschwarzmueller"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "demo-mcp-server-client-implementation-mschwarzmueller": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-demo-mcp-server-client-implementation-mschwarzmueller"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "demo-mcp-server-client-implementation-mschwarzmueller": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-demo-mcp-server-client-implementation-mschwarzmueller"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "demo-mcp-server-client-implementation-mschwarzmueller": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-demo-mcp-server-client-implementation-mschwarzmueller"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "demo-mcp-server-client-implementation-mschwarzmueller": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-demo-mcp-server-client-implementation-mschwarzmueller"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "demo-mcp-server-client-implementation-mschwarzmueller": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-demo-mcp-server-client-implementation-mschwarzmueller"
      ]
    }
  }
}

FAQ

What is MCP?

MCP stands for Model Context Protocol, which is a standardized way to communicate between services and clients.

Do I need to install TypeScript separately?

No, modern Node.js versions support TypeScript execution without a compilation step.

Is this project production-ready?

No, this is a basic demo implementation and may contain bugs.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":3234,"uuid":"fba8d5c9-71b5-40b6-b790-a5a2ef51c884","name":"demo-mcp-server-client-implementation","title":"Example MCP Server + Client Implementation","description":"A demo implementation of a MCP server (consuming a dummy API) and basic client.","avatar_url":"https://avatars.githubusercontent.com/u/16095164?v=4","created_at":"2025-03-18T08:03:35.268Z","updated_at":"2025-03-18T14:36:00.975Z","status":"created","author_name":"mschwarzmueller","author_avatar_url":"https://avatars.githubusercontent.com/u/16095164?v=4","tags":"[]","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/mschwarzmueller/demo-mcp-server-client-implementation","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"1\",\"license\":\"MIT license\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-03-18 09:22:39\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools