AI导哈

MCP测试工具

一个功能全面的VSCode扩展，用于测试和调试模型上下文协议（MCP）服务器，支持多种传输协议并提供直观的服务器管理和交互界面。

  • by echo-ai100
  • Vue
  • 本地部署
  • 更新于
在 GitHub 查看 echo-ai100/mcp-tester

使用说明

MCP测试仪

一个功能齐全的VSCode扩展，用于测试和调试模型上下文协议（MCP）服务器。此扩展提供与官方MCP Inspector相同的功能，支持多种传输协议，并具有用于MCP服务器管理和交互的直观界面。

🚀 核心功能

📡 多协议支持

  • STDIO传输：支持本地命令行MCP服务器
  • SSE（服务器发送事件）：基于HTTP流式传输事件的连接
  • 可流式传输的HTTP：HTTP流传输协议
  • 自定义头：支持身份验证和自定义HTTP标头

🛠️ 完整的MCP功能

  • 工具管理：列出、查看和调用MCP工具
  • 资源管理：浏览、阅读和订阅MCP资源
  • 提示管理：管理和使用MCP提示模板
  • 根管理：查看和管理服务器根目录
  • 实时通知：接收服务器通知和状态更新

🎯 高级功能

  • 视觉界面：使用Vue.js构建的现代WebView UI
  • 配置管理：保存和管理多个服务器配置
  • 请求历史：完成请求/响应历史跟踪
  • 错误处理：全面的错误处理和用户反馈
  • 状态监控：实时连接状态和服务器功能显示
  • 采样支持：MCP采样请求和响应支持
  • 完工支持：参数自动补全支持

🔧 开发者工具

  • 命令面板集成：所有功能均可通过VSCode命令面板访问
  • 状态栏显示：实时连接状态显示
  • 配置导入/导出：MCP服务器配置导入/导出支持
  • 日志管理：支持设置日志级别和查看日志
  • Ping测试：测试服务器连接和响应

📦 安装

从源代码构建

  1. 克隆存储库:
git clone https://github.com/echo-ai100/mcp-tester.git
cd mcp-tester
  1. 安装主要项目依赖项:
npm install
  1. 安装Vue webview依赖项:
npm run install-webview
  1. 构建项目:
cd ./src/vue-webview && npm run build
cd ../../ && npm run build
  1. 构建.vsix文件:
npx vsce package

从VSIX安装

  1. 下载最新 .vsix 文件来自发布
  2. 打开VSCode
  3. 按 Ctrl+Shift+P （Windows/Linux）或 Cmd+Shift+P （macOS）
  4. 键入“扩展：从VSIX安装…”
  5. 选择已下载的 .vsix 文件
  6. 出现提示时重新加载VSCode

🎮 用法

1.启动MCP测试仪

通过命令面板：

  • 打开命令面板(Ctrl+Shift+P / Cmd+Shift+P)
  • 类型“MCP：打开MCP测试仪”

通过活动栏：

  • 单击左侧活动栏中的MCP Tester图标

通过状态栏：

  • 单击底部状态栏中的MCP连接状态

2.连接到MCP服务器

STDIO交通（建议用于当地发展）

对于本地命令行MCP服务器：

{
  "type": "stdio",
  "command": "node",
  "args": ["path/to/your/mcp-server.js"],
  "env": {
    "API_KEY": "your-api-key",
    "DEBUG": "true"
  }
}

配置示例:

{
  "type": "stdio",
  "command": "npx",
  "args": ["@modelcontextprotocol/server-everything"],
  "env": {
    "NODE_ENV": "development"
  }
}

SSE（服务器发送事件）传输

对于HTTP流传输：

{
  "type": "sse",
  "url": "http://localhost:3000/sse",
  "customHeaders": {
    "Authorization": "Bearer your-token",
    "X-API-Key": "your-api-key"
  }
}

可流式HTTP传输

对于HTTP流传输：

{
  "type": "streamable-http",
  "url": "http://localhost:3000/mcp",
  "customHeaders": {
    "Authorization": "Bearer your-token"
  }
}

3.使用MCP功能

连接后，您可以：

🛠️ 工具

  • 列出工具：查看服务器提供的所有工具
  • 查看工具详细信息：检查工具输入/输出模式
  • 调用工具：使用表单或JSON格式调用工具
  • 查看结果：查看工具执行结果和错误消息

📄 资源

  • 浏览资源：查看可用资源列表
  • 阅读资源：获取资源内容
  • 订阅资源：订阅资源更改通知
  • 资源模板：使用参数化资源模板

💬 提示词

  • 管理提示：查看和使用预定义的提示
  • 参数填写：为提示提供参数
  • 获取结果：检索生成的提示内容

📁 根

  • 查看根目录：列出服务器根目录
  • 目录管理：管理服务器文件系统访问

🔔 实时功能

  • 服务器通知：接收实时服务器通知
  • 连接状态：监视连接状态更改
  • 请求历史：查看完整的请求/响应历史记录

⚙️ 配置选项

VSCode设置

配置 mcp-tester VSCode设置中的选项：

配置 类型 默认值 描述
mcp-tester.autoStart boolean true VSCode启动时自动启动
mcp-tester.defaultTransport string “stdio” 默认传输协议
mcp-tester.timeout number 30000 请求超时（毫秒）
mcp-tester.maxHistory number 100 最大历史条目数
mcp-tester.enableLogging boolean false 启用日志记录
mcp-tester.maxRetryAttempts number 3 最大重试次数
mcp-tester.retryDelay number 1000 重试延迟（毫秒）

服务器配置

配置 mcp-tester.servers 设置中的数组以预定义服务器：

