MCP Playground

A lightweight, fully client-side React component for inspecting and testing MCP (Model Context Protocol) servers using streamable HTTP — no server-side dependencies required.

What is MCP Playground?

MCP Playground is a developer-friendly React component that provides a comprehensive interface for testing and debugging MCP (Model Context Protocol) servers directly from the browser. Unlike traditional server inspection tools that require backend infrastructure, this playground runs entirely on the client-side, making it perfect for integration into web applications, developer portals, and debugging workflows.

Key capabilities:

• Real-time MCP Server Testing: Connect to any MCP-compatible server and test its tools and capabilities
• Interactive Tool Execution: Execute MCP tools with custom parameters and view results in real-time
• Connection Management: Easy connect/disconnect functionality with connection status monitoring
• History Tracking: Built-in activity history for debugging and observability

How to Use It

Installation

Install the package directly from the GitHub repository:

npm install wso2/mcp-playground

or with yarn:

yarn add wso2/mcp-playground

Basic Usage

Import and use the MCPPlayground component in your React application:

import MCPPlayground from 'mcp-playground';

function App() {
  return (
    
  );
}

Advanced Usage with Props

import React, { useState } from 'react';
import MCPPlayground from 'mcp-playground';

function DeveloperDashboard() {
  const [token, setToken] = useState('');
  const [isTokenFetching, setIsTokenFetching] = useState(false);

  const handleTokenRegenerate = async () => {
    setIsTokenFetching(true);
    try {
      // Your token regeneration logic
      const newToken = await fetchNewToken();
      setToken(newToken);
    } finally {
      setIsTokenFetching(false);
    }
  };

  return (
    <MCPPlayground
      url="https://your-mcp-server.com/mcp"
      token={token}
      headerName="Authorization"
      isTokenFetching={isTokenFetching}
      handleTokenRegenerate={handleTokenRegenerate}
      tokenPlaceholder="Bearer "
    />
  );
}

Custom Authentication Headers

import MCPPlayground from 'mcp-playground';

function CustomAuthExample() {
  return (
    <MCPPlayground
      url="https://devportal.bijira.dev/mcpapi/v1/mcp"
      token="bearer-token-here"
      headerName="X-API-Key"
      shouldSetHeaderNameExternally={true}
    />
  );
}

Theme Customization

You can fully customize the appearance of MCP Playground by passing a MUI ThemeOptions object via the theme prop.

import MCPPlayground from "mcp-playground";

const theme = {
  palette: {
    primary: {
      light: "#5f89d4",
      main: "#2f5fa7",
      dark: "#204377",
    },
    secondary: {
      light: "#eceff4",