> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hasmcp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect HasMCP MCP servers to Visual Studio Code

> How to connect HasMCP servers to VS Code using native Agent Mode or extensions like Cline.

# Using MCP in Visual Studio Code

Visual Studio Code supports the Model Context Protocol (MCP) through several paths, allowing AI agents to use tools from your HasMCP servers directly in your editor.

## 1. Native Agent Mode (GitHub Copilot)

<Steps>
  <Step title="Generate a Token">
    In the HasMCP dashboard, go to your server and click **Generate Token**.
  </Step>

  <Step title="Add Server">
    Open the Command Palette (`Ctrl+Shift+P` or `Cmd+Shift+P`), type and select **MCP: Add Server**, then choose **HTTP (Http or Server-Sent Events)**.
  </Step>

  <Step title="Configure">
    * Enter a name for your server (e.g., `hasmcp-db`).
    * Select **Workspace Settings** to create a `.vscode/mcp.json` file.
    * Enter your HasMCP server URL (e.g., `https://app.hasmcp.com/mcp/<SERVER_ID>`).
  </Step>

  <Step title="Add Authentication">
    Open the generated `.vscode/mcp.json` and add the `headers` object with your token:
  </Step>
</Steps>

```json theme={null}
{
  "servers": {
    "hasmcp-server": {
      "type": "http",
      "url": "https://app.hasmcp.com/mcp/<SERVER_ID>",
      "headers": {
        "x-hasmcp-key": "Bearer <YOUR_ACCESS_TOKEN>"
      }
    }
  }
}
```

## 2. Extensions (Cline / Roo Code)

<Steps>
  <Step title="Open Configuration">
    Click the MCP icon (a plug or network icon) in the extension's sidebar, then
    click **Configure MCP Servers** or **Edit Global Config**. This opens the
    configuration JSON file.
  </Step>

  <Step title="Add Server">
    Add your HasMCP server using the Remote MCP (Bridge) format since most local
    extensions prefer stdio execution:
  </Step>
</Steps>

```json theme={null}
{
  "mcpServers": {
    "myServer": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://app.hasmcp.com/mcp/<SERVER_ID>",
        "--header",
        "x-hasmcp-key: Bearer ${HASMCP_MCP_ACCESS_TOKEN}"
      ],
      "env": {
        "HASMCP_MCP_ACCESS_TOKEN": "YOUR_TOKEN_VALUE"
      }
    }
  }
}
```

## Verifying Connections

* **In Native Mode**: Open the Chat panel, select Agent Mode, and click the 🛠️ (tools) icon. Your HasMCP server and its tools should appear in the list.
* **In Extensions**: The MCP sidebar tab will show a green status indicator once the server is successfully initialized.

## Troubleshooting

<AccordionGroup>
  <Accordion title="SSE Support">
    If using native VS Code support, ensure you are on version 1.101 or later
    for full remote MCP compatibility.
  </Accordion>

  <Accordion title="Logs">
    You can view detailed connection logs by selecting your server in the **MCP:
    List Servers** view or checking the **Output** panel in VS Code.
  </Accordion>
</AccordionGroup>

```
```