From fc40ed25eca779703284b893b462f4d075dd1b68 Mon Sep 17 00:00:00 2001 From: Rizel Scarlett Date: Thu, 17 Jul 2025 12:57:53 -0400 Subject: [PATCH] Docs: Created Component for MCP tutorials (#3475) Co-authored-by: dianed-square <73617011+dianed-square@users.noreply.github.com> --- documentation/docs/mcp/agentql-mcp.md | 18 +- documentation/docs/mcp/alby-mcp.md | 25 ++- documentation/docs/mcp/asana-mcp.md | 18 +- documentation/docs/mcp/blender-mcp.md | 12 +- documentation/docs/mcp/brave-mcp.md | 16 +- documentation/docs/mcp/browserbase-mcp.md | 19 +- documentation/docs/mcp/cloudflare-mcp.md | 1 + .../mcp/cloudinary-asset-management-mcp.md | 16 +- .../docs/mcp/computer-controller-mcp.md | 10 +- documentation/docs/mcp/context7-mcp.mdx | 32 ++-- documentation/docs/mcp/developer-mcp.md | 10 +- documentation/docs/mcp/elevenlabs-mcp.md | 175 ++---------------- documentation/docs/mcp/memory-mcp.md | 11 +- documentation/docs/mcp/reddit-mcp.md | 12 +- documentation/docs/quickstart.md | 9 +- documentation/docs/tutorials/_template_.mdx | 120 ++++-------- .../src/components/GooseBuiltinInstaller.tsx | 24 +++ .../src/components/GooseDesktopInstaller.tsx | 86 +++++++++ 18 files changed, 291 insertions(+), 323 deletions(-) create mode 100644 documentation/src/components/GooseBuiltinInstaller.tsx create mode 100644 documentation/src/components/GooseDesktopInstaller.tsx diff --git a/documentation/docs/mcp/agentql-mcp.md b/documentation/docs/mcp/agentql-mcp.md index 09c2787907..a5d5e8a7e8 100644 --- a/documentation/docs/mcp/agentql-mcp.md +++ b/documentation/docs/mcp/agentql-mcp.md @@ -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'; @@ -37,11 +38,18 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to - 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 + 1. Run the `configure` command: diff --git a/documentation/docs/mcp/alby-mcp.md b/documentation/docs/mcp/alby-mcp.md index 8dbf1c9fe6..42cbfc5219 100644 --- a/documentation/docs/mcp/alby-mcp.md +++ b/documentation/docs/mcp/alby-mcp.md @@ -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 - 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 + 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 button in the top-left to open the sidebar + 9. Navigate to the chat diff --git a/documentation/docs/mcp/asana-mcp.md b/documentation/docs/mcp/asana-mcp.md index d4a1c7a7a1..e28fa7b0f1 100644 --- a/documentation/docs/mcp/asana-mcp.md +++ b/documentation/docs/mcp/asana-mcp.md @@ -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'; @@ -39,14 +40,21 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to - 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 + :::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 1. Run the `configure` command: diff --git a/documentation/docs/mcp/blender-mcp.md b/documentation/docs/mcp/blender-mcp.md index 3e15407663..9cf5307262 100644 --- a/documentation/docs/mcp/blender-mcp.md +++ b/documentation/docs/mcp/blender-mcp.md @@ -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'; @@ -51,10 +52,13 @@ Note that you'll need [uv](https://docs.astral.sh/uv/#installation) installed on - 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 + 1. Run the `configure` command: diff --git a/documentation/docs/mcp/brave-mcp.md b/documentation/docs/mcp/brave-mcp.md index a8524dac2d..d502b96003 100644 --- a/documentation/docs/mcp/brave-mcp.md +++ b/documentation/docs/mcp/brave-mcp.md @@ -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'; @@ -37,11 +38,16 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to - 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 + 1. Run the `configure` command: diff --git a/documentation/docs/mcp/browserbase-mcp.md b/documentation/docs/mcp/browserbase-mcp.md index 1a844edcf4..8c62bc745f 100644 --- a/documentation/docs/mcp/browserbase-mcp.md +++ b/documentation/docs/mcp/browserbase-mcp.md @@ -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 - 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 + 1. Run the `configure` command: diff --git a/documentation/docs/mcp/cloudflare-mcp.md b/documentation/docs/mcp/cloudflare-mcp.md index 4950e4ac56..5e05d9482d 100644 --- a/documentation/docs/mcp/cloudflare-mcp.md +++ b/documentation/docs/mcp/cloudflare-mcp.md @@ -1,6 +1,7 @@ --- title: Cloudflare MCP Server description: Add Cloudflare MCP Servers as Goose Extensions +unlisted: true --- import Tabs from '@theme/Tabs'; diff --git a/documentation/docs/mcp/cloudinary-asset-management-mcp.md b/documentation/docs/mcp/cloudinary-asset-management-mcp.md index 6d5bbbe8dc..36cf534741 100644 --- a/documentation/docs/mcp/cloudinary-asset-management-mcp.md +++ b/documentation/docs/mcp/cloudinary-asset-management-mcp.md @@ -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'; @@ -38,11 +39,16 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to - 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 + 1. Run the `configure` command: diff --git a/documentation/docs/mcp/computer-controller-mcp.md b/documentation/docs/mcp/computer-controller-mcp.md index 00b6fc1264..ce974f9ec2 100644 --- a/documentation/docs/mcp/computer-controller-mcp.md +++ b/documentation/docs/mcp/computer-controller-mcp.md @@ -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'; @@ -19,13 +20,12 @@ Let Goose complete its tasks without interruption - avoid using your mouse or ke ## Configuration -1. Ensure extension is enabled: - - 1. Click `...` in the upper right corner - 2. Click `Advanced Settings` - 3. Under `Extensions`, toggle `Computer Controller` to on. + diff --git a/documentation/docs/mcp/context7-mcp.mdx b/documentation/docs/mcp/context7-mcp.mdx index 06d6a62aeb..a6093fa902 100644 --- a/documentation/docs/mcp/context7-mcp.mdx +++ b/documentation/docs/mcp/context7-mcp.mdx @@ -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'; @@ -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`. -::: - - - - 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 Yes to confirm the installation - 3. Click Save Configuration - 4. Scroll to the top and click Exit from the upper left corner - - - - - - - + ## Example Usage diff --git a/documentation/docs/mcp/developer-mcp.md b/documentation/docs/mcp/developer-mcp.md index 83f2de84b2..0c02b5767d 100644 --- a/documentation/docs/mcp/developer-mcp.md +++ b/documentation/docs/mcp/developer-mcp.md @@ -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'; @@ -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: - - 1. Click `...` in the upper right corner - 2. Click `Advanced Settings` - 3. Under `Extensions`, toggle `Developer` to on. + diff --git a/documentation/docs/mcp/elevenlabs-mcp.md b/documentation/docs/mcp/elevenlabs-mcp.md index 7029001f7d..1b23890b93 100644 --- a/documentation/docs/mcp/elevenlabs-mcp.md +++ b/documentation/docs/mcp/elevenlabs-mcp.md @@ -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'; @@ -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`. -::: - - - - 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 - - - 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 - ``` - - - + ## Example Usage diff --git a/documentation/docs/mcp/memory-mcp.md b/documentation/docs/mcp/memory-mcp.md index 5f772aea37..e287899888 100644 --- a/documentation/docs/mcp/memory-mcp.md +++ b/documentation/docs/mcp/memory-mcp.md @@ -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'; @@ -15,14 +16,12 @@ This tutorial covers enabling and using the Memory MCP Server, which is a built- ## Configuration -1. Ensure extension is enabled: - - 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 + diff --git a/documentation/docs/mcp/reddit-mcp.md b/documentation/docs/mcp/reddit-mcp.md index b10a7cf89a..0ac6e9472a 100644 --- a/documentation/docs/mcp/reddit-mcp.md +++ b/documentation/docs/mcp/reddit-mcp.md @@ -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'; @@ -37,10 +38,13 @@ Note that you'll need [uv](https://docs.astral.sh/uv/#installation) installed on - 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 Yes to confirm the installation - 3. Click Save Configuration - 4. Scroll to the top and click Exit from the upper left corner + diff --git a/documentation/docs/quickstart.md b/documentation/docs/quickstart.md index 24ab20f88b..42306856f3 100644 --- a/documentation/docs/quickstart.md +++ b/documentation/docs/quickstart.md @@ -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 - 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 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: diff --git a/documentation/docs/tutorials/_template_.mdx b/documentation/docs/tutorials/_template_.mdx index d94f749aff..ec2f6e62b2 100644 --- a/documentation/docs/tutorials/_template_.mdx +++ b/documentation/docs/tutorials/_template_.mdx @@ -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'; @@ -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`. -::: - - - - 1. [Launch the installer]({goose_url}) - 2. Press Yes to confirm the installation - 3. Obtain a [XYZ Access Token](/) and paste it in - 4. Click Save Configuration - 5. Scroll to the top and click Exit from the upper left corner - - - - - - - - - - When creating your access token, you can specify the repositories and granular permissions you'd like Goose to have access to.{" "} - - Create one here - . - - } - /> - - - - - - When creating your access token, you can specify the repositories and granular permissions you'd like Goose to have access to.{" "} - - Create one here - . - - } - /> - - - - - + + + Get your API key from{" "} + + example.com + . + + } + note="Note that you'll need Node.js installed on your system to run this command, as it uses npx." +/> ## Example Usage diff --git a/documentation/src/components/GooseBuiltinInstaller.tsx b/documentation/src/components/GooseBuiltinInstaller.tsx new file mode 100644 index 0000000000..3bed475dee --- /dev/null +++ b/documentation/src/components/GooseBuiltinInstaller.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { PanelLeft } from 'lucide-react'; + +interface GooseBuiltinInstallerProps { + extensionName: string; + description?: string; +} + +const GooseBuiltinInstaller: React.FC = ({ + extensionName, + description +}) => { + return ( +
+
    +
  1. Click the button in the top-left to open the sidebar
    2. +
  2. Click Extensions in the sidebar
    3. +
  3. Toggle {extensionName} on
    4. +
+
+ ); +}; + +export default GooseBuiltinInstaller; diff --git a/documentation/src/components/GooseDesktopInstaller.tsx b/documentation/src/components/GooseDesktopInstaller.tsx new file mode 100644 index 0000000000..9f7604e42f --- /dev/null +++ b/documentation/src/components/GooseDesktopInstaller.tsx @@ -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 {apiKeyLinkText} 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 ( +
+
    +
  1. + Launch the installer +
    2. +
  2. Click OK to confirm the installation
    3. +
  3. {getStep3Content()}
    4. +
  4. Click Add Extension
    5. +
  5. Click the button in the top-left to open the sidebar
    6. +
  6. Navigate to the chat
    7. +
+
+ ); +}