在 VS Code 中,一鍵安裝 MCP Server!
大家好!我是韓老師。
本文是 MCP 系列文章的第三篇。之前的兩篇文章是:
Code Runner MCP Server,來(lái)了!
從零開(kāi)始開(kāi)發(fā)一個(gè) MCP Server!
經(jīng)過(guò)之前兩篇文章的介紹,相信不少童鞋已經(jīng)用上甚至開(kāi)發(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 開(kāi)發(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
- 輕松開(kāi)發(fā) Streamable HTTP MCP Server
- 從零開(kāi)始開(kāi)發(fā)一個(gè) MCP Server!
- VS?Code擴(kuò)展Code?Runner?MCP?Server來(lái)了
- Go語(yǔ)言開(kāi)發(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)文章
一文教會(huì)你從Windows中完全刪除node.js
作為新手nodejs卸載后安裝就總出錯(cuò),下面這篇文章主要給大家介紹了關(guān)于如何從Windows中完全刪除node.js的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08從零開(kāi)始學(xué)習(xí)Node.js系列教程四:多頁(yè)面實(shí)現(xiàn)數(shù)學(xué)運(yùn)算的client端和server端示例
這篇文章主要介紹了Node.js多頁(yè)面實(shí)現(xiàn)數(shù)學(xué)運(yùn)算的client端和server端,結(jié)合具體實(shí)例形式分析了nodejs客戶端提交與服務(wù)端處理實(shí)現(xiàn)數(shù)學(xué)運(yùn)算的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04nodejs中使用archive壓縮文件的實(shí)現(xiàn)代碼
這篇文章主要介紹了nodejs中使用archive壓縮文件的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11Node.JS 循環(huán)遞歸復(fù)制文件夾目錄及其子文件夾下的所有文件
在Node.js中,要實(shí)現(xiàn)目錄文件夾的循環(huán)遞歸復(fù)制也非常簡(jiǎn)單,使用fs模塊即可,僅需幾行,而且性能也不錯(cuò),我們先來(lái)實(shí)現(xiàn)文件的復(fù)制,需要的朋友可以參考下2017-09-09Node服務(wù)端實(shí)戰(zhàn)之操作數(shù)據(jù)庫(kù)示例詳解
這篇文章主要為大家介紹了Node服務(wù)端實(shí)戰(zhàn)之操作數(shù)據(jù)庫(kù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12