MCP消息可视化工具

MCP WireView

A VSCode extension for visualizing MCP (Model Context Protocol) messages with an interactive JSON viewer.

Features

• 🔌 Connect to MCP Servers - Configure and connect to remote MCP servers via HTTP
• 🎨 Rich JSON Visualization - Interactive JSON viewer powered by react-json-tree (same as Redux DevTools)
• 📡 Real-time Streaming - Full support for Server-Sent Events (SSE) streaming responses
• 🎯 Protocol Negotiation - Detects whether a server speaks stateless 2026-07-28 or an older handshake-based revision, and shows which in the status bar
• 🧭 Discovery & Subscriptions - server/discover and a live subscriptions/listen stream in its own panel
• 🔁 Multi Round-Trip Requests - Answer a server's elicitation, sampling or roots request in a form; every round stays visible
• 🏷️ Routing Headers - Mcp-Method, Mcp-Name and x-mcp-header parameter mirroring, with the Base64 sentinel encoding
• 🌓 Theme Integration - Automatic adaptation to VSCode light/dark themes
• 📝 Complete Protocol Support - Discover, list tools/prompts/resources, call tools, subscribe, and hand-written requests

Installation

From VSIX (Local Development)

1. Download the .vsix file
2. Open VSCode
3. Go to Extensions view (Ctrl+Shift+X)
4. Click "..." menu → "Install from VSIX..."
5. Select the downloaded .vsix file

Usage

1. Configure MCP Server URL

Set your MCP server URL via:

Option A: Command Palette

• Press Ctrl+Shift+P
• Run "MCP WV: Set Server URL"
• Enter your server URL (e.g., http://localhost:3000/mcp)

Option B: Status Bar

• Click the MCP status indicator in the status bar
• Enter your server URL

Option C: Settings

• Open Settings (Ctrl+,)
• Search for "MCP WireView"
• Set "Mcp Wire View: Server URL"

2. Let the protocol version settle

By default mcpWireView.protocolVersion is auto. The first request probes the server with server/discover:

• A 2026-07-28 server answers, and MCP WireView goes stateless: no handshake, per-request _meta, and the Mcp-Method / Mcp-Name routing headers.
• Anything older fails the probe in a way only a pre-2026-07-28 server can, and MCP WireView sends initialize for you.

Either way the negotiated version shows up in the status bar, and the whole probe is written to the "MCP WireView" output channel.

To see a server's identity and capabilities in one request, run "MCP WV: Send Server Discover Request". To drive the handshake yourself, pin a version in settings and run "MCP WV: Send Initialize Request".

3. Explore MCP Resources

List available tools:

Command: MCP WV: List Tools

List available prompts:

Command: MCP WV: List Prompts

List available resources:

Command: MCP WV: List Resources

4. Call a Tool

• Run "MCP WV: Call Tool"
• Pick a tool from the list (it comes from the cached tools/list)
• Enter arguments as JSON object (e.g., {"param": "value"})
• View the response in the webview

Parameters annotated with x-mcp-header are mirrored into Mcp-Param-{Name} headers automatically, Base64-encoded when the value is not header-safe. A tool whose annotations break the specification's rules is left out of the picker and the reason is logged; the server's raw response is still shown untouched.

If the server answers resultType: "input_required", a form panel opens for the elicitation, sampling or roots request it made. Fill it in, and the original request is retried with inputResponses and the server's requestState. Every round stays visible in the response panel.

5. Watch for changes

• Run "MCP WV: Listen to Subscriptions" (2026-07-28 servers)
• Pick the notification types you want
• Notifications stream into a dedicated panel as they arrive
• Run "MCP WV: Stop Listening" to close the stream

6. Send Custom Requests

• Run "MCP WV: Send Custom JSON Request"
• Enter a JSON-RPC request:
  复制

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

Only what is missing is filled in, and the headers mirror the body exactly, so a deliberately malformed request reaches the server as written. Writing "params": {"_meta": {}} sends a request with no protocol metadata at all, which is a useful thing to point a server at.

Session States

The status bar displays the current MCP session state:

Commands

Configuration

Webview Features

The interactive webview provides:

• Collapsible JSON nodes - Click to expand/collapse objects and arrays
• Syntax highlighting - Color-coded JSON with VSCode theme integration
• Request/Response display - See both sides of the communication
• SSE event visualization - View all streaming events with event count
• Error handling - Clear error messages with context

Development

Prerequisites

• Node.js 20.x or higher
• npm

Setup

# Install dependencies
npm install

# Install webview dependencies
npm run install:webview

# Compile
npm run compile

Build Commands

# 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

Testing

# Compile, lint, then run unit and integration tests
npm test

The integration tests drive the real client against an in-process mock MCP server that enforces the 2026-07-28 header/body rules, covering both protocol eras without needing the extension host.

To try it by hand:

1. Open this folder in VSCode
2. Press F5 to launch Extension Development Host
3. In the new window, use the MCP WV: commands
4. Open the "MCP WireView" output channel for negotiation logs and warnings
5. Right-click webview → "Open Webview Developer Tools" for debugging

Architecture

Extension (TypeScript)

• src/extension.ts - Entry point
• src/commands.ts - Command handlers and the multi round-trip loop
• src/mcpClient.ts - HTTP client with SSE and subscription support
• src/protocol/ - Everything version-specific: dialects, negotiation, _meta, headers, x-mcp-header, MRTR, SSE framing
• src/toolCatalog.ts - tools/list cache used for x-mcp-header lookup
• src/responseViewer.ts, src/subscriptionViewer.ts, src/inputRequestViewer.ts - The three webview panels
• src/webviewShell.ts - Shared panel HTML and CSP

Webview UI (React + TypeScript)

• src/webview-ui/src/App.tsx - Root component, dispatches on panel mode
• src/webview-ui/src/components/ - UI components and MRTR forms
• src/webview-ui/src/theme/ - VSCode theme integration
• Build tool: Vite

MCP Protocol Support

• Protocol versions: 2026-07-28 (stateless) and 2025-11-25 / 2025-06-18 / 2025-03-26 (handshake-based), selected automatically or pinned in settings
• Transport: Streamable HTTP (POST with JSON-RPC 2.0)
• Streaming: Server-Sent Events, including the long-lived subscriptions/listen stream
• 2026-07-28 features: server/discover, subscriptions/listen, multi round-trip requests, Mcp-Method / Mcp-Name routing headers, and x-mcp-header parameter mirroring
• Capabilities: roots, sampling, elicitation

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Links

• MCP Specification
• VSCode Extension API
• react-json-tree