import { Steps, Callout } from "nextra/components";
import { SignupLink } from "@/app/_components/analytics";

# Use Arcade in Visual Studio Code

In this guide, you'll learn how to connect Visual Studio Code to an Arcade MCP Gateway.

<Steps>

### Prerequisites

1. Create an <SignupLink linkLocation="docs:claude-desktop-client">Arcade account</SignupLink>
2. Create an [Arcade MCP Gateway](/guides/create-tools/mcp-gateways) and select the tools you want to use

### Set up Visual Studio Code

3. Download and open [Visual Studio Code](https://code.visualstudio.com/download) (version 1.107.0 or higher)
4. Open the command palette and select **MCP: Add Server...**
5. Choose **HTTP**
6. Paste the URL of your MCP Gateway.
7. Give your MCP server a name, like `mcp-arcade`

Visual Studio Code will update your `mcp.json` file.

### Start the MCP Server in Visual Studio Code

8. In the `mcp.json` file or in the "Extensions" > "MCP Servers - Installed" pane, click the "Start" button next to your MCP server.
9. Visual Studio Code will prompt you to authenticate, and you may see a prompt about opening an external site: `cloud.arcade.dev`. You can safely allow both of these.
10. If you see an Arcade login screen, authenticate with your Arcade account.
11. You should see an Arcade consent screen asking you to authorize Visual Studio Code to access your Arcade account. Click "Allow" to continue.
12. You should then see a webpage from Visual Studio Code saying the sign in was successful. You may see a prompt from your browser to open a link in Visual Studio Code. You can safely allow this.

Your MCP Server should now be running and you can use it in Visual Studio Code.

### Try it out

13. Open your IDE's chat pane.
14. Make sure you are in **Agent** mode
15. Ask the agent to use a tool!

</Steps>


Note: if you are using the Arcade Header auth mode for your MCP Gateway, you will manually need to add the headers property in your `mcp.json` file:

```json
{
  "servers": {
    "mcp-arcade": {
      "url": "https://api.arcade.dev/mcp/<YOUR-GATEWAY-SLUG>",
      "type": "http",
      "headers": {
        "Authorization": "Bearer {arcade_api_key}",
        "Arcade-User-ID": "{arcade_user_id}"
      }
    }
  }
}
```

You will not see the authentication prompts when you start the MCP Server in Visual Studio Code because the API Key is passed directly.