Docs: Created Component for MCP tutorials (#3475)

Co-authored-by: dianed-square <73617011+dianed-square@users.noreply.github.com>
This commit is contained in:
Rizel Scarlett
2025-07-17 12:57:53 -04:00
committed by GitHub
parent 6a5791ce96
commit fc40ed25ec
18 changed files with 291 additions and 323 deletions

View File

@@ -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)
2. Press `Yes` to confirm the installation
3. Obtain an [AGENTQL_API_KEY](https://dev.agentql.com/api-keys) and paste it in
4. Click `Save Configuration`
5. Scroll to the top and click `Exit` from the upper left corner
<GooseDesktopInstaller
extensionId="agentql"
extensionName="AgentQL"
description="Transform unstructured web content into structured data"
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:

View File

@@ -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)
2. Press `Yes` to confirm the installation
3. Obtain a NWC Connection secret from your lightning wallet (`nostr+walletconnect://...`) and paste it in to the "NWC Connection Secret" field
4. Click `Add Extension`
5. Scroll to the top and click `Exit` from the upper left corner
<GooseDesktopInstaller
extensionId="alby"
extensionName="Alby"
description="Connect Goose to your Bitcoin Lightning Wallet"
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`
8. Scroll to the top and click `Exit` from the upper left corner
7. Press `Add Extension`
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>

View File

@@ -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)
2. Press `Yes` to confirm the installation
3. Obtain a [Asana Access Token](https://app.asana.com/0/my-apps) and paste it in
<GooseDesktopInstaller
extensionId="asana"
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:

View File

@@ -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)
2. Press `Yes` to confirm the installation
4. Click `Save Configuration`
5. Scroll to the top and click `Exit` from the upper left corner
<GooseDesktopInstaller
extensionId="blender"
extensionName="Blender"
description="Blender 3D scene creation integration"
command="uvx"
args={["blender-mcp"]}
/>
</TabItem>
<TabItem value="cli" label="Goose CLI">
1. Run the `configure` command:

View File

@@ -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)
2. Press `Yes` to confirm the installation
3. Get your [Brave Search API Key](https://api-dashboard.search.brave.com/app/keys) and paste it in
4. Click `Save Configuration`
5. Scroll to the top and click `Exit` from the upper left corner
<GooseDesktopInstaller
extensionId="brave-search"
extensionName="Brave Search"
description="Brave Search API"
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:

View File

@@ -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)
2. Press `Yes` to confirm the installation
3. Obtain your [Browserbase Project ID and Browserbase API Key](https://browserbase.io/dashboard) and paste them in
4. Click `Save Configuration`
5. Scroll to the top and click `Exit` from the upper left corner
<GooseDesktopInstaller
extensionId="browserbase"
extensionName="Browserbase"
description="Automate web browsing and data extraction"
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:

View File

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

View File

@@ -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)
2. Press `Yes` to confirm the installation
3. Obtain your [CLOUDINARY_URL](https://console.cloudinary.com/settings/api-keys) from your Cloudinary dashboard and paste it in
4. Click `Save Configuration`
5. Scroll to the top and click `Exit` from the upper left corner
<GooseDesktopInstaller
extensionId="cloudinary"
extensionName="Cloudinary Asset Management"
description="Powerful media processing and transformation"
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:

View File

@@ -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
2. Click `Advanced Settings`
3. Under `Extensions`, toggle `Computer Controller` to on.
<GooseBuiltinInstaller
extensionName="Computer Controller"
description="Automate everyday computer tasks and web interactions"
/>
</TabItem>
<TabItem value="cli" label="Goose CLI">

View File

@@ -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
Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`.
:::
<Tabs groupId="interface">
<TabItem value="ui" label="Goose Desktop" default>
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)
2. Press <code>Yes</code> to confirm the installation
3. Click <code>Save Configuration</code>
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"
<GooseDesktopInstaller
extensionId="context7"
extensionName="Context7"
extensionDescription="Context7 MCP server for up-to-date code and docs"
command="npx"
args={["-y", "@upstash/context7-mcp"]}
cliCommand="npx -y @upstash/context7-mcp"
timeout={300}
/>
</TabItem>
</Tabs>
note="Note that you'll need Node.js installed on your system to run this command, as it uses npx."
/>
## Example Usage

View File

