MCP Manager
Simplifies MCP (Model Context Protocol) server management with Azure DevOps and Figma integration via GitHub Copilot Chat.
Features
- Zero Configuration MCP Setup: Automatically install and configure MCP servers with a single command
- GitHub Copilot Chat Integration: Use
@mcp in GitHub Copilot Chat to query Azure DevOps and Figma
- Unified Interface: Manage multiple MCP servers from one place
- Status Bar Integration: See connected MCP servers at a glance
- Secure Credential Management: Store API keys and tokens securely in VS Code settings
Getting Started
Prerequisites
- Visual Studio Code 1.105.0 or higher
- Node.js 18 or higher
- GitHub Copilot extension installed
- Azure DevOps Personal Access Token (PAT) - Create one here
- Figma Access Token - Create one here
Installation
- Install the extension from the VS Code Marketplace (or install from VSIX)
- Run the command: MCP: Setup Servers (
Ctrl+Shift+P / Cmd+Shift+P)
- Enter your credentials when prompted:
- Azure DevOps PAT
- Azure DevOps Organization URL
- Figma Access Token
Usage
Using the Chat Participant
Open GitHub Copilot Chat and use @mcp to interact with your MCP servers:
@mcp Show me my recent Azure DevOps work items
@mcp List pull requests in my Azure DevOps project
@mcp Get Figma designs for the login component
The extension automatically routes your query to the appropriate MCP server based on keywords.
Commands
- MCP: Setup Servers - Configure and connect to MCP servers
- MCP: Show Status - View connected servers and available tools
- MCP: Configure Credentials - Update API keys and tokens
- MCP: Disconnect All Servers - Disconnect all MCP servers
Status Bar
Click the status bar item $(plug) MCP: N to quickly view connected servers.
Configuration
Configure the extension via VS Code settings:
{
"mcpManager.azureDevOps.pat": "your-pat-here",
"mcpManager.azureDevOps.organization": "https://dev.azure.com/yourorg",
"mcpManager.figma.accessToken": "your-figma-token",
"mcpManager.autoConnect": true
}
Extension Settings
| Setting |
Type |
Default |
Description |
mcpManager.azureDevOps.pat |
string |
"" |
Azure DevOps Personal Access Token |
mcpManager.azureDevOps.organization |
string |
"" |
Azure DevOps Organization URL |
mcpManager.figma.accessToken |
string |
"" |
Figma Access Token |
mcpManager.autoConnect |
boolean |
true |
Auto-connect to servers on startup |
Examples
Azure DevOps Queries
- "Show my assigned work items"
- "List recent pull requests"
- "Get details for work item #1234"
Figma Queries
- "List all design files in my team"
- "Get components from [file-name]"
- "Show recent comments on [design]"
Troubleshooting
MCP Server Connection Failed
- Verify your credentials are correct
- Check that Node.js is installed and available in PATH
- Try disconnecting and reconnecting: MCP: Disconnect All Servers then MCP: Setup Servers
Chat Participant Not Working
- Ensure GitHub Copilot extension is installed and active
- Restart VS Code
- Check that the extension is activated (look for status bar item)
Development
Building from Source
git clone https://github.com/yourusername/snap-code-plugin
cd snap-code-plugin
npm install
npm run compile
Running in Development
- Open the project in VS Code
- Press
F5 to launch Extension Development Host
- Test the extension in the new window
Project Structure
├── src/
│ ├── extension.ts # Main extension entry point
│ ├── mcpManager.ts # MCP server management
│ ├── chatParticipant.ts # GitHub Copilot Chat integration
│ ├── commands.ts # VS Code commands
│ └── test/ # Test files
├── media/ # Icons and assets
├── package.json # Extension manifest
└── README.md
Release Notes
0.0.1
Initial release:
- MCP server management for Azure DevOps and Figma
- GitHub Copilot Chat integration with @mcp participant
- Configuration UI for credentials
- Status bar integration
- Auto-connect on startup
📚 Documentation
For detailed documentation, see the documentation folder:
License
MIT
Credits
Enjoy using MCP Manager! 🚀
