Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 16 additions & 15 deletions app/en/get-started/mcp-clients/claude-desktop/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ 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

# Use Arcade in Claude desktop

<GuideOverview>
<GuideOverview.Outcomes>
Expand All @@ -59,9 +60,9 @@ Connect Claude Desktop to an Arcade MCP Gateway.

<Steps>

### Go to your Claude Desktop setting page
### 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.
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"}
Expand All @@ -78,9 +79,9 @@ On the bottom left corner of Claude Desktop, click on your user avatar to open t
height={STEP_1_DARK_HEIGHT / IMAGE_SCALE_FACTOR}
/>

### Add a Custom Connector
### Add a custom connector

On the settings page, click on the "Connectors" tab, and then on the "Add custom Connector" button.
On the settings page, click the "Connectors" tab, and then on the "Add custom Connector" button.

<Image
alt={"Step 2: Add a custom connector"}
Expand All @@ -97,7 +98,7 @@ On the settings page, click on the "Connectors" tab, and then on the "Add custom
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.
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"}
Expand All @@ -114,9 +115,9 @@ A modal dialog will open asking you for a name and a URL. Enter a name for your
height={STEP_3_DARK_HEIGHT / IMAGE_SCALE_FACTOR}
/>

### authenticate with your Arcade account
### 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.
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"}
Expand All @@ -133,7 +134,7 @@ You will see a new connector added to your list of connectors. Click on the "Con
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.
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"}
Expand All @@ -150,9 +151,9 @@ Your browser will open a new tab to authenticate with your Arcade account. Check
height={STEP_5_DARK_HEIGHT / IMAGE_SCALE_FACTOR}
/>

### Configure the MCP Gateway
### 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.
With Claude Desktop connected to your MCP gateway, it's 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"}
Expand All @@ -169,7 +170,7 @@ Now Claude Desktop is connected to your MCP Gateway, it's a good time to configu
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.
In this configuration pane, you can configure which tools are available to Claude Desktop, and whether or not they require human confirmation. In this example MCP gateway, human 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"}
Expand All @@ -186,8 +187,8 @@ In this configuration pane, you can configure which tools are available to Claud
height={STEP_7_DARK_HEIGHT / IMAGE_SCALE_FACTOR}
/>

### Try it out!
### 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!
You can now open a new chat within Claude Desktop. Ensure that your connector is enabled, and then ask the agent to use a tool.

</Steps>
</Steps>
7 changes: 4 additions & 3 deletions app/en/get-started/mcp-clients/copilot-studio/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ 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>
Expand Down Expand Up @@ -73,7 +74,7 @@ In the Model Context Protocol configuration dialog:

### 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.
After saving the gateway configuration, Arcade will redirect you to the 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"}
Expand All @@ -85,7 +86,7 @@ After saving the gateway configuration, you'll be redirected to the Arcade autho

### 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.
Once you establish the connection, 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.

Expand All @@ -97,4 +98,4 @@ Arcade provides just-in-time authorization. When you use a tool that requires ac
height={STEP_4_HEIGHT / IMAGE_SCALE_FACTOR}
/>

</Steps>
</Steps>
5 changes: 3 additions & 2 deletions app/en/get-started/mcp-clients/cursor/page.mdx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { Steps, Callout, Tabs } from "nextra/components";
import { SignupLink } from "@/app/_components/analytics";


# Use Arcade in Cursor

<GuideOverview>
<GuideOverview.Outcomes>

Connect Cursor to an Arcade MCP Gateway.
You can connect Cursor to an Arcade MCP Gateway.

</GuideOverview.Outcomes>

Expand Down Expand Up @@ -70,4 +71,4 @@ Cursor will open the MCP settings file, and you can add a new entry to the `mcpS

1. Open the chat pane (typically command-l)
1. Make sure you are in **Agent** mode
1. Ask the agent to use a tool!
1. Ask the agent to use a tool
12 changes: 7 additions & 5 deletions app/en/get-started/mcp-clients/visual-studio-code/page.mdx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { Steps, Callout } from "nextra/components";
import { SignupLink } from "@/app/_components/analytics";

<!-- Editorial: Structure - Added intro line explaining what reader will learn; Arcade Terminology - Corrected "MCP Server" to "MCP server" in body text -->

# Use Arcade in Visual Studio Code

In this guide, you'll learn how to connect Visual Studio Code to an Arcade MCP Gateway.
You'll learn how to connect Visual Studio Code to an Arcade MCP Gateway to access Arcade tools directly in your IDE.

<Steps>

Expand All @@ -22,21 +24,21 @@ In this guide, you'll learn how to connect Visual Studio Code to an Arcade MCP G

Visual Studio Code will update your `mcp.json` file.

### Start the MCP Server in Visual Studio Code
### Start the MCP server in Visual Studio Code

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

### Try it out

13. Open your IDE's chat pane.
14. Make sure you are in **Agent** mode
15. Ask the agent to use a tool!
15. Ask the agent to use a tool.

</Steps>

Expand All @@ -58,4 +60,4 @@ Note: if you are using the Arcade Header auth mode for your MCP Gateway, you wil
}
```

