在 VS Code 中，一鍵安裝 MCP Server！
大家好！我是韓老師。
本文是 MCP 系列文章的第三篇。之前的兩篇文章是：
經(jīng)過之前兩篇文章的介紹，相信不少童鞋已經(jīng)用上甚至開發(fā)起了第一個 MCP Server。
不過呢，還是遇到一些童鞋在安裝/配置 MCP Server 的時候，遇到了一些問題。
其實(shí)，現(xiàn)在不少 MCP Hosts/Clients 對于安裝/配置 MCP Server，都是基于一個 JSON 的配置文件。且不說麻煩，也確實(shí)容易出錯，不容易上手。
不過呢，VS Code 就提供了一個非常方便的安裝體驗(yàn)！MCP Server 開發(fā)者可以在網(wǎng)頁上提供一個 Install 的按鈕，讓 end user 有一個一鍵安裝的體驗(yàn)！
今天，在 Code Runner MCP Server 的主頁面上，韓老師就提供了這樣的一鍵安裝的按鈕：
https://github.com/formulahendry/mcp-server-code-runner?tab=readme-ov-file#npx-for-vs-code
可以告別 JSON 配置文件啦！
那么，你也許會問，如果你也有一個 MCP Server 的話，應(yīng)該如果創(chuàng)建這個按鈕呢？
其實(shí)，很簡單，分三步走。
第一步，生成 MCP install 的 URL。
以下是 Code Runner MCP Server 的例子，你可以把2到4行的代碼換成你的 MCP Server 的啟動配置：
const config = JSON.stringify({
name: 'mcp-server-code-runner',
command: 'npx',
args: ['-y', 'mcp-server-code-runner@latest']
});
const urlForWebsites = `vscode-insiders:mcp/install?${encodeURIComponent(config)}`;
const urlForGithub = `https://insiders.vscode.dev/redirect?url=${encodeURIComponent(urlForWebsites)}`;
console.log(urlForGithub);源代碼：
第二步，生成 Static Badge
到 https://shields.io/badges/static-badge 生成一個安裝按鈕的 badge。
比如：
https://img.shields.io/badge/Install_MCP_Server-VS_Code_Insiders-24bfa5
第三步，合并出包含 URL 的 Markdown 按鈕
把第一步生成的 URL 和第二步生成的 Badge 進(jìn)行合并：
[](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522mcp-server-code-runner%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522-y%2522%252C%2522mcp-server-code-runner%2540latest%2522%255D%257D)
大功告成啦！
歡迎大家來試玩 Code Runner MCP Server：
https://github.com/formulahendry/mcp-server-code-runner
最近，我把 Yoeman Generator for MCP Server 也進(jìn)行了升級。
現(xiàn)在用 Yoeman Generator 創(chuàng)建新的 MCP Server 項目后，就可以直接在 VS Code 中按 F5 進(jìn)行一鍵調(diào)試?yán)玻?/p>
https://www.npmjs.com/package/generator-mcp
到此這篇關(guān)于在 VS Code 中，一鍵安裝 MCP Server！的文章就介紹到這了,更多相關(guān)VS Code 安裝 MCP Server內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 教你如何實(shí)現(xiàn)容器化 MCP Server
- 輕松開發(fā) Streamable HTTP MCP Server
- 從零開始開發(fā)一個 MCP Server！
- VS?Code擴(kuò)展Code?Runner?MCP?Server來了
- Go語言開發(fā)實(shí)現(xiàn)查詢IP信息的MCP服務(wù)器
- 一文弄懂用Go實(shí)現(xiàn)MCP服務(wù)的示例代碼
- 一文帶你學(xué)會使用Go語言實(shí)現(xiàn)自己的MCP服務(wù)端
- SpringBoot項目引入MCP的實(shí)現(xiàn)示例
- .NET?MCP?文檔詳細(xì)指南
- 把 MCP Server 打包進(jìn) VS Code extension
相關(guān)文章
使用Nodejs開發(fā)微信公眾號后臺服務(wù)實(shí)例
這篇文章主要介紹了使用Nodejs開發(fā)微信公眾號后臺服務(wù)實(shí)例,在這個實(shí)例中,主要使用到了express, wechat, mongodb, monk等模塊,需要的朋友可以參考下2014-09-09
Node中完整的?node?addon?實(shí)現(xiàn)流程
這篇文章主要介紹了Node中完整的node?addon實(shí)現(xiàn)流程，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
Node.js 回調(diào)函數(shù)實(shí)例詳解
這篇文章主要介紹了Node.js 回調(diào)函數(shù)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
Node.js中的crypto模塊提供了多種加密算法,可以用來加密字符串,AES和RSA是其中兩種常用的算法,本文介紹如何使用NodeJS對一個字符串加密,感興趣的朋友一起看看吧2025-01-01
connect中間件session、cookie的使用方法分享
今天大象哥用了下connect的session和cookie，感覺還挺好用的，分享一下(里面坑挺多的，文檔寫的太模糊了，費(fèi)了哥不少時間)。2014-06-06
node.js基于express使用websocket的方法
這篇文章主要介紹了node.js基于express使用websocket的方法,結(jié)合實(shí)例形式分析了node.js基于express調(diào)用websocket相關(guān)設(shè)置與使用操作技巧,需要的朋友可以參考下2017-11-11
Node.js中的洋蔥模型實(shí)現(xiàn)原理解析
洋蔥模型通過中間件的分層處理,實(shí)現(xiàn)了請求-響應(yīng)流程的高效控制,Koa因其嚴(yán)格的異步支持成為該模型的典型代表,而Express在同步場景下仍具優(yōu)勢,這篇文章主要介紹了Node.js中的洋蔥模型,需要的朋友可以參考下2025-05-05
Node.js連接postgreSQL并進(jìn)行數(shù)據(jù)操作
自從MySQL被Oracle收購以后，PostgreSQL逐漸成為開源關(guān)系型數(shù)據(jù)庫的首選。這篇文章就給大家介紹了關(guān)于Node.js如何連接postgreSQL數(shù)據(jù)庫，并進(jìn)行數(shù)據(jù)操作的方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
這篇文章主要介紹了node.js中的path.sep方法使用說明,本文介紹了path.sep的方法說明、語法、使用實(shí)例,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了Node.js事件驅(qū)動模型，首先了解一下傳統(tǒng)的線程網(wǎng)絡(luò)模型，然后再學(xué)習(xí)了解Node.js事件驅(qū)動模型，感興趣的小伙伴們可以參考一下2016-03-03