Docs: Created Component for MCP tutorials (#3475)

Co-authored-by: dianed-square <73617011+dianed-square@users.noreply.github.com>

documentation/docs/mcp/agentql-mcp.md

@@ -5,6 +5,7 @@ description: Add AgentQL MCP Server as a Goose Extension
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 
 <!-- <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/VIDEO_ID" /> -->
 
@@ -37,11 +38,18 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=agentql-mcp&id=agentql&name=AgentQL&description=Transform%20unstructured%20web%20content%20into%20structured%20data&env=AGENTQL_API_KEY%3DAgentQL%20API%20Key)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="agentql"
-  3. Obtain an [AGENTQL_API_KEY](https://dev.agentql.com/api-keys) and paste it in
+    extensionName="AgentQL"
-  4. Click `Save Configuration`
+    description="Transform unstructured web content into structured data"
-  5. Scroll to the top and click `Exit` from the upper left corner
+    command="npx"
+    args={["-y", "agentql-mcp"]}
+    envVars={[
+      { name: "AGENTQL_API_KEY", label: "AgentQL API Key" }
+    ]}
+    apiKeyLink="https://dev.agentql.com/api-keys"
+    apiKeyLinkText="AGENTQL_API_KEY"
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/alby-mcp.md

@@ -7,6 +7,8 @@ description: Connect Goose to your Bitcoin Lightning Wallet
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
+import { PanelLeft } from 'lucide-react';
 
 
 
@@ -47,15 +49,21 @@ You'll need [Node.js](https://nodejs.org/) installed on your system to run this
   <TabItem value="ui" label="Goose Desktop" default>
     <Tabs>
       <TabItem value="local" label="Local" default>
-        1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=%40getalby%2Fmcp&id=alby&name=Alby&description=Connect%20Goose%20to%20your%20Bitcoin%20Lightning%20Wallet&env=NWC_CONNECTION_STRING%3DNWC%20Connection%20Secret)
+        <GooseDesktopInstaller
-        2. Press `Yes` to confirm the installation
+          extensionId="alby"
-        3. Obtain a NWC Connection secret from your lightning wallet (`nostr+walletconnect://...`) and paste it in to the "NWC Connection Secret" field
+          extensionName="Alby"
-        4. Click `Add Extension`
+          description="Connect Goose to your Bitcoin Lightning Wallet"
-        5. Scroll to the top and click `Exit` from the upper left corner
+          command="npx"
+          args={["-y", "@getalby/mcp"]}
+          envVars={[
+            { name: "NWC_CONNECTION_STRING", label: "NWC Connection Secret" }
+          ]}
+          customStep3="Obtain a NWC Connection secret from your lightning wallet (nostr+walletconnect://...) and paste it in to the 'NWC Connection Secret' field"
+        />
       </TabItem>
       <TabItem value="remote" label="Remote">
         1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=%40getalby%2Fmcp&id=alby&name=Alby&description=Connect%20Goose%20to%20your%20Bitcoin%20Lightning%20Wallet)
-        2. Press `Yes` to confirm the installation
+        2. Press `OK` to confirm the installation
         3. Change the type to "Streamable HTTP"
         4. Change the endpoint to `https://mcp.getalby.com/mcp`
         5. Add a request header with Header name = `Authorization` and Value:
