别卷Prompt了!学会MCP,让AI自动调用全网工具!

相关词

前言

MCP(Model Context Protocol),作为热门领域 AI Agent 衍生出来的东西,function calling 的协议升级版,虽说是一种统一协议,但如果从应用层直接理解,可以简单解释为为让 AI 像人类一样更好地使用工具的一种方法。用大白话来说,MCP 就是给 AI 提供了一个更好的"工具箱"和使用说明书

早期的 Function Calling 需开发者手动注册所有工具函数,导致请求冗余和扩展性差。这种局限性催生了 MCP 协议的诞生,它一定程度上改变了 AI 与工具交互的方式。

基础概念:agent

最简单的实现方式是多个大模型+function calling,比如我想做一个能跑终端命令和网络搜索的 agent,可以准备三个大模型,一个大模型负责调配任务、一个负责配合 fc 跑终端命令和网络搜索、最后一个负责收集上面大模型的输出进行总结。

从"单把 ⛏️"到"工具箱"

  • Function Calling:AI 像一个只会单一技能的学徒,拿着一把 ⛏️,只能重复单一动作
  • MCP 增强的 Agent:AI 可以像一位经验丰富的工匠,不仅掌握各种工具的使用方法,还能根据任务需求灵活组合工具,制定最优方案

MCP 的工作原理

当您向 agent 提出请求时,它 会:

  1. 分析您的需求
  2. 查看它的"工具箱"中有哪些可用工具
  3. 选择合适的工具并按正确的方式使用它们
  4. 整合各个工具的结果给您最终答案

MCP 协议优势解析(使用者视角)

特性 Function Calling MCP 协议
工具增减 ❌ 工具固定,需要提前设定 ✅ json 配置就完事了
任务执行方式 ❌ 只能按固定步骤执行 ✅ agent 自动组合工具完成任务
开发难易度 ❌ 需要重复写模版代码 ✅ json 配置就完事了
跨设备兼容 ❌ 需针对不同系统调整 ✅ 配置是统一了,实现细节不关我事
功能扩展能力 ❌ 添加新功能较困难 ✅ json 配置就完事了
日常维护 ❌ 麻烦 ✅ json 配置就完事了

制作 MCP 服务(开发者视角)

下面我们将以 cursor,nodejs 来实现一个案例展示如何构建简单的 MCP 服务,帮助大家深入理解

或自行参考官方文档

bash 复制代码
# 创建项目文件夹
mkdir see-girl-mcp-server
cd see-girl-mcp-server

# 初始化npm项目
npm init -y

# 安装对应mcp依赖
npm i @modelcontextprotocol/sdk zod

# 创建主文件
copy nul index.mjs

然后将下面代码写入 index.mjs

js 复制代码
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { exec } from 'child_process';
import { z } from 'zod';

/** @return {MCP服务器} */
const server = new McpServer({
  name: "see-girl",
  version: "0.0.1"
});

/** @return {随便找的免费接口} */
const url = "https://api.kuleu.com/api/MP4_xiaojiejie";

/** @return {获取视频,返回mp4格式} */
const getVideo = async () => {
  const response = await fetch(`${url}?type=json`);
  const data = await response.json();
  return data.mp4_video;
};

/** @注册工具给agent用 */
server.tool(
  "get-video",
  async () => {
    try {
      const video = await getVideo();
      // 启动后直接浏览器启动
      return {
        content: [{
          type: 'text',
          text: video,
        }],
        isError: false,
      };
    } catch (error) {
      console.warn(error);
      return {
        content: [{
          type: 'text',
          text: error.message,
        }],
        isError: true,
      };
    }
  }
);

/** @浏览器启动妹子视频 */
server.tool('open-video', {
  url: z.string().describe('妹子视频的url')
}, async ({ url }) => {
  // 区分mac和windows
  if (process.platform === 'darwin') {
    exec(`open ${url}`, { shell: true });
  } else {
    exec(`start ${url}`, { shell: true });
  }
  return {
    content: [{
      type: 'text',
      text: 'ok',
    }],
    isError: false,
  }
})

/** @启动服务器 */
async function main() {
  try {
    // 日志服务器启动信息
    console.log("启动MCP服务器...");

    // 使用标准输入/输出作为传输方式
    const transport = new StdioServerTransport();
    await server.connect(transport);

    console.log("MCP服务器已启动并等待连接");
  } catch (error) {
    console.error("启动服务器时出错:", error);
    process.exit(1);
  }
}

main();

一个简单的 mcp 服务脚本就写好了,这里包含两个工具,我们可以运行看一下效果

接下来我们尝试将其给 cursor 的 agent 用,打开 cursor settings,选择左边的 mcp 菜单

然后右上角 add new mcp server,将下面那段代码复制进去,刷新看一下就有了

args 那里不论 mac 还是 window 都需要绝对地址,路径为对应脚本的绝对路径,自行替换。

swift 复制代码
{
  "mcpServers": {
    "see-girl": {
      "name": "查询妹子视频服务",
      "key": "see-girl",
      "command": "node",
      "args": ["D:\\code\\nodeJS\\weather-mcp-server\\index.mjs"]
    }
  }
}

粘贴完后会自动尝试启动服务,如图即配置成功

最后我们再对话框尝试一下 agent 的运行

随后会自动在浏览器打开网页预览视频

注意:此处的脚本宿主环境不是浏览器,而是 nodejs
铺一份function calling 代码

总结

基于 mcp 协议包来开发工具,相对之前 function calling 时代,很大程度上减少了开发量,通过本文案例可见,mcp 协议将 AI 工具化能力提升到新高度。使用者无需再硬编码复杂逻辑,而是通过声明式工具注册,即可构建出智能的 AI 服务生态。随着 Claude、Cursor 等平台对 mcp 的原生支持,这种"智能工具箱"模式正在成为 AI 应用开发的新范式

ps:本文仅代表笔者的粗略见解,如有不同意见,可评论留言

相关推荐
Mintopia1 小时前
Node.js 对前端技术有利的知识点
前端·javascript·node.js
一道雷1 小时前
🛠️ Unindex:推荐一款自动化索引文件生成工具
前端·javascript·node.js
键指江湖1 小时前
React 更新 state 中的数组
javascript·react.js·ecmascript
Mintopia1 小时前
Three.js 着色器使用教程:进阶指南
前端·javascript·three.js
卸任2 小时前
next-auth是如何保持登录状态的?回顾一下Session、Cookie、Token
前端·javascript·next.js
BillKu2 小时前
vue3中,element-plus中el-input的v-model和value的用法示例
javascript·vue.js·elementui
小韩本韩!2 小时前
electron+vue项目 设置全屏
javascript·vue.js·electron
神秘红光可达鸭2 小时前
react UI=f(state) 的演进之路
javascript·react.js
静思己过2 小时前
AutoDecimal:轻松解决 JavaScript 运算精度问题之toDecimal
前端·javascript
日升2 小时前
AbortController:让异步操作随时说停就停
前端·javascript·ajax