MCP Tool Picker UX Improvements

[hawkticehurst]

Cataloging a list of various UX improvements to VS Code's MCP support that we should discuss / implement for the April 2025 milestone.

Use custom theme-able checkboxes in tool picker

Switch out native checkboxes with custom checkboxes found in the Settings page.

• Goal: Reduce visual noise and better match editor theming

Lowercase server location

The text "From {location}" should be changed to align with other quick picks across VS Code. This means changing "From" to "from."

Remove product names from server location text

Currently when displaying the locations of MCP servers we sometimes show the product name (i.e. "Claude Desktop") and other times show the file/path where the MCP server(s) are configured.

I propose we remove all cases of product names and always to show the file/path that contributes a server. This removes the need to keep track of the names of products that contribute MCP servers that may come and go over time. Also, if tools are contributed via an extension we should just say "from extension".

Edge case: Displaying full absolute file paths will get verbose/untenable very quickly, so I propose we display opinionated versions of contributing files since we'll be manually detecting these files anyway. For example, just displaying "claude_desktop_config.json" should be descriptive enough for folks to understand where it's coming from. But in cases where mcp.json is used we'll need to be a bit more prescriptive (i.e. ".vscode/mcp.json" vs ".cursor/mcp.json").

Bonus: This fixes an issue that will be caused by the lowercase server location proposal where we would otherwise have a weird mix of lowercase and capitalized text. Aka "from Claude Desktop" turns into "from claude_desktop_config.json".

Remove server status from tool picker

I'm leaning towards suggesting that we remove the server status (i.e. "Stopped" / "Running") from the tool picker. As @connor4312 mentioned in another thread:

tools are still available to the model and the server will be started on-demand when a model want to use one of those tools

Given that reality, I think displaying server status leads to more confusion / unnecessary work (i.e. starting a server when you don't need to) than is needed.

Additionally, server status information and the affordance to manually stop/start servers is still available via the "MCP: List Server" command.

• Goal: Clean up the UI a tiny bit and reduce the density of information that needs to be parsed

Add settings gear to server menu items

Currently, you must go through a multi-step process to access and configure MCP server settings via the "MCP: List Servers" command. While we should certainly keep that command, we should also introduce an easy way to access these server settings via the tool picker.

We should align with the existing quick pick UX pattern of rendering the settings-gear icon on selection/hover. Clicking or tabbing to this icon should take you to the server settings you'll find while using the List Servers command.

MCP Tool Dropdown / Confirmation UI Updates

Coming soon... It's what I'm working on this week and will have more to share in this issue thread next week.

See: #246287

[hawkticehurst]

cc @digitarald @connor4312 @roblourens @jrieken

[digitarald]

@hawkticehurst fyi, the spec has a human-readable name that tool lists and confirmation should use: https://github.com/modelcontextprotocol/modelcontextprotocol/blob/main/schema/2025-03-26/schema.ts#L737-L741

[hawkticehurst]

Ooh amazing! Happy this was added!

[hawkticehurst]

Finally following up: Here's some of my suggestions for improving MCP tool dropdown/confirmation card UX/UI!

#246287

[Sayvai]

I've created a new UX improvement issue 🧐

• Feature Request: Add MCP Server Name to MCP Tool Selection Options in Copilot Chat Prompt Input #246298