Skip to main content

VS Code Integration

Connect your MCP bundles to VS Code to give Copilot and AI assistants access to external tools and APIs.

Requirements​

  • VS Code with MCP support (install MCP extension if needed)
  • A bundle enabled in your MCPBundles dashboard
  • Credentials connected for providers in your bundle

Time to complete: 3-5 minutes

Step-by-Step Setup​

1. Install MCP Extension (if needed)​

  1. Open VS Code
  2. Go to Extensions (Cmd/Ctrl + Shift + X)
  3. Search for "MCP" or "Model Context Protocol"
  4. Install the MCP extension
  5. Reload VS Code if prompted

2. Get Your Bundle URL​

  1. Log in to MCPBundles Dashboard
  2. Click on the bundle you want to use
  3. Copy the MCP Server URL

3. Add MCP Server​

  1. Open Command Palette (Cmd/Ctrl + Shift + P)
  2. Type: "MCP: Add Server"
  3. Select HTTP as transport type
  4. Fill out the form:
    • URL: Your bundle URL from step 2
    • Name: Your bundle name (e.g., "Marketing Automation")
    • Scope: Choose Global (all workspaces) or Workspace (this project only)
  5. Click Add or Save

4. Restart VS Code​

  1. Quit VS Code completely
  2. Reopen it
  3. Wait 10-20 seconds for MCP to initialize

5. Verify Connection​

  1. Open Command Palette
  2. Type: "MCP: List Servers"
  3. Your bundle should appear in the list

Or ask Copilot: "What MCP tools do you have access to?"

Using Tools in VS Code​

Once connected, AI assistants can use your tools when relevant.

Example Prompts (with Copilot)​

Fetch data for development:

"Get the latest Smartlead campaigns and generate TypeScript interfaces for them"

GitHub operations:

"List my GitHub repos, find the one with the most stars, and show me recent commits"

CRM integration:

"Fetch the latest 20 HubSpot contacts and create a CSV import script"

Copilot will call tools, get real data, and use it for code generation.

Configuration Scopes​

Global Scope​

Pros:

  • Available in all VS Code workspaces
  • Configure once, use everywhere

Cons:

  • Tools accessible to all projects

Use when: You use the same tools across multiple projects.

Workspace Scope​

Pros:

  • Tools only available in this project
  • Different bundles per project
  • Team can share config via .vscode/mcp.json

Cons:

  • Need to configure per workspace

Use when: Different projects need different tools.

Troubleshooting​

"MCP server not responding"​

Cause: URL is invalid or bundle is disabled.

Fix:

  • Verify URL is exactly as shown in dashboard (including https://)
  • Check bundle is enabled (Dashboard → Bundles)
  • Try removing and re-adding the server
  • Restart VS Code

Tools don't appear after adding server​

Cause: VS Code hasn't reloaded MCP config.

Fix:

  1. Quit VS Code completely
  2. Wait 5 seconds
  3. Reopen VS Code
  4. Wait 20 seconds for MCP to initialize
  5. Check "MCP: List Servers" again

"Authentication required" when calling tools​

Cause: Provider credentials not connected.

Fix:

  1. Go to Dashboard → Providers
  2. Find the provider for that tool
  3. Click Connect and complete OAuth or add API key
  4. Try the tool again in VS Code

See Provider Credentials Guide.

Can't find "MCP: Add Server" command​

Cause: MCP extension not installed or enabled.

Fix:

  1. Extensions → Search "MCP"
  2. Install the MCP extension
  3. Reload VS Code
  4. Try the command again

Tools work but return empty data​

Cause: Connected to wrong account or no data exists.

Fix:

  1. Dashboard → Providers → [Provider]
  2. Check which account is connected
  3. If wrong, click Reconnect and use correct account
  4. Verify data exists in the provider's app

Advanced Configuration​

Multiple Bundles​

Add multiple bundles:

  1. Command Palette → "MCP: Add Server"
  2. Add first bundle
  3. Repeat for each additional bundle

All tools from all bundles will be available.

Manual Config File​

You can also edit the config file directly:

Global config:

  • macOS/Linux: ~/.vscode/mcp.json
  • Windows: %APPDATA%\Code\User\mcp.json

Workspace config:

  • .vscode/mcp.json in your project root

Example:

{
  "mcpServers": {
    "marketing": {
      "url": "https://mcp.mcpbundles.com/bundle/abc123"
    },
    "dev-tools": {
      "url": "https://mcp.mcpbundles.com/bundle/def456"
    }
  }
}

Restart VS Code after editing.

With Other MCP Servers​

MCPBundles works alongside other MCP servers:

{
  "mcpServers": {
    "mcpbundles-marketing": {
      "url": "https://mcp.mcpbundles.com/bundle/abc123"
    },
    "local-filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/files"]
    }
  }
}

Limitations​

VS Code MCP Constraints​

  • Extension limitations: Depends on MCP extension capabilities
  • Copilot integration: Works with current GitHub Copilot
  • Network required: Tools need internet access

Bundle Readiness​

Copilot can only use tools from bundles that are:

  • Operational (all providers connected)
  • Partially Operational (some tools work)

If bundle is "Blocked", connect credentials first.

Tips​

Workspace-Specific Bundles​

For team projects:

  1. Add bundle with Workspace scope
  2. Commit .vscode/mcp.json to git
  3. Team members get the config automatically
  4. Everyone has the same tools

Testing Before Adding​

  1. Add bundle with Workspace scope first
  2. Test in one project
  3. If it works, add with Global scope

Next Steps​

Need Help?​