import { Steps } from "nextra/components";
import { SignupLink } from "@/app/_components/analytics";
import Image from "next/image";

export const IMAGE_SCALE_FACTOR = 2;
export const STEP_1_WIDTH = 1058;
export const STEP_1_HEIGHT = 462;
export const STEP_2_WIDTH = 1246;
export const STEP_2_HEIGHT = 902;
export const STEP_3_WIDTH = 924;
export const STEP_3_HEIGHT = 1074;
export const STEP_4_WIDTH = 1512;
export const STEP_4_HEIGHT = 790;

# Use Arcade in Microsoft Copilot Studio

<GuideOverview>
<GuideOverview.Outcomes>

Connect Microsoft Copilot Studio to an Arcade MCP Gateway.

</GuideOverview.Outcomes>

<GuideOverview.Prerequisites>

1. A Microsoft 365 subscription with access to Copilot Studio
2. Create an <SignupLink linkLocation="docs:copilot-studio-client">Arcade account</SignupLink>
3. Get an [Arcade API key](/get-started/setup/api-keys)
4. Create an [Arcade MCP Gateway](/guides/mcp-gateways) and select the tools you want to use

</GuideOverview.Prerequisites>

</GuideOverview>

<Steps>

### Create or open your agent

In [Copilot Studio](https://copilotstudio.microsoft.com/), create a new agent or open an existing one that you want to connect to Arcade tools.

### Add a new MCP tool

1. Inside your agent, click the **Tools** tab in the navigation panel
2. Click on **Add a tool**
3. In the Add tools panel, select **Model Context Protocol**
4. Click on **New tool** to configure a new MCP connection

<Image
  alt={"Step 1: Navigate to the Tools menu in Copilot Studio"}
  className="max-w-full mt-4"
  src={"/images/mcp-gateway/copilot-studio/step-1.png"}
  width={STEP_1_WIDTH / IMAGE_SCALE_FACTOR}
  height={STEP_1_HEIGHT / IMAGE_SCALE_FACTOR}
/>

### Configure the MCP Gateway connection

In the Model Context Protocol configuration dialog:

1. Enter a **Server name** for your connection (for example, "PersonalAssistantTools")
2. Add a **Server description** to help identify the tools available
3. Enter your Arcade MCP Gateway URL in the **Server URL** field: `https://api.arcade.dev/mcp/<YOUR-GATEWAY-SLUG>`
4. Under **Authentication**, select **OAuth 2.0**
5. Under **Type**, select **Dynamic discovery** to authorize the MCP gateway automatically using OAuth

<Image
  alt={"Step 2: Configure MCP Gateway with OAuth 2.0 and Dynamic Discovery"}
  className="max-w-full mt-4"
  src={"/images/mcp-gateway/copilot-studio/step-2.png"}
  width={STEP_2_WIDTH / IMAGE_SCALE_FACTOR}
  height={STEP_2_HEIGHT / IMAGE_SCALE_FACTOR}
/>

### Complete the authorization flow

After saving the gateway configuration, you'll be redirected to the Arcade authorization page. Review the permissions requested and click **Allow** to authorize Copilot Studio to access your MCP resources.

<Image
  alt={"Step 3: Authorize Copilot Studio to access your Arcade account"}
  className="max-w-full mt-4"
  src={"/images/mcp-gateway/copilot-studio/step-3.png"}
  width={STEP_3_WIDTH / IMAGE_SCALE_FACTOR}
  height={STEP_3_HEIGHT / IMAGE_SCALE_FACTOR}
/>

### Start using your tools

Once the connection is established, return to your agent and start a conversation. Now you can directly interact with your tools.

Arcade provides just-in-time authorization. When you use a tool that requires access to an external service, Copilot Studio will display an authorization link. Click the link to grant access and continue. This works seamlessly with tools like SharePoint, Outlook, Teams, Stripe, and Gmail.

<Image
  alt={"Step 4: Chat with your agent using Arcade tools"}
  className="max-w-full mt-4"
  src={"/images/mcp-gateway/copilot-studio/step-4.png"}
  width={STEP_4_WIDTH / IMAGE_SCALE_FACTOR}
  height={STEP_4_HEIGHT / IMAGE_SCALE_FACTOR}
/>

</Steps>