Typescript MCP Vscode

创建自定义MCP服务器，并在VS代码（TypeScript）中与GitHub Copilot一起使用

说明： 使用VS代码的模型上下文协议（MCP）的基本示例。此仓库展示了如何在TypeScript中创建自己的MCP服务器，并通过在VS Code中向GitHub Copilot聊天自定义提示与之交互。

1.克隆并进入仓库

git clone git@github.com:HoangYell/typescript-mcp-vscode.git
cd typescript-mcp-vscode

2.安装依赖项

npm install

3.建设项目

npm run build

4.配置VS代码

添加到您的 settings.json:

{
  "chat.mcp.discovery.enabled": true,
  "mcp": {
    "servers": {
      "SimpleMCP": {
        "type": "node",
        "command": "node_modules/.bin/ts-node", // or your preferred ts-node path
        "args": ["src/server.ts"], // or your preferred server entry point
        "cwd": "."
      }
    }
  }
}

• 点击 在VS Code的设置中使用上述SimpleMCP，或运行：

npm start

5.试试看！

• 在聊天中，键入： who the fuck is hoangyell?
• 或者： who the fuck is yellshark?

______________________________________________________________________

现在，您应该看到MCP工具在VS Code聊天中工作。

https://www.youtube.com/watch?v=U1YMyUdjqCw

MCP数据流概述（ASCII艺术）：

User                                 VS Code (MCP Client, "chat.mcp.enabled": true)                   LLM Server (e.g. Copilot/GPT)                   MCP Server
 |                                           |                                                        |                                            |
 | 1. "Who the fuck is yellshark?"           |                                                        |                                            |
 |------------------------------------------>|                                                        |                                            |
 |                                           | 2. Send prompt to LLM server                           |                                            |
 |                                           |------------------------------------------------------>|                                            |
 |                                           |                                                        | 3. Parse intent, select tool               |
 |                                           |                                                        |    (who_the_fuck_is_yellshark)             |
 |                                           | 4. Return tool call info                               |                                            |
 ||                                                        |                                            |
 |                                           |                                                        | 6. Execute tool                            |
 |                                           |                                                        |------------------------------------------->|
 |                                           |                                                        |                                            |
 |                                           | 7. Return tool output                                  |                                            |
 |<------------------------------------------|<------------------------------------------------------|                                            |
 | 8. Display output to user                 |                                                        |                                            |
 |<------------------------------------------|                                                        |                                            |