MCP 科普 + 实践：基于 HAP 的大模型外部交互协议应用与开发案例

MCP 概念科普+实践，Cursor+高德 MCP +HAP十分钟制作一份旅游攻略， Cursor+APIfox MCP +HAP30分钟完成自动化表单系统搭建与数据读写

卜＋＋

876人浏览 · 2025-06-03 14:18:47

卜＋＋ · 2025-06-03 14:18:47 发布

基础知识

Function Call

背景：以前的AI大模型，就像一个知识丰富但被困在屋子里的人，只能依靠自己已有的知识回答问题，没有办法获取实时的数据或者与外部的系统进行交互

Function Call 是 OPEN AI 在 2023 年推出的一个非常重要的概念: Function call (函数调用) 本质上就是提供了大模型与外部系统交互的能力，类似于给大模型安装一个“外挂工具箱”。

当大模型遇到自己无法直接回答的问题时，它会主动调用预设的函数(如查询天气、计算数据、访问数据库等)，获取实时或精准信息后再生成回答

比如说在 dify/coze上看到的插件，其实都是基于Function Call 思路来封装的，极大程度给予了大模型更多的可能性。

背景：OPEN AI 最开始提出这个这种技术的时候，并没有想让他成为一项标准，虽然后续很多模型也支持了Function
Call调用，但是各自的实现方式都不太一样。

在这里插入图片描述

那也意味着如果我们想开发一个Function Call工具需要同时对不同的模型进行适配,比如参数的结构、触发逻辑、返回结构等。

特点：能为大模型提供获取实时的数据或者与外部的系统进行交互的能力
痛点：不同模型之间调用规范不一样
◦ 举个例子，把「大模型」当做「手机」，把「Function Call」当做「数据线」
◦ 以前不同品牌手机的充电口是不一样的，为此厂商需要做不同的数据线来适配不同的充电口
◦ 不同的大模型Function Call调用规则不一样，为此开发者需要对不同的大模型进行适配

MCP

背景：以前要通过Function Call，每次要让模型对接新的数据源或者使用新的工具，都需要编写大量的代码来对接，既麻烦又容易出错，而
MCP 的出现，就是为了解决这个问题，不再重复造轮子

MCP（Model Context Protocol，模型上下文协议） 是由Anthropic公司推出的一个开放的标准协议，目的就是为了解决AI模型与外部数据源交互的难题

MCP 的诞生-不再重复造轮子
传统方式将 AI 系统连接到外部工具涉及集成多个 API。每个 API 集成都意味着单独的代码、文档、身份验证方法、错误处理和维护。简单来说 LLM使用不同工具时，以前需要同时修改模型和工具，因为各工具的API数据格式不统一，导致适配成本高、功能添加慢。
MCP 就像是一个“通用插头"或者“USB 接口”，MCP协议制定了统一的规范，规定了应用向LLM传输数据的方式。任何模型只要兼容MCP协议，就能与所有支持MCP的应用交互。
对于已有API的应用，第三方开发者也可基于其API进行MCP封装适配，无需官方支持。

MCP工作模式

客户端与服务器的交互模式
在这里插入图片描述

	概念	举个例子
MCP Host	是运行 MCP 的主应用程序，通常是用户直接交互的界面，如 Claude 、Cursor或其他 AI 工具等（他们在内部实现了 MCP Client）。目前支持MCP的客户端：https://modelcontextprotocol.io/clients	Host 就像一个手机，用户使用手机完成一些任务，比如播放歌曲、查询天气、或者访问互联网。
MCP Client	通过标准的协议和MCP Server进行交互	MCP Client就像手机中的音乐播放器/浏览器软件用户点击播放音乐按钮时，它会连接到手机的音乐文件存储系统/互联网上的音乐服务（MCP Server）来获取并播放乐。
MCP Server	与各种第三方数据源的交互，最后再通过标准的 MCP 协议返回给MCP Client	MCP Server就像手机内部的音乐文件存储系统/互联网上的音乐服务。根据MCP Client的请求找到并传输音乐文件的数据

MCP vs Function Call vs Agent

对比维度	MCP（Model Context Protocol）	Function Call	Agent
定位对比	被动的工具箱被动服务,仅响应调用请求为大模型提供外部数据和能力支持不参与决策或推理过程像工具箱,等待别人挑选使用	瑞士军刀被动服务,仅响应调用请求允许模型生成请求参数并整合结果与模型绑定部署,紧密集成像瑞士军刀,小巧多功能,随身携带	具备自主决策能力的AI实体具备自主决策能力的AI实体能感知环境、规划任务并执行可调用各种工具(包括MCP/Function Call) 像熟练工人,选择合适工具完成复杂任务
交互方式	单向响应采用被动服务模式,仅在接收请求时响应通过HTTP/SSE协议接收请求,返回数据数据流向:模型→MCP Server→模型	模型内部触发由模型运行时环境直接执行开发者需预先定义函数并打包到模型服务中数据流向:模型→函数执行环境→模型	双向交互具备高自主性,可主动调用工具能与用户进行双向交互,澄清需求数据流向:用户-Agent-各种工具/服务
应用场景	适合复杂、异步任务场景:企业内部系统(CRM、ERP)封装为MCP Server 处理:多个Agent可以安全调用统一接口的数据	适合简单、同步任场景:用户询问"北京今天的天气如何" 处理:模型直接调用get _weather()函数获取结果	适合端到端复杂任务客户服务自动化处理:自动监控用户反馈、分析问题、生成解决方案
协议标准	开放协议（JSON-PRC 2.0）	私有协议（各模型自定义规则）	依赖底层工具
部署灵活性	可独立扩展	需与模型绑定	需集成多种模块
任务复杂度	复杂数据整合任务	简单低延迟任务	自主决策多步任务

