docs: migrate streamable config to consolidated component (#3936)

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 CLIStreamExtensionInstructions from '@site/src/components/CLIStreamExtensionInstructions';
+import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions';
 import { PanelLeft } from 'lucide-react';
 
 <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/TbmQDv3SQOE" />
@@ -55,11 +55,12 @@ These steps configure the Remote MCP Server. For other deployment options, see t
 
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
-    <CLIStreamExtensionInstructions
+    <CLIExtensionInstructions
       name="github"
-      endpointUri="https://api.githubcopilot.com/mcp/"
+      type="http"
+      url="https://api.githubcopilot.com/mcp/"
       timeout={300}
-      headers={[
+      envVars={[
         { key: "Authorization", value: "Bearer ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }
       ]}
       infoNote={

documentation/docs/mcp/neon-mcp.md

@@ -6,7 +6,6 @@ description: Add Neon MCP Server as a Goose Extension
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions';
-import CLIStreamExtensionInstructions from '@site/src/components/CLIStreamExtensionInstructions';
 import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
 import { PanelLeft } from 'lucide-react';
 
@@ -58,9 +57,10 @@ The Neon MCP Server grants powerful database management capabilities and is inte
     6. Navigate to the chat
     </TabItem>
     <TabItem value="cli" label="Goose CLI">
-      <CLIStreamExtensionInstructions
+      <CLIExtensionInstructions
         name="neon-mcp-remote"
-        endpointUri="https://mcp.neon.tech/mcp"
+        type="http"
+        url="https://mcp.neon.tech/mcp"
         timeout={300}
       />
       </TabItem>

documentation/docs/mcp/square-mcp.md

@@ -7,6 +7,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
 import GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
+import CLIExtensionInstructions from '@site/src/components/CLIExtensionInstructions';
 
 <details>
   <summary> 🎥 Square MCP Server Video Walkthrough</summary>
@@ -32,6 +33,7 @@ Square offers two versions of the MCP server:
 Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run installation commands, which use `npx`.
 :::
 
+## Configuration
 
 <Tabs groupId="remote-or-local">
   <TabItem value="remote" label="Square Remote MCP" default>
@@ -49,8 +51,6 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to
   </Tabs>
   :::
 
-  ## Configuration
-
   <Tabs groupId="interface">
     <TabItem value="ui" label="Goose Desktop" default>
      1. [Launch the installer](https://mcp.squareup.com/goose)
@@ -61,150 +61,18 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to
 
     </TabItem>
     <TabItem value="cli" label="Goose CLI">
-    1. Run the `configure` command:
+      <CLIExtensionInstructions
-    ```sh
+        name="square-mcp-remote"
-    goose configure
+        type="stdio"
-    ```
+        command="npx mcp-remote https://mcp.squareup.com/sse"
+        timeout={300}
+      />
 
-    2. Choose to add a `Command-line Extension`
+      When you start the next session, Goose will open a browser where you can grant permissions and sign in to your Square account.
-    ```sh
+  
-      ┌   goose-configure 
+    </TabItem>
-      │
-      ◇  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 
-      │  ○ Command-line Extension (Run a local command or script)
-      // highlight-start    
-      │  ● Remote Extension (SSE) 
-      // highlight-end    
-      │  ○ 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?
-      │  Remote Extension (SSE) 
-      │
-      // highlight-start
-      ◆  What would you like to call this extension?
-      │  square-mcp-remote
-      // highlight-end
-      └ 
-  ```
-
-    4. Enter the SSE URI
-    ```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?
-      │  Remote Extension (SSE) 
-      │
-      ◇  What would you like to call this extension?
-      │  square-mcp-remote
-      │
-      // highlight-start
-      ◆  What is the SSE endpoint URI?
-      │  https://mcp.squareup.com/sse
-      // 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?
-      │  Remote Extension (SSE) 
-      │
-      ◇  What would you like to call this extension?
-      │  square-mcp-remote
-      │
-      ◆  What is the SSE endpoint URI?
-      │  https://mcp.squareup.com/sse
-      │
-      // 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?
-      │  Remote Extension (SSE) 
-      │
-      ◇  What would you like to call this extension?
-      │  square-mcp-remote
-      │
-      ◆  What is the SSE endpoint URI?
-      │  https://mcp.squareup.com/sse
-      │
-      ◆  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 [Square Access Token](https://developer.squareup.com/apps) 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?
-      │  Remote Extension (SSE) 
-      │
-      ◇  What would you like to call this extension?
-      │  square-mcp-remote
-      │
-      ◆  What is the SSE endpoint URI?
-      │  https://mcp.squareup.com/sse
-      │
-      ◇  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?
-      │  No
-      // highlight-end
-      │
-      └  Added square-mcp-remote extension
-    ```  
-      </TabItem>
   </Tabs>
-
+</TabItem>
-
-  </TabItem>
-
-
 
   <TabItem value="local" label="Square Local MCP">
   :::tip TLDR
@@ -230,9 +98,6 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to
     Note that you'll use `SANDBOX` -or- `PRODUCTION`, not both, and your `ACCESS_TOKEN` will either be a sandbox or production token, depending on which environment you choose.
   :::
 
-  ## Configuration
-
-
   <Tabs groupId="interface">
     <TabItem value="ui" label="Goose Desktop" default>
     <GooseDesktopInstaller
@@ -245,170 +110,27 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to
         { name: "ACCESS_TOKEN", label: "Your Access Token" },
         { name: "SANDBOX", label: "true" }
       ]}
-      appendToStep3="Set SANDBOX or PRODUCTION to true (the access token must match the environment)"
+      appendToStep3="Set either SANDBOX or PRODUCTION to true (the access token must match the environment)"
       apiKeyLink="https://developer.squareup.com/apps"
       apiKeyLinkText="Square Access Token"
     />
     </TabItem>
   <TabItem value="cli" label="Goose CLI">
-
+    <CLIExtensionInstructions
-  1. Run the `configure` command:
+      name="square-mcp"
-  ```sh
+      type="stdio"
-  goose configure
+      command="npx square-mcp-server start"
-  ```
+      timeout={300}
-
+      envVars={[
-  1. Choose to add a `Command-line Extension`
+        { key: "ACCESS_TOKEN", value: "▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪" },
-  ```sh
+        { key: "SANDBOX", value: "true" }
-    ┌   goose-configure 
+      ]}
-    │
+      infoNote={
-    ◇  What would you like to configure?
+        <>
-    │  Add Extension (Connect to a new extension) 
+          Obtain your <a href="https://developer.squareup.com/apps" target="_blank" rel="noopener noreferrer">Square Access Token</a> and paste it in. Set either <code>SANDBOX</code> or <code>PRODUCTION</code> to true (the access token must match the environment)
-    │
+        </>
-    ◆  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) 
-    └ 
-  ```
-
-  1. 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?
-    │  square-mcp
-    // highlight-end
-    └ 
-  ```
-
-  1. 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?
-    │  square-mcp
-    │
-    // highlight-start
-    ◆  What command should be run?
-    │  npx square-mcp-server start
-    // highlight-end
-    └ 
-  ```  
-
-  1. 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?
-    │  square-mcp
-    │
-    ◇  What command should be run?
-    │  npx square-mcp-server start
-    │
-    // highlight-start
-    ◆  Please set the timeout for this tool (in secs):
-    │  300
-    // highlight-end
-    │
-    └ 
-  ```  
-
-  1. 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?
-    │  square-mcp
-    │
-    ◇  What command should be run?
-    │  npx square-mcp-server start
-    │
-    ◆  Please set the timeout for this tool (in secs):
-    │  300
-    │
-    // highlight-start
-    ◇  Would you like to add a description?
-    │  No
-    // highlight-end
-    │
-    └ 
-  ```  
-
-  1. Obtain a [Square Access Token](https://developer.squareup.com/apps) 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?
-    │  square-mcp
-    │
-    ◇  What command should be run?
-    │  npx square-mcp-server start
-    │
-    ◇  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:
-    │  ACCESS_TOKEN
-    │
-    ◇  Environment variable value:
-    │  ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪
-    │
-    ◇  Add another environment variable?
-    │  Yes
-    │
-    ◇  Environment variable name:
-    │  SANDBOX
-    │
-    ◇  Environment variable value:
-    │  true
-    // highlight-end
-    └  Added square-mcp extension
-  ```  
-    :::info 
-    Change the `SANDBOX` key to `PRODUCTION` if using a production token
-    :::
-
     </TabItem>
   </Tabs>
 

documentation/src/components/CLIExtensionInstructions.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
+import Admonition from '@theme/Admonition';
 
 interface EnvVar {
   key: string;
@@ -8,11 +9,11 @@ interface EnvVar {
 
 interface CLIExtensionInstructionsProps {
   name: string;
-  type?: 'stdio' | 'http';
+  type?: 'stdio' | 'sse' | 'http';
   command?: string; // Only for stdio
-  url?: string; // Only for http
+  url?: string; // For both sse and http
   timeout?: number;
-  envVars?: EnvVar[];
+  envVars?: EnvVar[]; // For stdio: environment variables, for http: headers
   infoNote?: string;
 }
 
@@ -26,7 +27,9 @@ export default function CLIExtensionInstructions({
   infoNote,
 }: CLIExtensionInstructionsProps) {
   const hasEnvVars = envVars.length > 0;
+  const isSSE = type === 'sse';
   const isHttp = type === 'http';
+  const isRemote = isSSE || isHttp;
 
   // Determine last-step prompt text
   const lastStepText = isHttp
@@ -34,10 +37,10 @@ export default function CLIExtensionInstructions({
     : 'Would you like to add environment variables?';
 
   const lastStepInstruction = hasEnvVars
-    ? `Add environment variable${envVars.length > 1 ? 's' : ''} for ${name}`
+    ? `Add ${isHttp ? 'custom header' : 'environment variable'}${envVars.length > 1 ? 's' : ''} for ${name}`
     : isHttp
-    ? 'Choose No when asked to add custom headers'
+    ? 'Choose No when asked to add custom headers.'
-    : 'Choose No when asked to add environment variables';
+    : 'Choose No when asked to add environment variables.';
 
   return (
     <div>
@@ -49,7 +52,14 @@ export default function CLIExtensionInstructions({
       <ol start={2}>
         <li>
           Choose to add a{' '}
-          <code>{isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}</code>.
+          <code>
+            {isSSE 
+              ? 'Remote Extension (SSE)' 
+              : isHttp 
+              ? 'Remote Extension (Streaming HTTP)' 
+              : 'Command-line Extension'
+            }
+          </code>.
         </li>
       </ol>
       <CodeBlock language="sh">{`┌   goose-configure 
@@ -58,11 +68,12 @@ export default function CLIExtensionInstructions({
 │  Add Extension 
 │
 ◆  What type of extension would you like to add?
-│  ○ Built-in Extension
 ${
-  isHttp
+  isSSE
-    ? '│  ● Remote Extension (Streaming HTTP)\n│  ○ Command-line Extension (Run a local command or script)'
+    ? '│  ○ Built-in Extension\n│  ○ Command-line Extension\n// highlight-start\n│  ● Remote Extension (SSE) (Connect to a remote extension via Server-Sent Events)\n// highlight-end\n│  ○ Remote Extension (Streaming HTTP)'
-    : '│  ○ Remote Extension\n│  ● Command-line Extension (Run a local command or script)'
+    : isHttp
+    ? '│  ○ Built-in Extension\n│  ○ Command-line Extension\n│  ○ Remote Extension (SSE)\n// highlight-start\n│  ● Remote Extension (Streaming HTTP) (Connect to a remote extension via MCP Streaming HTTP)\n// highlight-end'
+    : '│  ○ Built-in Extension\n// highlight-start\n│  ● Command-line Extension (Run a local command or script)\n// highlight-end\n│  ○ Remote Extension (SSE)\n│  ○ Remote Extension (Streaming HTTP)'
 }
 └`}</CodeBlock>
 
@@ -75,7 +86,7 @@ ${
 │  Add Extension
 │
 ◇  What type of extension would you like to add?
-│  ${isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
+│  ${isSSE ? 'Remote Extension (SSE)' : isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
 │
 // highlight-start
 ◆  What would you like to call this extension?
@@ -83,10 +94,10 @@ ${
 // highlight-end
 └`}</CodeBlock>
 
-      {isHttp ? (
+      {isRemote ? (
         <>
           <ol start={4}>
-            <li>Enter the Streaming HTTP endpoint URI.</li>
+            <li>Enter the {isSSE ? 'SSE endpoint URI' : 'Streaming HTTP endpoint URI'}.</li>
           </ol>
           <CodeBlock language="sh">{`┌   goose-configure 
 │
@@ -94,13 +105,13 @@ ${
 │  Add Extension 
 │
 ◇  What type of extension would you like to add?
-│  Remote Extension (Streaming HTTP)
+│  ${isSSE ? 'Remote Extension (SSE)' : 'Remote Extension (Streaming HTTP)'}
 │
 ◇  What would you like to call this extension?
 │  ${name}
 │
 // highlight-start
-◆  What is the Streaming HTTP endpoint URI?
+◆  What is the ${isSSE ? 'SSE endpoint URI' : 'Streaming HTTP endpoint URI'}?
 │  ${url}
 // highlight-end
 └`}</CodeBlock>
@@ -141,14 +152,14 @@ ${
 │  Add Extension
 │
 ◇  What type of extension would you like to add?
-│  ${isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
+│  ${isSSE ? 'Remote Extension (SSE)' : isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
 │
 ◇  What would you like to call this extension?
 │  ${name}
 │
 ${
-  isHttp
+  isRemote
-    ? `◇  What is the Streaming HTTP endpoint URI?\n│  ${url}\n│`
+    ? `◇  What is the ${isSSE ? 'SSE endpoint URI' : 'Streaming HTTP endpoint URI'}?\n│  ${url}\n│`
     : `◇  What command should be run?\n│  ${command}\n│`
 }
 // highlight-start
@@ -166,14 +177,14 @@ ${
 │  Add Extension
 │
 ◇  What type of extension would you like to add?
-│  ${isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
+│  ${isSSE ? 'Remote Extension (SSE)' : isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
 │
 ◇  What would you like to call this extension?
 │  ${name}
 │
 ${
-  isHttp
+  isRemote
-    ? `◇  What is the Streaming HTTP endpoint URI?\n│  ${url}\n│`
+    ? `◇  What is the ${isSSE ? 'SSE endpoint URI' : 'Streaming HTTP endpoint URI'}?\n│  ${url}\n│`
     : `◇  What command should be run?\n│  ${command}\n│`
 }
 ◇  Please set the timeout for this tool (in secs):
@@ -186,7 +197,16 @@ ${
 └`}</CodeBlock>
 
       <ol start={7}>
-        <li>{lastStepInstruction}</li>
+        <li>
+          {hasEnvVars
+            ? isHttp
+              ? <>Add custom header{envVars.length > 1 ? 's' : ''} for {name}.</>
+              : <>Add environment variable{envVars.length > 1 ? 's' : ''} for {name}.</>
+            : isHttp
+            ? <>Choose <code>No</code> when asked to add custom headers.</>
+            : <>Choose <code>No</code> when asked to add environment variables.</>
+          }
+        </li>
       </ol>
 
       {!hasEnvVars && (
@@ -196,14 +216,14 @@ ${
 │  Add Extension 
 │
 ◇  What type of extension would you like to add?
-│  ${isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
+│  ${isSSE ? 'Remote Extension (SSE)' : isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
 │
 ◇  What would you like to call this extension?
 │  ${name}
 │
 ${
-  isHttp
+  isRemote
-    ? `◇  What is the Streaming HTTP endpoint URI?\n│  ${url}\n│`
+    ? `◇  What is the ${isSSE ? 'SSE endpoint URI' : 'Streaming HTTP endpoint URI'}?\n│  ${url}\n│`
     : `◇  What command should be run?\n│  ${command}\n│`
 }
 ◇  Please set the timeout for this tool (in secs):
@@ -216,12 +236,20 @@ ${
 ◆  ${lastStepText}
 │  No
 // highlight-end
+│
 └  Added ${name} extension`}</CodeBlock>
       )}
 
       {hasEnvVars && (
         <>
-          {infoNote && <div className="alert alert--info">{infoNote}</div>}
+          {infoNote && (
+            <>
+              <Admonition type="info">
+                {infoNote}
+              </Admonition>
+              <br />
+            </>
+          )}
 
           <CodeBlock language="sh">{`┌   goose-configure 
 │
@@ -229,14 +257,14 @@ ${
 │  Add Extension
 │
 ◇  What type of extension would you like to add?
-│  ${isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
+│  ${isSSE ? 'Remote Extension (SSE)' : isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
 │
 ◇  What would you like to call this extension?
 │  ${name}
 │
 ${
-  isHttp
+  isRemote
-    ? `◇  What is the Streaming HTTP endpoint URI?\n│  ${url}\n│`
+    ? `◇  What is the ${isSSE ? 'SSE endpoint URI' : 'Streaming HTTP endpoint URI'}?\n│  ${url}\n│`
     : `◇  What command should be run?\n│  ${command}\n│`
 }
 ◇  Please set the timeout for this tool (in secs):
@@ -251,17 +279,18 @@ ${
 ${envVars
   .map(
     ({ key, value }, i) => `│
-◇  Environment variable name:
+◇  ${isHttp ? 'Header name' : 'Environment variable name'}:
 │  ${key}
 │
-◇  Environment variable value:
+◇  ${isHttp ? 'Header value' : 'Environment variable value'}:
 │  ${value}
 │
-◇  Add another environment variable?
+◇  Add another ${isHttp ? 'header' : 'environment variable'}?
 │  ${i === envVars.length - 1 ? 'No' : 'Yes'}`
   )
   .join('\n')}
 // highlight-end
+│
 └  Added ${name} extension`}</CodeBlock>
         </>
       )}

documentation/src/components/CLIStreamExtensionInstructions.js

@@ -1,244 +0,0 @@
-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 (
-    <div>
-      <ol>
-        <li>Run the <code>configure</code> command:</li>
-      </ol>
-      <CodeBlock language="sh">{`goose configure`}</CodeBlock>
-
-      <ol start={2}>
-        <li>Choose to add a <code>Remote Extension (Streaming HTTP)</code></li>
-      </ol>
-      <CodeBlock language="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
-│  ○ Remote Extension (SSE)
-// highlight-start    
-│  ● Remote Extension (Streaming HTTP) (Connect to a remote extension via MCP Streaming HTTP)
-// highlight-end  
-└`}</CodeBlock>
-
-      <ol start={3}>
-        <li>Give your extension a name</li>
-      </ol>
-      <CodeBlock language="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?
-│  ${name}
-// highlight-end
-└`}</CodeBlock>
-
-      <ol start={4}>
-        <li>Enter the endpoint URI</li>
-      </ol>
-      <CodeBlock language="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?
-│  ${name}
-│
-// highlight-start
-◆  What is the Streaming HTTP endpoint URI?
-│  ${endpointUri}
-// highlight-end
-└`}</CodeBlock>
-
-      <ol start={5}>
-        <li>
-          Enter the number of seconds Goose should wait for actions to complete before timing out. Default is <code>300</code> seconds
-        </li>
-      </ol>
-      <CodeBlock language="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?
-│  ${name}
-│
-◇  What is the Streaming HTTP endpoint URI?
-│  ${endpointUri}
-│
-// highlight-start
-◆  Please set the timeout for this tool (in secs):
-│  ${timeout}
-// highlight-end
-└`}</CodeBlock>
-
-      <ol start={6}>
-        <li>Choose to add a description. If you select <code>Yes</code>, you'll be prompted to enter a description for the extension</li>
-      </ol>
-      <CodeBlock language="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?
-│  ${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
-└`}</CodeBlock>
-
-      <ol start={7}>
-        <li>{headerStepText}</li>
-      </ol>
-
-      {!hasHeaders && (
-        <CodeBlock language="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?
-│  ${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`}</CodeBlock>
-      )}
-
-      {hasHeaders && (
-        <>
-          <CodeBlock language="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?
-│  ${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
-└`}</CodeBlock>
-
-          <ol start={8}>
-            <li>Add your custom header{headers.length > 1 ? 's' : ''}</li>
-          </ol>
-
-          {infoNote && (
-            <>
-              <Admonition type="info">
-                {infoNote}
-              </Admonition>
-              <div style={{ marginBottom: '0.5rem' }} />
-            </>
-          )}
-
-          <CodeBlock language="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?
-│  ${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`}</CodeBlock>
-        </>
-      )}
-    </div>
-  );
-}