feat: add VS Code client support

src/extension/host-binary/pkg/clients/config.yml

@@ -38,6 +38,20 @@ system:
       list: '.mcpServers | to_entries | map(.value + {"name": .key})'
       set: .mcpServers[$NAME] = $JSON
       del: del(.mcpServers[$NAME])
+  vscode:
+    displayName: VS Code
+    installCheckPaths:
+    - /Applications/Visual Studio Code.app
+    - $ProgramFiles/Microsoft VS Code/
+    - $USERPROFILE/AppData/Local/Programs/Microsoft VS Code/
+    paths:
+      linux: $HOME/.config/Code/User/settings.json
+      darwin: $HOME/Library/Application Support/Code/User/settings.json
+      windows: $APPDATA/Code/User/settings.json
+    yq:
+      list: '.mcp.servers | to_entries | map(.value + {"name": .key})'
+      set: .mcp.servers[$NAME] = $JSON+{"type":"stdio"}
+      del: del(.mcp.servers[$NAME])
 project:
   cursor:
     displayname: Cursor

src/extension/ui/src/MCPClients.ts

@@ -3,6 +3,7 @@ import ClaudeDesktop from "./mcp-clients/ClaudeDesktop";
 import ContinueDotDev from "./mcp-clients/ContinueDotDev";
 import Cursor from "./mcp-clients/Cursor";
 import Gordon from "./mcp-clients/Gordon";
+import VSCode from "./mcp-clients/VSCode";
 import { MCPClient } from "./types/mcp";
 
 export type MCPClientState = {
@@ -28,6 +29,9 @@ export const getMCPClientStates = async (ddClient: v1.DockerDesktopClient) => {
             if (fromCLI["cursor"]) {
                 mcpClientStates[Cursor.name] = toState(Cursor, fromCLI["cursor"]);
             }
+            if (fromCLI["vscode"]) {
+                mcpClientStates[VSCode.name] = toState(VSCode, fromCLI["vscode"]);
+            }
             if (fromCLI["continue"]) {
                 mcpClientStates[ContinueDotDev.name] = toState(ContinueDotDev, fromCLI["continue"]);
             }

src/extension/ui/src/components/tabs/YourClients.tsx

@@ -15,14 +15,15 @@ import {
   ListItem,
   ListItemText,
   Stack,
-  Typography
+  Typography,
 } from '@mui/material';
 import { useEffect, useState } from 'react';
 
 import ClaudeIcon from '../../assets/claude-ai-icon.svg';
 import ContinueIcon from '../../assets/continue.svg';
 import CursorIcon from '../../assets/cursor.svg';
 import GordonIcon from '../../assets/gordon-icon.png';
+import VSCodeIcon from '../../assets/vscode.svg';
 import { CATALOG_LAYOUT_SX, DOCKER_MCP_COMMAND } from '../../Constants';
 
 // Initialize the Docker Desktop client
@@ -37,6 +38,7 @@ const iconMap = {
   Gordon: GordonIcon,
   Cursor: CursorIcon,
   'Continue.dev': ContinueIcon,
+  'VS Code': VSCodeIcon,
 };
 
 const MCPClientSettings = ({ appProps }: MCPClientSettingsProps) => {
@@ -70,7 +72,7 @@ const MCPClientSettings = ({ appProps }: MCPClientSettingsProps) => {
                 appProps={appProps}
               />
             );
-          }
+          },
         )}
       </Stack>
 
@@ -210,10 +212,10 @@ function ClientSetting({
                       </Typography>
                     </>
                   )) || (
-                      <Typography sx={{ fontSize: 12, width: 90 }}>
-                        Disconnect
-                      </Typography>
-                    )}
+                    <Typography sx={{ fontSize: 12, width: 90 }}>
+                      Disconnect
+                    </Typography>
+                  )}
                 </Stack>
               </Button>
             )}
@@ -246,10 +248,10 @@ function ClientSetting({
                       </Typography>
                     </>
                   )) || (
-                      <Typography sx={{ fontSize: 12, width: 90 }}>
-                        Connect
-                      </Typography>
-                    )}
+                    <Typography sx={{ fontSize: 12, width: 90 }}>
+                      Connect
+                    </Typography>
+                  )}
                 </Stack>
               </Button>
             )}
@@ -281,10 +283,10 @@ function ClientSetting({
                       </Typography>
                     </>
                   )) || (
-                      <Typography sx={{ fontSize: 12, width: 90 }}>
-                        Connect
-                      </Typography>
-                    )}
+                    <Typography sx={{ fontSize: 12, width: 90 }}>
+                      Connect
+                    </Typography>
+                  )}
                 </Stack>
               </Button>
             )}
@@ -342,7 +344,7 @@ function ClientSetting({
                     primary={<div dangerouslySetInnerHTML={{ __html: step }} />}
                   />
                 </ListItem>
-              )
+              ),
             )}
           </List>
         </CardContent>

src/extension/ui/src/mcp-clients/VSCode.ts

@@ -0,0 +1,41 @@
+import { v1 } from "@docker/extension-api-client-types";
+import { DOCKER_MCP_COMMAND } from "../Constants";
+import { MCPClient } from "./MCPTypes";
+
+class VSCodeClient implements MCPClient {
+    name = "VS Code";
+    url = "https://code.visualstudio.com/download";
+    manualConfigSteps = [
+        "Open Command Palette (Ctrl/Cmd + Shift + P) and run <code>MCP: Add Server</code>",
+        "Select <code>Command (stdio)</code> as the server type",
+        "Set server name: <code>MCP_DOCKER</code>",
+        "Paste the command: " +
+        '<pre style="font-family: monospace; white-space: nowrap; overflow: auto; width: 80%; background-color: grey.200; padding: 1; border-radius: 1; font-size: 12px;">' +
+        DOCKER_MCP_COMMAND +
+        "</pre>",
+        "Choose <strong>Workspace Settings</strong> or <strong>User Settings</strong> based on your preference",
+        "Open the <strong>Chat view</strong> (Ctrl/Cmd + Shift + I) and select <strong>Agent mode</strong>",
+        "Click the <strong>Tools</strong> button to verify MCP_DOCKER tools are available"
+    ];
+    expectedConfigPath = {
+        darwin: ".vscode/mcp.json or $HOME/Library/Application Support/Code/User/settings.json",
+        linux: ".vscode/mcp.json or $HOME/.config/Code/User/settings.json",
+        win32: ".vscode\\mcp.json or %APPDATA%\\Code\\User\\settings.json",
+    };
+    connect = async (client: v1.DockerDesktopClient) => {
+        try {
+            await client.extension.host?.cli.exec("host-binary", ["client", "connect", "--global", "vscode"]);
+        } catch (e) {
+            client.desktopUI.toast.error("Unable to connect VS Code");
+        }
+    };
+    disconnect = async (client: v1.DockerDesktopClient) => {
+        try {
+            await client.extension.host?.cli.exec("host-binary", ["client", "disconnect", "--global", "vscode"]);
+        } catch (e) {
+            client.desktopUI.toast.error("Unable to disconnect VS Code");
+        }
+    };
+}
+
+export default new VSCodeClient();