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

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';
+
+
+<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}
+
+:::