docs: update mcp install instructions for desktop (#3504)

Co-authored-by: Rizel Scarlett <rizel@squareup.com>

documentation/docs/mcp/fetch-mcp.md

@@ -6,6 +6,7 @@ description: Add Fetch 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/_WMm4kDYMog" />
 
@@ -37,8 +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=mcp-server-fetch&id=fetch&name=Fetch&description=Web%20content%20fetching%20and%20processing%20capabilities)
-  2. Press `Yes` to confirm the installation
+  <GooseDesktopInstaller
+    extensionId="fetch"
+    extensionName="Fetch"
+    description="Web content fetching and processing capabilities"
+    command="uvx"
+    args={["mcp-server-fetch"]}
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/figma-mcp.md

@@ -6,6 +6,7 @@ description: Add Figma 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/vHK9Xg_d6Sk" />
 
@@ -38,11 +39,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=%40hapins%2Ffigma-mcp&id=figma&name=Figma&description=Figma%20design%20tool%20integration&env=FIGMA_ACCESS_TOKEN%3DAccess%20token%20from%20Figma%20user%20settings)
-  2. Press `Yes` to confirm the installation
-  3. Obtain a [Figma Access Token](https://www.figma.com/developers/api#access-tokens) and paste it in
-  4. Click `Save Configuration`
-  5. Scroll to the top and click `Exit` from the upper left corner
+  <GooseDesktopInstaller
+    extensionId="figma"
+    extensionName="Figma"
+    description="Figma design tool integration"
+    command="npx"
+    args={["-y", "@hapins/figma-mcp"]}
+    envVars={[
+      { name: "FIGMA_ACCESS_TOKEN", label: "Access token from Figma user settings" }
+    ]}
+    apiKeyLink="https://www.figma.com/developers/api#access-tokens"
+    apiKeyLinkText="Figma Access Token"
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/filesystem-mcp.md

@@ -6,6 +6,7 @@ description: Add Filesystem MCP Server as 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://youtube.com/embed/2IVPcjEr-yQ" /> 
 
@@ -28,15 +29,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. Click `...` in the upper right corner
-    2. Click `Advanced Settings`
-    3. Under `Extensions`, click the `Add Custom Extensions` button
-    4. On the `Add Extension Manually` modal, enter the following:
-            * **Type**: `Standard IO`
-            * **Extension Name**: `filesystem` (_set this to whatever you want_)
-            * **Description**: `filesystem MCP Server` (_(optional) set this to whatever you want_)
-            * **Command**: `npx -y @modelcontextprotocol/server-filesystem </path/to/allowed/directory>` (_Add additional allowed directories if desired, separated by a space._)
-    5. Click `Add Extension` button
+  <GooseDesktopInstaller
+    extensionId="filesystem"
+    extensionName="filesystem"
+    description="Filesystem MCP Server"
+    command="npx"
+    args={[
+        "-y",
+        "@modelcontextprotocol/server-filesystem",
+        "/Users/username/Desktop",
+        "/path/to/other/allowed/dir"
+    ]}
+  />
   </TabItem>
 
   <TabItem value="cli" label="Goose CLI">

documentation/docs/mcp/github-mcp.md

@@ -7,6 +7,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
 import CLIStreamExtensionInstructions from '@site/src/components/CLIStreamExtensionInstructions';
+import { PanelLeft } from 'lucide-react';
 
 <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/TbmQDv3SQOE" />
 
@@ -38,9 +39,9 @@ These steps configure the Remote MCP Server. For other deployment options, see t
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
     1. Obtain a [GitHub Personal Access Token](https://github.com/settings/personal-access-tokens)
-    2. Click the gear icon `⚙️` in the top right corner
-    3. Click `Advanced settings`
-    4. Under `Extensions`, click `Add custom extension`
+    2. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
+    3. Click `Extensions`
+    4. Click `Add custom extension`
     5. On the `Add custom extension` modal, enter the following:
        - **Extension Name**: GitHub
        - **Type**: Streamable HTTP
@@ -50,6 +51,7 @@ These steps configure the Remote MCP Server. For other deployment options, see t
          - **Value**: `Bearer <YOUR_GITHUB_PERSONAL_ACCESS_TOKEN>` 
     6. Click `+ Add` to save the header
     7. Click `Add Extension` to save the extension
+    8. Navigate to the chat
 
   </TabItem>
   <TabItem value="cli" label="Goose CLI">

documentation/docs/mcp/google-drive-mcp.md

@@ -6,6 +6,7 @@ description: Add Google Drive 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/p9HGYbJk9wU" />
 
@@ -92,24 +93,24 @@ You'll need to re-authenticate once a day when using the Google Drive extension.
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=%40modelcontextprotocol%2Fserver-gdrive&id=google-drive&name=Google%20Drive&description=Google%20Drive%20integration&env=GDRIVE_CREDENTIALS_PATH%3DPath%20to%20Google%20Drive%20credentials&env=GDRIVE_OAUTH_PATH%3DPath%20to%20OAuth%20token)
-  2. Press `Yes` to confirm the installation
-  3. For `GDRIVE_CREDENTIALS_PATH`, enter the following:
-  ```sh
-  $USER_HOME/.config/.gdrive-server-credentials.json
-  ```
-    :::info
-    Replace `$USER_HOME` with your home directory. You must specify an absolute path for this extension to work.
-    :::
-  4. For `GDRIVE_OAUTH_PATH`, enter the following:
-  ```sh
-  $USER_HOME/.config/gcp-oauth.keys.json
-  ```
-    :::info
-    Replace `$USER_HOME` with your home directory. You must specify an absolute path for this extension to work.
-    :::
-  5. Click `Save Configuration`
-  6. Scroll to the top and click `Exit` from the upper left corner
+  <GooseDesktopInstaller
+    extensionId="google-drive"
+    extensionName="Google Drive"
+    description="Google Drive integration"
+    command="npx"
+    args={["-y", "@modelcontextprotocol/server-gdrive"]}
+    envVars={[
+      { name: "GDRIVE_CREDENTIALS_PATH", label: "Path to Google Drive credentials" },
+      { name: "GDRIVE_OAUTH_PATH", label: "Path to OAuth token" }
+    ]}
+  />
+
+  :::info
+  - For `GDRIVE_CREDENTIALS_PATH`, enter `$USER_HOME/.config/.gdrive-server-credentials.json`
+  - For `GDRIVE_OAUTH_PATH`, enter `$USER_HOME/.config/gcp-oauth.keys.json`
+  
+  Replace `$USER_HOME` with your home directory. You must specify an absolute path for this extension to work.
+  :::
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/google-maps-mcp.md

@@ -6,6 +6,7 @@ description: Add Google Maps 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';
 
 
 This tutorial covers how to add the [Google Maps MCP Server](https://github.com/modelcontextprotocol/servers/tree/main/src/google-maps) as a Goose extension to enable geocoding, place searching, distance calculations, elevation data retrieval, and directions.
@@ -36,11 +37,18 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to
 
 <Tabs groupId="interface" defaultValue="ui">
   <TabItem value="ui" label="Goose Desktop">
-  1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=%40modelcontextprotocol%2Fserver-google-maps&id=google-maps&name=Google%20Maps&description=Google%20Maps%20API%20integration&env=GOOGLE_MAPS_API_KEY%3DGoogle%20Maps%20API%20key)
-  2. Press `Yes` to confirm the installation
-  3. Obtain a [GOOGLE_MAPS_API_KEY](https://developers.google.com/maps/documentation/javascript/get-api-key) and paste it in
-  4. Click `Save Configuration`
-  5. Scroll to the top and click `Exit` from the upper left corner
+  <GooseDesktopInstaller
+    extensionId="google-maps"
+    extensionName="Google Maps"
+    description="Google Maps API integration"
+    command="npx"
+    args={["-y", "@modelcontextprotocol/server-google-maps"]}
+    envVars={[
+      { name: "GOOGLE_MAPS_API_KEY", label: "Google Maps API Key" }
+    ]}
+    apiKeyLink="https://developers.google.com/maps/documentation/javascript/get-api-key"
+    apiKeyLinkText="Google Maps API Key"
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/jetbrains-mcp.md

@@ -6,6 +6,7 @@ description: Use JetBrains 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/1fP5elf9qQM" />
 
@@ -21,9 +22,10 @@ This tutorial covers how to enable and use the JetBrains MCP Server as a built-i
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. Click `...` in the upper right corner
-  2. Click `Advanced Settings`
-  3. Under `Extensions`, toggle `Jetbrains` to on.
+  <GooseBuiltinInstaller
+    extensionName="Jetbrains"
+    description="Integrate Goose with any JetBrains IDE"
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
 

documentation/docs/mcp/knowledge-graph-mcp.md

@@ -6,6 +6,7 @@ description: Add Knowledge Graph 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 GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 
 <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/PF6hpDaI9Mc" />
 
@@ -34,9 +35,13 @@ 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-memory&id=knowledge_graph_memory&name=Knowledge%20Graph%20Memory&description=Graph-based%20memory%20system%20for%20persistent%20knowledge%20storage)
-  2. Press `Yes` to confirm the installation
-  3. Scroll to the top and click `Exit` from the upper left corner
+  <GooseDesktopInstaller
+    extensionId="knowledge_graph_memory"
+    extensionName="Knowledge Graph Memory"
+    description="Graph-based memory system for persistent knowledge storage"
+    command="npx"
+    args={["-y", "@modelcontextprotocol/server-memory"]}
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/mbot-mcp.md

@@ -6,6 +6,7 @@ description: Control a MakeBlock mbot2 rover through MQTT and MCP as a Goose Ext
 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/QKg2Q6YCzdw" />
 
@@ -35,11 +36,18 @@ This tutorial will get you started with [deemkeen's MQTT MCP server](https://git
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. [Launch the installer](goose://extension?cmd=/path/to/java&arg=-jar&arg=/path/to/mbotmcp-0.0.1-SNAPSHOT.jar&name=mbot2&description=mbot2&env=MQTT_SERVER_URI%3Dtcp://1.2.3.4:1883&env=MQTT_USERNAME%3Dyour_username&env=MQTT_PASSWORD%3Dyour_password)
-  2. Press `Yes` to confirm the installation
-  3. Get your MQTT server URI, and your username/password if your MQTT uses authentication
-  4. Click `Save Configuration`
-  5. Scroll to the top and click `Exit` from the upper left corner
+  <GooseDesktopInstaller
+    extensionId="mbot2"
+    extensionName="mbot2"
+    description="mbot2"
+    command="/path/to/java"
+    args={["-jar", "/path/to/mbotmcp-0.0.1-SNAPSHOT.jar"]}
+    envVars={[
+      { name: "MQTT_SERVER_URI", label: "tcp://1.2.3.4:1883" },
+      { name: "MQTT_USERNAME", label: "your_username" },
+      { name: "MQTT_PASSWORD", label: "your_password" }
+    ]}
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:
@@ -205,13 +213,13 @@ This tutorial will get you started with [deemkeen's MQTT MCP server](https://git
     │
     └  Added mbot2 extension
   ```  
-    :::info 
-    MQTT_USERNAME and MQTT_PASSWORD are required to exist, but can be empty strings if your MQTT server does not require authentication.
-    :::
 
   </TabItem>
 </Tabs>
 
+    :::info 
+    MQTT_USERNAME and MQTT_PASSWORD are required to exist, but can be empty strings if your MQTT server does not require authentication.
+    :::
 
 ## Example Usage
 

documentation/docs/mcp/netlify-mcp.md

@@ -6,6 +6,7 @@ description: Add Netlify 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/iSUNmxOf6gw" />
 
@@ -41,8 +42,13 @@ netlify login
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=%40netlify%2Fmcp&id=netlify&name=Netlify&description=Build%2C%20deploy%2C%20and%20manage%20sites%20with%20Netlify%27s%20official%20MCP%20server.)
-  2. Press `OK` to confirm the installation
+  <GooseDesktopInstaller
+    extensionId="netlify"
+    extensionName="Netlify"
+    description="Build, deploy, and manage sites with Netlify's official MCP server."
+    command="npx"
+    args={["-y", "@netlify/mcp"]}
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/nostrbook-mcp.md

@@ -5,6 +5,7 @@ description: Add Nostrbook MCP Server as a Goose Extension
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 
 
 
@@ -29,10 +30,13 @@ 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=%40nostrbook%2Fmcp&id=nostrbook&name=Nostrbook&description=A%20comprehensive%20registry%20of%20Nostr%20documentation%20with%20structured%20knowledge)
-  2. Press `Yes` to confirm the installation
-  3. Click `Save Configuration`
-  4. Scroll to the top and click `Exit` from the upper left corner
+  <GooseDesktopInstaller
+    extensionId="nostrbook"
+    extensionName="Nostrbook"
+    description="A comprehensive registry of Nostr documentation with structured knowledge"
+    command="npx"
+    args={["-y", "@nostrbook/mcp"]}
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/pdf-mcp.md

@@ -6,6 +6,7 @@ description: Add PDF Reader 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/EJf2_iZfaWk" />
 
@@ -33,11 +34,14 @@ 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=mcp-read-pdf&id=pdf_read&name=PDF%20Reader&description=Read%20large%20and%20complex%20PDF%20documents)
-  2. Press `Yes` to confirm the installation
-  3. Click `Save Configuration`
-  4. Scroll to the top and click `Exit` from the upper left corner
-</TabItem>
+  <GooseDesktopInstaller
+    extensionId="pdf_read"
+    extensionName="PDF Reader"
+    description="Read large and complex PDF documents"
+    command="uvx"
+    args={["mcp-read-pdf"]}
+  />
+  </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:
   ```sh

documentation/docs/mcp/pieces-mcp.md

@@ -5,8 +5,8 @@ description: Add Pieces for Developers 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/V8zp9m9__t4" />
 
@@ -34,8 +34,12 @@ http://localhost:39300/model_context_protocol/2024-11-05/sse
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. [Launch the installer](goose://extension?url=http%3A%2F%2Flocalhost%3A39300%2Fmodel_context_protocol%2F2024-11-05%2Fsse&id=pieces&name=Pieces%20for%20Developers&description=Provides%20access%20to%20your%20Pieces%20Long-Term%20Memory.%20You%20need%20to%20have%20Pieces%20installed%20to%20use%20this.)
-  2. Press `Yes` to confirm the installation
+  <GooseDesktopInstaller
+    extensionId="pieces"
+    extensionName="Pieces for Developers"
+    description="Provides access to your Pieces Long-Term Memory. You need to have Pieces installed to use this."
+    url="http://localhost:39300/model_context_protocol/2024-11-05/sse"
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/playwright-mcp.md

@@ -6,6 +6,7 @@ description: Add Playwright MCP Server as a Goose Extension for Modern Web Testi
 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/iAxiFMlTE1Q" />
 
@@ -33,9 +34,13 @@ 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=@playwright/mcp@latest&id=playwright&name=Playwright&description=Modern%20web%20testing%20and%20automation)
-  2. Press `Yes` to confirm the installation
-  3. Scroll to the top and click `Exit` from the upper left corner
+  <GooseDesktopInstaller
+    extensionId="playwright"
+    extensionName="Playwright"
+    description="Modern web testing and automation"
+    command="npx"
+    args={["-y", "@playwright/mcp@latest"]}
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/postgres-mcp.md

@@ -6,6 +6,7 @@ description: Add PostgreSQL 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/PZlYQ5IthYM" />
 
@@ -60,11 +61,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=@modelcontextprotocol/server-postgres&arg=Your%20PostgreSQL%20connection%20URL&id=postgres&name=PostgreSQL&description=PostgreSQL%20database%20integration)
-  2. Press `Yes` to confirm the installation
-  3. Enter your PostgreSQL connection URL in the format: `postgresql://username:password@hostname:5432/database`
-  4. Click `Save Configuration`
-  5. Scroll to the top and click `Exit` from the upper left corner
+  <GooseDesktopInstaller
+    extensionId="postgres"
+    extensionName="PostgreSQL"
+    description="PostgreSQL database integration"
+    command="npx"
+    args={["-y", "@modelcontextprotocol/server-postgres", "Your PostgreSQL connection URL"]}
+  />
+
+  :::info
+  Enter your PostgreSQL connection URL in the format: `postgresql://username:password@hostname:5432/database`
+  :::
+
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/puppeteer-mcp.md

@@ -6,6 +6,7 @@ description: Add Puppeteer 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://youtube.com/embed/rms0wVGnlXA" />
 
@@ -34,10 +35,14 @@ 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-puppeteer&id=puppeteer&name=Puppeteer&description=Headless%20browser%20automation)
-  2. Press `Yes` to confirm the installation
-  3. Scroll to the top and click `Exit` from the upper left corner
-  </TabItem>
+  <GooseDesktopInstaller
+    extensionId="puppeteer"
+    extensionName="Puppeteer"
+    description="Headless browser automation"
+    command="npx"
+    args={["-y", "@modelcontextprotocol/server-puppeteer"]}
+  />
+</TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:
   ```sh

documentation/docs/mcp/repomix-mcp.md

@@ -6,6 +6,7 @@ description: Add Repomix 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/69h4LLkIg_E" />
 
@@ -34,11 +35,14 @@ 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=repomix&arg=--mcp&id=repomix&name=Repomix&description=Pack%20repositories%20into%20AI-friendly%20formats%20for%20Goose)
-  2. Press `Yes` to confirm the installation
-  3. Click `Save Configuration`
-  4. Scroll to the top and click `Exit` from the upper left corner
-  </TabItem>
+  <GooseDesktopInstaller
+    extensionId="repomix"
+    extensionName="Repomix"
+    description="Pack repositories into AI-friendly formats for Goose"
+    command="npx"
+    args={["-y", "repomix", "--mcp"]}
+  />
+</TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:
   ```sh

documentation/docs/mcp/selenium-mcp.md

@@ -6,6 +6,7 @@ description: Add Selenium 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/PLqPOEeGPLc" />
 
@@ -35,11 +36,14 @@ 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=%40angiejones%2Fmcp-selenium&id=selenium-mcp&name=Selenium%20MCP&description=automates%20browser%20interactions)
-  2. Press `Yes` to confirm the installation
-  3. Click `Save Configuration`
-  5. Scroll to the top and click `Exit` from the upper left corner
-  </TabItem>
+  <GooseDesktopInstaller
+    extensionId="selenium-mcp"
+    extensionName="Selenium MCP"
+    description="automates browser interactions"
+    command="npx"
+    args={["-y", "@angiejones/mcp-selenium"]}
+  />
+</TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:
   ```sh

documentation/docs/mcp/speech-mcp.md

@@ -6,6 +6,7 @@ description: Add Speech 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://youtube.com/embed/rurAp_WzOiY" />
 
@@ -19,7 +20,7 @@ This tutorial covers how to add the [Speech MCP Server](https://github.com/Kvadr
 :::tip TLDR
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  [Launch the installer](goose://extension?cmd=uvx&&arg=-p&arg=3.10.14&arg=speech-mcp@latest&id=speech_mcp&name=Speech%20Interface&description=Voice%20interaction%20with%20audio%20visualization%20for%20Goose)
+  [Launch the installer](goose://extension?cmd=uvx&arg=-p&arg=3.10.14&arg=speech-mcp@latest&id=speech_mcp&name=Speech%20Interface&description=Voice%20interaction%20with%20audio%20visualization%20for%20Goose)
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   **Command**
@@ -40,10 +41,13 @@ Before adding this extension, make sure [PortAudio](https://github.com/GoogleClo
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. [Launch the installer](goose://extension?cmd=uvx&&arg=-p&arg=3.10.14&arg=speech-mcp@latest&id=speech_mcp&name=Speech%20Interface&description=Voice%20interaction%20with%20audio%20visualization%20for%20Goose)
-  2. Press `Yes` to confirm the installation
-  3. Click `Save Configuration`
-  4. Scroll to the top and click `Exit` from the upper left corner
+  <GooseDesktopInstaller
+    extensionId="speech_mcp"
+    extensionName="Speech Interface"
+    description="Voice interaction with audio visualization for Goose"
+    command="uvx"
+    args={["-p", "3.10.14", "speech-mcp@latest"]}
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:

documentation/docs/mcp/square-mcp.md

@@ -6,6 +6,7 @@ description: Add the Square 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';
 
 <details>
   <summary> 🎥 Square MCP Server Video Walkthrough</summary>
@@ -53,9 +54,11 @@ 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](https://mcp.squareup.com/goose)
-     2. Goose will open and ask you to confirm installation.
-     3. Goose should open a browser tab to an OAuth permissions page. Double-check which permissions you want to allow, and click 'Grant Access'.
+     2. Click `OK` to confirm the installation
+     3. Goose should open a browser tab to an OAuth permissions page. Double-check which permissions you want to allow, and click `Grant Access`.
      4. It will ask you to login or reauthenticate to Square, and may ask you to confirm the permissions you want to allow.
+     5. In Goose, navigate to the chat
+
     </TabItem>
     <TabItem value="cli" label="Goose CLI">
     1. Run the `configure` command:
@@ -207,7 +210,8 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to
   :::tip TLDR
   <Tabs groupId="interface">
     <TabItem value="ui" label="Goose Desktop" default>
-    [Launch the installer](goose://extension?cmd=npx&arg=square-mcp-server%20start&id=square-mcp&name=Square%20MCP%20Server&description=Square%20MCP%20Server&env=ACCESS_TOKEN%3DYour%20Access%20Token&env=SANDBOX%3Dtrue)
+    [Launch the installer](goose://extension?cmd=npx&arg=square-mcp-server&arg=start&id=mcp_square_api&name=Square%20MCP%20Server&description=Square%20API%20MCP%20Server&env=ACCESS_TOKEN%3DYour%20Access%20Token&env=SANDBOX%3Dtrue)
+
     </TabItem>
     <TabItem value="cli" label="Goose CLI">
     **Command**
@@ -231,13 +235,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=square-mcp-server%20start&id=square-mcp&name=Square%20MCP%20Server&description=Square%20MCP%20Server&env=ACCESS_TOKEN%3DYour%20Access%20Token&env=SANDBOX%3Dtrue)
-  2. Press `Yes` to confirm the installation
-  3. Get your [Square Access Token](https://developer.squareup.com/apps) and paste it in
-  4. Keep `SANDBOX` as the environment variable, or change to `PRODUCTION`, and set its value to `true`
-  5. Click `Save Configuration`
-  6. Scroll to the top and click `Exit` from the upper left corner
-  </TabItem>
+    <GooseDesktopInstaller
+      extensionId="mcp_square_api"
+      extensionName="Square MCP Server"
+      description="Square API MCP Server"
+      command="npx"
+      args={["square-mcp-server", "start"]}
+      envVars={[
+        { name: "ACCESS_TOKEN", label: "Your Access Token" },
+        { name: "SANDBOX", label: "true" }
+      ]}
+      appendToStep3="Set SANDBOX or PRODUCTION to true (the access token must match the environment)"
+      apiKeyLink="https://developer.squareup.com/apps"
+      apiKeyLinkText="Square Access Token"
+    />
+    </TabItem>
   <TabItem value="cli" label="Goose CLI">
 
   1. Run the `configure` command:

documentation/docs/mcp/tavily-mcp.md

@@ -6,6 +6,7 @@ description: Add Tavily 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://youtube.com/embed/mxS2G9afGxE" />
 
@@ -37,12 +38,19 @@ 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=npx&arg=-y&arg=tavily-mcp&id=tavily&name=Tavily%20Web%20Search&description=Search%20the%20web%20with%20Tavily%20MCP&env=TAVILY_API_KEY%3DTavily%20API%20Key)
-  2. Press `Yes` to confirm the installation
-  3. Obtain a [TAVILY_API_KEY](https://tavily.com/) and paste it in
-  4. Click `Save Configuration`
-  5. Scroll to the top and click `Exit` from the upper left corner
-  </TabItem>
+  <GooseDesktopInstaller
+    extensionId="tavily"
+    extensionName="Tavily Web Search"
+    description="Search the web with Tavily MCP"
+    command="npx"
+    args={["-y", "tavily-mcp"]}
+    envVars={[
+      { name: "TAVILY_API_KEY", label: "Tavily API Key" }
+    ]}
+    apiKeyLink="https://tavily.com/"
+    apiKeyLinkText="Tavily API Key"
+  />
+</TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:
   ```sh

documentation/docs/mcp/tutorial-mcp.md

@@ -5,6 +5,7 @@ description: Learn how to use Goose's built-in Tutorial extension for guided lea
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller';
 
 The Tutorial extension is a built-in feature of Goose that provides interactive, step-by-step guidance for learning various aspects of Goose and its capabilities. It's designed to help users get comfortable with Goose's features through hands-on practice.
 
@@ -19,9 +20,9 @@ The Tutorial extension serves as an interactive learning tool that:
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. Click `...` in the upper right corner
-  2. Click `Advanced Settings`
-  3. Under `Extensions`, toggle `Tutorial` to on.
+  <GooseBuiltinInstaller
+    extensionName="Tutorial"
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
 

documentation/docs/mcp/youtube-transcript-mcp.md

@@ -6,6 +6,7 @@ description: Add YouTube Transcript MCP Server as a Goose Extension for accessin
 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/N38u7hZqZJg" />
 
@@ -34,10 +35,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%2Fjkawamoto%2Fmcp-youtube-transcript&arg=mcp-youtube-transcript&id=youtube-transcript&name=YouTube%20Transcript&description=Access%20YouTube%20video%20transcripts)
-  2. Press `Yes` to confirm the installation
-  3. Click `Save Configuration`
-  4. Scroll to the top and click `Exit` from the upper left corner
+  <GooseDesktopInstaller
+    extensionId="youtube-transcript"
+    extensionName="YouTube Transcript"
+    description="Access YouTube video transcripts"
+    command="uvx"
+    args={["--from", "git+https://github.com/jkawamoto/mcp-youtube-transcript", "mcp-youtube-transcript"]}
+  />
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command: