added claude desktop instructions for MCP gateways (#656)

Author: torresmateo

app/en/guides/tool-calling/mcp-clients/claude-desktop/page.mdx

@@ -1,6 +1,193 @@
-import { Steps, Tabs, Callout } from "nextra/components";
+import { Steps, Callout } from "nextra/components";
 import { SignupLink } from "@/app/_components/analytics";
+import Image from "next/image";
 
-# Use Arcade with Claude Desktop
+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;
 
-Coming Soon
+# 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>