别卷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:本文仅代表笔者的粗略见解,如有不同意见,可评论留言

相关推荐
大怪v25 分钟前
前端佬们!塌房了!用过Element-Plus的进来~
前端·javascript·element
拉不动的猪36 分钟前
electron的主进程与渲染进程之间的通信
前端·javascript·面试
鱼樱前端2 小时前
Rollup 在前端工程化中的核心应用解析-重新认识下Rollup
前端·javascript
rookie fish2 小时前
websocket结合promise的通信协议
javascript·python·websocket·网络协议
PsG喵喵2 小时前
用 Pinia 点燃 Vue 3 应用:状态管理革新之旅
前端·javascript·vue.js
鹏仔工作室2 小时前
vue h5实现车牌号输入框
前端·javascript·vue.js
冴羽3 小时前
SvelteKit 最新中文文档教程(11)—— 部署 Netlify 和 Vercel
前端·javascript·svelte
海晨忆3 小时前
JS—ES5与ES6:2分钟掌握ES5与ES6的区别
开发语言·javascript·es6·es5与es6的区别
DT——3 小时前
Vue2和Vue3的区别
开发语言·javascript·vue.js
cliff,3 小时前
JavaScript基础巩固之小游戏练习
javascript·笔记·学习