diff --git a/documentation/blog/2025-03-21-goose-vscode/index.md b/documentation/blog/2025-03-21-goose-vscode/index.md index 8d92c9d1474a..f131f7ccf55f 100644 --- a/documentation/blog/2025-03-21-goose-vscode/index.md +++ b/documentation/blog/2025-03-21-goose-vscode/index.md @@ -53,7 +53,7 @@ The features don't end here. The team is actively exploring several exciting fea # Community and Contributing The project is open source, and welcomes contributions from the community. If you'd like to support the project or directly contribute to it, you can check out [the VSCode MCP repo on GitHub](https://github.com/block/vscode-mcp), or [join the Block Open Source Discord](https://discord.gg/block-opensource) if you'd like to ask the team any questions or start discussions. -You can also follow the [tutorial showing you how to integrate VS Code with Goose](/docs/mcp/vscode-mcp). +You can also follow the [tutorial showing you how to integrate VS Code with Goose](/docs/mcp/vs-code-mcp). diff --git a/documentation/blog/2025-04-01-top-5-mcp-servers/index.md b/documentation/blog/2025-04-01-top-5-mcp-servers/index.md index 04e942b31b65..604331a17d1d 100644 --- a/documentation/blog/2025-04-01-top-5-mcp-servers/index.md +++ b/documentation/blog/2025-04-01-top-5-mcp-servers/index.md @@ -63,7 +63,7 @@ This works differently from the Knowledge Graph extension even though they both ## VS Code Extension: Your Favorite Editor, Connected -One of the biggest points in conversations with people especially around vibe coding, is finding ways to track what changes are being made. While version control is always recommended, sometimes I want to be able to stop or change direction before going too far. The [VS Code Extension](/docs/mcp/vscode-mcp) alongside other features, allows me to preview the diff of my code changes before I commit them. +One of the biggest points in conversations with people especially around vibe coding, is finding ways to track what changes are being made. While version control is always recommended, sometimes I want to be able to stop or change direction before going too far. The [VS Code Extension](/docs/mcp/vs-code-mcp) alongside other features, allows me to preview the diff of my code changes before I commit them. I can choose to accept or refuse these changes, or tell Goose to try something else before any actual changes are made. diff --git a/documentation/docs/experimental/index.md b/documentation/docs/experimental/index.md index 722f43051c76..451b2cda8ca2 100644 --- a/documentation/docs/experimental/index.md +++ b/documentation/docs/experimental/index.md @@ -34,6 +34,11 @@ The list of experimental features may change as Goose development progresses. So description="An experimental Android automation app that acts as an open agent running on your phone, providing maximal automation of everyday tasks." link="/docs/experimental/goose-mobile" /> + diff --git a/documentation/docs/tutorials/vscode-extension.md b/documentation/docs/experimental/vs-code-extension.md similarity index 91% rename from documentation/docs/tutorials/vscode-extension.md rename to documentation/docs/experimental/vs-code-extension.md index 3ab3e3c564cf..4e6e631680ab 100644 --- a/documentation/docs/tutorials/vscode-extension.md +++ b/documentation/docs/experimental/vs-code-extension.md @@ -1,16 +1,17 @@ --- title: VS Code Extension -description: Use the Goose VS Code Extension to connect Goose to your editor +sidebar_label: VS Code Extension +sidebar_position: 4 --- import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -:::warning -This extension is experimental and under development. +:::warning +This is an experimental extension enables you to use Goose within VS Code. It is not to be confused with the [VS Code MCP Server](/docs/mcp/vs-code-mcp). ::: -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 install and use the [Goose VS Code Extension](https://marketplace.visualstudio.com/items?itemName=block.vscode-goose) so you can use Goose within VS Code. :::info Prerequisite - [VS Code](https://code.visualstudio.com/) version 1.95.0 or higher is required diff --git a/documentation/docs/mcp/vs-code-mcp.md b/documentation/docs/mcp/vs-code-mcp.md new file mode 100644 index 000000000000..64352de86647 --- /dev/null +++ b/documentation/docs/mcp/vs-code-mcp.md @@ -0,0 +1,155 @@ +--- +title: VS Code Extension +description: Use VS Code MCP Server as a Goose Extension for file operations and VS Code integration +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed'; + + + +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. + +:::tip TLDR + +**Command** +```sh +npx vscode-mcp-server +``` + +**Required Setup** + +Install the [VS Code MCP Extension](https://marketplace.visualstudio.com/items?itemName=block.vscode-mcp-extension) from the Visual Studio Marketplace. +::: + +## 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. 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 + │ + ◆ 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 + └ + ``` + + 3. Give your extension a name + ```sh + ┌ goose-configure + │ + ◇ What would you like to configure? + │ Add 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 + │ + ◇ 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 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 + │ + ◇ 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 vscode-mcp-server install + │ + // highlight-start + ◆ Please set the timeout for this tool (in secs): + │ 300 + // highlight-end + │ + └ + ``` + + 6. No additional environment variables are required for basic setup + + + + 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 + + + + + +## Example Usage + +The VS Code MCP extension enables Goose to interact with your VS Code environment, managing files, projects, and development workflows. + +The key strength of the VS Code MCP Server is its ability to: + +- 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 +``` + +## Result + +![session showing goose making updates and VS Code prompting user to accept or reject changes](../assets/guides/vscode-mcp.png) \ No newline at end of file diff --git a/documentation/docusaurus.config.ts b/documentation/docusaurus.config.ts index 22aaf7720c4d..f07e7892edc7 100644 --- a/documentation/docusaurus.config.ts +++ b/documentation/docusaurus.config.ts @@ -269,7 +269,7 @@ const config: Config = { }, { from: '/docs/tutorials/vscode-mcp', - to: '/docs/mcp/vscode-mcp' + to: '/docs/mcp/vs-code-mcp' }, { from: '/docs/tutorials/youtube-transcript', diff --git a/documentation/src/pages/extensions/detail.tsx b/documentation/src/pages/extensions/detail.tsx index 737e4df4fe73..a736b963d492 100644 --- a/documentation/src/pages/extensions/detail.tsx +++ b/documentation/src/pages/extensions/detail.tsx @@ -18,7 +18,8 @@ function ExtensionDetail({ server }: { server: MCPServer }) { const overrides: Record = { 'computercontroller': 'computer-controller-mcp', 'pdf-read': 'pdf-mcp', - 'knowledge-graph-memory': 'knowledge-graph-mcp' + 'knowledge-graph-memory': 'knowledge-graph-mcp', + 'vscode': 'vs-code-mcp', }; const getDocumentationPath = (serverId: string): string => {