Skip to main content

VS Code Setup

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

note

How authentication works

Civic 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. 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. 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. 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.

    note

    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. 4
    Test Connection

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

Option 2: Hub Bridge (Local Connection)​

info

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. 1
    Click 'Add to VS Code'

    Use the one-click install button below:

    📦 Add to VS Code (Hub Bridge)

  2. 2
    Install in VS Code

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

  3. 3
    Enable MCP Features

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

  4. 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. 1
    Open VS Code Settings

    Go to File → Preferences → Settings, then search for "MCP"

  2. 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. 3
    Enable and Test

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

Method 2: Via Configuration File​

  1. 1
    Create MCP Configuration File

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

  2. 2
    Add Configuration

    Add the following content:

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

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

  4. 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. 1
    Open MCP Settings

    Go to File → Preferences → Settings and search for "MCP"

  2. 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. 1
    Edit Configuration

    Open your .mcp.json file in the workspace root

  2. 2
    Remove Entry

    Delete the "civic" entry from the servers object

  3. 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