Skip to content

ai tools: connect to VSCode #22903

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

ai tools: connect to VSCode #22903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
**/.DS_Store
**/desktop.ini
.hugo_build.lock
.idea/
.vscode/mcp.json
.vscode/settings.json
.vscode/tasks.json
**/.DS_Store
**/desktop.ini
node_modules
.hugo_build.lock
resources
public
tmp
resources
static/pagefind
.idea/
tmp
1 change: 1 addition & 0 deletions _vale/config/vocabularies/Docker/accept.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ unmanaged
VMware
vpnkit
vSphere
VSCode
Wasm
Windows
windowsfilter
Expand Down
Binary file added content/manuals/ai/mcp-catalog-and-toolkit/images/copilot-mode.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added content/manuals/ai/mcp-catalog-and-toolkit/images/tools.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 50 additions & 2 deletions content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,7 @@ Imagine you want to enable Ask Gordon to interact with your GitHub account:

1. From the **MCP Toolkit** menu, select the **Catalog** tab and find
the **GitHub Official** server and add it.
2. In the server's **Config** tab, insert your token generated from
your [GitHub account](https://github.com/settings/personal-access-tokens).
2. In the server's **Config** tab, connect via OAuth.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: There's a few more steps in here if you are a new user. You first need to authorize with the github oauth provider
image
Clicking on the link leads to the OAuth global tab where you can do the oauth dance.
image

and then you need to come back to the config tab of the official github mcp server to allow the server to use the github integration
image

I believe users can figure this out. Just an FYI if you want to add more context.

Copy link
Contributor

@Daniel-Kolev Daniel-Kolev Jun 25, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I see you have documented the steps here - maybe we could link to those steps from here? And also link to this example as a next step after users complete the oauth dance

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll merge this PR in the OAuth one, it's too clumsy as it is 👍

3. In the **Clients** tab, ensure Gordon is connected.
4. From the **Ask Gordon** menu, you can now send requests related to your
GitHub account, in accordance to the tools provided by the GitHub MCP server. To test it, ask Gordon:
Expand Down Expand Up @@ -123,3 +122,52 @@ and add Claude Desktop as a client:
```text
Take a screenshot of docs.docker.com and then invert the colors
```

### Example: Use Visual Studio Code as a client

You can interact with all your installed MCP servers in VS Code:

1. In Docker Desktop, select **MCP Toolkit** and select the **Clients** tab.
1. Option 1: To enable the MCP Toolkit globally:

1. Insert the following in your user's config.json:

```json
"mcp": {
"servers": {
"MCP_DOCKER": {
"command": "docker",
"args": [
"mcp",
"gateway",
"run"
],
"type": "stdio"
}
}
}
```

1. Option 2: Enable the MCP Toolkit for a given project:

1. In your terminal, navigate to your project's folder.
1. Run:

```bash
docker mcp client connect vscode
```

> [!NOTE]
> This command creates a `.vscode/mcp.json` file in the current directory. We
> recommend you add it to your `.gitignore` file.

1. In Visual Studio Code, open a new Chat and select the **Agent** mode:

![Copilot mode switching](./images/copilot-mode.png)

1. You can also check the available MCP tools:

![Displaying tools in VSCode](./images/tools.png)

For more information about the Agent mode, see the
[Visual Studio Code documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_use-mcp-tools-in-agent-mode).
3 changes: 3 additions & 0 deletions hugo_stats.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,7 @@
"h-2",
"h-32",
"h-48",
"h-5",
"h-6",
"h-8",
"h-[calc(100vh-64px)]",
Expand Down Expand Up @@ -542,6 +543,7 @@
"text-gray-400",
"text-gray-500",
"text-gray-600",
"text-gray-800",
"text-left",
"text-lg",
"text-magenta-light",
Expand All @@ -564,6 +566,7 @@
"truncate",
"underline-offset-2",
"w-2",
"w-5",
"w-56",
"w-8",
"w-[1200px]",
Expand Down