MCP 资源

大量MCP 服务和安装地址：https://github.com/appcypher/awesome-mcp-servers?tab=readme-ov-file
Anthropic 官网MCP文档
◦ https://modelcontextprotocol.io/quickstart/server
◦ MCP中文文档
开源的 MCP 服务：https://glama.ai/mcp/servers

实践案例（动手做）

制作好的应用/插件，可以上架到HAP市场中，完成知识变现

Cursor+高德 MCP+HAP 十分钟制作一份旅游攻略

⭐简单验证下 MCP 的能力

获取高德 MCP配置
• 进入高德控制台，创建应用，类型选择出行

• 添加 Key，选择 web服务

• 将生成的 key 复制下来
在这里插入图片描述

设置 Cursor
• 打开Cursor-首选项-Cursor Settings-MCP，Add new globle MCP server

• 将高德 MCP 配置粘贴到mcp.json文件里

{   
 "mcpServers": {        
        "amap-amap-sse": 
        { 
        "url":"https://mcp.amap.com/sse?key=这里这里！！！粘贴您在高德官网上申请的key"      
        }    
     }
}

在这里插入图片描述
• 保存并关闭，回到 MCP 配置，这里变绿则配置成功，如果没绿点击右侧刷新按钮

• 点击MCP上面的 Features，找到 Enable auto-run mode 。一定要“不勾选”MCP tools protection，如果勾选了，每次行动，都要我们点同意
在这里插入图片描述

HAP 创建插件视图项目，并通过 Cursor 打开
开始对话
• 在右侧对话框，我们可以直接输入指令，可以加上你一些个性化的需求

用高德MCP，帮我做个上海一日游攻略指南，我对摄影很感兴趣，希望能去一些适合拍照的地方。

保存为 shanghaitravel.md• 会根据我的指令，自动发起 MCP 服务请求。获取到请求后的数据后，会自动帮我生成一份md 格式的攻略文档

在这里插入图片描述

生成页面

接下来，我们让他生成一个旅游指南页面。新建一个空白文件，命名为：prompt.md ，复制一下我的提示词，粘贴到文件里

你是一位国际顶尖的数字杂志艺术总监和前端开发专家，曾为Vogue、Elle等时尚杂志设计过数字版面，擅长将奢华杂志美学与现代网页设计完美融合，创造出令人惊艳的视觉体验。

请设计高级时尚杂志风格的手机app旅行攻略，将旅行信息以精致奢华的杂志编排呈现，让用户感受到如同翻阅高端杂志般的视觉享受。

**可选设计风格：**

波普艺术风格 (Pop Art)
采用波普艺术风格设计，重现60年代艺术运动的大胆美学。必须使用亮丽原色（红、黄、蓝）和黑色轮廓线，色彩应平面且不含渐变。排版应大胆且戏剧化，使用漫画风格字体和夸张的感叹词，文字可放置在对话气泡中。图像处理是关键，应使用半调网点(Halftone)效果模拟印刷（不遮挡文字），将图像简化为点阵和色块。装饰元素应包含漫画风格的线条、爆炸形状和拟声词。可使用重复图案和网格排列增强视觉冲击。整体设计应呈现出鲜明、直接且充满流行文化引用的视觉效果，仿佛一页来自60年代漫画或安迪·沃霍尔的艺术作品，参考Roy Lichtenstein的绘画和经典漫画书的视觉语言。

**每种风格都应包含以下元素，但视觉表现各不相同：**

1. **行程标题区**：
   - 目的地名称（主标题，醒目位置）
   - 旅行日期和总天数
   - 旅行者姓名/团队名称（可选）
   - 天气信息摘要

2. **行程概览区**：
   - 按日期分区的行程简表
   - 每天主要活动/景点的概览
   - 使用图标标识不同类型的活动

3. **详细时间表区**：
   - 以表格或时间轴形式呈现详细行程
   - 包含时间、地点、活动描述
   - 每个景点的停留时间
   - 标注门票价格和必要预订信息

4. **交通信息区**：
   - 主要交通换乘点及方式
   - 地铁/公交线路和站点信息
   - 预计交通时间
   - 使用箭头或连线表示行程路线

5. **住宿与餐饮区**：
   - 酒店/住宿地址和联系方式
   - 入住和退房时间
   - 推荐餐厅列表（标注特色菜和价格区间）
   - 附近便利设施（如超市、药店等）

6. **实用信息区**：
   - 紧急联系电话
   - 重要提示和注意事项
   - 预算摘要
   - 行李清单提醒

