MDX
import { Steps, Callout } from "nextra/components";
import { SignupLink } from "@/app/_components/analytics";
import Image from "next/image";
export const IMAGE_SCALE_FACTOR = 2;
export const STEP_1_DARK_WIDTH = 582;
export const STEP_1_DARK_HEIGHT = 966;
export const STEP_1_LIGHT_WIDTH = 578;
export const STEP_1_LIGHT_HEIGHT = 960;
export const STEP_2_DARK_WIDTH = 2388;
export const STEP_2_DARK_HEIGHT = 1242;
export const STEP_2_LIGHT_WIDTH = 2352;
export const STEP_2_LIGHT_HEIGHT = 1202;
export const STEP_3_DARK_WIDTH = 1104;
export const STEP_3_DARK_HEIGHT = 874;
export const STEP_3_LIGHT_WIDTH = 1094;
export const STEP_3_LIGHT_HEIGHT = 882;
export const STEP_4_DARK_WIDTH = 1860;
export const STEP_4_DARK_HEIGHT = 206;
export const STEP_4_LIGHT_WIDTH = 1826;
export const STEP_4_LIGHT_HEIGHT = 210;
export const STEP_5_DARK_WIDTH = 1208;
export const STEP_5_DARK_HEIGHT = 1696;
export const STEP_5_LIGHT_WIDTH = 1208;
export const STEP_5_LIGHT_HEIGHT = 1696;
export const STEP_6_DARK_WIDTH = 1874;
export const STEP_6_DARK_HEIGHT = 210;
export const STEP_6_LIGHT_WIDTH = 1820;
export const STEP_6_LIGHT_HEIGHT = 216;
export const STEP_7_DARK_WIDTH = 1852;
export const STEP_7_DARK_HEIGHT = 2458;
export const STEP_7_LIGHT_WIDTH = 1848;
export const STEP_7_LIGHT_HEIGHT = 2450;
<!-- Editorial: Headings section - Changed to sentence case; Arcade Terminology section - Corrected "MCP Gateway" to "MCP gateway" -->
# Use Arcade in Claude Desktop
<GuideOverview>
<GuideOverview.Outcomes>
Connect Claude Desktop to an Arcade MCP gateway.
</GuideOverview.Outcomes>
<GuideOverview.Prerequisites>
1. Create an <SignupLink linkLocation="docs:claude-desktop-client">Arcade account</SignupLink>
2. Get an [Arcade API key](/get-started/setup/api-keys)
3. Create an [Arcade MCP gateway](/guides/create-tools/mcp-gateways) and select the tools you want to use
</GuideOverview.Prerequisites>
</GuideOverview>
<Callout type="info">
For Claude Desktop, you need to set the `Authorization` field to `Arcade Auth`
in the dashboard. If you are using the `Arcade Headers` auth mode, you won't
be able to use it with Claude Desktop.
</Callout>
<Steps>
### Go to your Claude Desktop setting page
On the bottom left corner of Claude Desktop, click your user avatar to open the settings menu, then click the "Settings" button.
<Image
alt={"Step 1: Click on the settings icon on Claude Desktop"}
className="max-w-full dark:hidden mt-4"
src={"/images/mcp-gateway/claude-desktop/step-1-light.jpg"}
width={STEP_1_LIGHT_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_1_LIGHT_HEIGHT / IMAGE_SCALE_FACTOR}
/>
<Image
alt={"Step 1: Click on the settings icon on Claude Desktop"}
className="hidden max-w-full dark:block mt-4"
src={"/images/mcp-gateway/claude-desktop/step-1.jpg"}
width={STEP_1_DARK_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_1_DARK_HEIGHT / IMAGE_SCALE_FACTOR}
/>
### Add a custom connector
On the settings page, click the "Connectors" tab, and then on the "Add custom Connector" button.
<Image
alt={"Step 2: Add a custom connector"}
className="max-w-full dark:hidden mt-4"
src={"/images/mcp-gateway/claude-desktop/step-2-light.jpg"}
width={STEP_2_LIGHT_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_2_LIGHT_HEIGHT / IMAGE_SCALE_FACTOR}
/>
<Image
alt={"Step 2: Add a custom connector"}
className="hidden max-w-full dark:block mt-4"
src={"/images/mcp-gateway/claude-desktop/step-2.jpg"}
width={STEP_2_DARK_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_2_DARK_HEIGHT / IMAGE_SCALE_FACTOR}
/>
A modal dialog will open asking you for a name and a URL. Enter a name for your connector, and the URL of your MCP gateway. Then, click the "Add" button.
<Image
alt={"Step 3: Enter a name and URL for your connector"}
className="max-w-full dark:hidden mt-4"
src={"/images/mcp-gateway/claude-desktop/step-3-light.jpg"}
width={STEP_3_LIGHT_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_3_LIGHT_HEIGHT / IMAGE_SCALE_FACTOR}
/>
<Image
alt={"Step 3: Enter a name and URL for your connector"}
className="hidden max-w-full dark:block mt-4"
src={"/images/mcp-gateway/claude-desktop/step-3.jpg"}
width={STEP_3_DARK_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_3_DARK_HEIGHT / IMAGE_SCALE_FACTOR}
/>
### Authenticate with your Arcade account
You will see a new connector added to your list of connectors. Click the "Connect" button to authenticate with your Arcade account.
<Image
alt={"Step 4: Authenticate with your Arcade account"}
className="max-w-full dark:hidden mt-4"
src={"/images/mcp-gateway/claude-desktop/step-4-light.jpg"}
width={STEP_4_LIGHT_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_4_LIGHT_HEIGHT / IMAGE_SCALE_FACTOR}
/>
<Image
alt={"Step 4: Authenticate with your Arcade account"}
className="hidden max-w-full dark:block mt-4"
src={"/images/mcp-gateway/claude-desktop/step-4.jpg"}
width={STEP_4_DARK_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_4_DARK_HEIGHT / IMAGE_SCALE_FACTOR}
/>
Your browser will open a new tab to authenticate with your Arcade account. Check that the URL matches the one in the modal dialog, and then click the "Allow" button.
<Image
alt={"Step 5: Allow authentication with your Arcade account"}
className="max-w-full dark:hidden mt-4"
src={"/images/mcp-gateway/claude-desktop/step-5-light.jpg"}
width={STEP_5_LIGHT_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_5_LIGHT_HEIGHT / IMAGE_SCALE_FACTOR}
/>
<Image
alt={"Step 5: Allow authentication with your Arcade account"}
className="hidden max-w-full dark:block mt-4"
src={"/images/mcp-gateway/claude-desktop/step-5.jpg"}
width={STEP_5_DARK_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_5_DARK_HEIGHT / IMAGE_SCALE_FACTOR}
/>
### Configure the MCP gateway
Now Claude Desktop connects to your MCP gateway, it's a good time to configure the MCP gateway to your needs. Click the "Configure" button to open the configuration dialog.
<Image
alt={"Step 6: Configure the MCP Gateway"}
className="max-w-full dark:hidden mt-4"
src={"/images/mcp-gateway/claude-desktop/step-6-light.jpg"}
width={STEP_6_LIGHT_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_6_LIGHT_HEIGHT / IMAGE_SCALE_FACTOR}
/>
<Image
alt={"Step 6: Configure the MCP Gateway"}
className="hidden max-w-full dark:block mt-4"
src={"/images/mcp-gateway/claude-desktop/step-6.jpg"}
width={STEP_6_DARK_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_6_DARK_HEIGHT / IMAGE_SCALE_FACTOR}
/>
In this configuration pane, you can configure which tools are available to Claude Desktop, and whether or not they require human confirmation. On this example MCP gateway, confirmation is required for all tools that may have destructive actions, or actions with potentially undesired consequences.
<Image
alt={"Step 7: Configure the MCP Gateway"}
className="max-w-full dark:hidden mt-4"
src={"/images/mcp-gateway/claude-desktop/step-7-light.jpg"}
width={STEP_7_LIGHT_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_7_LIGHT_HEIGHT / IMAGE_SCALE_FACTOR}
/>
<Image
alt={"Step 7: Configure the MCP Gateway"}
className="hidden max-w-full dark:block mt-4"
src={"/images/mcp-gateway/claude-desktop/step-7.jpg"}
width={STEP_7_DARK_WIDTH / IMAGE_SCALE_FACTOR}
height={STEP_7_DARK_HEIGHT / IMAGE_SCALE_FACTOR}
/>
### Try it out
You can now open a new chat within Claude Desktop. Ensure that your connector works, and the ask the agent to use a tool.
</Steps>Last updated on