Skip to content

MCP Tool Dropdown UX Improvements #246287

@hawkticehurst

Description

@hawkticehurst

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

Companion issue: #245721

Add first-time server run confirmation card

EDIT: Decided to cut this proposal/idea. See discussion below.

Currently there's a warning attached to every single tool call along the lines of:

> This tool is from 'filesystem' (MCP Server). Note that MCP servers or malicious conversation content may attempt to misuse 'Code - Insiders' through tools. Please carefully review any requested actions.

I think we can offload a lot of this language to a single confirmation card that is shown when a new MCP server is used for the first time in any given chat session.

  • Goal: Allow us to simplify the language used in individual tool confirmation cards
  • Goal: Surface server level controls right in chat
    • Allow server to run for the current chat session (default) –– Least trust
    • Allow server to run in the current workspace –– Medium trust
    • Allow server to always run –– Most trust
Image

Add more information to tool dropdown closed state

Currently, the closed state of a tool dropdown only shows the name of the tool that will be run and buttons to continue or cancel the tool run. I propose that we also add the server name and simplified text warning/prompting folks to review what the tool will do before proceeding.

  • Goal: Improve the ability to quickly parse which server a tool comes from
    • I know we started with a design along these lines and then moved server information inside the dropdown, but after lots of feedback I now think it's more important to surface this information at the top level
  • Goal: Co-locate the text warning/prompting tool review next to the buttons where action is taken
    • Currently, this kind of information is hidden within the dropdown and is easy to miss

Design note: "Run {tool_name}" uses the foreground color token, while server name and warning text uses descriptionForeground.

Image

Human readable tool names

@digitarald pointed out that the MCP spec now includes the ability to include a human readable tool name. It seems like most (all?) MCP servers have not started to use this yet, but as they do we should be prepared to gracefully "upgrade" to use this name instead of the "raw" tool name.

Image

Wrap long content in see more/see less UI and add input label

Currently, tool descriptions are rendered inside tool dropdowns without any alterations. This is fine for short descriptions but they can get quite long, so we should wrap long content in a See more / See less collapsible UI.

  • Goal: Ensure that all the information inside a tool dropdown remains visible / easy to parse

Additionally, we do not label tool input and think we should.

  • Goal: Improve clarity of what the JSON/text snippets inside tool dropdown represent

See more/see less closed:

Image

See more/see less expanded:

Image

Add more information to post-tool-run dropdown

Currently, post-tool-run dropdown just include an unlabeled JSON/text snippet of the tool run output. I propose we add the following:

  • Tool description
  • Tool input
  • Add label to tool output

Note that all of these can be wrapped in the collapsible See more / See less UI mentioned above if needed. Additionally, add a green check mark to the far right of the tool run dropdown title section.

  • Goal: Make it easier to go back and review/audit a tool run by adding all the relevant information someone might want/need
  • Goal: Add further visual indication that the tool run was successful while maintaining the ability to have a dropdown chevron
Image Image

Overall tool dropdown UI polish

While a lot of UI changes/polish have already been demonstrated in the screenshots above, two more updates that haven't been noted yet are:

  • Wrap post-tool-run content in rounded rectangle/card UI
    • Goal: Add a consistent visual indicator to tool usage in chat views
    • Goal: Ensure that checkmark icons are easy to parse / associate with a given tool run
  • Adjust hover / click area to take full width of dropdown header
    • Goal: Make it easier to identify / open tool dropdowns
Image

Metadata

Metadata

Labels

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions