mirror of
https://github.com/aljazceru/goose.git
synced 2025-12-17 06:04:23 +01:00
docs: Redo VS Code extension tutorial (#2680)
Co-authored-by: dianed-square <73617011+dianed-square@users.noreply.github.com>
This commit is contained in:
Rizel Scarlett
@@ -1,191 +1,85 @@
|
|||||||
---
|
---
|
||||||
title: VS Code Extension
|
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 Tabs from '@theme/Tabs';
|
||||||
import TabItem from '@theme/TabItem';
|
import TabItem from '@theme/TabItem';
|
||||||
import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
|
|
||||||
|
|
||||||
<YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/gddEgvCLrgU" />
|
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.
|
||||||
|
|
||||||
|
:::info Prerequisite
|
||||||
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.
|
- [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
|
||||||
:::info Required Setup
|
|
||||||
Install the [VS Code MCP Extension](https://marketplace.visualstudio.com/items?itemName=block.vscode-mcp-extension) from the Visual Studio Marketplace.
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
:::tip TLDR
|
|
||||||
<Tabs groupId="interface">
|
|
||||||
<TabItem value="ui" label="Goose Desktop" default>
|
|
||||||
[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)
|
|
||||||
</TabItem>
|
|
||||||
<TabItem value="cli" label="Goose CLI">
|
|
||||||
**Command**
|
|
||||||
```sh
|
|
||||||
npx -y vscode-mcp-server
|
|
||||||
```
|
|
||||||
</TabItem>
|
|
||||||
</Tabs>
|
|
||||||
:::
|
|
||||||
|
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
:::info
|
<Tabs>
|
||||||
Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`.
|
<TabItem value="desktop" label="Goose Desktop">
|
||||||
:::
|
|
||||||
|
|
||||||
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
|
||||||
|
|
||||||
<Tabs groupId="interface">
|
|
||||||
<TabItem value="ui" label="Goose Desktop" default>
|
|
||||||
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
|
|
||||||
</TabItem>
|
</TabItem>
|
||||||
<TabItem value="cli" label="Goose CLI">
|
<TabItem value="cli" label="Goose CLI">
|
||||||
1. Run the `configure` command:
|
|
||||||
```sh
|
|
||||||
goose configure
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Choose to add a `Command-line Extension`
|
Not available via CLI.
|
||||||
```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
|
|
||||||
└
|
|
||||||
```
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
</TabItem>
|
</TabItem>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
|
:::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
|
## 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
|
### 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
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
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?
|
||||||
|
|
||||||
|
```
|
||||||
46
recipe.yaml
Normal file
46
recipe.yaml
Normal file
@@ -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
|
||||||
Reference in New Issue
Block a user