MCP AI Studio
Connect, inspect, and operate any Streamable HTTP MCP server — directly inside VS Code or Windsurf.
MCP AI Studio embeds a full-featured MCP client as an editor webview. Point it at any MCP server URL, browse all exposed tools, run tool calls with auto-generated input forms, and inspect responses — without leaving your editor.
Features
- 🔌 Connect to any MCP server — enter any URL; saved in the editor and restored on next open
- 🛠 Discover & call tools — auto-generates input forms from JSON Schema, no manual JSON required
- 🔍 Inspect responses — formatted JSON output with copy-to-clipboard
- ⚙️ Fully configurable from Settings — set your server URL, client name, title, and more via
settings.json — no rebuild needed
- 🧩 Generic template — fork and brand it for your own MCP server
Getting Started
- Install the extension
- Open the workbench:
- Click the MCP AI Studio icon in the Activity Bar, or
- Run
Ctrl+Shift+P (macOS: Cmd+Shift+P) → MCP AI Studio: Open Workbench
- Click Configurator and enter your MCP Server URL (see table below)
- Click Save → Connect
MCP Server URL — what to enter
| Your server |
Enter in Configurator |
| Local on port 8080 |
http://localhost:8080/mcp |
| Local on port 8009 |
http://localhost:8009/mcp |
| Local on any port |
http://localhost:<port>/mcp |
| Remote / cloud |
https://your-server.com/mcp |
| MCP Playground |
https://mcpplaygroundonline.com/mcp-echo-server |
Just enter the real URL — always the full address of your MCP server. The workbench handles everything else.
Configuration
Configure via Settings UI (Ctrl+,, search MCP AI Studio) or add directly to settings.json:
{
"mcpAiStudio.serverUrl": "http://localhost:8080/mcp",
"mcpAiStudio.title": "My Project Tools",
"mcpAiStudio.subtitle": "Powered by Spring AI MCP",
"mcpAiStudio.clientName": "my-project",
"mcpAiStudio.clientVersion": "1.0.0"
}
Use workspace settings.json (.vscode/settings.json) to configure per-project, or user settings for a global default.
Available Settings
| Setting |
Description |
Default |
mcpAiStudio.serverUrl |
MCP server URL to pre-fill on open |
(empty — user sets in UI) |
mcpAiStudio.title |
Interface title shown in the workbench header |
MCP AI Studio |
mcpAiStudio.subtitle |
Subtitle shown below the title |
(default tagline) |
mcpAiStudio.clientName |
Client name sent in the MCP initialize handshake |
mcp-ai-studio |
mcpAiStudio.clientVersion |
Client version sent in the MCP initialize handshake |
0.0.0 |
Settings are injected into the webview at load time — changes take effect on the next open. The extension also starts a local loopback proxy so editor webviews can call local MCP servers without requiring CORS headers from the MCP server.
MCP Server Compatibility
Works with any server implementing the MCP Streamable HTTP transport:
- Spring AI MCP
- FastMCP (Python)
@modelcontextprotocol/sdk (Node.js)- Any server supporting
tools/list + tools/call over HTTP
URL examples
| Server |
URL in Configurator |
| Spring AI (local) |
http://localhost:8080/mcp |
| Spring AI (custom port) |
http://localhost:8009/mcp |
| FastMCP (local) |
http://localhost:8000/mcp |
| Node.js SDK (local) |
http://localhost:3000/mcp |
| Remote / production |
https://mcp.mycompany.com/mcp |
| MCP Playground |
https://mcpplaygroundonline.com/mcp-echo-server |
Configuration Priority
If you configure the same field in multiple places, the priority is:
settings.json > URL ?params > VITE_ build-time env > defaults
The user can always override any value in the Configurator panel inside the UI — those changes are persisted per-workspace.
Source & Issues
github.com/your-org/mcp-workbench
