-
Notifications
You must be signed in to change notification settings - Fork 38.5k
Description
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 cardsGoal: Surface server level controls right in chatAllow server to run for the current chat session (default) –– Least trustAllow server to run in the current workspace –– Medium trustAllow server to always run –– Most trust
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.
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.
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:
See more/see less expanded:
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
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
