drio
Open app

MCP Server Playground

Source

MCP Server example with TypeScript

Catalog onlyCatalog onlySTDIO

Overview

MCP Server Playground is a TypeScript-based environment designed for experimenting with an MCP Server. It serves as a personalized learning resource and a platform for testing integrations with Claude Desktop and Cursor IDE.

To use MCP Server Playground, clone the repository, install the dependencies, and build the project. You can also install it automatically via Smithery for Claude Desktop.

  • TypeScript-based server for better structure and error-checking. - Modular design for easy extension with new commands and features. - Integration-ready with Claude Desktop and Cursor IDE. - Expandable playground for experimenting with additional tools.
  1. Testing new integrations with Claude Desktop.
  2. Experimenting with different commands and features in a modular environment.
  3. Learning and extending the MCP Server functionalities based on tutorial examples.

Add to your AI client

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

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

Claude Code

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

.mcp.json (project root)

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

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

Windsurf

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

~/.codeium/windsurf/mcp_config.json

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

Cline

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

Cline MCP Settings (via UI)

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

FAQ

Is MCP Server Playground suitable for beginners?

Yes! It is designed as a learning resource for those new to MCP Servers.

Can I contribute to the project?

Absolutely! Contributions are welcome, and you can fork the repository to suggest improvements.

What are the prerequisites for using MCP Server Playground?

You need Node.js, npm (or Yarn), and TypeScript installed.

Developer tools