docs: Adding dev.to Tutorial & Update CLI Component (#3828)

Signed-off-by: Ebony Louis <ebony774@gmail.com>

documentation/docs/mcp/dev.to-mcp.md

@@ -0,0 +1,131 @@
+---
+title: Dev.to Extension
+description: Add Dev.to 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 GooseDesktopInstaller from '@site/src/components/GooseDesktopInstaller';
+import { PanelLeft } from 'lucide-react';
+
+<!-- <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/LNmPi6YCocI" />  -->
+
+This tutorial covers how to add the [Dev.to MCP Server](https://github.com/nickytonline/dev-to-mcp) as a Goose extension to enable access to the Dev.to public API. With this extension, Goose can fetch articles, tags, user info, comments, and more—without requiring authentication.
+
+:::tip TLDR
+**Endpoint URL**
+```sh
+http://localhost:3000/mcp
+```
+Make sure your server is running before adding the extension in Goose 
+:::
+
+## Configuration
+
+:::info
+Make sure you have Node.js and npm installed. You’ll also need to run `npm install` and `npm run build` once before using the server.
+:::
+
+1. First, clone and set up the `Dev.to MCP server`:
+```bash
+git clone https://github.com/nickytonline/dev-to-mcp.git
+cd dev-to-mcp
+npm install
+npm run build # one-time setup
+```
+```bash
+npm start
+```
+Your server will now be running at:
+`http://localhost:3000/mcp`
+
+
+<Tabs groupId="interface">
+  <TabItem value="ui" label="Goose Desktop" default>
+  1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
+  2. Navigate to `Extensions`
+  3. Click `Add Custom Extension`
+  4. In `Extension Name`, enter: `dev.to`
+  5. In the `Type` dropdown, select: `Streamable HTTP`
+  6. (Optional) Add a Description 
+  7. In `Endpoint URL`, enter:` http://localhost:3000/mcp`
+  8. Set `Timeout` to `300` (default)
+  9. Leave `Environment Variables` empty
+  10. Leave `Request Headers` empty
+  11. Click `Add Extension`
+
+  </TabItem>
+  <TabItem value="cli" label="Goose CLI" default>
+      <CLIExtensionInstructions
+        name="dev.to"
+        type="http"
+        url="http://localhost:3000/mcp"
+        timeout={300}
+      />
+  </TabItem>
+</Tabs>
+
+## Example Usage
+
+In this example, Goose uses the `Dev.to MCP` extension to fetch the 5 most recent JavaScript articles and instantly turn them into a personalized learning hub.
+
+### Goose Prompt
+```
+Hey Goose, fetch the 5 most recent JavaScript articles from Dev.to
+Create a simple HTML landing page that:
+
+1. Lists each article title as a clickable link
+
+2. Includes the author and a 1‑sentence summary under each title
+
+3. Suggests a small project or code snippet I could build to apply what I learned from each article (if applicable)
+
+4. Highlights which article I should read first if I only have time for one and explain why
+
+The goal is to save me time by quickly showing what’s worth reading and help me learn faster by giving actionable practice ideas.
+```
+
+### Goose Output
+
+:::note Desktop
+
+I'll help you fetch the recent JavaScript articles from Dev.to and create a nice HTML learning page. Let me start by getting the articles.
+
+`─── per_page state tag ──────────────────────────`
+
+Now I'll create a beautiful HTML learning page with all the requested features:
+
+`─── writing /Users/ebonyl/... ──────────────────────────`
+
+Perfect! I've created a beautiful HTML landing page featuring the 5 most recent JavaScript articles from Dev.to. Here's what I've included:
+
+🎯 Key Features
+    - 📱 Responsive design with a modern gradient background and card-based layout
+    - 🔗 Clickable article titles that open in new tabs
+    - 👤 Author names and reading times for each article
+    - 📝 One-sentence summaries explaining what each article covers
+    - 🏷️ Tag display showing the relevant technologies
+    - ⭐ Priority recommendation with visual highlighting
+    - actionable projects to build to further learning
+🎨 Design Elements
+    - Gradient backgrounds and smooth hover effects
+    - Clean typography using system fonts
+    - Color-coded recommendation system
+    - Responsive layout that works on all devices
+    - Professional card-based design with shadows and animations
+📖 Content Highlights
+
+Top Recommendation: The Signal Clone tutorial (Part One) by Oluwabusayo Jacobs is highlighted as the must-read article because:
+
+It's a comprehensive 29-minute deep dive
+Covers real-world messaging app development
+Includes authentication and real-time features
+Uses React Native and Stream (highly transferable to web development)
+Provides practical, hands-on learning experience
+
+The landing page is saved as `javascript_articles_landing.html` and ready to open in your browser! Each article link will take you directly to the full Dev.to article for deeper reading.
+
+![Dev.to Project Example](/img/dev.to-project.png)
+:::

documentation/src/components/CLIExtensionInstructions.tsx

@@ -1,16 +1,42 @@
 import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
 
+interface EnvVar {
+  key: string;
+  value: string;
+}
+
+interface CLIExtensionInstructionsProps {
+  name: string;
+  type?: 'stdio' | 'http';
+  command?: string; // Only for stdio
+  url?: string; // Only for http
+  timeout?: number;
+  envVars?: EnvVar[];
+  infoNote?: string;
+}
+
 export default function CLIExtensionInstructions({
   name,
+  type = 'stdio',
   command,
+  url,
   timeout = 300,
   envVars = [],
   infoNote,
-}) {
+}: CLIExtensionInstructionsProps) {
   const hasEnvVars = envVars.length > 0;
-  const envStepText = hasEnvVars
+  const isHttp = type === 'http';
+
+  // Determine last-step prompt text
+  const lastStepText = isHttp
+    ? 'Would you like to add custom headers?'
+    : 'Would you like to add environment variables?';
+
+  const lastStepInstruction = hasEnvVars
     ? `Add environment variable${envVars.length > 1 ? 's' : ''} for ${name}`
+    : isHttp
+    ? 'Choose No when asked to add custom headers'
     : 'Choose No when asked to add environment variables';
 
   return (
@@ -21,19 +47,23 @@ export default function CLIExtensionInstructions({
       <CodeBlock language="sh">{`goose configure`}</CodeBlock>
 
       <ol start={2}>
-        <li>Choose to add a <code>Command-line Extension</code>.</li>
+        <li>
+          Choose to add a{' '}
+          <code>{isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}</code>.
+        </li>
       </ol>
       <CodeBlock language="sh">{`┌   goose-configure 
 │
 ◇  What would you like to configure?
-│  Add Extension (Connect to a new extension)
+│  Add 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 
+│  ○ Built-in Extension
+${
+  isHttp
+    ? '│  ● Remote Extension (Streaming HTTP)\n│  ○ Command-line Extension (Run a local command or script)'
+    : '│  ○ Remote Extension\n│  ● Command-line Extension (Run a local command or script)'
+}
 └`}</CodeBlock>
 
       <ol start={3}>
@@ -42,23 +72,48 @@ export default function CLIExtensionInstructions({
       <CodeBlock language="sh">{`┌   goose-configure 
 │
 ◇  What would you like to configure?
-│  Add Extension (Connect to a new extension)
+│  Add Extension
 │
 ◇  What type of extension would you like to add?
-│  Command-line Extension 
+│  ${isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
+│
 // highlight-start
 ◆  What would you like to call this extension?
 │  ${name}
 // highlight-end
 └`}</CodeBlock>
 
-      <ol start={4}>
-        <li>Enter the command to run when this extension is used.</li>
-      </ol>
-      <CodeBlock language="sh">{`┌   goose-configure 
+      {isHttp ? (
+        <>
+          <ol start={4}>
+            <li>Enter the Streaming HTTP endpoint URI.</li>
+          </ol>
+          <CodeBlock language="sh">{`┌   goose-configure 
 │
 ◇  What would you like to configure?
-│  Add Extension (Connect to a new extension)
+│  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?
+│  ${url}
+// highlight-end
+└`}</CodeBlock>
+        </>
+      ) : (
+        <>
+          <ol start={4}>
+            <li>Enter the command to run when this extension is used.</li>
+          </ol>
+          <CodeBlock language="sh">{`┌   goose-configure 
+│
+◇  What would you like to configure?
+│  Add Extension
 │
 ◇  What type of extension would you like to add?
 │  Command-line Extension 
@@ -71,26 +126,31 @@ export default function CLIExtensionInstructions({
 │  ${command}
 // 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.
+          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 (Connect to a new extension) 
+│  Add Extension
 │
 ◇  What type of extension would you like to add?
-│  Command-line Extension 
+│  ${isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
 │
 ◇  What would you like to call this extension?
 │  ${name}
 │
-◇  What command should be run?
-│  ${command}
-│
+${
+  isHttp
+    ? `◇  What is the Streaming HTTP endpoint URI?\n│  ${url}\n│`
+    : `◇  What command should be run?\n│  ${command}\n│`
+}
 // highlight-start
 ◆  Please set the timeout for this tool (in secs):
 │  ${timeout}
@@ -98,22 +158,24 @@ export default function CLIExtensionInstructions({
 └`}</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>
+        <li>Choose to add a description. If you select <code>No</code>, Goose will skip it.</li>
       </ol>
       <CodeBlock language="sh">{`┌   goose-configure 
 │
 ◇  What would you like to configure?
-│  Add Extension (Connect to a new extension)
+│  Add Extension
 │
 ◇  What type of extension would you like to add?
-│  Command-line Extension 
+│  ${isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
 │
 ◇  What would you like to call this extension?
 │  ${name}
 │
-◇  What command should be run?
-│  ${command}
-│
+${
+  isHttp
+    ? `◇  What is the Streaming HTTP endpoint URI?\n│  ${url}\n│`
+    : `◇  What command should be run?\n│  ${command}\n│`
+}
 ◇  Please set the timeout for this tool (in secs):
 │  ${timeout}
 │
@@ -124,24 +186,26 @@ export default function CLIExtensionInstructions({
 └`}</CodeBlock>
 
       <ol start={7}>
-        <li>{envStepText}</li>
+        <li>{lastStepInstruction}</li>
       </ol>
 
       {!hasEnvVars && (
         <CodeBlock language="sh">{`┌   goose-configure 
 │
 ◇  What would you like to configure?
-│  Add Extension (Connect to a new extension) 
+│  Add Extension 
 │
 ◇  What type of extension would you like to add?
-│  Command-line Extension 
+│  ${isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
 │
 ◇  What would you like to call this extension?
 │  ${name}
 │
-◇  What command should be run?
-│  ${command}
-│
+${
+  isHttp
+    ? `◇  What is the Streaming HTTP endpoint URI?\n│  ${url}\n│`
+    : `◇  What command should be run?\n│  ${command}\n│`
+}
 ◇  Please set the timeout for this tool (in secs):
 │  ${timeout}
 │
@@ -149,7 +213,7 @@ export default function CLIExtensionInstructions({
 │  No
 │
 // highlight-start
-◆  Would you like to add environment variables?
+◆  ${lastStepText}
 │  No
 // highlight-end
 └  Added ${name} extension`}</CodeBlock>
@@ -162,17 +226,19 @@ export default function CLIExtensionInstructions({
           <CodeBlock language="sh">{`┌   goose-configure 
 │
 ◇  What would you like to configure?
-│  Add Extension (Connect to a new extension)
+│  Add Extension
 │
 ◇  What type of extension would you like to add?
-│  Command-line Extension 
+│  ${isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}
 │
 ◇  What would you like to call this extension?
 │  ${name}
 │
-◇  What command should be run?
-│  ${command}
-│
+${
+  isHttp
+    ? `◇  What is the Streaming HTTP endpoint URI?\n│  ${url}\n│`
+    : `◇  What command should be run?\n│  ${command}\n│`
+}
 ◇  Please set the timeout for this tool (in secs):
 │  ${timeout}
 │
@@ -180,7 +246,7 @@ export default function CLIExtensionInstructions({
 │  No
 │
 // highlight-start
-◆  Would you like to add environment variables?
+◆  ${lastStepText}
 │  Yes
 ${envVars
   .map(