MCP AI Studio
Connect, inspect, and operate any Streamable HTTP MCP server — directly inside VS Code or Windsurf.
Version 1.0.0 — Multiple server profiles · Streaming responses · Connection Doctor · Auth wizard · Trace Timeline
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
- 🧭 Explore the Official MCP Registry — search marketplace-style listings, review endpoints, packages, and versions, then create a connection profile in one click
- 🧩 Multiple server profiles — tab between servers, rename endpoints, and keep configs persisted per workspace
- 🛠 Discover & call tools — auto-generates input forms from JSON Schema, no manual JSON required
- 🌊 Streaming response display — see progress and response text as it arrives
- 🩺 Connection Doctor — guided checks for server reachable, initialize OK, tools discovered, auth required, and CORS/proxy active
- 🔐 OAuth + Elicitation Wizard — discovery-oriented auth screen for external service authorization flows
- 🧾 Trace Timeline / Replay — inspect initialize, tools/list, tools/call, timing, headers, bodies, errors, and copy-as-curl
- 🔍 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
- Open Registry to pick a remote server, or click Configurator and enter your MCP Server URL (see table below)
- Click Use endpoint, or 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.
Try It With Sample MCP Data
From this repository root:
npm install
npm run sample:mcp
In VS Code or Windsurf, configure:
{
"mcpAiStudio.serverUrl": "http://127.0.0.1:8088/mcp"
}
Reload the workbench and click Connect. The sample server exposes:
| Tool |
Test coverage |
echo_message |
Basic string and enum inputs |
lookup_customer |
Enum + boolean inputs with sample customer data |
create_support_ticket |
Nested object and array input forms |
Once connected, use the sample endpoint to explore the workbench features:
- Multiple server profiles — save the sample alongside other endpoints and switch between them without losing config.
- Streaming response display — watch tool output stream in as the sample server returns results.
- Connection Doctor — verify the sample endpoint is reachable, initialized, and has tools discovered.
- OAuth + Elicitation Wizard — try the discovery-oriented auth flow screens.
- Trace Timeline — inspect the full MCP exchange: initialize,
tools/list, and tools/call.
Validate the same flow from the command line:
npm run test:sample
The validation script starts the sample server, connects with the official MCP SDK client, discovers tools, and calls every sample tool using examples/sample-mcp-server/test-data.json. The sample server and test data are documented so you can validate the extension against a known-good local endpoint.
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/harishkaparwan/mcp-ai-studio-web
