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