diff --git a/documentation/docs/mcp/dev.to-mcp.md b/documentation/docs/mcp/dev.to-mcp.md new file mode 100644 index 000000000000..1616a55fdf69 --- /dev/null +++ b/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'; + + + +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` + + + + + 1. Click the 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` + + + + + + + +## 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) +::: diff --git a/documentation/src/components/CLIExtensionInstructions.js b/documentation/src/components/CLIExtensionInstructions.tsx similarity index 53% rename from documentation/src/components/CLIExtensionInstructions.js rename to documentation/src/components/CLIExtensionInstructions.tsx index cd8b7ded38b7..33cf9678b8ba 100644 --- a/documentation/src/components/CLIExtensionInstructions.js +++ b/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({ {`goose configure`}
    -
  1. Choose to add a Command-line Extension.
    2. +
  2. + Choose to add a{' '} + {isHttp ? 'Remote Extension (Streaming HTTP)' : 'Command-line Extension'}. +
{`┌ 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)' +} └`}
    @@ -42,23 +72,48 @@ export default function CLIExtensionInstructions({ {`┌ 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 └`} -
      -
    1. Enter the command to run when this extension is used.
      2. -
    - {`┌ goose-configure + {isHttp ? ( + <> +
      +
    1. Enter the Streaming HTTP endpoint URI.
      2. +
    + {`┌ 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 +└`} + + ) : ( + <> +
      +
    1. Enter the command to run when this extension is used.
      2. +
    + {`┌ 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 └`} + + )}
    1. - Enter the number of seconds Goose should wait for actions to complete before timing out. Default is 300 seconds. + Enter the number of seconds Goose should wait for actions to complete before timing out. Default is{' '} + 300 seconds.
    {`┌ 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({ └`}
      -
    1. Choose to add a description. If you select Yes, you’ll be prompted to enter a description for the extension.
      2. +
    2. Choose to add a description. If you select No, Goose will skip it.
    {`┌ 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({ └`}
      -
    1. {envStepText}
      2. +
    2. {lastStepInstruction}
    {!hasEnvVars && ( {`┌ 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`} @@ -162,17 +226,19 @@ export default function CLIExtensionInstructions({ {`┌ 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( diff --git a/documentation/static/img/dev.to-project.png b/documentation/static/img/dev.to-project.png new file mode 100644 index 000000000000..17648bb996e6 Binary files /dev/null and b/documentation/static/img/dev.to-project.png differ