效率狂飙：用十分钟实现你的MCP-Server，解锁 MCP+Cursor 开发姿势

最近MCP又火出圈，MCP+Cursor 效率提升王炸组合，开发自己的MCP Server是新AI时代下前端的必备姿势，本文介绍将通过手把手带你实现一个简易的 TODO MCP Server，来带你快速入门，解决开发新境界。

一、MCP 简介

1、MCP 是什么

MCP（Model Context Protocol）是一个革命性的工具，它让我们能够将自己的服务和各种 LLM 客户端（如 Claude、Cursor）无缝连接。简单来说，它就是一个桥梁，让 AI 能够直接调用我们的服务。

• MCP 客户端（Client）：通常是 AI 应用程序（如 Claude Desktop 或其他 LLM 工具），负责发起请求并与服务器通信。
• MCP 服务器（Server）：轻量级程序，负责暴露特定的数据源或工具功能，并通过标准化协议与客户端交互。

2、为什么 MCP-Server 如此重要？

扩展 AI 能力：通过 MCP-Server，我们可以让 AI 直接操作我们的数据库、调用我们的 API、控制我们的服务，极大扩展了 AI 的实际应用能力。

标准化通信：MCP 提供了一个标准的通信协议，使得不同的 AI 模型都能以相同的方式与我们的服务交互，大大降低了集成的复杂度。

3、应用场景:

自动化你的开发工作流、快速创建 AI 驱动的工具和插件等等，万物皆可MCP。可以预见通过MCP，未来我们可以快速提高生产力

二、实现自己的MCP-Server

在本教程中，我们将通过实现一个简单的 TODO MCP Server，来带你手把手实现你的MCP-Server。我们将使用 Cursor 作为我们的 MCP Client，让 Cursor 通过 MCP Server 来操作我们的 TODO 服务。

1. 工程初始化相关配置

bash

 体验AI代码助手

 代码解读

复制代码

 mkdir mcp-server-demo

cd mcp-server-demo
# Initialize a new npm project
npm init -y

1. 安装依赖

bash

 体验AI代码助手

 代码解读

复制代码

   npm install @modelcontextprotocol/sdk zod
   npm install -D @types/node typescript

   # Create our files
   mkdir src
   touch src/index.ts

1. 修改package.json

javascript

 体验AI代码助手

 代码解读

复制代码

   {
     "type": "module",
     "bin": {
       "mymcp": "./build/index.js"
     },
     "scripts": {
       "build": "tsc && chmod 755 build/index.js"
     },
     "files": [
       "build"
     ]
   }

1. 新增tsconfig.json

javascript

 体验AI代码助手

 代码解读

复制代码

   {
     "compilerOptions": {
       "target": "ES2022",
       "module": "Node16",
       "moduleResolution": "Node16",
       "outDir": "./build",
       "rootDir": "./src",
       "strict": true,
       "esModuleInterop": true,
       "skipLibCheck": true,
       "forceConsistentCasingInFileNames": true
     },
     "include": ["src/*/"],
     "exclude": ["node_modules"]
   }

2. 服务开发

1. 在入口文件中引入依赖，并进行服务实例化 将下面代码添加到src/index.ts顶部

javascript

 体验AI代码助手

 代码解读

复制代码

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";

// Create server instance
const server = new McpServer({
 name: "TODO",
 version: "1.0.0",
});

// Start server
async function main(){
   
}

2. MCP 服务器种类

目前 MCP 有两种类型的服务器：

1. stdio 服务器： 在本地运行的服务器，作为应用程序的子进程。
2. HTTP over SSE 服务器： 远程的，通过 URL 连接。

我们的 TODO demo 主要是用本地服务器方式

1） 按照mcp官方文档引入sdk并创建链接，更新index.ts

javascript

 体验AI代码助手

 代码解读

复制代码

  import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
  // Import
  import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'

  // Create server instance
  const server = new McpServer({
    name: "TODO",
    version: "1.0.0",
  });

  async function main(){
     // Connect Transport
      const transport = new StdioServerTransport();
      await server.connect(transport);
  }

  main().catch(error => {
      console.error(error);
      process.exit(1);
  })

1. 工具函数 工具是MCP服务端向客户端（如Cursor、Claude）公开的可供LLM执行的功能 下面，让我们新增增删查的工具函数，继续完善我们的TODO MCP Server Demo

javascript

 体验AI代码助手

 代码解读

复制代码

 // Add Tools
import { z } from 'zod'; // 引入zod做数据类型校验

server.tool(
   "add-todo",
   {
       text: z.string()
   },
   async({text})=>{
       return {
           content: [
               {
                   type: "text",
                   text: ${text} was added to our todo with ID 99
               }
           ]
       }
   }
)

server.tool(
   "get-todo",
   {
       text: z.string()
   },
   async({text})=>{
       return {
           content: [
               {
                   type: "text",
                   text: Drink Water(ID 99)
               }
           ]
       }
   }
)

server.tool(
   "remove-todo",
   {
       id: z.number()
   },
   async({id})=>{
       return {
           content: [
               {
                   type: "text",
                   text: TODO ${id} was removed
               }
           ]
       }
   }
)

3.在Cursor中引入

以上，我们就已经把简易的服务实现完成，包含了工程初始化、创建工具函数以及服务的启动，下面我们来把它链接到Cursor

1. 先完成服务编译

arduino

 体验AI代码助手

 代码解读

复制代码

npm run build

2. 复制产物的路径

1. 打开cursor的设置，新增mcp-server

到这里可以验证我们的MCP Server 可以正常工作

4. 完善Demo,让 ToDo List 动态化

1. 借助npm包 better-sqlite3 来快速实现数据库

bash

 体验AI代码助手

 代码解读

复制代码

npm install better-sqlite3 @types/better-sqlite3

2. 新建database.ts文件 下面这个过程是为了让todolist动态化，代码的修改可以让cursor直接完成

ts

 体验AI代码助手

 代码解读

复制代码

    import Database from "better-sqlite3";
   import path from "path";
   import os from 'os';
   import { fileURLToPath } from 'url';

   // 定义 Todo 类型
   export interface Todo {
       id: number;
       text: string;
   }

   // Get directory path for ES modules
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);

   // 数据库文件位置 - 使用项目目录
   const DB_LOCATION = '/Users/hongmiaomiao/git/mcp-server-demo/todo.db';

   // 创建数据库连接
   const db = new Database(DB_LOCATION);

   // 创建 todos 表 - 简化表结构
   db.exec(`
       CREATE TABLE IF NOT EXISTS todos (
           id INTEGER PRIMARY KEY AUTOINCREMENT,
           text TEXT NOT NULL
       )
   `);

   // 数据库操作函数
   const dbOperations = {
       // 添加 todo
       addTodo(text: string): Todo {
           const stmt = db.prepare('INSERT INTO todos (text) VALUES (?)');
           const result = stmt.run(text);
           return {
               id: result.lastInsertRowid as number,
               text
           };
       },

       // 获取 todo by text
       getTodoByText(text: string): Todo[] {
           const stmt = db.prepare('SELECT * FROM todos WHERE text LIKE ?');
           return stmt.all(%${text}%) as Todo[];
       },

       // 删除 todo
       deleteTodo(id: number): void {
           const stmt = db.prepare('DELETE FROM todos WHERE id = ?');
           stmt.run(id);
       }
   };

   export const { addTodo, getTodoByText, deleteTodo } = dbOperations;
   

三、效果测试

可以看到现在我们的todo mcp-server成功实现

作者：洪喵喵
链接：https://juejin.cn/post/7484450875467644965
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。