From e44fbeeb5fe88408cb3f07354522a8b11df1fb6e Mon Sep 17 00:00:00 2001 From: Ebony Louis <55366651+EbonyLouis@users.noreply.github.com> Date: Thu, 22 May 2025 10:45:57 -0700 Subject: [PATCH] docs: Add CLIExtensionInstructions Component + Update Tutorial Template (#2634) --- documentation/docs/tutorials/_template_.md | 225 ------------------ documentation/docs/tutorials/_template_.mdx | 135 +++++++++++ documentation/docs/tutorials/github-mcp.md | 170 ++----------- .../components/CLIExtensionInstructions.js | 176 ++++++++++++++ 4 files changed, 332 insertions(+), 374 deletions(-) delete mode 100644 documentation/docs/tutorials/_template_.md create mode 100644 documentation/docs/tutorials/_template_.mdx create mode 100644 documentation/src/components/CLIExtensionInstructions.js diff --git a/documentation/docs/tutorials/_template_.md b/documentation/docs/tutorials/_template_.md deleted file mode 100644 index 9f5cba25..00000000 --- a/documentation/docs/tutorials/_template_.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: {name} Extension -description: Add {name} MCP Server as a Goose Extension ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed'; - - - - -This tutorial covers how to add the [{name} MCP Server](/) as a Goose extension to enable file operations, repository management, search functionality, and more. - -:::tip TLDR - - - [Launch the installer]({goose_url}) - - - **Command** - ```sh - {command} - ``` - - - **Environment Variable** - ``` - {env_var}: - ``` -::: - -## 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 - - - 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 - └ - ``` - - 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? - │ {name} - // 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? - │ {name} - │ - // highlight-start - ◆ What command should be run? - │ {command} - // 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? - │ {name} - │ - ◇ What command should be run? - │ {command} - │ - // 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? - │ {name} - │ - ◇ What command should be run? - │ {command} - │ - ◆ Please set the timeout for this tool (in secs): - │ 300 - │ - // highlight-start - ◇ Would you like to add a description? - │ No - // highlight-end - │ - └ - ``` - - 7. Obtain a [GitHub Personal Access Token](https://github.com/settings/personal-access-tokens) and paste it in. - :::info - When creating your access token, you can specify the repositories and granular permissions you'd like Goose to have access to. - ::: - - ```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? - │ {name} - │ - ◇ What command should be run? - │ {command} - │ - ◇ 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: - │ {env_var} - │ - ◇ Environment variable value: - │ ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ - │ - ◇ Add another environment variable? - │ No - // highlight-end - └ Added github extension - ``` - - - - -## Example Usage - -{describe any environment setup, access controls, and what you want to accomplish.} - -### Goose Prompt - -> _exact prompt_ - - -### Goose Output - -:::note Desktop - -{exact output} - -::: \ No newline at end of file diff --git a/documentation/docs/tutorials/_template_.mdx b/documentation/docs/tutorials/_template_.mdx new file mode 100644 index 00000000..d94f749a --- /dev/null +++ b/documentation/docs/tutorials/_template_.mdx @@ -0,0 +1,135 @@ +--- +title: {name} Extension + +escription: Add {name} MCP Server as a Goose Extension +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed'; +import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions'; + + + + + +This tutorial covers how to add the [{name} MCP Server](/) as a Goose extension to enable file operations, repository management, search functionality, and more. + +:::tip TLDR + + + [Launch the installer]({goose_url}) + + + **Command** + ```sh + {command} + ``` + + + **Environment Variable** + ``` + {env_var}: + ``` +::: + +## 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 + . + + } + /> + + + + + + +## Example Usage + +{describe any environment setup, access controls, and what you want to accomplish.} + +### Goose Prompt + +> _exact prompt_ + + +### Goose Output + +:::note Desktop + +{exact output} + +::: \ No newline at end of file diff --git a/documentation/docs/tutorials/github-mcp.md b/documentation/docs/tutorials/github-mcp.md index e3d3a676..497ebe15 100644 --- a/documentation/docs/tutorials/github-mcp.md +++ b/documentation/docs/tutorials/github-mcp.md @@ -6,6 +6,7 @@ description: Add GitHub MCP Server as a Goose Extension import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed'; +import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions'; @@ -45,156 +46,27 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to 5. 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 - └ - ``` - - 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? - │ github - // 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? - │ github - │ - // highlight-start - ◆ What command should be run? - │ npx -y @modelcontextprotocol/server-github - // 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? - │ github - │ - ◇ What command should be run? - │ npx -y @modelcontextprotocol/server-github - │ - // 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? - │ github - │ - ◇ What command should be run? - │ npx -y @modelcontextprotocol/server-github - │ - ◆ Please set the timeout for this tool (in secs): - │ 300 - │ - // highlight-start - ◇ Would you like to add a description? - │ No - // highlight-end - │ - └ - ``` - - 7. Obtain a [GitHub Personal Access Token](https://github.com/settings/personal-access-tokens) and paste it in. - :::info - When creating your access token, you can specify the repositories and granular permissions you'd like Goose to have access to. - ::: - - ```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? - │ github - │ - ◇ What command should be run? - │ npx -y @modelcontextprotocol/server-github - │ - ◇ 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: - │ GITHUB_PERSONAL_ACCESS_TOKEN - │ - ◇ Environment variable value: - │ ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ - │ - ◇ Add another environment variable? - │ No - // highlight-end - └ Added github extension - ``` + + When creating your access token, you can specify the repositories and granular permissions you'd like Goose to have access to.{" "} + + Create one here + . + + } + /> diff --git a/documentation/src/components/CLIExtensionInstructions.js b/documentation/src/components/CLIExtensionInstructions.js new file mode 100644 index 00000000..2e1df037 --- /dev/null +++ b/documentation/src/components/CLIExtensionInstructions.js @@ -0,0 +1,176 @@ +import React from 'react'; +import CodeBlock from '@theme/CodeBlock'; + +export default function CLIExtensionInstructions({ + name, + command, + timeout = 300, + envVars = [], + infoNote, +}) { + const hasEnvVars = envVars.length > 0; + const envStepText = hasEnvVars + ? `Add environment variable${envVars.length > 1 ? 's' : ''} for ${name}` + : 'Choose No when asked to add environment variables'; + + return ( +
+
    +
  1. Run the configure command:
    2. +
+ {`goose configure`} + +
    +
  1. Choose to add a Command-line Extension.
    2. +
+ {`┌ 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 +└`} + +
    +
  1. Give your extension a name.
    2. +
+ {`┌ 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? +│ ${name} +// highlight-end +└`} + +
    +
  1. Enter the command to run when this extension is used.
    2. +
+ {`┌ 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? +│ ${name} +│ +// highlight-start +◆ What command should be run? +│ ${command} +// highlight-end +└`} + +
    +
  1. + Enter the number of seconds Goose should wait for actions to complete before timing out. Default is 300 seconds. +
    2. +
+ {`┌ 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? +│ ${name} +│ +◇ What command should be run? +│ ${command} +│ +// highlight-start +◆ Please set the timeout for this tool (in secs): +│ ${timeout} +// highlight-end +└`} + +
    +
  1. Choose to add a description. If you select Yes, you’ll be prompted to enter a description for the extension.
    2. +
+ {`┌ 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? +│ ${name} +│ +◇ What command should be run? +│ ${command} +│ +◇ Please set the timeout for this tool (in secs): +│ ${timeout} +│ +// highlight-start +◆ Would you like to add a description? +│ No +// highlight-end +└`} + +
    +
  1. {envStepText}
    2. +
+ + {hasEnvVars && ( + <> + {infoNote &&
{infoNote}
} + + {`┌ 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? +│ ${name} +│ +◇ What command should be run? +│ ${command} +│ +◇ Please set the timeout for this tool (in secs): +│ ${timeout} +│ +◇ Would you like to add a description? +│ No +│ +// highlight-start +◆ Would you like to add environment variables? +│ Yes +${envVars + .map( + ({ key, value }, i) => `│ +◇ Environment variable name: +│ ${key} +│ +◇ Environment variable value: +│ ${value} +│ +◇ Add another environment variable? +│ ${i === envVars.length - 1 ? 'No' : 'Yes'}` + ) + .join('\n')} +// highlight-end +└ Added ${name} extension`} + + )} +
+ ); +}