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: "Calling tools in 3rd party agents, apps, or IDEs",
+  },
   "custom-mcp-server-quickstart": {
     title: "Build MCP Server QuickStart",
   },

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

@@ -0,0 +1,191 @@
+---
+title: "Calling tools in 3rd party agents, apps, or IDEs"
+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 = 2578;
+export const TOOL_PICKER_DARK_HEIGHT = 2550;
+export const TOOL_PICKER_LIGHT_WIDTH = 2574;
+export const TOOL_PICKER_LIGHT_HEIGHT = 2548;
+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 GitHub, Slack and Linear tools in your agent, but not all of them at the same time. An MCP Gateway allows you to 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 event 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
+
+To 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, we'll select the tools from the GitHub MCP server, as well as the tools from 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:
+
+- The 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 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>
+
+### Try it out
+
+1. Open the 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"
+
+</Steps>
+
+## Next Steps
+
+Learn more about [MCP Gateways](/home/mcp-gateways).
+Build your own MCP servers with [arcade-mcp](/home/custom-mcp-server-quickstart).