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;

# 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 on your user avatar to open the settings menu, then click on 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 on 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 on 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 on 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 on 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 is connected to your MCP Gateway, it's a good time to configure the MCP Gateway to your needs. Click on 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, we require human confirmation 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 is enabled, and the ask the agent to use a tool!

</Steps>