MCP Client Connector – VSCode Extension

A powerful VSCode extension that connects to Model Context Protocol (MCP) servers, enabling you to interact with Azure, Azure DevOps, PostgreSQL, SQL, Storage, and many other services directly from your editor.

✨ Features

• Connect to any MCP server via stdio transport
• Manage multiple servers in a dedicated sidebar with connection status indicators
• Execute tools provided by servers through a natural‑language chat interface
• Automatic server discovery from mcp.json configuration files
• Azure OpenAI integration for intelligent tool‑calling with retry logic (handles rate‑limiting)
• Context‑menu commands for each server (connect, disconnect, reconnect, remove)
• Real‑time status updates with visual icons (plug‑connected / plug‑disconnected)
• Webpack‑bundled for reliable dependency inclusion (no missing module errors)
• Works with popular MCP servers:
  • Azure DevOps (work items, pipelines, repos)
  • Azure Resource Manager (ARM)
  • PostgreSQL, SQL Server
  • Azure Storage (Blob, File, Queue, Table)
  • Azure Managed Lustre
  • Azure Load Testing
  • Azure Workbooks
  • … and any other MCP‑compatible server

🚀 Quick Start

Installation

1. Install from VSIX (if you have the .vsix file):

   • Open VSCode, go to Extensions view (Ctrl+Shift+X)
   • Click … (More Actions) → Install from VSIX…
   • Select mcp-client-connector-0.1.0.vsix

2. Install from Marketplace (when published):

   • Search for MCP Client Connector in the Extensions marketplace
   • Click Install

First‑time Setup

1. Open the MCP sidebar by clicking the plug icon (🔌) in the Activity Bar.
2. Click the + (Connect to Server) button or run the command MCP: Connect to Server.
3. Enter the server details:
   • Command: The executable that starts the MCP server (e.g., npx, node, python)
   • Arguments: Any required arguments (e.g., -m, server.js, --port 8080)
   • Environment variables (optional)
4. The server will appear in the sidebar. Click the Connect button (or use the context menu) to establish the connection.

Using the Chat Interface

1. Open the chat panel with MCP: Open Chat (or click the chat icon in the sidebar).
2. Type a natural‑language request, e.g.:
   • “List all work items in project ‘MyProject’”
   • “Create a new storage container named ‘uploads’”
   • “Show me the top 5 databases”
3. The extension will use Azure OpenAI to translate your request into the appropriate MCP tool calls, execute them, and display the results as markdown.

⚙️ Configuration

Extension Settings

Open VSCode Settings (Ctrl+,) and search for MCP Client to configure:

Automatic Server Discovery

The extension automatically scans your workspace for mcp.json files (standard MCP configuration). If found, those servers are added to the sidebar with a “discovered” badge. You can then connect to them with a single click.

Environment Variables

You can set environment variables per server during connection setup. Common variables include:

• AZURE_CREDENTIALS (for Azure authentication)
• ADO_PAT (Azure DevOps Personal Access Token)
• Database connection strings

🛠️ Commands

🖱️ Sidebar & Context Menus

• Click a server to see its available tools in the tooltip.
• Right‑click a server for context‑menu options:
  • Connect (if disconnected)
  • Disconnect (if connected)
  • Reconnect (if disconnected)
  • Remove (delete from list)
• Icons:
  • 🔌 Connected – server is active and ready
  • 🔌 Disconnected – server is not connected (click to connect)
  • 🔍 Discovered – server found via mcp.json (not yet connected)

💬 Chat with Azure OpenAI

The chat panel (MCP: Open Chat) uses Azure OpenAI’s tool‑calling capability to interpret your natural language and execute the appropriate MCP tools.

Example conversation:

You: “Show me all work items assigned to me in project ‘MyProject’”
→ Extension calls Azure DevOps MCP server’s `workitems_list` tool with filters.
→ Returns a formatted table of work items.

Rate‑limit handling: The extension automatically retries failed requests (HTTP 429) with exponential backoff.

🧩 Supported MCP Servers

The extension works with any MCP‑compatible server. Popular servers include:

• Azure DevOps MCP Server – work items, pipelines, repos, pull requests
• Azure MCP Server – ARM resources, App Services, VMs, etc.
• PostgreSQL MCP Server – database queries, schema inspection
• SQL Server MCP Server – database management
• Azure Storage MCP Server – Blob, File, Queue, Table operations
• Azure Managed Lustre MCP Server – file system management
• Azure Load Testing MCP Server – load test creation and execution
• Azure Workbooks MCP Server – workbook management

🏗️ Development

Prerequisites

• Node.js ≥ 18
• VSCode extension development dependencies

Build from Source

git clone <repository>
cd mcp-client
npm install
npm run compile        # development build
npm run watch         # watch mode

Package for Distribution

npm run package       # creates .vsix file

Run in Extension Development Host

1. Open the mcp-client folder in VSCode.
2. Press F5 to launch a new Extension Development Host window.
3. The extension will be active in that window.

Architecture

• src/extension.ts – Main extension entry point, tree‑view provider, command registrations.
• src/chatPanel.ts – Webview panel for chat, Azure OpenAI integration, tool‑calling logic.
• src/serverManager.ts – Manages MCP server connections, lifecycle, and tool discovery.
• webpack.config.js – Bundles all dependencies into a single dist/extension.js.
• .vscodeignore – Excludes unnecessary files from the published package.

📦 Packaging Notes

The extension uses webpack to bundle all dependencies (including @modelcontextprotocol/sdk, axios, zod) into a single JavaScript file. This ensures no missing‑module errors after installation.

The bundled output is placed in dist/extension.js. The .vscodeignore file excludes node_modules and includes only the dist folder.

🐛 Troubleshooting

“Cannot find module ‘zod/v3’”

This error occurs when the extension is not properly bundled. Ensure you are using the webpack‑bundled version (run npm run compile before packaging).

“Azure OpenAI rate limit exceeded”

The extension automatically retries with exponential backoff. You can also increase the delay in the code (see src/chatPanel.ts).

Server fails to connect

• Verify the server command and arguments are correct.
• Check that the server executable is in your PATH.
• Look at the VSCode Developer Tools console (Help → Toggle Developer Tools) for detailed error logs.

Sidebar not appearing

Make sure the extension is activated (it activates when the mcpServers view is requested). Click the plug icon in the Activity Bar.

📄 License

MIT – see LICENSE for details.

🙏 Acknowledgements

• Built with the Model Context Protocol SDK
• Uses Azure OpenAI for intelligent tool‑calling
• Icons from Material Design Icons

Enjoy seamless MCP server management right inside VSCode!