Skip to main content

​
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 worksCivic supports two methods depending on how your client connects:
Client typeMethodHow it works
Interactive clients (Claude Desktop, Cursor, VS Code, Gemini CLI, Goose, Windsurf)OAuthWhen 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 TokenGenerate 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:
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

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
Install Node.js 18 or later from nodejs.org and restart VS Code.
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.
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