@@ -64,8 +72,9 @@ Bearer nostr+walletconnect://...
 ```
 
         6. Press the `+Add` button to finish adding the request header
-        7. Click `Add Extension`
+        7. Press `Add Extension`
-        8. Scroll to the top and click `Exit` from the upper left corner
+        8. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
+        9. Navigate to the chat
       </TabItem>
     </Tabs>
   </TabItem>

documentation/docs/mcp/asana-mcp.md

@@ -6,6 +6,7 @@ description: Add Asana MCP Server as a Goose Extension
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 
 <!--<YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/VIDEO_ID" />-->
 
@@ -39,14 +40,21 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=%40roychri%2Fmcp-server-asana&id=asana&name=Asana&description=enable%20task%20automation%2C%20project%20tracking%2C%20and%20team%20collaboration&env=ASANA_ACCESS_TOKEN%3DAsana%20Access%20Token)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="asana"
-  3. Obtain a [Asana Access Token](https://app.asana.com/0/my-apps) and paste it in
+    extensionName="Asana"
+    description="enable task automation, project tracking, and team collaboration"
+    command="npx"
+    args={["-y", "@roychri/mcp-server-asana"]}
+    envVars={[
+      { name: "ASANA_ACCESS_TOKEN", label: "Asana Access Token" }
+    ]}
+    apiKeyLink="https://app.asana.com/0/my-apps"
+    apiKeyLinkText="Asana Access Token"
+  />
   :::info
   See [Asana's developer docs](https://developers.asana.com/docs/personal-access-token) if you need detailed instructions on creating an access token.
   :::
-  4. Click `Save Configuration`
-  5. Scroll to the top and click `Exit` from the upper left corner
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/blender-mcp.md

@@ -6,6 +6,7 @@ description: Add Blender MCP Server as a Goose Extension
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 
 <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/izoQatKtJ2I" />
 
@@ -51,10 +52,13 @@ Note that you'll need [uv](https://docs.astral.sh/uv/#installation) installed on
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. [Launch the installer](goose://extension?cmd=uvx&arg=blender-mcp&id=blender&name=Blender&description=Blender%203D%20scene%20creation%20integration)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="blender"
-  4. Click `Save Configuration`
+    extensionName="Blender"
-  5. Scroll to the top and click `Exit` from the upper left corner
+    description="Blender 3D scene creation integration"
+    command="uvx"
+    args={["blender-mcp"]}
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/brave-mcp.md

@@ -6,6 +6,7 @@ description: Add Brave Search API as a Goose Extension
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 
 <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/kD2YA61NTLU" />
 
@@ -37,11 +38,16 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=%40modelcontextprotocol%2Fserver-brave-search&id=brave-search&name=Brave%20Search&description=Brave%20Search%20API&env=BRAVE_API_KEY%3DYour%20API%20Key)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="brave-search"
-  3. Get your [Brave Search API Key](https://api-dashboard.search.brave.com/app/keys) and paste it in
+    extensionName="Brave Search"
-  4. Click `Save Configuration`
+    description="Brave Search API"
-  5. Scroll to the top and click `Exit` from the upper left corner
+    command="npx"
+    args={["-y", "@modelcontextprotocol/server-brave-search"]}
+    envVars={[{ name: "BRAVE_API_KEY", label: "Your Brave Search API Key" }]}
+    apiKeyLink="https://api-dashboard.search.brave.com/app/keys"
+    apiKeyLinkText="Get your Brave Search API Key"
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/browserbase-mcp.md

@@ -5,6 +5,7 @@ description: Add Browserbase MCP Server as a Goose Extension for Web Automation
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 
 This tutorial covers how to add the Browserbase MCP Server as a Goose extension for browser automation, enabling programmatic control over navigation, page interactions, and content capture.
 
@@ -32,11 +33,19 @@ This tutorial covers how to add the Browserbase MCP Server as a Goose extension
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. [Launch the installer](goose://extension?cmd=npx&arg=@browserbasehq/mcp&id=browserbase&name=Browserbase&description=Automate%20web%20browsing%20and%20data%20extraction&env=BROWSERBASE_PROJECT_ID%3DBrowserbase%20Project%20ID&env=BROWSERBASE_API_KEY%3DBrowserbase%20API%20Key)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="browserbase"
-  3. Obtain your [Browserbase Project ID and Browserbase API Key](https://browserbase.io/dashboard) and paste them in
+    extensionName="Browserbase"
-  4. Click `Save Configuration`
+    description="Automate web browsing and data extraction"
-  5. Scroll to the top and click `Exit` from the upper left corner
+    command="npx"
+    args={["@browserbasehq/mcp"]}
+    envVars={[
+      { name: "BROWSERBASE_PROJECT_ID", label: "Browserbase Project ID" },
+      { name: "BROWSERBASE_API_KEY", label: "Browserbase API Key" }
+    ]}
+    apiKeyLink="https://browserbase.io/dashboard"
+    apiKeyLinkText="Get your Browserbase credentials"
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/cloudflare-mcp.md

@@ -1,6 +1,7 @@
 ---
 title: Cloudflare MCP Server
 description: Add Cloudflare MCP Servers as Goose Extensions
+unlisted: true
 ---
 
 import Tabs from '@theme/Tabs';

documentation/docs/mcp/cloudinary-asset-management-mcp.md

@@ -5,6 +5,7 @@ description: Add Cloudinary Asset Management MCP Server as a Goose Extension
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
 
 <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/4diEvoRFVrQ" />
@@ -38,11 +39,16 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=--package&arg=@cloudinary/asset-management&arg=--&arg=mcp&arg=start&id=cloudinary&name=Cloudinary%20Asset%20Management&description=Powerful%20media%20processing%20and%20transformation&env=CLOUDINARY_URL%3DCloudinary%20URL)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="cloudinary"
-  3. Obtain your [CLOUDINARY_URL](https://console.cloudinary.com/settings/api-keys) from your Cloudinary dashboard and paste it in
+    extensionName="Cloudinary Asset Management"
-  4. Click `Save Configuration`
+    description="Powerful media processing and transformation"
-  5. Scroll to the top and click `Exit` from the upper left corner
+    command="npx"
+    args={["-y", "--package", "@cloudinary/asset-management", "--", "mcp", "start"]}
+    envVars={[{ name: "CLOUDINARY_URL", label: "Cloudinary URL (cloudinary://api_key:api_secret@cloud_name)" }]}
+    apiKeyLink="https://console.cloudinary.com/settings/api-keys"
+    apiKeyLinkText="Get your Cloudinary URL"
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/computer-controller-mcp.md

@@ -6,6 +6,7 @@ description: Use Computer Controller MCP Server as a Goose Extension
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller';
 
 <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/EuMzToNOQtw" />
 
@@ -19,13 +20,12 @@ Let Goose complete its tasks without interruption - avoid using your mouse or ke
 
 ## Configuration
 
-1. Ensure extension is enabled:
-
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. Click `...` in the upper right corner
+  <GooseBuiltinInstaller
-  2. Click `Advanced Settings`
+    extensionName="Computer Controller"
-  3. Under `Extensions`, toggle `Computer Controller` to on.
+    description="Automate everyday computer tasks and web interactions"
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
 

documentation/docs/mcp/context7-mcp.mdx

@@ -8,6 +8,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
 import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 
 
 <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/LNmPi6YCocI" /> 
@@ -31,27 +32,16 @@ This tutorial covers how to add the [Context7 MCP Server](https://github.com/ups
 
 ## Configuration
 
-:::info
+<GooseDesktopInstaller
-Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`.
+  extensionId="context7"
-:::
+  extensionName="Context7"
-
+  extensionDescription="Context7 MCP server for up-to-date code and docs"
-<Tabs groupId="interface">
+  command="npx"
-  <TabItem value="ui" label="Goose Desktop" default>
+  args={["-y", "@upstash/context7-mcp"]}
-    1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=%40upstash%2Fcontext7-mcp&id=context7&name=Context7&description=Context7%20MCP%20server%20for%20up-to-date%20code%20and%20docs)  
+  cliCommand="npx -y @upstash/context7-mcp"
-    2. Press <code>Yes</code> to confirm the installation  
+  timeout={300}
-    3. Click <code>Save Configuration</code>  
+  note="Note that you'll need Node.js installed on your system to run this command, as it uses npx."
-    4. Scroll to the top and click <code>Exit</code> from the upper left corner  
+/>
-  </TabItem>
-
-  <TabItem value="cli" label="Goose CLI">
-    <CLIExtensionInstructions
-      name="context7"
-      command="npx -y @upstash/context7-mcp"
-      timeout={300}
-    />
-  </TabItem>
-
-</Tabs>
 
 ## Example Usage
 