{
  "mcp-tester.servers": [
    {
      "name": "Everything Server",
      "type": "stdio",
      "command": "npx",
      "args": ["@modelcontextprotocol/server-everything"],
      "env": {
        "NODE_ENV": "development"
      }
    },
    {
      "name": "Remote API Server",
      "type": "sse",
      "url": "https://api.example.com/mcp/sse",
      "customHeaders": {
        "Authorization": "Bearer your-token"
      }
    },
    {
      "name": "Local HTTP Server",
      "type": "streamable-http",
      "url": "http://localhost:8080/mcp"
    }
  ]
}

🎛️ 命令面板命令

命令 描述
MCP: Open MCP Tester 打开MCP测试仪主界面
MCP: Connect to MCP Server 连接到MCP服务器
MCP: Disconnect from MCP Server 断开与服务器的连接
MCP: List Tools 在编辑器中显示工具列表
MCP: List Resources 在编辑器中显示资源列表
MCP: List Prompts 在编辑器中显示提示列表
MCP: Ping Server 测试服务器连接
MCP: Show Connection Status 显示连接状态信息
MCP: Clear Request History 清除请求历史记录
MCP: Export Server Configuration 导出服务器配置
MCP: Import Server Configuration 导入服务器配置

🏗️ 项目架构

mcp-tester/
├── src/
│   ├── extension.ts              # VSCode extension entry point
│   ├── mcp-tester-provider.ts    # WebView provider for UI interaction
│   ├── server/
│   │   └── mcp-server-manager.ts # MCP server manager for protocol communication
│   └── vue-webview/             # Vue.js frontend interface
│       ├── src/
│       │   ├── components/      # Vue components
│       │   │   ├── MainApp.vue  # Main application component
│       │   │   ├── Sidebar.vue  # Sidebar component
│       │   │   ├── ToolsPanel.vue # Tools panel component
│       │   │   └── ...          # Other feature components
│       │   ├── assets/styles/   # Style files
│       │   └── main.ts         # Vue application entry
│       ├── package.json
│       └── vite.config.ts
├── package.json                 # Extension configuration and dependencies
├── webpack.config.js           # Webpack build configuration
└── tsconfig.json              # TypeScript configuration

架构特点

  1. 分层架构:

    • 扩展层：VSCode扩展API集成
    • 业务层：MCP协议处理和状态管理
    • 表示层：Vue.js WebView界面

  2. 事件驱动:

    • 使用EventEmitter进行组件间通信
    • 支持实时状态更新和通知

  3. 模块化设计:

    • 独立服务器管理器模块
    • 可重用的Vue组件
    • 明确职责分工

🔧 开发指南

开发环境要求

  • Node.js：>=16.x
  • npm：>=7.x
  • VSCode: >= 1.74.0
  • TypeScript：>=4.9.x

开发脚本

命令 描述
npm run compile 编译TypeScript并构建Vue应用程序
npm run watch 观看模式编译
npm run build 完成项目构建
npm run dev-webview 在开发模式下运行Vue应用程序
npm run build-webview 构建Vue应用程序
npm run install-webview 安装Vue应用程序依赖项
npm run lint 代码linting
npm run package 生产建设

Vue WebView开发

Vue前端接口位于 src/vue-webview/ 目录：

# Navigate to Vue project directory
cd src/vue-webview

# Install dependencies
npm install

# Development mode
npm run dev

# Build production version
npm run build

添加新功能

  1. 添加新的MCP协议功能:

    • 在中添加新方法 MCPServerManager
    • 在中添加消息处理 MCPTesterProvider
    • 在Vue组件中添加UI交互

  2. 添加新的Vue组件:

    • 在中创建组件 src/vue-webview/src/components/
    • 进口和使用 MainApp.vue
    • 添加相应的样式和交互逻辑

  3. 添加新的VSCode命令:

    • 申报 package.jsons contributes.commands
    • 在中注册命令处理程序 extension.ts

🧪 测试

单元测试

# Run tests
npm test

# Watch mode testing
npm run test:watch

集成测试

  1. 测试STDIO传输:
# Use official example server
npx @modelcontextprotocol/server-everything
  1. 测试HTTP传输:
# Start HTTP MCP server
# Then connect to the corresponding URL in the extension

调试提示

  1. 启用详细日志记录:

    • 启用 mcp-tester.enableLogging 在设置中
    • 检查VSCode开发人员控制台输出

  2. DevTools视图:

    • 可以在开发模式下使用Vue DevTools
    • WebView调试需要启用开发人员模式

  3. 网络调试:

    • 使用浏览器开发工具监视HTTP请求
    • 检查WebSocket连接状态

🤝 贡献

代码提交

  1. 分叉项目
  2. 创建特征分支(git checkout -b feature/amazing-feature)
  3. 提交更改(git commit -m 'Add some amazing feature')
  4. 推送到分支(git push origin feature/amazing-feature)
  5. 打开拉取请求

代码规范

  • TypeScript：使用具有完整类型注释的严格模式
  • Vue：使用成分API和 <script setup> 语法
  • 风格：使用VSCode主题变量以保持一致性
  • 评论：为重要逻辑提供清晰的评论

提交消息格式

type(scope): description

[optional body]

[optional footer]

类型包括：

  • feat：新功能
  • fix：Bug修复
  • docs：文件更新
  • style：代码格式
  • refactor：代码重构
  • test：测试相关
  • chore：构建或工具更改

📝 许可证

此项目根据MIT许可证获得许可-有关详细信息，请参阅许可证文件。

🙏 致谢

  • 协议规范的模型上下文协议（MCP）团队
  • API卓越扩展的VSCode团队
  • Vue.js团队为响应式框架
  • 所有帮助改进此项目的贡献者

📞 支持

开发者：Echo AI
版本: 0.0.2
最后更新2024年11月

相关 MCP