[Docs] Update MCP authentication from headers to query parameters

Author: joaquim-verges

apps/portal/src/app/ai/mcp/page.mdx

@@ -1,42 +1,93 @@
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+
 # MCP server
 
 You can use the thirdweb MCP server to interact with the thirdweb API from your agents or LLM client.
 
-### Remote MCP endpoint
+## Remote MCP endpoint
 
 You can access the MCP server at the following url, with your project secret key.
 
 ```http
-# endpoint
-POST /mcp
-Host: api.thirdweb.com
-
-# auth header (required)
-x-secret-key <your-project-secret-key>
+POST https://api.thirdweb.com/mcp?secretKey=<your-project-secret-key>
 ```
 
-### Usage with LLM clients
+Make sure to keep your secret key safe and never share it with anyone.
+
+## Usage with LLM clients
 
 You can also use the MCP server on your own LLM client, like cursor, claude code and more. Refer to your LLM client's documentation for more information.
 
-#### Example usage with Cursor:
+<Tabs defaultValue="cursor">
+
+<TabsList>
+<TabsTrigger value="cursor">Cursor</TabsTrigger>
+<TabsTrigger value="windsurf">WindSurf</TabsTrigger>
+<TabsTrigger value="vscode">VS Code</TabsTrigger>
+<TabsTrigger value="claudecode">Claude Code</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cursor">
 
 Add the following to your `.cursor/mcp.json` file:
 
 ```json
 {
   "mcpServers": {
     "thirdweb-api": {
-      "url": "https://api.thirdweb.com/mcp",
-      "headers": {
-        "x-secret-key": "<your-project-secret-key>"
-      }
+      "url": "https://api.thirdweb.com/mcp?secretKey=<your-project-secret-key>",
+    }
+  }
+}
+```
+
+</TabsContent>
+
+<TabsContent value="windsurf">
+
+Add the following to your `~/.codeium/windsurf/mcp_config.json` file:
+
+```json
+{
+  "mcpServers": {
+    "thirdweb-api": {
+      "url": "https://api.thirdweb.com/mcp?secretKey=<your-project-secret-key>",
+    }
+  }
+}
+```
+
+</TabsContent>
+
+<TabsContent value="vscode">
+
+Add the following to your VS Code `.vscode/mcp.json` file:
+
+```json
+{
+  "mcp.servers": {
+    "thirdweb-api": {
+      "url": "https://api.thirdweb.com/mcp?secretKey=<your-project-secret-key>",
     }
   }
 }
 ```
 
-### Usage with agents
+</TabsContent>
+
+<TabsContent value="claudecode">
+
+Run the following command to add the MCP server to your Claude Code configuration:
+
+```bash
+claude mcp add --transport http "thirdweb-api" "https://api.thirdweb.com/mcp?secretKey=<your-project-secret-key>"
+```
+
+</TabsContent>
+
+</Tabs>
+
+## Usage with agents
 
 Use your favorite agent framework to plug in the MCP server as a collection of tools for your agent.  Refer to your agent framework's documentation for more information.
 
@@ -50,10 +101,7 @@ client = MultiServerMCPClient(
     {
         "thirdweb-api": {
             "transport": "streamable_http",
-            "url": "https://api.thirdweb.com/mcp",
-            "headers": {
-                "x-secret-key": "<your-project-secret-key>"
-            },
+            "url": "https://api.thirdweb.com/mcp?secretKey=<your-project-secret-key>",
         }
     }
 )
@@ -62,3 +110,33 @@ agent = create_react_agent("openai:gpt-4.1", tools)
 response = await agent.ainvoke({"messages": "create a server wallet called 'my-wallet'"})
 ```
 
+Once installed, you can use the entire thirdweb API with natural language. 
+
+## Example prompts
+
+#### Managing server wallets
+
+```
+List my server wallets
+```
+
+```
+Create a server wallet called treasury
+```
+
+```
+What's the balance of treasury wallet?
+```
+
+#### Managing contracts
+
+```
+List my contracts
+```
+
+#### Executing transactions
+
+```
+approve 100 USDC from treasury wallet to executor wallet
+```
+