documentation/docs/mcp/developer-mcp.md

@@ -6,6 +6,7 @@ description: Use Developer MCP Server as a Goose Extension
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller';
 
 <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/on_p-LeIrak" />
 
@@ -20,13 +21,12 @@ This tutorial will cover enabling and using the Developer MCP Server, which is a
 The Developer extension is already enabled by default when Goose is installed.
 :::
 
-1. Ensure extension is enabled:
-
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. Click `...` in the upper right corner
+  <GooseBuiltinInstaller
-  2. Click `Advanced Settings`
+    extensionName="Developer"
-  3. Under `Extensions`, toggle `Developer` to on.
+    description="Automate developer-centric tasks like file editing and shell commands"
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
 

documentation/docs/mcp/elevenlabs-mcp.md

@@ -6,6 +6,7 @@ description: Add ElevenLabs MCP Server as a Goose Extension
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 
 <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/1Z8XtjQ9El0" />
 
@@ -33,168 +34,18 @@ This tutorial covers how to add the [ElevenLabs MCP Server](https://github.com/y
 
 ## Configuration
 
-:::info
+<GooseDesktopInstaller
-Note that you'll need [uv](https://docs.astral.sh/uv/#installation) installed on your system to run this command, as it uses `uvx`.
+  extensionId="elevenlabs"
-:::
+  extensionName="ElevenLabs"
-
+  description="ElevenLabs voice synthesis server"
-<Tabs groupId="interface">
+  command="uvx"
-  <TabItem value="ui" label="Goose Desktop" default>
+  args={["elevenlabs-mcp"]}
-  1. [Launch the installer](goose://extension?cmd=uvx&arg=elevenlabs-mcp&id=elevenlabs&name=ElevenLabs&description=ElevenLabs%20voice%20synthesis%20server&env=ELEVENLABS_API_KEY)
+  envVars={[
-  2. Press `Yes` to confirm the installation
+    { name: "ELEVENLABS_API_KEY", label: "ElevenLabs API Key" }
-  3. Click `Save Configuration`
+  ]}
-  4. Scroll to the top and click `Exit` from the upper left corner
+  apiKeyLink="https://elevenlabs.io/app/settings/api-keys"
-  </TabItem>
+  apiKeyLinkText="Get your ElevenLabs API Key"
-  <TabItem value="cli" label="Goose CLI">
+/>
-  1. Run the `configure` command:
-  ```sh
-  goose configure
-  ```
-
-  2. Choose to add a `Command-line Extension`
-  ```sh
-    ┌   goose-configure 
-    │
-    ◇  What would you like to configure?
-    │  Add Extension (Connect to a new extension) 
-    │
-    ◆  What type of extension would you like to add?
-    │  ○ Built-in Extension 
-    // highlight-start    
-    │  ● Command-line Extension (Run a local command or script)
-    // highlight-end    
-    │  ○ Remote Extension (SSE) 
-    │  ○ Remote Extension (Streaming HTTP) 
-    └ 
-  ```
-
-  3. Give your extension a name
-  ```sh
-    ┌   goose-configure 
-    │
-    ◇  What would you like to configure?
-    │  Add Extension (Connect to a new extension) 
-    │
-    ◇  What type of extension would you like to add?
-    │  Command-line Extension 
-    │
-    // highlight-start
-    ◆  What would you like to call this extension?
-    │  elevenlabs
-    // highlight-end
-    └ 
-  ```
-
-  4. Enter the command
-  ```sh
-    ┌   goose-configure 
-    │
-    ◇  What would you like to configure?
-    │  Add Extension (Connect to a new extension) 
-    │
-    ◇  What type of extension would you like to add?
-    │  Command-line Extension 
-    │
-    ◇  What would you like to call this extension?
-    │  elevenlabs
-    │
-    // highlight-start
-    ◆  What command should be run?
-    │  uvx elevenlabs-mcp
-    // highlight-end
-    └ 
-  ```  
-
-  5. Enter the number of seconds Goose should wait for actions to complete before timing out. Default is 300s
-    ```sh
-    ┌   goose-configure 
-    │
-    ◇  What would you like to configure?
-    │  Add Extension (Connect to a new extension) 
-    │
-    ◇  What type of extension would you like to add?
-    │  Command-line Extension 
-    │
-    ◇  What would you like to call this extension?
-    │  elevenlabs
-    │
-    ◇  What command should be run?
-    │  uvx elevenlabs-mcp
-    │
-    // highlight-start
-    ◆  Please set the timeout for this tool (in secs):
-    │  300
-    // highlight-end
-    │
-    └ 
-  ```
-
-  6. Choose to add a description. If you select "Yes" here, you will be prompted to enter a description for the extension.
-  ```sh
-    ┌   goose-configure 
-    │
-    ◇  What would you like to configure?
-    │  Add Extension (Connect to a new extension) 
-    │
-    ◇  What type of extension would you like to add?
-    │  Command-line Extension 
-    │
-    ◇  What would you like to call this extension?
-    │  elevenlabs
-    │
-    ◇  What command should be run?
-    │  uvx elevenlabs-mcp
-    │
-    ◆  Please set the timeout for this tool (in secs):
-    │  300
-    │
-    // highlight-start
-    ◇  Would you like to add a description?
-    │  No
-    // highlight-end
-    └ 
-  ```
-
-  7. Obtain an [ElevenLabs API Key](https://elevenlabs.io/app/settings/api-keys) and paste it in.
-
-   ```sh
-    ┌   goose-configure 
-    │
-    ◇  What would you like to configure?
-    │  Add Extension (Connect to a new extension) 
-    │
-    ◇  What type of extension would you like to add?
-    │  Command-line Extension 
-    │
-    ◇  What would you like to call this extension?
-    │  elevenlabs
-    │
-    ◇  What command should be run?
-    │  uvx elevenlabs-mcp
-    │
-    ◇  Please set the timeout for this tool (in secs):
-    │  300
-    │  
-    ◇  Would you like to add a description?
-    │  No   
-    |   
-    // highlight-start
-    ◆  Would you like to add environment variables?
-    │  Yes 
-    │
-    ◇  Environment variable name:
-    │  ELEVENLABS_API_KEY
-    │
-    ◇  Environment variable value:
-    │  ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪
-    │
-    ◇  Add another environment variable?
-    │  No 
-    // highlight-end
-    └  Added elevenlabs extension
-  ```   
-
-  </TabItem>
-</Tabs>
 
 ## Example Usage
 

documentation/docs/mcp/memory-mcp.md

@@ -6,6 +6,7 @@ description: Use Memory MCP Server as a Goose Extension
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller';
 
 <YouTubeShortEmbed videoUrl="https://youtube.com/embed/BZ0yrSLXQwk" />
 
@@ -15,14 +16,12 @@ This tutorial covers enabling and using the Memory MCP Server, which is a built-
 
 ## Configuration
 
-1. Ensure extension is enabled:
-
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. Click `...` in the upper right corner
+  <GooseBuiltinInstaller
-  2. Click `Advanced Settings`
+    extensionName="Memory"
-  3. Under `Extensions`, toggle `Memory` to on.
+    description="Store and recall personalized information for consistent assistance"
-  4. Scroll to the top and click `Exit` from the upper left corner
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
 

documentation/docs/mcp/reddit-mcp.md

@@ -8,6 +8,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
 import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 
 
 <!-- <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/VIDEO_ID" /> -->
@@ -37,10 +38,13 @@ Note that you'll need [uv](https://docs.astral.sh/uv/#installation) installed on
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-    1. [Launch the installer](goose://extension?cmd=uvx&arg=--from&arg=git%2Bhttps%3A%2F%2Fgithub.com%2Fadhikasp%2Fmcp-reddit.git&arg=mcp-reddit&id=reddit&name=Reddit&description=Fetch%20and%20analyze%20Reddit%20content)
+    <GooseDesktopInstaller
-    2. Press <code>Yes</code> to confirm the installation 
+      extensionId="reddit"
-    3. Click <code>Save Configuration</code>  
+      extensionName="Reddit"
-    4. Scroll to the top and click <code>Exit</code> from the upper left corner  
+      description="Fetch and analyze Reddit content"
+      command="uvx"
+      args={["--from", "git+https://github.com/adhikasp/mcp-reddit.git", "mcp-reddit"]}
+    />
   </TabItem>
 
   <TabItem value="cli" label="Goose CLI (No Env Vars)">

documentation/docs/quickstart.md

@@ -11,6 +11,7 @@ import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
 import MacDesktopInstallButtons from '@site/src/components/MacDesktopInstallButtons';
 import WindowsDesktopInstallButtons from '@site/src/components/WindowsDesktopInstallButtons';
 import LinuxDesktopInstallButtons from '@site/src/components/LinuxDesktopInstallButtons';
+import { PanelLeft } from 'lucide-react';
 
 # Goose in 5 minutes
 
@@ -183,10 +184,10 @@ While you're able to manually navigate to your working directory and open the HT
 <Tabs groupId="interface">
 
     <TabItem value="ui" label="Goose Desktop" default>
-        1. Locate the menu (`...`) in the top right corner of the Goose Desktop.
+        1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
-        2. Select `Advanced settings` from the menu.
+        2. Click `Extensions` in the sidebar menu.
-        3. Under the `Extensions` section, toggle the `Computer Controller` extension to enable it. This [extension](https://block.github.io/goose/v1/extensions/detail/nondeveloper) enables webscraping, file caching, and automations.
+        3. Toggle the `Computer Controller` extension to enable it. This [extension](https://block.github.io/goose/v1/extensions/detail/nondeveloper) enables webscraping, file caching, and automations.
-        4. Scroll back to the top and click `<- Back` in the upper left corner to return to your session.
+        4. Return to your session to continue.
         5. Now that Goose has browser capabilities, let's ask it to launch your game in a browser:
     </TabItem>
     <TabItem value="cli" label="Goose CLI">

documentation/docs/tutorials/_template_.mdx

@@ -8,6 +8,8 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
 import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
+import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller';
 
 
 <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/VIDEO_ID" />
@@ -35,87 +37,47 @@ This tutorial covers how to add the [{name} MCP Server](/) as a Goose extension
 
 ## Configuration
 
-:::info
+<!-- For external MCP servers (npx, uvx, git, etc.) -->
-Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`.
+<GooseDesktopInstaller
-:::
+  extensionId="{extension_id}"
+  extensionName="{Extension Name}"
+  extensionDescription="{Extension description}"
+  command="npx"
+  args={["-y", "@package/name"]}
+  cliCommand="npx -y @package/name"
+  timeout={300}
+  note="Note that you'll need Node.js installed on your system to run this command, as it uses npx."
+/>
 
-:::info
+<!-- For built-in extensions -->
-Note that you'll need [uv](https://docs.astral.sh/uv/#installation) installed on your system to run this command, as it uses `uvx`.
+<GooseBuiltinInstaller
-:::
+  extensionName="{Extension Name}"
+  extensionDescription="{Extension description}"
+  extensionId="{extension_id}"
+/>
 
-:::info
+<!-- For external MCP servers with environment variables -->
-Note that you'll need [JBang](https://www.jbang.dev/download) installed on your system to run this command, as it uses `jbang`.
+<GooseDesktopInstaller
-:::
+  extensionId="{extension_id}"
-
+  extensionName="{Extension Name}"
-<Tabs groupId="interface">
+  extensionDescription="{Extension description}"
-  <TabItem value="ui" label="Goose Desktop" default>
+  command="npx"
-    1. [Launch the installer]({goose_url})  
+  args={["-y", "@package/name"]}
-    2. Press <code>Yes</code> to confirm the installation  
+  cliCommand="npx -y @package/name"
-    3. Obtain a [XYZ Access Token](/) and paste it in  
+  timeout={300}
-    4. Click <code>Save Configuration</code>  
+  envVars={[
-    5. Scroll to the top and click <code>Exit</code> from the upper left corner  
+    { key: "API_KEY", value: "••••••••••••••••" }
-  </TabItem>
+  ]}
-
+  infoNote={
-  <TabItem value="cli" label="Goose CLI (No Env Vars)">
+    <>
-    <CLIExtensionInstructions
+      Get your API key from{" "}
-      name="example"
+      <a href="https://example.com/api-keys" target="_blank" rel="noopener noreferrer">
-      command="npx -y @modelcontextprotocol/server-example"
+        example.com
-      timeout={300}
+      </a>.
-    />
+    </>
-  </TabItem>
+  }
-
+  note="Note that you'll need Node.js installed on your system to run this command, as it uses npx."
-  <TabItem value="cli" label="Goose CLI (ONE env variable & infoNote linking where to obtain one)">
+/>
-
-    <CLIExtensionInstructions
-      name="github"
-      command="gh issue list"
-      timeout={300}
-      envVars={[
-        { key: "GITHUB_TOKEN", value: "••••••••••••••••" }
-      ]}
-      infoNote={
-        <>
-          When creating your access token, you can specify the repositories and granular permissions you'd like Goose to have access to.{" "}
-          <a
-            href="https://github.com/settings/personal-access-tokens"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Create one here
-          </a>.
-        </>
-      }
-    />
-
-  </TabItem>
-  <TabItem value="cli" label="Goose CLI (Multiple Env Vars & infoNote)">
-
-    <CLIExtensionInstructions
-      name="github"
-      command="gh issue list"
-      timeout={300}
-      envVars={[
-        { key: "GITHUB_TOKEN", value: "••••••••••••••••" },
-        { key: "REPO_SCOPE", value: "public" }
-      ]}
-      infoNote={
-        <>
-          When creating your access token, you can specify the repositories and granular permissions you'd like Goose to have access to.{" "}
-          <a
-            href="https://github.com/settings/personal-access-tokens"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Create one here
-          </a>.
-        </>
-      }
-    />
-
-  </TabItem>
-
-
-</Tabs>
 
 ## Example Usage
 

documentation/src/components/GooseBuiltinInstaller.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PanelLeft } from 'lucide-react';
+
+interface GooseBuiltinInstallerProps {
+  extensionName: string;
+  description?: string;
+}
+
+const GooseBuiltinInstaller: React.FC<GooseBuiltinInstallerProps> = ({
+  extensionName,
+  description
+}) => {
+  return (
+    <div className="goose-builtin-installer">
+      <ol>
+        <li>Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar</li>
+        <li>Click <code>Extensions</code> in the sidebar</li>
+        <li>Toggle <code>{extensionName}</code> on</li>
+      </ol>
+    </div>
+  );
+};
+
+export default GooseBuiltinInstaller;

documentation/src/components/GooseDesktopInstaller.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { PanelLeft } from 'lucide-react';
+
+interface EnvVar {
+  name: string;
+  label: string;
+}
+
+interface GooseDesktopInstallerProps {
+  extensionId: string;
+  extensionName: string;
+  description: string;
+  command: string;
+  args: string[];
+  envVars?: EnvVar[];
+  apiKeyLink?: string;
+  apiKeyLinkText?: string;
+  customStep3?: string;
+}
+
+export default function GooseDesktopInstaller({
+  extensionId,
+  extensionName,
+  description,
+  command,
+  args,
+  envVars = [],
+  apiKeyLink,
+  apiKeyLinkText,
+  customStep3
+}: GooseDesktopInstallerProps) {
+  
+  // Build the goose:// URL
+  const buildGooseUrl = () => {
+    const urlParts = [
+      `cmd=${encodeURIComponent(command)}`,
+      ...args.map(arg => `arg=${encodeURIComponent(arg)}`),
+      `id=${encodeURIComponent(extensionId)}`,
+      `name=${encodeURIComponent(extensionName)}`,
+      `description=${encodeURIComponent(description)}`,
+      // Add environment variables (matching TLDR sections encoding)
+      ...envVars.map(envVar => 
+        `env=${encodeURIComponent(`${envVar.name}=${envVar.label}`)}`
+      )
+    ];
+    
+    return `goose://extension?${urlParts.join('&')}`;
+  };
+
+  // Generate step 3 content
+  const getStep3Content = () => {
+    if (customStep3) {
+      return customStep3;
+    }
+    
+    if (apiKeyLink && apiKeyLinkText) {
+      return (
+        <>
+          Get your <a href={apiKeyLink}>{apiKeyLinkText}</a> and paste it in
+        </>
+      );
+    }
+    
+    if (envVars.length > 0) {
+      const envVarNames = envVars.map(env => env.name).join(', ');
+      return `Obtain your ${envVarNames} and paste it in`;
+    }
+    
+    return 'Configure any required settings';
+  };
+
+  return (
+    <div>
+      <ol>
+        <li>
+          <a href={buildGooseUrl()}>Launch the installer</a>
+        </li>
+        <li>Click <code>OK</code> to confirm the installation</li>
+        <li>{getStep3Content()}</li>
+        <li>Click <code>Add Extension</code></li>
+        <li>Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar</li>
+        <li>Navigate to the chat</li>
+      </ol>
+    </div>
+  );
+}