@@ -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
2. Click `Advanced Settings`
3. Under `Extensions`, toggle `Developer` to on.
<GooseBuiltinInstaller
extensionName="Developer"
description="Automate developer-centric tasks like file editing and shell commands"
/>
</TabItem>
<TabItem value="cli" label="Goose CLI">

View File

@@ -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
Note that you'll need [uv](https://docs.astral.sh/uv/#installation) installed on your system to run this command, as it uses `uvx`.
:::
<Tabs groupId="interface">
<TabItem value="ui" label="Goose Desktop" default>
1. [Launch the installer](goose://extension?cmd=uvx&arg=elevenlabs-mcp&id=elevenlabs&name=ElevenLabs&description=ElevenLabs%20voice%20synthesis%20server&env=ELEVENLABS_API_KEY)
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>
<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>
<GooseDesktopInstaller
extensionId="elevenlabs"
extensionName="ElevenLabs"
description="ElevenLabs voice synthesis server"
command="uvx"
args={["elevenlabs-mcp"]}
envVars={[
{ name: "ELEVENLABS_API_KEY", label: "ElevenLabs API Key" }
]}
apiKeyLink="https://elevenlabs.io/app/settings/api-keys"
apiKeyLinkText="Get your ElevenLabs API Key"
/>
## Example Usage

View File

@@ -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
2. Click `Advanced Settings`
3. Under `Extensions`, toggle `Memory` to on.
4. Scroll to the top and click `Exit` from the upper left corner
<GooseBuiltinInstaller
extensionName="Memory"
description="Store and recall personalized information for consistent assistance"
/>
</TabItem>
<TabItem value="cli" label="Goose CLI">

View File

@@ -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)
2. Press <code>Yes</code> to confirm the installation
3. Click <code>Save Configuration</code>
4. Scroll to the top and click <code>Exit</code> from the upper left corner
<GooseDesktopInstaller
extensionId="reddit"
extensionName="Reddit"
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)">

View File

@@ -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.
2. Select `Advanced settings` from the 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.
4. Scroll back to the top and click `<- Back` in the upper left corner to return to your session.
1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
2. Click `Extensions` in the sidebar menu.
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. 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">

View File

@@ -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
Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`.
:::
:::info
Note that you'll need [uv](https://docs.astral.sh/uv/#installation) installed on your system to run this command, as it uses `uvx`.
:::
:::info
Note that you'll need [JBang](https://www.jbang.dev/download) installed on your system to run this command, as it uses `jbang`.
:::
<Tabs groupId="interface">
<TabItem value="ui" label="Goose Desktop" default>
1. [Launch the installer]({goose_url})
2. Press <code>Yes</code> to confirm the installation
3. Obtain a [XYZ Access Token](/) and paste it in
4. Click <code>Save Configuration</code>
5. Scroll to the top and click <code>Exit</code> from the upper left corner
</TabItem>
<TabItem value="cli" label="Goose CLI (No Env Vars)">
<CLIExtensionInstructions
name="example"
command="npx -y @modelcontextprotocol/server-example"
<!-- For external MCP servers (npx, uvx, git, etc.) -->
<GooseDesktopInstaller
extensionId="{extension_id}"
extensionName="{Extension Name}"
extensionDescription="{Extension description}"
command="npx"
args={["-y", "@package/name"]}
cliCommand="npx -y @package/name"
timeout={300}
/>
</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)">
<!-- For built-in extensions -->
<GooseBuiltinInstaller
extensionName="{Extension Name}"
extensionDescription="{Extension description}"
extensionId="{extension_id}"
/>
<CLIExtensionInstructions
name="github"
command="gh issue list"
<!-- For external MCP servers with environment variables -->
<GooseDesktopInstaller
extensionId="{extension_id}"
extensionName="{Extension Name}"
extensionDescription="{Extension description}"
command="npx"
args={["-y", "@package/name"]}
cliCommand="npx -y @package/name"
timeout={300}
envVars={[
{ key: "GITHUB_TOKEN", value: "••••••••••••••••" }
{ key: "API_KEY", 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
Get your API key from{" "}
<a href="https://example.com/api-keys" target="_blank" rel="noopener noreferrer">
example.com
</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>
note="Note that you'll need Node.js installed on your system to run this command, as it uses npx."
/>
## Example Usage

View File

@@ -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;

View File

@@ -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>
);
}