MCP Live Playground

A CodePen-style live IDE for building, testing, and debugging Model Context Protocol (MCP) servers — LLM agnostic.

---

Features

• Live code editor with full syntax highlighting (CodeMirror 6), TypeScript & Python support
• Real-time parser — tools, resources, and prompts are detected as you type (< 1ms)
• Tool Inspector — shows every parameter with type, description, constraints, and enum values
• AI Test Console — chat with any LLM to test tools, generate edge cases, and debug
• Simulation Modal — fill in parameters and get a realistic simulated tool response
• JSON Schema generator — auto-generates full MCP-compatible JSON Schema from your code
• LLM Agnostic — works with Anthropic, OpenAI, Ollama (local), OpenRouter, or any OpenAI-compatible API
• Resizable split pane, localStorage persistence, 5 built-in templates

---

Quick Start

Via npx (no install needed)

npx mcp-live-playground          # serve production build, opens browser
npx mcp-live-playground --dev    # dev server with hot reload
npx mcp-live-playground --port=3000 --no-open

Clone & run locally

git clone https://github.com/anandpilania/mcp-live-playground
cd mcp-live-playground
npm install
npm run dev      # http://localhost:3000

---

Supported LLM Providers

Provider	API Key Required	Notes
Anthropic	Yes	Claude Sonnet, Opus, Haiku
OpenAI	Yes	GPT-4o, GPT-4-turbo, etc.
Ollama	No	Local models (llama3, mistral, codellama…)
OpenRouter	Yes (free tier available)	200+ models including free ones
Custom	Optional	Any OpenAI-compatible endpoint

Click the provider button in the toolbar to configure your API key and model. Keys are stored only in your browser's localStorage and never sent anywhere other than the provider's API directly.

---

Templates

Template	Language	Description
Weather + Translate	TypeScript	Open-Meteo weather API + translation
Database Tools	TypeScript	Safe PostgreSQL SELECT queries + schema inspection
File System	TypeScript	Sandboxed file read/write/list with path traversal protection
Python (FastMCP)	Python	Web search, sentiment analysis, image generation
Empty Server	TypeScript	Blank starter

---

Python Testing — How It Works

Python tools cannot be executed in the browser (no Python runtime). The playground handles this in two ways:

Feature	How it works
Tool parsing	Regex extracts @mcp.tool() decorators, def signatures, Field(...) params, and docstrings in real-time
TEST button / Console	Your chosen LLM simulates what the tool would return, based on code + param types + your inputs
Real execution	Run fastmcp dev server.py and connect MCP Inspector

A purple banner shows when you're in Python mode and links to the real-execution workflow.

---

Save, Export & Import

The toolbar provides four file actions:

Button	What it does
COPY	Copy current code to clipboard
EXPORT	Download as .ts or .py file (auto-detected from code)
SNAPSHOT	Export full .json snapshot with code + template name
IMPORT	Import a .ts, .py, .js, or .json snapshot

Snapshots are portable — share with teammates and re-import to restore the exact state.

---

Adding a New Template

Edit src/templates/index.ts and add a new entry to the TEMPLATES array:

{
  name: "My Template",
  lang: "ts",
  description: "What it does",
  code: `...your MCP server code...`,
}

---

Extending the Parser

The parser in src/lib/parser.ts uses regex to extract tool definitions from code. It currently supports:

• TypeScript: server.tool("name", "desc", { schema }, handler)
• Python: @mcp.tool() + def name(...) + docstring

To add support for more patterns, extend parseTsTools or add a new language parser and call it from parseServer.

---

Adding a New LLM Provider

Edit src/providers/index.ts:

1. Add your provider type to LLMProviderType in src/types/index.ts
2. Add its default config to DEFAULT_PROVIDERS
3. If it's not OpenAI-compatible, add a new send function and dispatch it in sendMessage

---

Building for Production

npm run build     # outputs to dist/
npm run preview   # preview the build locally

---

License

MIT — use it, fork it, open-source it.