Skip to content

enhance MCP connect dialog#57047

Merged
greedy52 merged 5 commits intomasterfrom
STeve/54705_enhance_mcp_server_connect_ui
Jul 30, 2025
Merged

enhance MCP connect dialog#57047
greedy52 merged 5 commits intomasterfrom
STeve/54705_enhance_mcp_server_connect_ui

Conversation

@greedy52
Copy link
Copy Markdown
Contributor

@greedy52 greedy52 commented Jul 22, 2025

changelog: added Cursor and VSCode install buttons in MCP connect dialog in Web UI

changes:

  • Generate cursor/vscode install link with corresponding buttons
  • Show sample JSON config directly in WebUI, in addition to ask user to run tsh mcp config command
  • Fix tsh mcp login to tsh mcp config

Note: the buttons are common ways to install MCP servers in the community, examples:

storybook screenshot:
Screenshot 2025-07-25 at 2 27 10 PM

(old one here: #55306)

@greedy52 greedy52 added no-changelog Indicates that a PR does not require a changelog entry MCP MCP Server related backport/branch/v18 labels Jul 22, 2025
@greedy52 greedy52 requested a review from gabrielcorado July 22, 2025 19:52
@greedy52 greedy52 added the ux label Jul 22, 2025
@greedy52 greedy52 changed the title beautify MCP connect dialog enhance MCP connect dialog Jul 23, 2025
@greedy52 greedy52 force-pushed the STeve/54705_enhance_mcp_server_connect_ui branch from 379e874 to 1d46cfb Compare July 25, 2025 18:36
@greedy52 greedy52 marked this pull request as ready for review July 25, 2025 18:40
@github-actions github-actions bot requested review from bl-nero and ravicious July 25, 2025 18:41
@github-actions github-actions bot added size/md tsh tsh - Teleport's command line tool for logging into nodes running Teleport. ui labels Jul 25, 2025
Comment thread web/packages/shared/services/mcp/client.ts Outdated
Comment thread web/packages/teleport/src/Apps/MCPAppConnectDialog.tsx Outdated
Comment on lines +129 to +130
*Note: You might need to restart your MCP client to load the
updated configuration.
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As someone who has no idea what tsh mcp config does, I don't know what "the updated configuration" means in this context. 😅 Does it mean that tsh mcp config has some side effects and that's why I need to restart the MCP client?

On the other hand, just above this note there's a config that I can copy, so it's just a bit confusing to me why I need to restart anything in the first place since I can just copy something? 🤔

I guess I just don't fully understand the relationship between the buttons, the config and the tsh command.

Copy link
Copy Markdown
Contributor Author

@greedy52 greedy52 Jul 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tsh mcp config basically prints the same json in claude desktop format but it also prints some other relavent hints and offers to update the client json file on local systems directly without you manually copy-paste. of course, that is if you are not using the install link from the Web UI. gabriel was looking into install link for tsh but doesn't seem easy (because of the schema).

so the "restart your MCP client" part not only applies to tsh mcp config, but also the part above. it's just a general hint for people using LLMs like claude desktop when they configuring their MCP servers. Users should be familiar with their own LLM tool and know whether they need to restart it in general. we added this note just to emphasis on that again. you can see the steps in Claude desktop's official guide as well that a restart is required as the last step
https://modelcontextprotocol.io/quickstart/user#installing-the-filesystem-server

return {
cursor: cursorLink.toString(),
vscode: `vscode:mcp/install?${vscodeEncodedConfig}`,
vscodeInsiders: `vscode-insiders:mcp/install?${vscodeEncodedConfig}`,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regarding a possible Connect implementation: This will be a bit of a pain to move to Connect. All external links are blocked by default, with a few exceptions, like hosts of currently added clusters, goteleport.com so that we can link to the docs.

The general principle we try to follow is that even if an attacker manages to get XSS in Connect, we want to limit how they might exploit it. In this case it means allowing access only to a trusted set of hosts.

With the deep links to Cursor and VSCode, I suppose we'd need to grant blanket access to mcp/install with any config because I don't see how we could restrict it in a more granular fashion.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the install links has special schemas like cursor://, vscode:// and they open those desktop apps, a little different from https://. maybe we need to re-evaluate the security risk for those. well, once the desktop app opens the install link, usually it's a dialog confirm on the MCP server config to be added.

so i think for Connect maybe we can whitelist the install links, with the schema, but without the parameters. if we need to do extra validations, we can extract details from the parameters like validating correct command is used.

@public-teleport-github-review-bot public-teleport-github-review-bot bot removed the request for review from bl-nero July 29, 2025 16:23
@greedy52 greedy52 enabled auto-merge July 30, 2025 20:35
@greedy52 greedy52 added this pull request to the merge queue Jul 30, 2025
@greedy52 greedy52 removed the no-changelog Indicates that a PR does not require a changelog entry label Jul 30, 2025
Merged via the queue into master with commit e9116ad Jul 30, 2025
45 checks passed
@greedy52 greedy52 deleted the STeve/54705_enhance_mcp_server_connect_ui branch July 30, 2025 21:03
@backport-bot-workflows
Copy link
Copy Markdown
Contributor

@greedy52 See the table below for backport results.

Branch Result
branch/v18 Failed

greedy52 added a commit that referenced this pull request Jul 31, 2025
* beautify MCP connect dialog

* refactor(web): add cursor and mcp vscode install buttons

* move helpers to shared package in case need to support Connect

* rename AppLinks to InstallLinks and

* review comments

---------

Co-authored-by: Gabriel Corado <gabriel.oliveira@goteleport.com>
github-merge-queue bot pushed a commit that referenced this pull request Jul 31, 2025
* beautify MCP connect dialog

* refactor(web): add cursor and mcp vscode install buttons

* move helpers to shared package in case need to support Connect

* rename AppLinks to InstallLinks and

* review comments

---------

Co-authored-by: Gabriel Corado <gabriel.oliveira@goteleport.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport/branch/v18 MCP MCP Server related size/md tsh tsh - Teleport's command line tool for logging into nodes running Teleport. ui ux

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants