跳到主要内容AIGC 时代的模型上下文协议 MCP 详解 | 极客日志编程语言AI算法
AIGC 时代的模型上下文协议 MCP 详解
MCP（Model Context Protocol）即模型上下文协议，是连接 AI 大模型与外部数据及工具的标准化交互方式。Anthropic 于 2024 年 11 月开源此协议，解决了 AI 模型与外部系统连接不足的问题。相比传统 API，MCP 支持动态能力发现，降低维护成本。目前已被 Claude、OpenAI 等平台接入，允许 AI 智能体调用工具完成任务，例如直接生成网页代码。
星云8 浏览 前言
2024 年 11 月，Anthropic（由 OpenAI 前员工创办）发布并开源了 Model Context Protocol（MCP）。当时 AIGC 发展迅速但存在痛点，AI 模型与外部数据、工具连接不足，此前方案缺乏通用性。MCP 提供了标准化的交互方式，助力 AI 与外部系统互动，随后获得多家支持，OpenAI 等巨头入局，成为 AI 智能体时代的关键技术。
初步了解
MCP 到底是个啥？
MCP，全称 Model Context Protocol，翻译过来是模型上下文协议。简单来说，它就是和大 AI 模型聊天时，一种把相关信息整理好、按规矩传给 AI 的方式。
之前我们使用的 AI 智能体如果比作是个思考问题的大脑，那么 MCP 就是思考后，给你去干活的。AI 大模型提供思维结果，而 MCP 负责调用工具做好工作，类似于低代码能力。
理论基础
MCP 与 RAG（为大模型提供充足上下文）和 Function Calling（让模型能使用工具）密切相关，在它们基础上实现 AI 与外部系统更高效交互。
核心组件
使用逻辑
目前在 Claude、OpenAI GPT、阿里云百炼、纳米 AI 都有接入 MCP，可以在工具箱中调用工作使用的 MCP 来完成现有工作。但带来的问题是权限过大，需注意安全性。
与传统 API 不同之处
- 传统 API 参数变更时，用户必须更新代码，否则请求可能失败。
- MCP 采用动态灵活方式，客户端连接服务器时会先了解其能力，服务器也会动态更新功能描述，客户端无需重写代码就能适应变化，大幅降低维护成本。
模型推荐
打开我们的大模型，选择工具，可以看到有很多官方或个人开发的 MCP 工具，我们可以点击使用。
提出要求，它会给你充分的回答。如果需要直接获取成品，可以使用成熟的 MCP 堆出来的 Agent 功能。
例如选择网页搭建功能，可以生成完整的 HTML 页面：
<!DOCTYPE >
L'Éclat | 精致美妆体验
L'Éclat
首页
护肤
彩妆
香水
关于我们
3
发现你的独特之美
精选全球优质美妆产品，为您带来非凡的护肤与彩妆体验
探索新品
产品分类
护肤系列
彩妆系列
香水系列
礼盒套装
精选推荐
新品
热销
特惠
护肤
玫瑰精华面霜
深层滋养，焕发肌肤活力
¥298
加入购物车
彩妆
丝绒唇膏 #12
哑光质地，持久不脱色
¥168
加入购物车
香水
清晨花园香水
清新花香调，50ml
¥458
加入购物车
礼盒
假日礼盒套装
精选 5 件明星产品
¥998
加入购物车
我们的故事
L'Éclat 源自法语，意为'光芒'。我们相信每个女性都拥有独特的光芒，而我们的使命就是帮助您发现并绽放这份美丽。
自 2015 年创立以来，我们始终致力于从全球精选最优质的化妆品和护肤品，只为您带来最安全、最有效的美丽体验。
了解更多
客户评价
张小姐
"玫瑰精华面霜真的太好用了！我的皮肤变得水润有光泽，会一直回购的！"
李女士
"丝绒唇膏的颜色太美了，而且一点都不干，持久度也很好，已经买了三个颜色了！"
王小姐
"清晨花园香水味道很清新，不会太浓烈，适合日常使用，包装也很精美。"
订阅我们的电子报
订阅即可获取新品上市、独家优惠和护肤美妆小贴士，首次订阅还可获得 9 折优惠券！
订阅
L'Éclat
发现你的独特之美
快速链接
首页
所有产品
新品上市
特惠活动
客户服务
联系我们
配送信息
退换政策
常见问题
关注我们
客服时间：9:00-21:00
客服热线：400-123-4567
© 2025 L'Éclat 美妆。保留所有权利.
微信扫一扫，关注极客日志
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具
- 加密/解密文本
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
- RSA密钥对生成器
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
- Mermaid 预览与可视化编辑
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
- Markdown转HTML
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
html
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
<link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--beige: #F5F5DC;
--light-yellow: #FAF8ED;
--gold: #D4AF37;
--soft-pink: #F8D7DA;
--transition: all 0.3s ease;
}
body { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: var(--light-yellow); color: #5A5A5A; line-height: 1.6; }
.header { background-color: var(--beige); box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 100; }
.logo { font-family: 'Times New Roman', serif; color: var(--gold); letter-spacing: 2px; }
.nav-item { transition: var(--transition); border-bottom: 2px solid transparent; }
.nav-item:hover { color: var(--gold); border-bottom-color: var(--gold); }
.hero { background: linear-gradient(135deg, var(--light-yellow) 0%, var(--beige) 100%); min-height: 500px; }
.product-card { background-color: white; transition: var(--transition); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.category-badge { background-color: var(--soft-pink); color: #8E4A49; }
.price { color: var(--gold); font-weight: bold; }
.btn-primary { background-color: var(--gold); transition: var(--transition); }
.btn-primary:hover { background-color: #C19A3D; transform: translateY(-2px); }
.footer { background-color: var(--beige); }
.fade-in { animation: fadeIn 1s ease-in; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
</style>
</head>
<body>
<header>
<div>
<div>
<div>
</div>
<nav>
<a href="#">
</a>
<a href="#">
</a>
<a href="#">
</a>
<a href="#">
</a>
<a href="#">
</a>
</nav>
<div>
<button>
<i>
</i>
</button>
<button>
<i>
</i>
</button>
<button>
<i>
</i>
<span>
</span>
</button>
</div>
</div>
</div>
</header>
<section class="hero">
<div>
<div>
<h1>
</h1>
<p>
</p>
<button>
</button>
</div>
</div>
</section>
<section>
<div>
<h2>
</h2>
<div>
<div>
<div>
<i>
</i>
</div>
<h3>
</h3>
</div>
<div>
<div>
<i>
</i>
</div>
<h3>
</h3>
</div>
<div>
<div>
<i>
</i>
</div>
<h3>
</h3>
</div>
<div>
<div>
<i>
</i>
</div>
<h3>
</h3>
</div>
</div>
</div>
</section>
<section>
<div>
<div>
<h2>
</h2>
<div>
<button>
</button>
<button>
</button>
<button>
</button>
</div>
</div>
<div>
<div>
<div>
<img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="玫瑰精华面霜">
<div>
</div>
</div>
<div>
<h3>
</h3>
<p>
</p>
<div>
<span>
</span>
<button>
</button>
</div>
</div>
</div>
<div>
<div>
<img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="丝绒唇膏">
<div>
</div>
</div>
<div>
<h3>
</h3>
<p>
</p>
<div>
<span>
</span>
<button>
</button>
</div>
</div>
</div>
<div>
<div>
<img src="https://images.unsplash.com/photo-1592945403244-b3fbafd7f539?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="清晨花园香水">
<div>
</div>
</div>
<div>
<h3>
</h3>
<p>
</p>
<div>
<span>
</span>
<button>
</button>
</div>
</div>
</div>
<div>
<div>
<img src="https://qcdn2.zhaomi.cn/t11de458816ceac5d1e59b3cfaf.png" alt="假日礼盒">
<div>
</div>
</div>
<div>
<h3>
</h3>
<p>
</p>
<div>
<span>
</span>
<button>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div>
<div>
<div>
<h2>
</h2>
<p>
</p>
<p>
</p>
<button>
</button>
</div>
<div>
<img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="品牌故事">
</div>
</div>
</div>
</section>
<section>
<div>
<h2>
</h2>
<div>
<div>
<div>
<div>
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="客户头像">
</div>
<div>
<h4>
</h4>
<div>
<i>
</i>
<i>
</i>
<i>
</i>
<i>
</i>
<i>
</i>
</div>
</div>
</div>
<p>
</p>
</div>
<div>
<div>
<div>
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="客户头像">
</div>
<div>
<h4>
</h4>
<div>
<i>
</i>
<i>
</i>
<i>
</i>
<i>
</i>
<i>
</i>
</div>
</div>
</div>
<p>
</p>
</div>
<div>
<div>
<div>
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="客户头像">
</div>
<div>
<h4>
</h4>
<div>
<i>
</i>
<i>
</i>
<i>
</i>
<i>
</i>
<i>
</i>
</div>
</div>
</div>
<p>
</p>
</div>
</div>
</div>
</section>
<section>
<div>
<h2>
</h2>
<p>
</p>
<div>
<input type="email" placeholder="您的电子邮箱">
<button>
</button>
</div>
</div>
</section>
<footer>
<div>
<div>
<div>
<h3>
</h3>
<p>
</p>
</div>
<div>
<h4>
</h4>
<ul>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
</ul>
</div>
<div>
<h4>
</h4>
<ul>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
</ul>
</div>
<div>
<h4>
</h4>
<div>
<a href="#">
<i>
</i>
</a>
<a href="#">
<i>
</i>
</a>
<a href="#">
<i>
</i>
</a>
</div>
<p>
</p>
<p>
</p>
</div>
</div>
<div>
<p>
</p>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('.fade-in');
elements.forEach(el => {
el.style.opacity = '0';
setTimeout(() => {
el.style.transition = 'opacity 1s ease';
el.style.opacity = '1';
}, 100);
});
const productCards = document.querySelectorAll('.product-card');
productCards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-5px)';
card.style.boxShadow = '0 10px 25px rgba(0,0,0,0.1)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = '';
card.style.boxShadow = '0 5px 15px rgba(0,0,0,0.05)';
});
});
});
</script>
</body>
</html>
