Rupa Tiwari

Posted on Feb 24

I built a free tool-like Playground for Testing MCP Servers - No Setup Needed

#mcp #ai #claude #devtool

I Built a Free Postman-like Playground for Testing MCP Servers — No Setup Needed

If you've been building with Model Context Protocol (MCP) recently, you probably know the pain:

“Is my MCP server actually working?”

“Did I implement the tool correctly?”

“Why is Claude Desktop not picking up my tools?”

You end up writing custom test scripts, digging through logs, or manually crafting JSON-RPC requests with curl. It’s tedious.

So I built MCP Playground Online — a free, browser-based tool to test and debug MCP servers, inspired by how Postman changed REST API development.

What is MCP, Really?

Model Context Protocol (MCP) is an open standard that allows AI models to connect to external tools, APIs, and data sources in a structured way.

You can think of MCP as a universal adapter between AI systems and real-world capabilities:

Claude / Chatgpt / Gemini / Other LLM 
        │
        │  MCP Protocol
        ▼
     MCP Server
        │
        ▼
External Systems
(GitHub • Slack • Databases • APIs • Files • etc.)

MCP servers typically expose:

Tools → Functions the AI can call

(e.g., search_github, send_email)
Resources → Data the AI can read

(e.g., files, database records)
Prompts → Reusable prompt templates

Under the hood, MCP uses JSON-RPC 2.0, which is powerful — but not fun to test manually.

What MCP Playground Online Does

✅ 1. Server Testing (Postman-Style)

Just paste your MCP server URL and connect.

Instantly view:

All available tools with input schemas
All exposed resources
All defined prompt templates

You can execute tools directly from the UI using a JSON editor — no scripts or CLI needed.

✅ 2. Three Transport Methods Supported

MCP servers can run over multiple transports. The playground supports all three:

Transport	Typical Use Case
HTTP POST	Standard JSON-RPC (most common)
SSE	Streaming responses / real-time output

Switching transports takes one click — no reconfiguration required.

✅ 3. Authentication Support

If your MCP server requires authentication, just paste your token.

Supported patterns:

Authorization: Bearer <token> for HTTP
Query parameter tokens for SSE / WebSocket (browser limitation workaround)

✅ 4. MCP Servers Directory

New to MCP?

Browse a curated directory of real MCP servers like:

GitHub
Slack
PostgreSQL
Stripe
Cloudflare

✅ 5. Prompt Library

A growing collection of reusable prompts for common MCP workflows — useful for rapid experimentation.

Quick Demo: Testing Your First MCP Server

Let’s say your MCP server is deployed at:

https://your-mcp-server.com/mcp

Step 1 → Open mcpplaygroundonline.com

Step 2 → Paste your server URL

Step 3 → Select transport (HTTP POST for most servers)

Step 4 → Click Connect

You’ll immediately see your server’s tools, resources, and prompts.

Step 5 → Select a tool → Provide JSON input → Execute

That’s it — full JSON-RPC responses, instantly.

Under the Hood (For the Curious)

The playground uses a transport abstraction layer so different protocols behave consistently.

Simplified example:


typescript
import { createTransport } from '@/lib/mcp-transport-client';

const transport = createTransport({
  serverUrl: 'https://api.example.com/mcp',
  authToken: 'Bearer your-token',
  transport: 'http' // or 'sse' or 'websocket'
});

const { capabilities } = await transport.connect();

const response = await transport.sendRequest({
  jsonrpc: '2.0',
  id: 1,
  method: 'tools/call',
  params: {
    name: 'search_github',
    arguments: { query: 'mcp typescript' }
  }
});

await transport.disconnect();

DEV Community