AI导哈

MCP流量检查器

用于在IDE中检查MCP流量的扩展，提供流量检查器视图、嵌入式UI和服务器生命周期管理功能。

  • by mcp-shark
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 mcp-shark/mcp-shark-viewer-vscode

使用说明

MCP Shark Viewer (VS Code / Cursor)

Inspect MCP traffic inside your IDE. Start/stop MCP Shark, open the inspector, and embed the MCP Shark UI in a webview.

目录

关于

此扩展集成 MCP鲨鱼 进入 VS代码/光标 （以及其他与VS Code兼容的IDE）。它提供：

  • 侧边栏视图（活动栏），用于快速访问检查器
  • 从命令面板启动/停止MCP Shark的命令
  • 嵌入式MCP Shark UI面板（webview iframe）

MCP Shark（服务器+UI）是上游项目： mcp鲨鱼有关MCP Shark的安装/使用，请参阅上游自述文件： 自述文件.

特性

  • 交通检查员视图：活动栏视图 Traffic Inspector (mcp-shark-traffic).
  • 嵌入式用户界面：用于iframe MCP Shark UI的Webview面板(http://localhost:9853).
  • 服务器生命周期：从IDE内部启动/停止MCP Shark。
  • 获取设置：当MCP Shark可用时，分机呼叫 GET /api/settings （API参考： GET/api/设置).

命令

命令 调色板标题
mcp-shark.viewer.startServer 启动MCP Shark服务器
mcp-shark.viewer.stopServer 停止MCP Shark服务器
mcp-shark.viewer.openInspector 开放式交通检查员
mcp-shark.viewer.showDatabasePanel MCP鲨鱼交通检查员
mcp-shark.viewer.refresh 刷新

入门指南

  1. 打开活动栏→ MCP鲨鱼 → 交通检查员
  2. 跑 启动MCP Shark服务器 （命令面板）
  3. 跑 开放式交通检查员 打开嵌入式UI面板
  4. 在MCP Shark用户界面中，转到 MCP服务器设置 和 启动MCP服务器 （选择IDE配置/服务器，然后单击 启动MCP Shark)
  5. 有关MCP Shark首次运行+设置的完整说明，请参阅： 入门指南
  6. 有关MCP Shark安装/CLI的用法，请参阅上游README： mcp-shark/mcp-shark自述

需求

  • 集成开发环境：VS代码/光标
  • Node.js：如果您想通过扩展程序自动启动MCP Shark，则需要 npx -y @mcp-shark/mcp-shark （MCP Shark需要Node 18+；请参阅上游自述： mcp-shark/mcp-shark自述)

安装（VSIX）

包裹：

vsce package
# or:
# npx @vscode/vsce package

安装到游标/VS代码中：

cursor --install-extension mcp-shark-viewer-for-vscode-0.0.1.vsix
code --install-extension mcp-shark-viewer-for-vscode-0.0.1.vsix

另请参见： docs/How.md.

故障排除

  • UI打开，但服务器未“运行”：即使外部MCP服务器无法启动，MCP Shark的UI也可以启动。打开MCP Shark UI并检查设置/日志（上游文档： mcp鲨鱼).
  • 端口已在使用中（9853）：另一个MCP Shark实例（或其他进程）已绑定到 9853。请停止并重试。
  • IDE内部启动失败：确保 npx 在IDE环境中可用，您可以运行 npx -y @mcp-shark/mcp-shark 在终端中。

发展

  • 在VS代码/光标中打开此仓库
  • 按 F5 启动一个 扩展开发主机
  • 运行：
    • npm run validate
    • npm run lint

脚本

  • 验证: npm run validate （跑步 node scripts/validate.js)
  • 棉绒: npm run lint （生物特征）
  • 格式: npm run format
  • 检查: npm run check

文档

  • 安装/打包: docs/How.md
  • 验证工作流程: docs/VALIDATION_PLAN.md

回购布局

  • 根入口点: extension.js （薄垫片出口自 src/)
  • 源: src/
  • 验证器: scripts/validate.js
  • 文档: docs/
  • Webview资产: media/ （例如。 media/image.png)

许可证

看 LICENSE.

相关 MCP