AI导哈

MCP服务器测试工具

一个轻量级的客户端React组件，用于测试和调试MCP（Model Context Protocol）服务器，无需服务器端依赖。

  • by wso2
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 wso2/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 (
    <div>
      <h1>My Application</h1>
      <MCPPlayground />
    </div>
  );
}

使用道具的高级用法

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

自定义身份验证标头

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

主题定制

您可以通过传递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 <MCPPlayground theme={theme} />;
}

配置道具

道具 类型 默认值 描述
url string undefined 要连接到的MCP服务器终结点URL
token string undefined 请求的身份验证令牌
headerName string 'Authorization' 用于身份验证的HTTP标头名称
shouldSetHeaderNameExternally boolean false 父组件是否管理标头名称
isTokenFetching boolean false 显示令牌的加载状态
isUrlFetching boolean false 显示URL的加载状态
handleTokenRegenerate () => void undefined 回调以重新生成令牌
tokenPlaceholder string 'Add Your Token' 用于令牌输入的占位符文本
theme ThemeOptions undefined 自定义MUI主题以覆盖默认样式

测试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