docs: use installer component for tutorial, add updating extensions section (#3608)

documentation/docs/getting-started/using-extensions.md

@@ -5,7 +5,7 @@ title: Using Extensions
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import { PanelLeft } from 'lucide-react';
+import { PanelLeft, Settings } from 'lucide-react';
 
 Extensions are add-ons that provide a way to extend the functionality of Goose by connecting with applications and tools you already use in your workflow. These extensions can be used to add new features, access data and resources, or integrate with other systems.
 
@@ -22,10 +22,10 @@ Out of the box, Goose is installed with a few extensions but with only the `Deve
 
 Here are the built-in extensions:
 
-1. **Developer**: provides a set of general development tools that are useful for software development.
-2. **Computer Controller**: provides general computer control tools for webscraping, file caching, and automations.
-3. **Memory**: teaches goose to remember your preferences as you use it
-4. **JetBrains**: provides an integration for working with JetBrains IDEs.
+- [Developer](/docs/mcp/developer-mcp): Provides a set of general development tools that are useful for software development.
+- [Computer Controller](/docs/mcp/computer-controller-mcp): Provides general computer control tools for webscraping, file caching, and automations.
+- [Memory](/docs/mcp/memory-mcp): Teaches Goose to remember your preferences as you use it.
+- [Tutorial](/docs/mcp/tutorial-mcp): Provides interactive tutorials for learning about Goose.
 
 
 #### Toggling Built-in Extensions
@@ -500,6 +500,29 @@ extension_name: postgresql
 </TabItem>
 </Tabs>
 
+## Updating Extension Properties
+
+Goose relies on extension properties to determine how to handle an extension. You can edit these properties if you want to change the extension's display settings and behavior, such as the name, timeout, or environment variables.
+
+<Tabs groupId="interface">
+  <TabItem value="ui" label="Goose Desktop" default>
+
+  1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
+  2. Click the `Extensions` button on the sidebar.
+  3. Under `Extensions`, click the <Settings className="inline" size={16} /> button on the extension you'd like to edit.
+  4. In the dialog that appears, edit the extension's properties as needed.
+  5. Click `Save Changes`.
+
+  </TabItem>
+
+  <TabItem value="cli" label="Config file">
+  
+  1. Navigate to the Goose [configuration file](/docs/guides/config-file). For example, navigate to `~/.config/goose/config.yaml` on macOS.
+  2. Edit the extension properties as needed and save your changes.
+
+  </TabItem>
+</Tabs>
+
 ## Removing Extensions
 
 You can remove installed extensions. 
@@ -509,7 +532,7 @@ You can remove installed extensions.
 
   1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
   2. Click the `Extensions` button on the sidebar.
-  3. Under `Extensions`, find the extension you'd like to remove and click on the settings icon beside it.
+  3. Under `Extensions`,  click the <Settings className="inline" size={16} /> button on the extension you'd like to remove.
   4. In the dialog that appears, click `Remove Extension`.
 
   </TabItem>

documentation/docs/mcp/mongodb-mcp.md

@@ -5,6 +5,7 @@ description: Add MongoDB MCP Server as a Goose Extension
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 
 The MongoDB MCP Server extension allows Goose to interact directly with your MongoDB databases, enabling comprehensive database operations including querying, document manipulation, collection management, and database administration. This makes it easy to work with your MongoDB databases through natural language interactions.
 
@@ -55,11 +56,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=mongodb-mcp-server&arg=--connection-string&arg=mongodb://localhost:27017&id=mongodb&name=MongoDB&description=MongoDB%20database%20integration)
-  2. Press `Yes` to confirm the installation
-  3. Enter your MongoDB connection string in the format: `mongodb://username:password@hostname:27017/database`
-  4. Click `Save Configuration`
-  5. Scroll to the top and click `Exit` from the upper left corner
+    <GooseDesktopInstaller
+      extensionId="mongodb"
+      extensionName="MongoDB"
+      description="MongoDB database integration"
+      command="npx"
+      args={["-y", "mongodb-mcp-server", "--connection-string", "mongodb://localhost:27017"]}
+    />
+    
+    :::info Configure Your Connection String
+    If needed, [update the extension](/docs/getting-started/using-extensions#updating-extension-properties) to match to your [MongoDB environment](#customizing-your-connection). For example, change the connection string in the `command` property to use the `mongodb://username:password@hostname:27017/database` format.
+    :::
+
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
   1. Run the `configure` command:
@@ -100,7 +108,7 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to
     └ 
   ```
 
-  4. Enter the command with your database connection string
+  4. Enter the command with the database connection string that matches your [MongoDB environment](#customizing-your-connection)
   ```sh
     ┌   goose-configure 
     │