# VS Code Setup

> Connect VS Code to graph8 via native MCP support using .vscode/mcp.json

Source: https://docs.graph8.com/developers/vscode-setup/

VS Code has native MCP support starting in 1.86. Drop a workspace-scoped `.vscode/mcp.json` file in your repo and graph8 tools become available to GitHub Copilot Agent Mode and any other MCP-aware extension.

> **Tip:**
> Try the developer tier free - 1,000 credits, no card required. [Get started](https://auth.graph8.com/en/signup).

## Prerequisites

- VS Code 1.86 or later
- GitHub Copilot with Agent Mode enabled (or another MCP-aware extension)
- For stdio: Python 3.10+ and a personal API key from **Profile -> Developer**

## Hosted MCP (remote OAuth)

Create `.vscode/mcp.json` in your workspace:

```json
{
  "servers": {
    "graph8": {
      "type": "http",
      "url": "https://be.graph8.com/mcp/"
    }
  }
}
```

1. Save the file and reload the VS Code window (Cmd-Shift-P -> Developer: Reload Window).
2. Open the Copilot chat panel and switch to Agent Mode.
3. Ask: "Find 10 VP Engineering at Series B SaaS using graph8."
4. VS Code opens a browser tab for OAuth on first use. Sign in and return to VS Code.

## Self-hosted MCP (stdio)

For users who prefer local credential storage or work in air-gapped environments, run the MCP server as a child process.

```json
{
  "servers": {
    "graph8": {
      "type": "stdio",
      "command": "uvx",
      "args": ["g8-mcp-server"],
      "env": {
        "G8_API_KEY": "${input:g8-api-key}",
        "G8_MCP_MODE": "dev"
      }
    }
  },
  "inputs": [
    {
      "id": "g8-api-key",
      "type": "promptString",
      "description": "graph8 personal API key (Profile -> Developer)",
      "password": true
    }
  ]
}
```

VS Code prompts for the API key on first use and stores it securely.

Switch `G8_MCP_MODE` between `dev` (17 tools for codebase work), `gtm` (23 tools for campaign work), and `all` depending on what you are building. See [Modes](https://docs.graph8.com/developers/mcp/#modes).

## Workspace vs user config

- `.vscode/mcp.json` in the workspace - shared with the repo, ideal for team-wide setups (no secrets in this file).
- `~/.vscode/mcp.json` (or VS Code's user config) - personal, applies across all workspaces.

For a SaaS team that wants every engineer connected to graph8 from the same repo, commit the hosted-OAuth `.vscode/mcp.json` to the repo. Each engineer signs in with their own graph8 account on first use.

## Worked example: install graph8 tracking in your Next.js app

With `dev` mode set, ask Copilot Agent Mode:

> Connect this repo to graph8, scan it, and install the tracking snippet for Next.js. Then generate a progressive email-capture form for the pricing page.

The agent will read your code, then use `g8_connect_repo`, `g8_scan_repo`, `g8_get_tracking_snippet`, and `g8_get_form_template` in sequence. See the [End-to-end examples](https://docs.graph8.com/developers/mcp-examples/) page for the full walkthrough.

## Related

- [MCP Server overview](https://docs.graph8.com/developers/mcp/)
- [MCP Tool Reference](https://docs.graph8.com/developers/mcp-tools/)
- [MCP FAQ](https://docs.graph8.com/developers/mcp-faq/)
- [Claude Code setup](https://docs.graph8.com/developers/claude-code-setup/)