AI tools: connect to VSCode

Author: ArthurFlag

.gitignore

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

_vale/config/vocabularies/Docker/accept.txt

@@ -157,6 +157,7 @@ unmanaged
 VMware
 vpnkit
 vSphere
+VSCode
 Wasm
 Windows
 windowsfilter

content/manuals/ai/mcp-catalog-and-toolkit/images/copilot-mode.png

@@ -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.
 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:
@@ -123,3 +122,53 @@ 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 VSCode by configuring VS
+Code for a specific project:
+
+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. Option2: Enable the MCP Toolkit for a given project:
+
+   1. In the terminal, navigate to your project's folder in the terminal.
+   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).

content/manuals/ai/mcp-catalog-and-toolkit/images/tools.png

@@ -313,6 +313,7 @@
       "h-2",
       "h-32",
       "h-48",
+      "h-5",
       "h-6",
       "h-8",
       "h-[calc(100vh-64px)]",
@@ -542,6 +543,7 @@
       "text-gray-400",
       "text-gray-500",
       "text-gray-600",
+      "text-gray-800",
       "text-left",
       "text-lg",
       "text-magenta-light",
@@ -564,6 +566,7 @@
       "truncate",
       "underline-offset-2",
       "w-2",
+      "w-5",
       "w-56",
       "w-8",
       "w-[1200px]",