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

基础知识

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 Clien就像手机中的音乐播放器/浏览器软件 用户点击播放音乐按钮时，它会连接到手机的音乐文件存储系统/互联网上的音乐服务（MCP Server）来获取并播放乐。
MCP Server	与各种第三方数据源的交互，最后再通过标准的 MCP 协议返回给MCP Client	MCP Server就像手机内部的音乐文件存储系统/互联网上的音乐服务。 根据MCP Client的请求找到并传输音乐文件的数据。

MCP vs Function Call vs Agent

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

实践案例（动手做）

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

简单验证下 MCP 的能力

获取高德 MCP配置

• 进入高德控制台，创建应用，类型选择出行

• 添加 Key，选择 web服务

• 将生成的 key 复制下来

设置 Cursor

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

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

1. { “mcpServers”: {
2. “amap-amap-sse”:
3. {
4. “url”:”https://mcp.amap.com/sse?key=这里这里！！！粘贴您在高德官网上申请的key”
5. }
6. }
7. }

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

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

HAP 创建插件视图项目，并通过 Cursor 打开

开始对话

• 在右侧对话框，我们可以直接输入指令，可以加上你一些个性化的需求

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

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

生成页面

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

1. 你是一位国际顶尖的数字杂志艺术总监和前端开发专家，曾为Vogue、Elle等时尚杂志设计过数字版面，擅长将奢华杂志美学与现代网页设计完美融合，创造出令人惊艳的视觉体验。
2. 请设计高级时尚杂志风格的手机app旅行攻略，将旅行信息以精致奢华的杂志编排呈现，让用户感受到如同翻阅高端杂志般的视觉享受。
3. **可选设计风格：**
4. 波普艺术风格 (Pop Art)
5. 采用波普艺术风格设计，重现60年代艺术运动的大胆美学。必须使用亮丽原色（红、黄、蓝）和黑色轮廓线，色彩应平面且不含渐变。排版应大胆且戏剧化，使用漫画风格字体和夸张的感叹词，文字可放置在对话气泡中。图像处理是关键，应使用半调网点(Halftone)效果模拟印刷（不遮挡文字），将图像简化为点阵和色块。装饰元素应包含漫画风格的线条、爆炸形状和拟声词。可使用重复图案和网格排列增强视觉冲击。整体设计应呈现出鲜明、直接且充满流行文化引用的视觉效果，仿佛一页来自60年代漫画或安迪·沃霍尔的艺术作品，参考Roy Lichtenstein的绘画和经典漫画书的视觉语言。
6. **每种风格都应包含以下元素，但视觉表现各不相同：**
7. 1. **行程标题区**：
8. – 目的地名称（主标题，醒目位置）
9. – 旅行日期和总天数
10. – 旅行者姓名/团队名称（可选）
11. – 天气信息摘要
12. 2. **行程概览区**：
13. – 按日期分区的行程简表
14. – 每天主要活动/景点的概览
15. – 使用图标标识不同类型的活动
16. 3. **详细时间表区**：
17. – 以表格或时间轴形式呈现详细行程
18. – 包含时间、地点、活动描述
19. – 每个景点的停留时间
20. – 标注门票价格和必要预订信息
21. 4. **交通信息区**：
22. – 主要交通换乘点及方式
23. – 地铁/公交线路和站点信息
24. – 预计交通时间
25. – 使用箭头或连线表示行程路线
26. 5. **住宿与餐饮区**：
27. – 酒店/住宿地址和联系方式
28. – 入住和退房时间
29. – 推荐餐厅列表（标注特色菜和价格区间）
30. – 附近便利设施（如超市、药店等）
31. 6. **实用信息区**：
32. – 紧急联系电话
33. – 重要提示和注意事项
34. – 预算摘要
35. – 行李清单提醒
36. **技术规范：**
37. * 使用HTML5、Font Awesome、Tailwind CSS和必要的JavaScript
38. * 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)
39. * 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)
40. * 中文字体: [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)
41. * 确保代码简洁高效，注重性能和可维护性
42. * 使用CSS变量管理颜色和间距，便于风格统一
43. * 对于液态数字形态主义风格，必须添加流体动态效果和渐变过渡
44. * 对于超感官极简主义风格，必须精确控制每个像素和微妙的交互反馈
45. * 对于新表现主义数据可视化风格，必须将数据以视觉化方式融入设计
46. **输出要求：**
47. * 按照我的项目框架生成一个完整的js文件，并在 index.js中引用，包含所有设计风格的卡片
48. * 代码应当优雅且符合最佳实践，CSS应体现出对细节的极致追求
49. * 设计的宽度根据手机宽度自适应
50. * 永远用中文输出，装饰元素可用法语、英语等其他语言显得有逼格
51. * 注意文字的可阅读性，保持文字背景干净和字体颜色不一致
52. 请以国际顶尖杂志艺术总监的眼光和审美标准，创造风格迥异但同样令人惊艳的手机app旅行攻略，让用户感受到”这不是普通的信息卡片，而是一件可收藏的数字艺术品”。

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

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

页面示例

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

Cursor+APIfox MCP

前段时间我们在 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，写入数据

示例页面

https://058c04c1b5d639e2.share.mingdao.net/public/view/6837f888a03ac19291d0031d

引用及学习资源

• MCP + 数据库，一种提高结构化数据检索精度的新方式_哔哩哔哩_bilibili
• https://waytoagi.feishu.cn/wiki/XkVNw0w91ieXEmkyoR8c2KPZnSh
• https://waytoagi.feishu.cn/wiki/FEgvwGO9giVp72kWEsxckE1Qnte