**技术规范：**

* 使用HTML5、Font Awesome、Tailwind CSS和必要的JavaScript
  * Font Awesome: [https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css](https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
  * Tailwind CSS: [https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css](https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css)
  * 中文字体: [https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap](https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap)
* 确保代码简洁高效，注重性能和可维护性
* 使用CSS变量管理颜色和间距，便于风格统一
* 对于液态数字形态主义风格，必须添加流体动态效果和渐变过渡
* 对于超感官极简主义风格，必须精确控制每个像素和微妙的交互反馈
* 对于新表现主义数据可视化风格，必须将数据以视觉化方式融入设计

**输出要求：**

* 按照我的项目框架生成一个完整的js文件，并在 index.js中引用，包含所有设计风格的卡片
* 代码应当优雅且符合最佳实践，CSS应体现出对细节的极致追求
* 设计的宽度根据手机宽度自适应
* 永远用中文输出，装饰元素可用法语、英语等其他语言显得有逼格
* 注意文字的可阅读性，保持文字背景干净和字体颜色不一致

请以国际顶尖杂志艺术总监的眼光和审美标准，创造风格迥异但同样令人惊艳的手机app旅行攻略，让用户感受到"这不是普通的信息卡片，而是一件可收藏的数字艺术品"。

然后告诉AI，根据生成的攻略，按照提示提示词规则，生成页面

清除现有 @App.js 页面内容 将 @shanghaitravel.md  内容，
按照我的提示词规则 @prompt.md 生成代码，写入@App.js 中

页面示例
https://058c04c1b5d639e2.share.mingdao.net/public/view/6836d7854d5c74f48bd4f3f9? 行程单-上海一日游示例

Cursor+APIfox MCP+HAP 30分钟完成自动化表单搭建与数据读写

前段时间我们在 APIfox 上配置了应用 API 文档，用于API 的在线调试。APIfox 也支持 MCP Server，
可用在Cursor 客户端，请求 APIfox MCP Server来获取API 文档信息。

**⭐主要能力：**通过语义化的问答，使用APIfox MCP Server 获取明道云应用 API 文档，来实现自动化流程的搭建，数据的读写

流程编排：能实现根据语义化描述，识别需要调用那些接口，获取到API文档信息后，在代码中编排好功能请求
数据操作：如果想在直接操作应用数据，还需要告诉AI应用密钥信息（可以把密钥写在配置文件中），这样通过APIfox MCP获取到API文档信息后，AI可以自动执行数据的读写

获取APIfox MCP 配置
• 进入我们公开分享的应用API 地址，点击任意一个 API，右上方会展示 MCP 入口，复制下方配置即可使用整个项目的 MCP Server
设置 Cursor
• 打开Cursor-首选项-Cursor Settings-MCP，Add new globle MCP server

• 将 MCP 配置粘贴到mcp.json文件里，如果有多个 MCP 逗号隔开即可
简单验证
• 通过对话获取API文档，并生成功能发起API请求

• 实现效果：点击按钮-展示API需要输入的参数-发起对外API请求-获取到响应数据。
在这里插入图片描述

探索玩法
⭐这一步，探索了通过 MCP 语义化完成了表单管理搭建，表单数据管理功能

• 通过 MCP 进行功能搭建：验证了可以通过 APIfox 获取应用 API 结构后，我在想能不能通过语义化的描述，帮我搭建一个表单管理功能。于是我这样问，仅通过一句指令，一个简单的表单管理页面就出来了
在这里插入图片描述

• 继续让他理解我的需求：现在有了表单，还需要把数据也同步过来。于是我继续问（其实也不需要告诉他需要调哪些接口）无需任何其他操作，就实现了一个简单的应用管理功能。
在这里插入图片描述

语义化进行数据操作：有了表单及数据管理功能后，我尝试让他AI我对数据录入。这里AI询问我是需要直接录入数据，还是生成录入数据的功能。（这里我要求直接帮我录入数据，并生成数据增删改查功能）
录入数据：通过APIfox MCP 只能获取到需要使用的API文档，并不能直接发起应用API请求。如果想直接录入数据，这里还需要我提供密钥信息（appkey 和sign）后才能直接执行请求。
- 数据已经成功录入到【员工档案】表单。（表单映射规则还需要写的详细些，才能保证特殊字段数据写入的更加准确

在这里插入图片描述

数据增删改查功能编排：上一步我要求生成数据增删改查功能后，页面上新增了操作按钮，并能够正确执行对应API
语义化直接操作数据：如果想通过APIfox MCP直接操作应用数据，需提前告知密钥信息（比如告知AI应用密钥信息可以去哪里读取）
- 这一步，我将测试密钥写在配置里后，再去对话中要求直接操作数据，就可以直接实现数据自动化读写了
  * 实现效果
  ▪ 先查应用信息，获取到应用下所有的表
  
  ▪ 再根据我的数据分析找到需要写入的工作表id
  
  ▪ 再查询工作表结构，构建新增行记录的请求参数
  
  ▪ 再直接调用新增行记录API，写入数据