# Configuración de VS Code

> Conecte VS Code a graph8 mediante soporte MCP nativo usando .vscode/mcp.json

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

VS Code incluye soporte nativo para MCP a partir de la versión 1.86. Agregue un archivo `.vscode/mcp.json` con alcance de espacio de trabajo en su repositorio y las herramientas de graph8 quedarán disponibles para GitHub Copilot Agent Mode y cualquier otra extensión compatible con MCP.

> **Tip:**
> Pruebe el nivel para desarrolladores de forma gratuita: 1,000 créditos, sin necesidad de tarjeta. [Comience aquí](https://auth.graph8.com/en/signup).

## Requisitos previos

- VS Code 1.86 o posterior
- GitHub Copilot con Agent Mode habilitado (u otra extensión compatible con MCP)
- Para stdio: Python 3.10+ y una clave de API personal desde **Perfil -> Desarrollador**

## MCP alojado (OAuth remoto)

Cree `.vscode/mcp.json` en su espacio de trabajo:

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

1. Guarde el archivo y recargue la ventana de VS Code (Cmd-Shift-P -> Developer: Reload Window).
2. Abra el panel de chat de Copilot y cambie a Agent Mode.
3. Pregunte: "Encuentra 10 VP de Ingeniería en SaaS Serie B usando graph8."
4. VS Code abrirá una pestaña del navegador para OAuth en el primer uso. Inicie sesión y regrese a VS Code.

## MCP auto-alojado (stdio)

Para quienes prefieren almacenar las credenciales de forma local o trabajan en entornos sin conexión a internet, ejecute el servidor MCP como proceso hijo.

```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 solicitará la clave de API en el primer uso y la almacenará de forma segura.

Cambie `G8_MCP_MODE` entre `dev` (17 herramientas para trabajo en base de código), `gtm` (23 herramientas para trabajo en campañas) y `all` según lo que esté desarrollando. Consulte [Modos](https://docs.graph8.com/developers/mcp/#modes).

## Configuración de espacio de trabajo vs. configuración de usuario

- `.vscode/mcp.json` en el espacio de trabajo: se comparte con el repositorio, ideal para configuraciones a nivel de equipo (no incluya secretos en este archivo).
- `~/.vscode/mcp.json` (o la configuración de usuario de VS Code): personal, se aplica a todos los espacios de trabajo.

Para un equipo SaaS que quiere que todos sus ingenieros se conecten a graph8 desde el mismo repositorio, incluya el archivo `.vscode/mcp.json` de OAuth alojado en el repositorio. Cada ingeniero iniciará sesión con su propia cuenta de graph8 en el primer uso.

## Ejemplo práctico: instalar el seguimiento de graph8 en su aplicación Next.js

Con el modo `dev` configurado, solicite a Copilot Agent Mode:

> Conecta este repositorio a graph8, analízalo e instala el fragmento de seguimiento para Next.js. Luego genera un formulario progresivo de captura de correo electrónico para la página de precios.

El agente leerá tu código y luego utilizará `g8_connect_repo`, `g8_scan_repo`, `g8_get_tracking_snippet` y `g8_get_form_template` en secuencia. Consulte la página de [Ejemplos completos](https://docs.graph8.com/developers/mcp-examples/) para ver el recorrido detallado.

## Relacionados

- [Descripción general del servidor MCP](https://docs.graph8.com/developers/mcp/)
- [Referencia de herramientas MCP](https://docs.graph8.com/developers/mcp-tools/)
- [Preguntas frecuentes sobre MCP](https://docs.graph8.com/developers/mcp-faq/)
- [Configuración de Claude Code](https://docs.graph8.com/developers/claude-code-setup/)