- {/* You will Learn column - takes 2/3 of width */}
- {youWillLearn && (
-
-
- You will Learn
-
-
- {React.isValidElement(youWillLearn) &&
- (youWillLearn.props as { children: React.ReactNode }).children}
+ {/* When only Outcomes and Prerequisites exist, show them side by side */}
+ {outcomes && prerequisites && !youWillLearn && (
+
+ {/* Outcomes column */}
+
+
+ Outcomes
+
+
+ {React.isValidElement(outcomes) &&
+ (outcomes.props as { children: React.ReactNode }).children}
- )}
- {/* Prerequisites column - takes 1/3 of width */}
- {prerequisites && (
-
+ {/* Prerequisites column */}
+
Prerequisites
@@ -73,8 +58,80 @@ export function GuideOverview({ children, className }: GuideOverviewProps) {
(prerequisites.props as { children: React.ReactNode }).children}
- )}
-
+
+ )}
+
+ {/* When YouWillLearn exists, use the original layout */}
+ {youWillLearn && (
+ <>
+ {/* Outcomes section (full width) */}
+ {outcomes && (
+
+
+ Outcomes
+
+
+ {React.isValidElement(outcomes) &&
+ (outcomes.props as { children: React.ReactNode }).children}
+
+
+ )}
+
+ {/* Two column layout - You will Learn (2/3) and Prerequisites (1/3) */}
+
+ {/* You will Learn column - takes 2/3 of width */}
+
+
+ You will Learn
+
+
+ {React.isValidElement(youWillLearn) &&
+ (youWillLearn.props as { children: React.ReactNode })
+ .children}
+
+
+
+ {/* Prerequisites column - takes 1/3 of width */}
+ {prerequisites && (
+
+
+ Prerequisites
+
+
+ {React.isValidElement(prerequisites) &&
+ (prerequisites.props as { children: React.ReactNode })
+ .children}
+
+
+ )}
+
+
+ )}
+
+ {/* Fallback for edge cases - only outcomes, only prerequisites, etc. */}
+ {outcomes && !prerequisites && !youWillLearn && (
+
+
+ Outcomes
+
+
+ {React.isValidElement(outcomes) &&
+ (outcomes.props as { children: React.ReactNode }).children}
+
+
+ )}
+
+ {!outcomes && prerequisites && !youWillLearn && (
+
+
+ Prerequisites
+
+
+ {React.isValidElement(prerequisites) &&
+ (prerequisites.props as { children: React.ReactNode }).children}
+
+
+ )}
);
}
diff --git a/app/en/home/mcp-clients/cursor/page.mdx b/app/en/home/mcp-clients/cursor/page.mdx
index d22dc925f..e732bfa9c 100644
--- a/app/en/home/mcp-clients/cursor/page.mdx
+++ b/app/en/home/mcp-clients/cursor/page.mdx
@@ -1,29 +1,31 @@
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.
+
+
+
+Connect Cursor to an Arcade MCP Gateway.
-
+
-### Prerequisites
+
1. Create an Arcade account
2. Get an [Arcade API key](/home/api-keys)
3. Create an [Arcade MCP Gateway](/home/mcp-gateways) and select the tools you want to use
+
+
+
+
### 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
+1. Open the Command Palette (`Cmd + Shift + P` on macOS, `Ctrl + Shift + P` on Windows/Linux) and select **Open MCP Settings**
+1. Click on the "New MCP Server" button
-Cursor will update your `settings.json` file with the following
+Cursor will open the MCP settings file, and you can add a new entry to the `mcpServers` object:
```json
{
@@ -44,5 +46,3 @@ Cursor will update your `settings.json` file with the following
1. Open the chat pane (typically command-l)
1. Make sure you are in **Agent** mode
1. Ask the agent to use a tool!
-
-