docs: Add CLIExtensionInstructions Component + Update Tutorial Template (#2634)

This commit is contained in:
Ebony Louis
2025-05-22 10:45:57 -07:00
committed by GitHub
parent 767f655873
commit e44fbeeb5f
4 changed files with 332 additions and 374 deletions

View File

@@ -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';
<YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/VIDEO_ID" />
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
<Tabs groupId="interface">
<TabItem value="ui" label="Goose Desktop" default>
[Launch the installer]({goose_url})
</TabItem>
<TabItem value="cli" label="Goose CLI">
**Command**
```sh
{command}
```
</TabItem>
</Tabs>
**Environment Variable**
```
{env_var}: <ENV_VALUE>
```
:::
## 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 `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
</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
```
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
```
</TabItem>
</Tabs>
## Example Usage
{describe any environment setup, access controls, and what you want to accomplish.}
### Goose Prompt
> _exact prompt_
### Goose Output
:::note Desktop
{exact output}
:::

View File

@@ -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';
<YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/VIDEO_ID" />
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
<Tabs groupId="interface">
<TabItem value="ui" label="Goose Desktop" default>
[Launch the installer]({goose_url})
</TabItem>
<TabItem value="cli" label="Goose CLI">
**Command**
```sh
{command}
```
</TabItem>
</Tabs>
**Environment Variable**
```
{env_var}: <ENV_VALUE>
```
:::
## 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"
timeout={300}
/>
</TabItem>
<TabItem value="cli" label="Goose CLI (ONE env variable & infoNote linking where to obtain one)">
<CLIExtensionInstructions
name="github"
command="gh issue list"
timeout={300}
envVars={[
{ key: "GITHUB_TOKEN", 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
</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>
## Example Usage
{describe any environment setup, access controls, and what you want to accomplish.}
### Goose Prompt
> _exact prompt_
### Goose Output
:::note Desktop
{exact output}
:::

View File

@@ -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';
<YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/TbmQDv3SQOE" />
@@ -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
</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
```
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
```
<CLIExtensionInstructions
name="github"
command="npx -y @modelcontextprotocol/server-github"
timeout={300}
envVars={[
{ key: "GITHUB_TOKEN", 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
</a>.
</>
}
/>
</TabItem>
</Tabs>