MCP Wireview

MCP WireView

一个VSCode扩展，用于使用交互式JSON查看器可视化MCP（模型上下文协议）消息。

特性

• 🔌 连接到MCP服务器 -通过HTTP配置并连接到远程MCP服务器
• 🎨 丰富的JSON可视化 -由react-JSON树驱动的交互式JSON查看器（与Redux DevTools相同）
• 📡 实时流媒体 -完全支持服务器发送事件（SSE）流式响应
• 🎯 会话状态跟踪 -连接和初始化状态的清晰视觉指示器
• 🌓 主题整合 -自动适应VSCode亮/暗主题
• 📝 完整的协议支持 -初始化、列出工具/提示/资源、调用工具和自定义请求

安装

来自VSIX（本地开发）

1. 下载 .vsix 文件
2. 打开VSCode
3. 转到扩展视图(Ctrl+Shift+X)
4. 点击“…”菜单→ “从VSIX安装…”
5. 选择已下载的 .vsix 文件

用法

1.配置MCP服务器URL

通过以下方式设置MCP服务器URL：

选项A：命令选项板

• 按 Ctrl+Shift+P
• 运行“MCP:设置服务器URL”
• 输入您的服务器URL（例如。， http://localhost:3000/mcp)

选项B：状态栏

• 单击状态栏中的MCP状态指示器
• 输入您的服务器URL

选项C：设置

• 打开设置(Ctrl+,)
• 搜索“MCP WireView”
• 设置“MCP客户端：服务器Url”

2.初始化会话

• 按 Ctrl+Shift+P
• 运行“MCP：发送初始化请求”
• 在交互式网络视图中查看响应

3.探索MCP资源

列出可用工具：

Command: MCP: List Tools

列出可用提示：

Command: MCP: List Prompts

列出可用资源：

Command: MCP: List Resources

4.调用工具

• 运行“MCP：调用工具”
• 输入工具名称
• 将参数作为JSON对象输入（例如。， {"param": "value"})
• 在webview中查看响应

5.发送自定义请求

• 运行“MCP：发送自定义JSON请求”
• 输入JSON-RPC请求：

  {"method": "tools/list", "params": {}}

会话状态

状态栏显示当前MCP会话状态：

命令

配置

网络视图功能

交互式网络视图提供：

• 可折叠JSON节点 -单击以展开/折叠对象和阵列
• 语法突出显示 -带有VSCode主题集成的彩色编码JSON
• 请求/响应显示 -看到沟通的双方
• SSE事件可视化 -查看所有带有事件计数的流媒体事件
• 错误处理 -用上下文清除错误消息

发展

先决条件

• Node.js 20.x或更高版本
• npm

设置

# Install dependencies
npm install

# Install webview dependencies
npm run install:webview

# Compile
npm run compile

构建命令

# Compile both extension and webview
npm run compile

# Compile extension only
npm run compile:extension

# Compile webview only
npm run compile:webview

# Watch extension (auto-recompile on changes)
npm run watch

# Watch webview (Vite dev server)
npm run watch:webview

测试

1. 在VSCode中打开此文件夹
2. 按 F5 启动扩展开发主机
3. 在新窗口中，使用MCP命令
4. 打开“MCP WireView”输出通道查看日志
5. 右键单击Web视图→ “打开Webview开发人员工具”进行调试

建筑

扩展（TypeScript）

• src/extension.ts -入口点
• src/commands.ts -命令处理程序
• src/mcpClient.ts -支持SSE的HTTP客户端
• src/responseViewer.ts -网络视图管理器

Webview用户界面（React+TypeScript）

• src/webview-ui/src/App.tsx -根组件
• src/webview-ui/src/components/ -UI组件
• src/webview-ui/src/theme/ -VSCode主题集成
• 构建工具：Vite

MCP协议支持

• 协议版本： 2025-06-18
• 传输：使用JSON-RPC 2.0的HTTP POST
• 流媒体：服务器发送事件（SSE）
• 能力：根、采样、启发

许可证

麻省理工学院

贡献

欢迎投稿！请随时提交拉取请求。

链接

• MCP规范
• VSCode扩展API
• 反应json树