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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="figma"
-  3. Obtain a [Figma Access Token](https://www.figma.com/developers/api#access-tokens) and paste it in
+    extensionName="Figma"
-  4. Click `Save Configuration`
+    description="Figma design tool integration"
-  5. Scroll to the top and click `Exit` from the upper left corner
+    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
+  <GooseDesktopInstaller
-    2. Click `Advanced Settings`
+    extensionId="filesystem"
-    3. Under `Extensions`, click the `Add Custom Extensions` button
+    extensionName="filesystem"
-    4. On the `Add Extension Manually` modal, enter the following:
+    description="Filesystem MCP Server"
-            * **Type**: `Standard IO`
+    command="npx"
-            * **Extension Name**: `filesystem` (_set this to whatever you want_)
+    args={[
-            * **Description**: `filesystem MCP Server` (_(optional) set this to whatever you want_)
+        "-y",
-            * **Command**: `npx -y @modelcontextprotocol/server-filesystem </path/to/allowed/directory>` (_Add additional allowed directories if desired, separated by a space._)
+        "@modelcontextprotocol/server-filesystem",
-    5. Click `Add Extension` button
+        "/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
+    2. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
-    3. Click `Advanced settings`
+    3. Click `Extensions`
-    4. Under `Extensions`, click `Add custom extension`
+    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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="google-drive"
-  3. For `GDRIVE_CREDENTIALS_PATH`, enter the following:
+    extensionName="Google Drive"
-  ```sh
+    description="Google Drive integration"
-  $USER_HOME/.config/.gdrive-server-credentials.json
+    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.
   :::
-  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
   </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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="google-maps"
-  3. Obtain a [GOOGLE_MAPS_API_KEY](https://developers.google.com/maps/documentation/javascript/get-api-key) and paste it in
+    extensionName="Google Maps"
-  4. Click `Save Configuration`
+    description="Google Maps API integration"
-  5. Scroll to the top and click `Exit` from the upper left corner
+    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
+  <GooseBuiltinInstaller
-  2. Click `Advanced Settings`
+    extensionName="Jetbrains"
-  3. Under `Extensions`, toggle `Jetbrains` to on.
+    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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="knowledge_graph_memory"
-  3. Scroll to the top and click `Exit` from the upper left corner
+    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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="mbot2"
-  3. Get your MQTT server URI, and your username/password if your MQTT uses authentication
+    extensionName="mbot2"
-  4. Click `Save Configuration`
+    description="mbot2"
-  5. Scroll to the top and click `Exit` from the upper left corner
+    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.)
+  <GooseDesktopInstaller
-  2. Press `OK` to confirm the installation
+    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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="nostrbook"
-  3. Click `Save Configuration`
+    extensionName="Nostrbook"
-  4. Scroll to the top and click `Exit` from the upper left corner
+    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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="pdf_read"
-  3. Click `Save Configuration`
+    extensionName="PDF Reader"
-  4. Scroll to the top and click `Exit` from the upper left corner
+    description="Read large and complex PDF documents"
-</TabItem>
+    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.)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="playwright"
-  3. Scroll to the top and click `Exit` from the upper left corner
+    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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="postgres"
-  3. Enter your PostgreSQL connection URL in the format: `postgresql://username:password@hostname:5432/database`
+    extensionName="PostgreSQL"
-  4. Click `Save Configuration`
+    description="PostgreSQL database integration"
-  5. Scroll to the top and click `Exit` from the upper left corner
+    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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="puppeteer"
-  3. Scroll to the top and click `Exit` from the upper left corner
+    extensionName="Puppeteer"
-  </TabItem>
+    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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="repomix"
-  3. Click `Save Configuration`
+    extensionName="Repomix"
-  4. Scroll to the top and click `Exit` from the upper left corner
+    description="Pack repositories into AI-friendly formats for Goose"
-  </TabItem>
+    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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="selenium-mcp"
-  3. Click `Save Configuration`
+    extensionName="Selenium MCP"
-  5. Scroll to the top and click `Exit` from the upper left corner
+    description="automates browser interactions"
-  </TabItem>
+    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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="speech_mcp"
-  3. Click `Save Configuration`
+    extensionName="Speech Interface"
-  4. Scroll to the top and click `Exit` from the upper left corner
+    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.
+     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'.
+     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,12 +235,20 @@ 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)
+    <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+      extensionId="mcp_square_api"
-  3. Get your [Square Access Token](https://developer.squareup.com/apps) and paste it in
+      extensionName="Square MCP Server"
-  4. Keep `SANDBOX` as the environment variable, or change to `PRODUCTION`, and set its value to `true`
+      description="Square API MCP Server"
-  5. Click `Save Configuration`
+      command="npx"
-  6. Scroll to the top and click `Exit` from the upper left corner
+      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">
 

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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="tavily"
-  3. Obtain a [TAVILY_API_KEY](https://tavily.com/) and paste it in
+    extensionName="Tavily Web Search"
-  4. Click `Save Configuration`
+    description="Search the web with Tavily MCP"
-  5. Scroll to the top and click `Exit` from the upper left corner
+    command="npx"
-  </TabItem>
+    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
+  <GooseBuiltinInstaller
-  2. Click `Advanced Settings`
+    extensionName="Tutorial"
-  3. Under `Extensions`, toggle `Tutorial` to on.
+  />
   </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)
+  <GooseDesktopInstaller
-  2. Press `Yes` to confirm the installation
+    extensionId="youtube-transcript"
-  3. Click `Save Configuration`
+    extensionName="YouTube Transcript"
-  4. Scroll to the top and click `Exit` from the upper left corner
+    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:

documentation/src/components/GooseDesktopInstaller.tsx

@@ -10,12 +10,17 @@ interface GooseDesktopInstallerProps {
   extensionId: string;
   extensionName: string;
   description: string;
-  command: string;
+  // Command-line extension props (optional when using url)
-  args: string[];
+  command?: string;
+  args?: string[];
+  // SSE extension prop (optional when using command+args)
+  url?: string;
   envVars?: EnvVar[];
   apiKeyLink?: string;
   apiKeyLinkText?: string;
   customStep3?: string;
+  hasEnvVars?: boolean; // Explicit control over configuration steps
+  appendToStep3?: string;
 }
 
 export default function GooseDesktopInstaller({
@@ -24,30 +29,43 @@ export default function GooseDesktopInstaller({
   description,
   command,
   args,
+  url,
   envVars = [],
   apiKeyLink,
   apiKeyLinkText,
-  customStep3
+  customStep3,
+  hasEnvVars,
+  appendToStep3
 }: GooseDesktopInstallerProps) {
   
   // Build the goose:// URL
   const buildGooseUrl = () => {
-    const urlParts = [
+    let urlParts = [];
-      `cmd=${encodeURIComponent(command)}`,
+    
-      ...args.map(arg => `arg=${encodeURIComponent(arg)}`),
+    // Add SSE extension URL or command-line extension command+args first
+    if (url) {
+      urlParts.push(`url=${encodeURIComponent(url)}`);
+    } else if (command && args) {
+      urlParts.push(`cmd=${encodeURIComponent(command)}`);
+      urlParts.push(...args.map(arg => `arg=${encodeURIComponent(arg)}`));
+    }
+    
+    // Add common parameters
+    urlParts.push(
       `id=${encodeURIComponent(extensionId)}`,
       `name=${encodeURIComponent(extensionName)}`,
-      `description=${encodeURIComponent(description)}`,
+      `description=${encodeURIComponent(description)}`
+    );
+    
     // Add environment variables (matching TLDR sections encoding)
-      ...envVars.map(envVar => 
+    urlParts.push(...envVars.map(envVar => 
       `env=${encodeURIComponent(`${envVar.name}=${envVar.label}`)}`
-      )
+    ));
-    ];
     
     return `goose://extension?${urlParts.join('&')}`;
   };
 
-  // Generate step 3 content
+  // Generate step 3 content (only if needed)
   const getStep3Content = () => {
     if (customStep3) {
       return customStep3;
@@ -66,9 +84,23 @@ export default function GooseDesktopInstaller({
       return `Obtain your ${envVarNames} and paste it in`;
     }
     
-    return 'Configure any required settings';
+    return null; // No configuration needed
   };
 
+  const content = getStep3Content();
+  const step3Content = appendToStep3
+    ? (
+        <>
+          {content}
+          {content ? <br /> : null}
+          {appendToStep3}
+        </>
+      )
+    : content;
+  
+  const hasConfigurationContent = step3Content !== null;
+  const shouldShowConfigurationSteps = hasEnvVars ?? hasConfigurationContent;
+
   return (
     <div>
       <ol>
@@ -76,8 +108,12 @@ export default function GooseDesktopInstaller({
           <a href={buildGooseUrl()}>Launch the installer</a>
         </li>
         <li>Click <code>OK</code> to confirm the installation</li>
-        <li>{getStep3Content()}</li>
+        {shouldShowConfigurationSteps && (
+          <>
+            <li>{step3Content}</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>