Use Arcade in Visual Studio Code

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

Prerequisites

Create an Arcade
Create an Arcade MCP Gateway and select the you want to use

Set up Visual Studio Code

Download and open Visual Studio Code (version 1.107.0 or higher)
Open the command palette and select : Add Server…
Choose HTTP
Paste the URL of your Gateway.
Give your server a name, like mcp-arcade

Visual Studio Code will update your mcp.json file.

Start the MCP Server in Visual Studio Code

In the mcp.json file or in the “Extensions” > “ Servers - Installed” pane, click the “Start” button next to your .
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.
If you see an Arcade login screen, authenticate with your Arcade .
You should see an Arcade consent screen asking you to authorize Visual Studio Code to access your Arcade . Click “Allow” to continue.
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 Server should now be running and you can use it in Visual Studio Code.

Try it out

Open your IDE’s chat pane.
Make sure you are in mode
Ask the to use a !

Note: if you are using the Arcade Header auth mode for your 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 Server in Visual Studio Code because the is passed directly.