Skip to content

mcp OAuth and VS Code connection #22904

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.

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
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
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ unmanaged
VMware
vpnkit
vSphere
VSCode
Wasm
Windows
windowsfilter
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 67 additions & 5 deletions content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,17 +107,16 @@

To learn more about the MCP server catalog, see [Catalog](catalog.md).

### Example: Use the GitHub MCP server
### Example: Use the **GitHub Official** MCP server

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](#authenticate-via-oauth).

Check failure on line 116 in content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md

View workflow job for this annotation

GitHub Actions / vale

[vale] reported by reviewdog 🐶 [Vale.Terms] Use 'config' instead of 'Config'. Raw Output: {"message": "[Vale.Terms] Use 'config' instead of 'Config'.", "location": {"path": "content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md", "range": {"start": {"line": 116, "column": 22}}}, "severity": "ERROR"}
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:
GitHub account, in accordance to the tools provided by the GitHub Official server. To test it, ask Gordon:

```text
What's my GitHub handle?
Expand Down Expand Up @@ -145,7 +144,7 @@
and add Claude Desktop as a client:

1. From the **MCP Toolkit** menu, select the **Catalog** tab and find the **Puppeteer** server and add it.
2. Repeat for the **GitHub** server.
2. Repeat for the **GitHub Official** server.
3. From the **Clients** tab, select **Connect** next to **Claude Desktop**. Restart
Claude Desktop if it's running, and it can now access all the servers in the MCP Toolkit.
4. Within Claude Desktop, run a test by submitting the following prompt using the Sonnet 3.5 model:
Expand All @@ -160,3 +159,66 @@
```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:

Check warning on line 165 in content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md

View workflow job for this annotation

GitHub Actions / vale

[vale] reported by reviewdog 🐶 [Docker.Acronyms] 'VS' has no definition. Raw Output: {"message": "[Docker.Acronyms] 'VS' has no definition.", "location": {"path": "content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md", "range": {"start": {"line": 165, "column": 57}}}, "severity": "WARNING"}

Check warning on line 165 in content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md

View workflow job for this annotation

GitHub Actions / vale

[vale] reported by reviewdog 🐶 [Docker.RecommendedWords] Consider using 'versus' instead of 'VS' Raw Output: {"message": "[Docker.RecommendedWords] Consider using 'versus' instead of 'VS'", "location": {"path": "content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md", "range": {"start": {"line": 165, "column": 57}}}, "severity": "INFO"}

1. Option 1: To enable the MCP Toolkit globally:

1. Insert the following in your VS Code's User`settings.json`:

Check warning on line 169 in content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md

View workflow job for this annotation

GitHub Actions / vale

[vale] reported by reviewdog 🐶 [Docker.Acronyms] 'VS' has no definition. Raw Output: {"message": "[Docker.Acronyms] 'VS' has no definition.", "location": {"path": "content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md", "range": {"start": {"line": 169, "column": 36}}}, "severity": "WARNING"}

Check warning on line 169 in content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md

View workflow job for this annotation

GitHub Actions / vale

[vale] reported by reviewdog 🐶 [Docker.RecommendedWords] Consider using 'versus' instead of 'VS' Raw Output: {"message": "[Docker.RecommendedWords] Consider using 'versus' instead of 'VS'", "location": {"path": "content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md", "range": {"start": {"line": 169, "column": 36}}}, "severity": "INFO"}

```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

Check warning on line 197 in content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md

View workflow job for this annotation

GitHub Actions / vale

[vale] reported by reviewdog 🐶 [Docker.We] Avoid using first-person plural like 'We'. Raw Output: {"message": "[Docker.We] Avoid using first-person plural like 'We'.", "location": {"path": "content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md", "range": {"start": {"line": 197, "column": 82}}}, "severity": "WARNING"}
> 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).

## Authenticate via OAuth

You can connect the MCP Toolkit to your development workflow via
OAuth integration. For now, the MCP Toolkit only supports GitHub OAuth.

1. On https://github.com/, ensure you are logged in.
1. In Docker Desktop, select **MCP Toolkit** and select the **OAuth** tab.
1. In the GitHub entry, select **Authorize**. Your browser opens the GitHub authorization page.
1. In the GitHub authorization page, select **Authorize docker**. Once the authorization
is successful, you are automatically redirected to Docker Desktop.
1. Install the **GitHub Official** MCP server, see [Install an MCP server](#install-an-mcp-server).

The MCP Toolkit now has access to your GitHub account. To revoke access, select **Revoke** in the **OAuth** tab.
See an example in [Use the **GitHub Official** MCP server](#example-use-the-github-official-mcp-server).
3 changes: 3 additions & 0 deletions hugo_stats.json
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