VS Code Setup

Connect VS Code to Civic with MCP extension support in 3 minutes

Prerequisites

VS Code 1.99+

MCP is built into VS Code 1.99 and later. No extension needed.

Civic Account

Create a free account and configure your tools at app.civic.com

How authentication works

Civic supports two methods depending on how your client connects:

Client type	Method	How it works
Interactive clients (Claude Desktop, Cursor, VS Code, Gemini CLI, Goose, Windsurf)	OAuth	When you connect, your client opens a browser window to app.civic.com. Sign in once — no manual token needed.
Automated agents (LangChain, custom scripts, OpenAI SDK, Anthropic SDK)	Civic Token	Generate a bearer token at app.civic.com → Install → MCP URL. Pass it as an Authorization: Bearer header.

See Get Your Credentials for full details.

Setup Options

VS Code supports both direct remote HTTP (recommended) and Hub Bridge.

Option 1: Remote HTTP Endpoint (Direct Connection)

1. Visit app.civic.com

   1. Sign in to app.civic.com
   2. Select the MCP servers you want to use
   3. Copy the MCP URL: https://app.civic.com/hub/mcp
2. Add to VS Code Settings

   1. Open VS Code Settings (File → Preferences → Settings)
   2. Search for “MCP”
   3. In the MCP Servers section, click Add Server
   4. Configure:
      • Name: Civic
      • Type: http
      • URL: https://app.civic.com/hub/mcp
   5. Save the configuration
3. Authenticate

   On first use of any MCP tool, VS Code opens a browser window to app.civic.com. Sign in with your Civic account — this links the session to your account and toolkit. No token needed.

   MCP is built into VS Code 1.99+. If you’re on an older version, install the GitHub Copilot extension which includes MCP support.

4. Test Connection

   Try these commands to verify: “What MCP servers are available?”

Option 2: Hub Bridge (Local Connection)

What is Hub Bridge? Hub Bridge (@civic/hub-bridge) is a lightweight local proxy that runs on your machine via npx and bridges stdio-only MCP clients to Civic’s remote HTTP endpoint. Use it when your client doesn’t support remote HTTP MCP connections natively. If your client supports HTTP/Streamable HTTP MCP — use that instead (it’s simpler and has no Node.js dependency).

Full Hub Bridge setup guide →

1. Click 'Add to VS Code'

   Use the one-click install button below:

   📦 Add to VS Code (Hub Bridge)

2. Install in VS Code

   When VS Code opens, click “Install” to add the Civic MCP server

3. Enable MCP Features

   In VS Code Settings, search for “MCP” and enable the required MCP extension options

4. First-Time Authentication

   The first time you use any MCP command, the Hub Bridge will:

   • Automatically download and install itself
   • Handle authentication directly in the chat interface
   • Let you select which tools to connect from app.civic.com

Test Your Connection

Try these prompts in VS Code’s chat/AI features:

"What MCP servers are available?"
"Show me my connected tools"
"Help me set up GitHub integration"

Manual Setup (Alternative)

If the one-click install doesn’t work, add Civic manually:

Method 1: Via VS Code Settings (Recommended)

1. Open VS Code Settings

   Go to File → Preferences → Settings, then search for “MCP”

2. Add MCP Server

   1. Look for MCP Servers section in settings
   2. Click Add Server or +
   3. Configure the server:
      • Name: Civic
      • Type: stdio
      • Command: npx -y @civic/hub-bridge
   4. Save the configuration
3. Enable and Test

   Enable MCP features and test with: “What MCP servers are available?”

Method 2: Via Configuration File

1. Create MCP Configuration File

   Create a file called .mcp.json in your workspace root directory

2. Add Configuration

   Add the following content:

   {
     "servers": {
       "civic": {
         "type": "stdio",
         "command": "npx",
         "args": ["-y", "@civic/hub-bridge"]
       }
     }
   }
   
3. Restart VS Code

   Save the file and restart VS Code. The MCP server will be automatically detected.

4. Test Connection

   Test with: “What MCP servers are available?”

Troubleshooting

VS Code doesn't open when I click the install button

Make sure VS Code is installed and try copying this URL manually:

vscode:mcp/install?%7B%22name%22%3A%22Civic%22%2C%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40civic%2Fhub-bridge%22%5D%7D

'Node.js not found' error

Install Node.js 18 or later from nodejs.org and restart VS Code.

MCP settings not found

MCP is built into VS Code 1.99 and later — no extension needed. If you’re on an older version, install the GitHub Copilot extension. Check your VS Code version via Help → About.

Authentication window doesn't open

The Hub Bridge should handle authentication in the chat. If it doesn’t:

1. Restart VS Code
2. Make sure you’re trying to use a tool that requires authentication
3. Try running the Hub Bridge manually: npx -y @civic/hub-bridge

Managing Your Tools

Adding More Tools

You can add new tools directly in your VS Code chat:

"Connect me to GitHub"
"Add Slack to my available tools"  
"I need access to PostgreSQL"
"Show me what tools are available to connect"

VS Code will handle the connection process and guide you through any required authentication steps.

Removing Tools

You can disconnect from specific tools directly in chat:

"Disconnect from Slack"  
"Remove GitHub from my tools"
"What tools do I currently have connected?"
"Stop my access to Dropbox"

Removing the MCP Server

To remove Civic completely:

Via Settings:

1. Open MCP Settings

   Go to File → Preferences → Settings and search for “MCP”

2. Delete Server

   1. Find “Civic” in your MCP servers list
   2. Click the Delete or Remove button next to it

Via Configuration File:

1. Edit Configuration

   Open your .mcp.json file in the workspace root

2. Remove Entry

   Delete the "civic" entry from the servers object

3. Save and Restart

   Save the file and restart VS Code

Resources

Hub Bridge Guide

Detailed Hub Bridge setup for VS Code

Client Compatibility

Technical details about VS Code MCP support

Troubleshooting

Common VS Code connection issues

Get Help

Join our developer community for setup assistance