You will not see the authentication prompts when you start the MCP Server in Visual Studio Code because the API Key is passed directly.
You will not see the authentication prompts when you start the MCP server in Visual Studio Code because we pass the API Key directly.
15 changes: 9 additions & 6 deletions app/en/get-started/quickstarts/call-tool-client/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ title: "Call a tool in your IDE/MCP Client"
description: "Learn how to call a tool in your IDE/MCP Client"
---


import { Steps, Tabs, Callout } from "nextra/components";
import { SignupLink } from "@/app/_components/analytics";
import Image from "next/image";
Expand All @@ -24,7 +25,9 @@ export const MCP_GATEWAY_URL_LIGHT_HEIGHT = 498;

# Call a tool in your IDE/MCP Client

Tools enable your AI agents to perform actions on your behalf. For specific workflows and use cases, this may involve calling tools from multiple MCP servers. Arcade facilitates this by allowing you to create MCP Gateways to federate the tools from multiple MCP servers into a single collection for convenient management, control, and access. For example, if your agent specializes in solving specific tickets in Linear, you may want to use tools from the GitHub, Slack and Linear servers in your agent. These add up to 88 tools, which could be overwhelming for an LLM to use effectively. What you want is to get from these servers only the tools that matter for your agent. An MCP Gateway allows you to do just that: pick only the tools required for this workflow, and you can connect it to any MCP client, making it possible to port your agent to multiple platforms and IDEs, and even share it with other users.
Create a coding agent that uses tools from multiple MCP servers through an MCP Gateway.

Tools enable AI agents to perform actions on your behalf. For specific workflows and use cases, this may involve calling tools from multiple MCP servers. Arcade facilitates this by allowing you to create MCP Gateways to federate the tools from multiple MCP servers into a collection for management, control, and access. For example, if your agent specializes in solving specific tickets in Linear, you may want to use tools from the GitHub, Slack and Linear servers in your agent. These add up to 88 tools, which could be overwhelming for an LLM to use effectively. What you want is to get from these servers only the tools that matter for your agent. An MCP Gateway allows you to do just that: pick only the tools required for this workflow, and you can connect it to any MCP client, making it possible to port your agent to multiple platforms and IDEs, and even share it with other users.

<GuideOverview>
<GuideOverview.Outcomes>
Expand Down Expand Up @@ -73,7 +76,7 @@ Give your MCP gateway:

- A name
- A description
- A slug (this is recommended so it's easy to remember and share, but will be generated if left blank)
- A slug (we recommend something memorable/shareable, but the system will generate one if left blank)
- Select the Authentication mode for the MCP Gateway
- **Arcade Auth**: To access the MCP Gateway, you'll need to authenticate with your Arcade account in an OAuth flow on a browser. For security, the token is only valid for a short time and your MCP client will need to refresh it periodically.
- **Arcade Headers**: To access the MCP Gateway, you'll need to authenticate with your Arcade account by passing an Arcade API key in the `Authorization` header and the user ID in the `Arcade-User-ID` header. Use this authentication mode for MCP clients that don't support browser authentication or token refresh.
Expand Down Expand Up @@ -105,7 +108,7 @@ Feel free to select any tools you want to include in your specific use case.
Once you've selected the tools you want to include in the gateway, click the "Use N tools" button in the tool picker, and then click the "Create MCP Gateway" button to create the gateway.

<Callout type="info">
You can select as many tools for your MCP Gateway as you want, but be mindful of how the MCP clients will handle the large number of tools. Some clients may not handle a large number of tools well, and may consume a significant portion of the LLM's context window. We recommend keeping the number of tools in a single MCP Gateway below 80.```
You can select as many tools for your MCP Gateway as you want, but be mindful of how the MCP clients will handle the large number of tools. Some clients may not handle a large number of tools well, and may consume a significant portion of the LLM's context window. The team recommends keeping the number of tools in a MCP Gateway below 80.
</Callout>

### Connect the MCP Gateway to an MCP client
Expand Down Expand Up @@ -139,9 +142,9 @@ Select the MCP client you want to use to read the instructions to connect to the
### Try it out

1. Open your IDE's chat pane.
1. Ask the agent to do something! For example, "Check the latest linear issue assigned to me. Then, create a new GitHub branch, implement the fix, and add tests. If all the tests pass, create a pull request and assign it to me."
1. Ask the agent to do something For example, "Check the latest linear issue assigned to me. Then, create a new GitHub branch, implement the fix, and add tests. If all the tests pass, create a pull request and assign it to me."

As you interact with the agent, it will call the tools from the MCP Gateway. Your agent should prompt you to visit links to authorize access to Linear and GitHub. After this, it will start using tools to carry out the task! Subsequent calls will not require authorization.
As you interact with the agent, it will call the tools from the MCP Gateway. Your agent should prompt you to visit links to authorize access to Linear and GitHub. After this, it will start using tools to carry out the task Subsequent calls will not require authorization.

</Steps>

Expand All @@ -151,4 +154,4 @@ As you interact with the agent, it will call the tools from the MCP Gateway. You
- Learn how to use MCP Gateways with:
- [Cursor](/get-started/mcp-clients/cursor)
- [Visual Studio Code](/get-started/mcp-clients/visual-studio-code)
- Build your own MCP servers with [arcade-mcp](/get-started/quickstarts/mcp-server-quickstart).
- Build your own MCP servers with [arcade-mcp](/get-started/quickstarts/mcp-server-quickstart).
Loading