From b22f50d1a1d33679d6a63aa8955b1a2bc4623e62 Mon Sep 17 00:00:00 2001 From: dianed-square <73617011+dianed-square@users.noreply.github.com> Date: Tue, 15 Jul 2025 16:31:23 -0700 Subject: [PATCH] docs: add CLIStreamExtensionInstructions component (#3443) --- documentation/docs/mcp/github-mcp.md | 257 +----------------- .../CLIStreamExtensionInstructions.js | 244 +++++++++++++++++ 2 files changed, 258 insertions(+), 243 deletions(-) create mode 100644 documentation/src/components/CLIStreamExtensionInstructions.js diff --git a/documentation/docs/mcp/github-mcp.md b/documentation/docs/mcp/github-mcp.md index 5403521e..90164f42 100644 --- a/documentation/docs/mcp/github-mcp.md +++ b/documentation/docs/mcp/github-mcp.md @@ -6,7 +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'; +import CLIStreamExtensionInstructions from '@site/src/components/CLIStreamExtensionInstructions'; @@ -53,251 +53,22 @@ These steps configure the Remote MCP Server. For other deployment options, see t - 1. Run the `configure` command: - ```sh - goose configure - ``` + + Obtain your GitHub Personal Access Token and paste it in + + } + /> - 2. Choose to add a `Remote Extension (Streaming HTTP)` - ```sh - ┌ goose-configure - │ - ◇ What would you like to configure? - │ Add Extension - │ - ◆ What type of extension would you like to add? - │ ○ Built-in Extension - │ ○ Command-line Extension (Run a local command or script) - │ ○ Remote Extension (SSE) - // highlight-start - │ ● Remote Extension (Streaming HTTP) - // highlight-end - └ - ``` - - 3. Give your extension a name - ```sh - ┌ goose-configure - │ - ◇ What would you like to configure? - │ Add Extension - │ - ◇ What type of extension would you like to add? - │ Remote Extension (Streaming HTTP) - │ - // highlight-start - ◆ What would you like to call this extension? - │ github - // highlight-end - └ - ``` - - 4. Enter the Streaming HTTP endpoint URI - ```sh - ┌ goose-configure - │ - ◇ What would you like to configure? - │ Add Extension - │ - ◇ What type of extension would you like to add? - │ Remote Extension (Streaming HTTP) - │ - ◇ What would you like to call this extension? - │ github - │ - // highlight-start - ◆ What is the Streaming HTTP endpoint URI? - │ https://api.githubcopilot.com/mcp/ - // highlight-end - └ - ``` - - 5. Set the timeout - ```sh - ┌ goose-configure - │ - ◇ What would you like to configure? - │ Add Extension - │ - ◇ What type of extension would you like to add? - │ Remote Extension (Streaming HTTP) - │ - ◇ What would you like to call this extension? - │ github - │ - ◇ What is the Streaming HTTP endpoint URI? - │ https://api.githubcopilot.com/mcp/ - │ - // highlight-start - ◆ Please set the timeout for this tool (in secs): - │ 300 - // highlight-end - └ - ``` - - 6. Choose whether to add a description - ```sh - ┌ goose-configure - │ - ◇ What would you like to configure? - │ Add Extension - │ - ◇ What type of extension would you like to add? - │ Remote Extension (Streaming HTTP) - │ - ◇ What would you like to call this extension? - │ github - │ - ◇ What is the Streaming HTTP endpoint URI? - │ https://api.githubcopilot.com/mcp/ - │ - ◇ Please set the timeout for this tool (in secs): - │ 300 - │ - // highlight-start - ◆ Would you like to add a description? - │ No - // highlight-end - └ - ``` - - 7. Add a custom header for authentication - ```sh - ┌ goose-configure - │ - ◇ What would you like to configure? - │ Add Extension - │ - ◇ What type of extension would you like to add? - │ Remote Extension (Streaming HTTP) - │ - ◇ What would you like to call this extension? - │ github - │ - ◇ What is the Streaming HTTP endpoint URI? - │ https://api.githubcopilot.com/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 custom headers? - │ Yes - // highlight-end - └ - ``` - - 8. Enter the Authorization header - ```sh - ┌ goose-configure - │ - ◇ What would you like to configure? - │ Add Extension - │ - ◇ What type of extension would you like to add? - │ Remote Extension (Streaming HTTP) - │ - ◇ What would you like to call this extension? - │ github - │ - ◇ What is the Streaming HTTP endpoint URI? - │ https://api.githubcopilot.com/mcp/ - │ - ◇ Please set the timeout for this tool (in secs): - │ 300 - │ - ◇ Would you like to add a description? - │ No - │ - ◇ Would you like to add custom headers? - │ Yes - │ - // highlight-start - ◆ Header name: - │ Authorization - // highlight-end - └ - ``` - - 9. Enter your [GitHub Personal Access Token](https://github.com/settings/personal-access-tokens) - ```sh - ┌ goose-configure - │ - ◇ What would you like to configure? - │ Add Extension - │ - ◇ What type of extension would you like to add? - │ Remote Extension (Streaming HTTP) - │ - ◇ What would you like to call this extension? - │ github - │ - ◇ What is the Streaming HTTP endpoint URI? - │ https://api.githubcopilot.com/mcp/ - │ - ◇ Please set the timeout for this tool (in secs): - │ 300 - │ - ◇ Would you like to add a description? - │ No - │ - ◇ Would you like to add custom headers? - │ Yes - │ - ◇ Header name: - │ Authorization - │ - // highlight-start - ◆ Header value: - │ Bearer ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - // highlight-end - └ - ``` - - 10. Choose not to add another header - ```sh - ┌ goose-configure - │ - ◇ What would you like to configure? - │ Add Extension - │ - ◇ What type of extension would you like to add? - │ Remote Extension (Streaming HTTP) - │ - ◇ What would you like to call this extension? - │ github - │ - ◇ What is the Streaming HTTP endpoint URI? - │ https://api.githubcopilot.com/mcp/ - │ - ◇ Please set the timeout for this tool (in secs): - │ 100 - │ - ◇ Would you like to add a description? - │ No - │ - ◇ Would you like to add custom headers? - │ Yes - │ - ◇ Header name: - │ Authorization - │ - ◇ Header value: - │ Bearer ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - │ - // highlight-start - ◆ Add another header? - │ No - │ - // highlight-end - └ Added github extension - ``` - ## Example Usage diff --git a/documentation/src/components/CLIStreamExtensionInstructions.js b/documentation/src/components/CLIStreamExtensionInstructions.js new file mode 100644 index 00000000..286f7044 --- /dev/null +++ b/documentation/src/components/CLIStreamExtensionInstructions.js @@ -0,0 +1,244 @@ +import React from 'react'; +import CodeBlock from '@theme/CodeBlock'; +import Admonition from '@theme/Admonition'; + +export default function CLIStreamExtensionInstructions({ + name, + endpointUri, + timeout = 300, + headers = [], + infoNote, +}) { + const hasHeaders = headers.length > 0; + const headerStepText = hasHeaders + ? `Choose Yes when asked to add custom headers` + : 'Choose No when asked to add custom headers'; + + return ( +
+
    +
  1. Run the configure command:
    2. +
+ {`goose configure`} + +
    +
  1. Choose to add a Remote Extension (Streaming HTTP)
    2. +
+ {`┌ goose-configure +│ +◇ What would you like to configure? +│ Add Extension +│ +◆ What type of extension would you like to add? +│ ○ Built-in Extension +│ ○ Command-line Extension +│ ○ Remote Extension (SSE) +// highlight-start +│ ● Remote Extension (Streaming HTTP) (Connect to a remote extension via MCP Streaming HTTP) +// highlight-end +└`} + +
    +
  1. Give your extension a name
    2. +
+ {`┌ goose-configure +│ +◇ What would you like to configure? +│ Add Extension +│ +◇ What type of extension would you like to add? +│ Remote Extension (Streaming HTTP) +│ +// highlight-start +◆ What would you like to call this extension? +│ ${name} +// highlight-end +└`} + +
    +
  1. Enter the endpoint URI
    2. +
+ {`┌ goose-configure +│ +◇ What would you like to configure? +│ Add Extension +│ +◇ What type of extension would you like to add? +│ Remote Extension (Streaming HTTP) +│ +◇ What would you like to call this extension? +│ ${name} +│ +// highlight-start +◆ What is the Streaming HTTP endpoint URI? +│ ${endpointUri} +// 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 +│ +◇ What type of extension would you like to add? +│ Remote Extension (Streaming HTTP) +│ +◇ What would you like to call this extension? +│ ${name} +│ +◇ What is the Streaming HTTP endpoint URI? +│ ${endpointUri} +│ +// 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 +│ +◇ What type of extension would you like to add? +│ Remote Extension (Streaming HTTP) +│ +◇ What would you like to call this extension? +│ ${name} +│ +◇ What is the Streaming HTTP endpoint URI? +│ ${endpointUri} +│ +◇ Please set the timeout for this tool (in secs): +│ ${timeout} +│ +// highlight-start +◆ Would you like to add a description? +│ No +// highlight-end +└`} + +
    +
  1. {headerStepText}
    2. +
+ + {!hasHeaders && ( + {`┌ goose-configure +│ +◇ What would you like to configure? +│ Add Extension +│ +◇ What type of extension would you like to add? +│ Remote Extension (Streaming HTTP) +│ +◇ What would you like to call this extension? +│ ${name} +│ +◇ What is the Streaming HTTP endpoint URI? +│ ${endpointUri} +│ +◇ 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 custom headers? +│ No +// highlight-end +└ Added ${name} extension`} + )} + + {hasHeaders && ( + <> + {`┌ goose-configure +│ +◇ What would you like to configure? +│ Add Extension +│ +◇ What type of extension would you like to add? +│ Remote Extension (Streaming HTTP) +│ +◇ What would you like to call this extension? +│ ${name} +│ +◇ What is the Streaming HTTP endpoint URI? +│ ${endpointUri} +│ +◇ 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 custom headers? +│ Yes +// highlight-end +└`} + +
    +
  1. Add your custom header{headers.length > 1 ? 's' : ''}
    2. +
+ + {infoNote && ( + <> + + {infoNote} + +
+ + )} + + {`┌ goose-configure +│ +◇ What would you like to configure? +│ Add Extension +│ +◇ What type of extension would you like to add? +│ Remote Extension (Streaming HTTP) +│ +◇ What would you like to call this extension? +│ ${name} +│ +◇ What is the Streaming HTTP endpoint URI? +│ ${endpointUri} +│ +◇ Please set the timeout for this tool (in secs): +│ ${timeout} +│ +◇ Would you like to add a description? +│ No +│ +◇ Would you like to add custom headers? +│ Yes +│ +// highlight-start +${headers + .map( + ({ key, value }, i) => `◇ Header name: +│ ${key} +│ +◇ Header value: +│ ${value} +│ +◇ Add another header? +│ ${i === headers.length - 1 ? 'No' : 'Yes'}` + ) + .join('\n│\n')} +// highlight-end +└ Added ${name} extension`} + + )} +
+ ); +}