# VS Code quickstart

> Connect VS Code to the hosted vvgen MCP server.

You need an API key from the [dashboard](https://vincevangen.com/app/keys) (`igk_live_...`, shown once). VS Code asks for it when the
server first starts and stores it for you, so you do not put it in a file or in your environment.

## 1. Add the server

Use the **Install in VS Code** button on this page, or add it by hand. In a repo, create `.vscode/mcp.json`. For
all projects, run **MCP: Open User Configuration** from the Command Palette.

```json
{
  "inputs": [
    { "id": "vvgen-api-key", "type": "promptString", "description": "vincevangen API key (igk_live_...)", "password": true }
  ],
  "servers": {
    "vvgen": {
      "type": "http",
      "url": "https://api.vincevangen.com/mcp",
      "headers": { "Authorization": "Bearer ${input:vvgen-api-key}" }
    }
  }
}
```

Open the file and select **Start** above the `vvgen` entry. Paste your key into the prompt. **MCP: List Servers**
shows the server and its tools.

## 2. Use it

Open Chat, switch to Agent mode and ask:

> Generate a studio product photo of a ceramic pour-over dripper on a transparent background.

VS Code asks before running a tool the first time. The result has file links and a preview; the full image comes
through [`vvgen_get_file`](https://vincevangen.com/docs/tools.md#vvgen_get_file).

## Troubleshooting

| Symptom | Cause |
|---|---|
| 401 | The key was mistyped or revoked. Run **MCP: List Servers**, select `vvgen` and choose **Show Output** to see the error, then create a new key in the dashboard. |
| Tools missing | VS Code limits how many tools it exposes at once; disable servers you do not use from the tools picker in Chat. |
| 402 | Out of credits. See [Concepts](https://vincevangen.com/docs/concepts.md#errors). |