drio
Open app

MCP Server Demo

Source

Catalog onlyCatalog onlySTDIO

Overview

MCP Server Demo is a demonstration project for the Model Context Protocol (MCP) that showcases how to set up a server using the MCP SDK.

To use MCP Server Demo, create a project directory, initialize it with npm, install the necessary dependencies, and create the source code files as outlined in the provided instructions.

  • Quick setup for a server using the Model Context Protocol SDK - Example commands for creating and managing project files - Integration with TypeScript for type safety
  1. Setting up a basic server for testing MCP functionalities.
  2. Learning how to integrate the MCP SDK into JavaScript projects.
  3. Demonstrating the capabilities of the Model Context Protocol in a practical environment.

Add to your AI client

Use these steps to connect MCP Server Demo 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": {
    "mcp-server-demo-rectcircle": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-demo-rectcircle"
      ]
    }
  }
}

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": {
    "mcp-server-demo-rectcircle": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-server-demo-rectcircle"
      ]
    }
  }
}

Claude Code

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

.mcp.json (project root)

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

VS Code (Copilot)

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

.vscode/mcp.json

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

Windsurf

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

~/.codeium/windsurf/mcp_config.json

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

Cline

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

Cline MCP Settings (via UI)

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

FAQ

What is the Model Context Protocol?

The Model Context Protocol is a framework for building and managing context-aware applications.

Is MCP Server Demo suitable for production use?

No, MCP Server Demo is intended for demonstration and educational purposes only.

Where can I find more information about the MCP SDK?

You can find more information in the official documentation at https://modelcontextprotocol.io/quickstart/server.

Developer tools