mcp gateway quickstart

app/en/home/_meta.tsx

@@ -42,6 +42,9 @@ export const meta: MetaRecord = {
   quickstart: {
     title: "Hosted Tools Quickstart",
   },
+  "mcp-gateway-quickstart": {
+    title: "Call a tool in your IDE/MCP Client",
+  },
   "custom-mcp-server-quickstart": {
     title: "Build MCP Server QuickStart",
   },

app/en/home/mcp-gateway-quickstart/page.mdx

@@ -0,0 +1,210 @@
+---
+title: "Call a tool in your IDE/MCP Client"
+description: "Learn how to call tools in 3rd party agents, apps, or IDEs"
+---
+
+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;
+
+# Calling tools in 3rd party agents, apps, or IDEs with Arcade
+
+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.
+
+<GuideOverview>
+<GuideOverview.Outcomes>
+
+Create a coding agent using an MCP Gateway to call tools from multiple MCP servers.
+
+</GuideOverview.Outcomes>
+
+<GuideOverview.Prerequisites>
+
+- An <SignupLink linkLocation="docs:call-tools-directly">Arcade account</SignupLink>
+
+</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>
+</GuideOverview>
+
+<Steps>
+
+### Create an MCP Gateway
+
+**Create a new MCP Gateway.** Go to the [MCP Gateways dashboard](https://api.arcade.dev/dashboard/mcp-gateways), 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.
+
+<Callout type="info">
+  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.
+</Callout>
+
+### 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>
+</Tabs>
+
+<Callout type="info">
+  You can get an API key from the dashboard, following these instructions:
+  [Getting Your API Key](/home/api-keys).
+
+The user ID is the email address that
+you used to sign up for the Arcade account.
+
+</Callout>
+
+### 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."
+
+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>
+
+## Next Steps
+
+- Learn more about [MCP Gateways](/home/mcp-gateways).
+- Learn how to use MCP Gateways with:
+  - [Cursor](/home/mcp-clients/cursor)
+  - [Visual Studio Code](/home/mcp-clients/visual-studio-code)
+- Build your own MCP servers with [arcade-mcp](/home/custom-mcp-server-quickstart).