如何实现从浏览器唤起VS Code并展示自定义MCP服务器安装项？

核心思路：用VS Code的URI协议直接唤起扩展操作 #

VS Code自带的vscode://协议不止能打开文件，还能直接调用扩展相关功能——这就是GitHub MCP页面实现“Install in VS Code”的核心逻辑。要打开VS Code并跳转到扩展栏展示你的自定义MCP服务器，关键是利用协议定位到对应的扩展（因为MCP服务器是以VS Code扩展形式存在的）。

具体实现步骤 #

1. 两种可用的URI格式 #

根据需求选一种即可：

格式一：直接定位到扩展详情页

如果你的自定义MCP服务器已经做成VS Code扩展（有唯一的扩展ID，格式为发布者.扩展名称，比如mcp.example-server），直接使用这个URI：

vscode:extension/你的扩展ID

触发这个URI后，VS Code会自动打开并切换到扩展标签页，直接展示该扩展的详情页面，用户可一键完成安装。

格式二：通过命令唤起搜索/定位

如果需要更灵活的操作（比如按名称搜索，或打开扩展市场特定分类），可以用命令式URI：

vscode://command/extension.openExtension?你的扩展ID

要是想让VS Code搜索你的MCP服务器名称，就用这个：

vscode://command/workbench.extensions.search?你的MCP服务器名称

2. 网页端实现示例 #

直接用HTML链接

最简单的方式是做个带样式的链接按钮：

<a href="vscode:extension/your-mcp-extension-id" style="padding: 8px 16px; background: #0078d4; color: white; border-radius: 4px; text-decoration: none;">Install in VS Code</a>

用JavaScript触发（适合有额外逻辑的场景）

如果需要在点击时添加统计、验证等操作，就用JS实现：

document.querySelector('#install-btn').addEventListener('click', () => {
    window.location.href = 'vscode:extension/your-mcp-extension-id';
});

3. 关键注意事项 #

• 扩展ID必须准确：扩展ID由package.json里的publisher和name字段组合而成，比如publisher是my-org、name是custom-mcp-server，那ID就是my-org.custom-mcp-server；如果是本地测试，要确保扩展已安装在VS Code中。
• VS Code版本需兼容：旧版本VS Code可能不支持这些协议操作，建议提醒用户使用最新稳定版。
• 跨平台无需额外配置：Windows、Mac、Linux系统上，只要安装了VS Code，这个协议就能正常触发。

内容的提问来源于stack exchange，提问作者Preeti v