diff --git a/documentation/docs/tutorials/vscode-mcp.md b/documentation/docs/tutorials/vscode-mcp.md index 2a972e897e..194df49870 100644 --- a/documentation/docs/tutorials/vscode-mcp.md +++ b/documentation/docs/tutorials/vscode-mcp.md @@ -1,191 +1,85 @@ --- title: VS Code Extension -description: Use VS Code MCP Server as a Goose Extension for file operations and VS Code integration +description: Use the Goose VS Code Extension to connect Goose to your editor --- import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed'; - +This tutorial covers how to install and use the [Goose VS Code Extension](https://marketplace.visualstudio.com/items?itemName=block.vscode-goose) so you can use Goose interactively for file operations and development workflow management from within VS Code. - -This tutorial covers how to add the [VS Code MCP Server](https://github.com/block/vscode-mcp) as a Goose extension to enable VS Code integration, file operations, and development workflow management. - -:::info Required Setup -Install the [VS Code MCP Extension](https://marketplace.visualstudio.com/items?itemName=block.vscode-mcp-extension) from the Visual Studio Marketplace. +:::info Prerequisite +- [VS Code](https://code.visualstudio.com/) version 1.95.0 or higher is required +- [Goose Desktop](https://block.github.io/goose/) must be installed and running ::: -:::tip TLDR - - - [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=vscode-mcp-server&id=vscode-mcp&name=VS%20Code%20MCP&description=VS%20Code%20integration%20and%20file%20operations) - - - **Command** - ```sh - npx -y vscode-mcp-server - ``` - - -::: - - ## Configuration -:::info -Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`. -::: + + -1. Add the [VS Code MCP Extension](https://marketplace.visualstudio.com/items?itemName=block.vscode-mcp-extension) to your VS Code. No additional settings required in VS Code. +1. Open VS Code +2. Open the Extensions view in VS Code: + - Windows/Linux: `Ctrl+Shift+X` + - macOS: `Cmd+Shift+X` + - Or use: View → Extensions +3. Search for `VS Code Goose` +4. Click Install on [VS Code Goose](https://marketplace.visualstudio.com/items?itemName=block.vscode-goose) by Block +5. Restart VS Code if prompted +6. Open the Goose: Chat side panel to start a new conversation or view conversation history - - - 1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=vscode-mcp-server&id=vscode-mcp&name=VS%20Code%20MCP&description=VS%20Code%20integration%20and%20file%20operations) - 2. Press `Yes` to confirm the installation - 3. Click `Save Configuration` - 4. Click `Exit` from the upper left corner - - - 1. Run the `configure` command: - ```sh - goose configure - ``` + + - 2. Choose to add a `Command-line 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? - │ ○ Built-in Extension - // highlight-start - │ ● Command-line Extension (Run a local command or script) - // highlight-end - │ ○ Remote Extension - └ - ``` +Not available via CLI. - 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? - │ Command-line Extension - │ - // highlight-start - ◆ What would you like to call this extension? - │ vscode-mcp - // highlight-end - └ - ``` - - 4. 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? - │ vscode-mcp - │ - // highlight-start - ◆ What command should be run? - │ npx -y vscode-mcp-server - // highlight-end - └ - ``` - - 5. Enter the timeout value (default 300s is recommended) - ```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? - │ vscode-mcp - │ - ◇ What command should be run? - │ npx -y vscode-mcp-server install - │ - // 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? - │ Command-line Extension - │ - ◇ What would you like to call this extension? - │ vscode-mcp - │ - ◇ What command should be run? - │ npx -y vscode-mcp-server install - │ - ◆ Please set the timeout for this tool (in secs): - │ 300 - │ - // highlight-start - ◇ Would you like to add a description? - │ No - // highlight-end - │ - └ - ``` - - 7. No additional environment variables are required for basic setup - - + - +:::tip +You can ask Goose about a particular file or code block by: +- Selecting the code you want to discuss +- Right-clicking and choosing "Ask Goose about this code" +- The code will appear as a reference chip above the chat input +::: ## Example Usage -The VS Code MCP extension enables Goose to interact with your VS Code environment, managing files, projects, and development workflows. +The Goose VS Code Extension connects directly to your editor, letting you manage files, projects, and workflows with AI. It includes the following features: -The key strength of the VS Code MCP Server is its ability to: +- Interactive chat UI +- Access to Goose's AI capabilities directly within VS Code +- Unified session switching +- Code referencing with visual chips in the chat UI +- Quick actions for common coding tasks +- Clipboard tools to copy code snippets/responses for easy sharing -- Show diffs before making changes -- Integrate file operations with VS Code's interface -- Manage project workspaces -- Provide immediate visual feedback in the editor - - -:::note -Every time you start a Goose session with the VS Code MCP server enabled, it checks to see if a matching project is open in VS Code. If not, it will prompt you to open the project before proceeding. -::: ### Goose Prompt ``` -Update the contributing guide with instructions on how to start docusaurus dev server +Update the contributing guide at /goose/CONTRIBUTING.md with instructions on how to start docusaurus dev server ``` -## Result +### Goose Output -![session showing goose making updates and VS Code prompting user to accept or reject changes](../assets/guides/vscode-mcp.png) +``` +I'll help you update the CONTRIBUTING.md file with instructions for starting the Docusaurus dev server. First, let me check the current content of the file. + +─── developer__text_editor | view ────────────────────────── + +I'll now update the CONTRIBUTING.md file to include instructions for starting the Docusaurus dev server. I'll add this information in a new section under the Node section. + +─── developer__text_editor | str_replace ────────────────────────── + +I've successfully updated the CONTRIBUTING.md file to include instructions for starting the Docusaurus dev server. I added a new "Documentation" section right after the Node section, which provides clear step-by-step instructions for: + +Navigating to the docs directory +Installing dependencies +Starting the development server +I also included helpful information about the hot-reloading feature and the local server URL. The formatting is consistent with the rest of the document, using proper markdown syntax for code blocks and headers. + +Is there anything else you'd like me to add or modify in the contributing guide? + +``` \ No newline at end of file diff --git a/recipe.yaml b/recipe.yaml new file mode 100644 index 0000000000..30299135e4 --- /dev/null +++ b/recipe.yaml @@ -0,0 +1,46 @@ +version: 1.0.0 +title: "404Portfolio" +description: "Create personalized, creative 404 pages using public profile data" + +instructions: | + Create an engaging 404 error page that tells a creative story using a user's recent public content from **one** of the following platforms: **GitHub**, **Dev.to**, or **Bluesky**. You do not need to use all three—just the one selected by the user. + + The page should be fully built with **HTML, CSS, and JavaScript**, featuring: + + * Responsive design + * Personal branding elements (e.g., name, handle, avatar) + * Narrative-driven layout that turns the error into an opportunity for discovery + + Use platform-specific methods to fetch recent user content: + + * For **Dev.to**, use the [public Dev.to API](https://developers.forem.com/api) to retrieve recent articles, reactions, and profile information. + * For **GitHub**, use the GitHub REST or GraphQL API to access recent repos, commits, and contributions. + * For **Bluesky**, use public feed endpoints from the AppView API (e.g., `app.bsky.feed.getAuthorFeed`) to pull posts, replies, or likes. + + Incorporate the fetched data into a compelling narrative (e.g., “Looks like this page is missing, but \[username] has been busy!”), and display it using engaging visuals like cards, timelines, or media embeds. + + Wrap the user’s activity into a story — for example: + + “This page may be lost, but @username is building something amazing. Their latest open source journey involves a new repo that’s gaining stars fast…” + “You won’t find what you’re looking for here, but you will find @username’s hot take on async/await in their latest Dev.to post.” + + The result should be a small narrative-driven microsite that dynamically celebrates the user's presence online—even when the destination is missing. + + Ask the user: + + 1. Which platform to use: GitHub, Dev.to, or Bluesky + 2. Their username on that platform + + Then generate the complete code in a folder called 404-story. + + +activities: + - "Build error page from GitHub repos" + - "Generate error page from dev.to blog posts" + - "Create a 404 page featuring Bluesky bio" + +extensions: + - type: builtin + name: developer + - type: builtin + name: computercontroller \ No newline at end of file