Wso2 MCP Playground

MCP游乐场

一个轻量级的、完全客户端的React组件，用于使用可流式HTTP检查和测试MCP（模型上下文协议）服务器，不需要服务器端依赖。

什么是MCP游乐场？

MCP Playground是一个对开发人员友好的React组件，它提供了一个全面的界面，可以直接从浏览器测试和调试MCP（模型上下文协议）服务器。与需要后端基础设施的传统服务器检查工具不同，这个游乐场完全在客户端运行，非常适合集成到web应用程序、开发人员门户和调试工作流中。

关键能力：

• 实时MCP服务器测试：连接到任何兼容MCP的服务器并测试其工具和功能
• 交互式工具执行：使用自定义参数执行MCP工具并实时查看结果
• 连接管理：易于连接/断开功能，具有连接状态监控功能
• 历史跟踪：用于调试和可观察性的内置活动历史记录

如何使用它

安装

直接从GitHub存储库安装软件包：

npm install wso2/mcp-playground

或用纱线：

yarn add wso2/mcp-playground

基本用法

导入和使用 MCPPlayground React应用程序中的组件：

import MCPPlayground from 'mcp-playground';

function App() {
  return (
    

      
My Application

      
    

  );
}

使用道具的高级用法

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 (
    "
    />
  );
}

自定义身份验证标头

import MCPPlayground from 'mcp-playground';

function CustomAuthExample() {
  return (
    
  );
}

主题定制

您可以通过传递MUI来完全自定义MCP游乐场的外观 ThemeOptions 对象通过 theme 道具。

import MCPPlayground from "mcp-playground";

const theme = {
  palette: {
    primary: {
      light: "#5f89d4",
      main: "#2f5fa7",
      dark: "#204377",
    },
    secondary: {
      light: "#eceff4",
      main: "#6b7085",
      dark: "#2e313f",
    },
    warning: {
      main: "#ff9d52",
    },
  },
};

function App() {
  return ;
}

配置道具

测试MCP工具

连接到MCP服务器后，您可以：

1. 查看可用工具
2. 执行工具：单击任何工具打开其参数表单并执行它
3. 查看结果：工具执行结果显示在格式化的JSON查看器中
4. 监控历史记录：所有请求和响应都记录在历史面板中
5. Ping服务器：使用ping选项卡测试基本连接

谁使用MCP游乐场

生产部署

Bijira控制台

• 允许API开发人员探索和测试可用的MCP工具
• 集成MCP Playground，用于测试和调试MCP兼容的AI服务

DevPortal

• 允许API消费者探索和测试可用的MCP工具

发展

先决条件

• Node.js 16+
• 反应17+
• 材质UI v5

本地开发

# Clone the repository
git clone https://github.com/wso2/mcp-playground.git
cd mcp-playground

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

我们如何建造它

该项目是利用 模型上下文协议检查器，调整和扩展它，以创建一个可重用的React组件，适合集成到各种web应用程序中。

架构决策：

• 仅客户端：无后端依赖关系，通过HTTP直接与MCP服务器通信
• 模块化设计：结构化为具有可配置道具的可重用React组件
• 主题隔离：使用作用域CSS类生成来防止样式冲突
• 灵活的身份验证：支持各种身份验证标头和令牌管理模式

相关项目

• 模型上下文协议 -MCP官方规范
• MCP-SDK -用于构建MCP兼容应用程序的SDK
• MCP检查员 -启发该项目的原始检查员