Update MCP client docs for MCP gateways (#486)

evantahler · nbarbettini · torresmateo · web-flow · commit ecae0b2c2e61 · 2025-10-14T17:07:38.000-04:00
* Update MCP client docs for MCP gateways * Update app/en/home/glossary/page.mdx Co-authored-by: Nate Barbettini <nate@arcade.dev> * Update app/en/home/glossary/page.mdx Co-authored-by: Nate Barbettini <nate@arcade.dev> * Apply suggestion from @nbarbettini Co-authored-by: Nate Barbettini <nate@arcade.dev> * Update app/en/home/glossary/page.mdx Co-authored-by: Nate Barbettini <nate@arcade.dev> * remove duplicated entry in the meta file * axing try it out section --------- Co-authored-by: Nate Barbettini <nate@arcade.dev> Co-authored-by: Mateo Torres <mateo@arcade.dev> Co-authored-by: Mateo Torres <torresmateo@gmail.com>
diff --git a/app/en/home/glossary/page.mdx b/app/en/home/glossary/page.mdx
@@ -140,7 +140,8 @@ To set your own credentials, set the requisite secret within the Arcade Dashboar
 graph TD
     A[Agent] --> B[Arcade Client]
     B --> C[Arcade Engine]
-    C --> D[Worker]
+    C --> D[MCP Gateway]
+    D --> E[MCP Server]
 ```
 
 ### Arcade Client
@@ -155,17 +156,15 @@ The Arcade Engine is the core of the Arcade platform. It is responsible for rout
 
 The Arcade Engine is also responsible for the OAuth flow for your agent's users. This includes granting and elevating permissions and keeping tokens fresh.
 
-### Worker
+### MCP Gateway
 
-A 'worker' is a process that runs all the tools with a MCP Server. Workers are microservices that are called by the Arcade Engine to handle tool execution requests. Workers are either [deployed to Arcade's infrastructure](/home/serve-tools/arcade-deploy) via `arcade deploy`, or run in your own infrastructure.
+MCP gateways are a feature of the Arcade Engine that allows you to add and combine multiple MCP servers in your project. The MCP gateway is responsible for routing tool execution requests to the correct MCP server, and for enforcing security and authorization decisions.  You can mix and match tools from different MCP servers in the same project, and not all tools from a MCP server need to be available to the same LLM.
 
-_Learn more about workers [here](/home/deployment/on-prem-mcp)._
+### Arcade MCP (Server Development Kit)
 
-### TDK (Tool Development Kit)
+Arcade MCP is a framework for building secure MCP servers. It is responsible for the lifecycle of tool executions, and for enforcing security and authorization decisions within the boundary of the server.
 
-The Arcade TDK is a command-line application that helps you create, test, and deploy tools.
-
-_Learn more about the TDK [here](/home/build-tools/create-a-mcp-server)._
+_Learn more about the Arcade MCP framework [here](/references)._
 
 ### Evaluations (Evals)
 
diff --git a/app/en/home/mcp-clients/_meta.tsx b/app/en/home/mcp-clients/_meta.tsx
@@ -1,5 +1,5 @@
 export default {
+  cursor: "Cursor",
   "claude-desktop": "Claude Desktop",
   "visual-studio-code": "Visual Studio Code",
-  cursor: "Cursor",
 };
diff --git a/app/en/home/mcp-clients/claude-desktop/page.mdx b/app/en/home/mcp-clients/claude-desktop/page.mdx
@@ -11,39 +11,27 @@ In this guide, you'll learn how to connect Claude Desktop to a local Arcade serv
 
 1. Create an <SignupLink linkLocation="docs:claude-desktop-client">Arcade account</SignupLink>
 2. Get an [Arcade API key](/home/api-keys)
-3. Install **Python 3.10** or higher <br/> Verify your Python version by running `python --version` or `python3 --version` in your terminal.
-
-### Install Dependencies
-
-```bash
-pip install arcade-ai
-pip install arcade-google
-```
-
-<Callout type="info">
-  See more of Arcade's [MCP Servers](/mcp-servers) that can be installed.
-</Callout>
+3. Create an [Arcade MCP Gateway](https://api.arcade.dev/dashboard/mcp-gateways)
 
 ### Set up Claude Desktop
 
 1. Download and open [Claude Desktop](https://claude.ai/download)
 2. Claude Menu --> "Settings" --> "Developer" --> "Edit Config"
-3. This will create a configuration file at:
-   - On Mac: `~/Library/Application Support/Claude/claude_desktop_config.json`
-   - On Windows: `%APPDATA%\Claude\claude_desktop_config.json`
+3. Follow the guide [here](https://support.claude.com/en/articles/11175166-getting-started-with-custom-connectors-using-remote-mcp)
 4. Open the configuration file and replace the file contents with this:
-
-Replace `YOUR_ARCADE_API_KEY_HERE` with your actual Arcade API key and `/path/to/python` with the path to your Python interpreter and `/path/to/arcade` with the path to the Arcade package.
+    * Give your MCP server a name, like `mcp-arcade`
+    * Use the the URL of your MCP Gateway.
+    * 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
 
 ```json
 {
   "mcpServers": {
-    "arcade-stdio": {
-      "command": "bash",
-      "args": [
-        "-c",
-        "export ARCADE_API_KEY=YOUR_ARCADE_API_KEY_HERE && /path/to/python /path/to/arcade serve --mcp"
-      ]
+    "arcade-mcp": {
+      "url": "https://api.arcade.dev/mcp/<YOUR-GATEWAY-SLUG>",
+      "headers": {
+        "Authorization": "Bearer {arcade_api_key}",
+        "Arcade-User-ID": "{arcade_user_id}"
+      }
     }
   }
 }
diff --git a/app/en/home/mcp-clients/cursor/page.mdx b/app/en/home/mcp-clients/cursor/page.mdx
@@ -1 +1,48 @@
-Coming soon...
+import { Steps, Callout } from "nextra/components";
+import { SignupLink } from "@/app/_components/analytics";
+
+
+# Use Arcade in Cursor
+
+In this guide, you'll learn how to connect Cursor to an Arcade MCP Gateway.
+
+<Steps>
+
+### Prerequisites
+
+1. Create an <SignupLink linkLocation="docs:claude-desktop-client">Arcade account</SignupLink>
+2. Get an [Arcade API key](/home/api-keys)
+3. Create an [Arcade MCP Gateway](https://api.arcade.dev/dashboard/mcp-gateways)
+
+### Set up Cursor
+
+3. Download and open [Cursor](https://cursor.com/download)
+4. Open the command palette and select **Open MCP Settings...**
+5. Choose **HTTP**
+6. Paste the URL of your MCP Gateway
+7. Give your MCP server a name, like `mcp-arcade`
+8. 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
+
+Cursor will update your `settings.json` file with the following
+
+```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}"
+      }
+    }
+  }
+}
+```
+
+### Try it out
+
+1. Open the chat pane (typically command-l)
+1. Make sure you are in **Agent** mode
+1. Ask the agent to use a tool!
+
+</Steps>
diff --git a/app/en/home/mcp-clients/visual-studio-code/page.mdx b/app/en/home/mcp-clients/visual-studio-code/page.mdx
@@ -1,58 +1,42 @@
 import { Steps, Callout } from "nextra/components";
+import { SignupLink } from "@/app/_components/analytics";
 
 # Use Arcade in Visual Studio Code
 
-In this guide, you'll learn how to connect Visual Studio Code to Arcade.dev's MCP server.
-
-<Callout>
-  As of version 1.100.0, Visual Studio Code does not yet support [MCP
-  authorization](https://modelcontextprotocol.io/specification/draft/basic/authorization).
-  Only tools that do not require auth, such as math and
-  [search](/mcp-servers/search/google_search) tools, will work with Visual
-  Studio Code. We're working to improve this - stay tuned!
-</Callout>
+In this guide, you'll learn how to connect Visual Studio Code to an Arcade MCP Gateway.
 
 <Steps>
 
-### Set up Visual Studio Code
+### Prerequisites
 
-1. Download and open [Visual Studio Code](https://code.visualstudio.com/download) (version 1.100.0 or higher)
-1. Open the command palette and select **MCP: Add Server...**
-1. Choose **HTTP**
-1. Paste the following URL: `https://api.arcade.dev/v1/mcps/arcade-anon/mcp`
+1. Create an <SignupLink linkLocation="docs:claude-desktop-client">Arcade account</SignupLink>
+2. Get an [Arcade API key](/home/api-keys)
+3. Create an [Arcade MCP Gateway](https://api.arcade.dev/dashboard/mcp-gateways)
 
-   <Callout type="info">
-     This URL is Arcade's public beta MCP server. We'd love to [hear your
-     feedback](/home/contact-us)! Coming soon: deploy a server with your own
-     tools.
-   </Callout>
+### Set up Visual Studio Code
 
-1. Give your MCP server a name, like `mcp-arcade-dev`
+3. Download and open [Visual Studio Code](https://code.visualstudio.com/download) (version 1.100.0 or higher)
+4. Open the command palette and select **MCP: Add Server...**
+5. Choose **HTTP**
+6. Paste the URL of your MCP Gateway. You may see a warning about Dynamic Client Registration. You can ignore this.
+7. Give your MCP server a name, like `mcp-arcade`
+8. 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 `settings.json` file with the following:
+Visual Studio Code will update your `mcp.json` file, but you will manually need to add the headers above:
 
 ```json
-    "mcp": {
-        "servers": {
-            "mcp-arcade-dev": {
-                "url": "https://api.arcade.dev/v1/mcps/arcade-anon/mcp"
-            }
-        }
-    },
+{
+  "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}"
+      }
+    }
+  }
+}
 ```
 
-### Try it out
-
-1. Open the chat pane (typically Cmd-Shift-I or Ctrl-Shift-I)
-1. Make sure you are in **Agent** mode
-1. Click the 🛠️ Tools button, which opens a panel of available tools
-1. Click to select the tools you want to use, and type your request in the chat pane!
-
-<div className="flex justify-center my-4">
-  <img
-    src="/videos/vscode_mcp_demo.webp"
-    alt="Visual Studio Code tools panel"
-  />
-</div>
-
 </Steps>
