Skip to content

page.mdx

Latest commit

 

History

History
210 lines (161 loc) · 8.05 KB

page.mdx

File metadata and controls

210 lines (161 loc) · 8.05 KB
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";

export const IMAGE_SCALE_FACTOR = 2; export const CREATE_MCP_GATEWAY_DARK_WIDTH = 1128; export const CREATE_MCP_GATEWAY_DARK_HEIGHT = 1644; export const CREATE_MCP_GATEWAY_LIGHT_WIDTH = 1136; export const CREATE_MCP_GATEWAY_LIGHT_HEIGHT = 1642; export const TOOL_PICKER_DARK_WIDTH = 2568; export const TOOL_PICKER_DARK_HEIGHT = 2174; export const TOOL_PICKER_LIGHT_WIDTH = 2568; export const TOOL_PICKER_LIGHT_HEIGHT = 2174; export const MCP_GATEWAY_URL_DARK_WIDTH = 2406; export const MCP_GATEWAY_URL_DARK_HEIGHT = 506; export const MCP_GATEWAY_URL_LIGHT_WIDTH = 2406; export const MCP_GATEWAY_URL_LIGHT_HEIGHT = 506;

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 easier 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 easy to port your agent to multiple platforms and IDEs, and even share it with other users.

Create a coding agent using an MCP Gateway to call tools from multiple MCP servers.

</GuideOverview.Outcomes>

<GuideOverview.Prerequisites>

  • An Arcade account

</GuideOverview.Prerequisites>

<GuideOverview.YouWillLearn>

  • Create an MCP Gateway
  • Connect the MCP Gateway to Cursor or VS Code
  • Call tools from the MCP Gateway in your agent

</GuideOverview.YouWillLearn>

Create an MCP Gateway

Create a new MCP Gateway. Go to the MCP Gateways dashboard, and click on the "Create MCP Gateway" button.

<Image alt={"Create MCP Gateway"} className="max-w-full dark:hidden" src={"/images/mcp-gateway/create-mcp-gateway-light.png"} width={CREATE_MCP_GATEWAY_LIGHT_WIDTH / IMAGE_SCALE_FACTOR} height={CREATE_MCP_GATEWAY_LIGHT_HEIGHT / IMAGE_SCALE_FACTOR} /> <Image alt={"Create MCP Gateway"} className="hidden max-w-full dark:block" src={"/images/mcp-gateway/create-mcp-gateway-dark.png"} width={CREATE_MCP_GATEWAY_DARK_WIDTH / IMAGE_SCALE_FACTOR} height={CREATE_MCP_GATEWAY_DARK_HEIGHT / IMAGE_SCALE_FACTOR} />

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)

Select the tools you want to include in the gateway

Click the "Select Tools" button in the form to select the tools you want to include in the gateway. You can select tools from any MCP server available to the active project. For this example, select the following tools:

  • the GitHub MCP server
  • the Linear MCP server

Feel free to select any tools you want to include in your specific use case.

<Image alt={"Tool Picker"} className="max-w-full dark:hidden" src={"/images/mcp-gateway/tool-picker-light.png"} width={TOOL_PICKER_LIGHT_WIDTH / IMAGE_SCALE_FACTOR} height={TOOL_PICKER_LIGHT_HEIGHT / IMAGE_SCALE_FACTOR} /> <Image alt={"Tool Picker"} className="hidden max-w-full dark:block" src={"/images/mcp-gateway/tool-picker-dark.png"} width={TOOL_PICKER_DARK_WIDTH / IMAGE_SCALE_FACTOR} height={TOOL_PICKER_DARK_HEIGHT / IMAGE_SCALE_FACTOR} />

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.

There is no limit to the number of tools you can select in an MCP Gateway. However, 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. As a rule of thumb, we recommend keeping the number of tools in a single MCP Gateway below 80.

Connect the MCP Gateway to an MCP client

Arcade MCP Gateways are compatible with any MCP client that supports:

  • Streamable HTTP transport
  • MCP OAuth, or support for setting up headers for the HTTP transport

Get the URL of your MCP Gateway by clicking the "Copy URL" button in the MCP Gateway details page.

<Image alt={"MCP Gateway URL"} className="max-w-full dark:hidden" src={"/images/mcp-gateway/mcp-url-light.png"} width={MCP_GATEWAY_URL_LIGHT_WIDTH / IMAGE_SCALE_FACTOR} height={MCP_GATEWAY_URL_LIGHT_HEIGHT / IMAGE_SCALE_FACTOR} /> <Image alt={"MCP Gateway URL"} className="hidden max-w-full dark:block" src={"/images/mcp-gateway/mcp-url-dark.png"} width={MCP_GATEWAY_URL_DARK_WIDTH / IMAGE_SCALE_FACTOR} height={MCP_GATEWAY_URL_DARK_HEIGHT / IMAGE_SCALE_FACTOR} />

<Tabs items={["Cursor", "VS Code"]} storageKey="preferredAgent"> <Tabs.Tab>

1. Open the command palette (Mac: Cmd + Shift + p / Windows: Ctrl + Shift + p) and select **Open MCP Settings**
1. Click on the **New MCP Server** button

Cursor will open the MCP settings file, and you can add a new entry to the `mcpServers` object:

```json
{
  "mcpServers": {
    "mcp-arcade": {
      "url": "https://api.arcade.dev/mcp/<YOUR-GATEWAY-SLUG>",
      "headers": {
        "Authorization": "Bearer {arcade_api_key}",
        "Arcade-User-ID": "{arcade_user_id}"
      }
    }
  }
}
```

</Tabs.Tab> <Tabs.Tab>

1. Open the command palette and select **MCP: Add Server...**
1. Choose **HTTP**
1. Paste the URL of your MCP Gateway. You may see a warning about Dynamic Client Registration. You can ignore this.
1. Give your MCP server a name, like `mcp-arcade`
1. Add the API key as the bearer token within the `Authorization` header, and the email address that you used to sign up for the Arcade account as the `Arcade-User-ID` header

Visual Studio Code will update your `mcp.json` file, but you will manually need to add the headers above:

```json
{
  "servers": {
    "mcp-arcade": {
      "url": "https://api.arcade.dev/mcp/<YOUR-GATEWAY-SLUG>",
      "type": "http",
      "headers": {
        "Authorization": "Bearer {arcade_api_key}",
        "Arcade-User-ID": "{arcade_user_id}"
      }
    }
  }
}
```

</Tabs.Tab>

You can get an API key from the dashboard, following these instructions: [Getting Your API Key](/get-started/setup/api-key).

The user ID is the email address that you used to sign up for the Arcade account.

Try it out

  1. Open your IDE's chat pane.
  2. 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.

Next Steps

  • Learn more about [MCP Gateways](/guides/create-tools/mcp-gateways.
  • Learn how to use MCP Gateways with:
  • Build your own MCP servers with arcade-mcp.