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"
timeout={300}
/>
</TabItem>
</Tabs>
<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}
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)">