跳到主要内容 Model Context Protocol (MCP) 详解:核心组件、发展与应用 | 极客日志
编程语言 AI 大前端
Model Context Protocol (MCP) 详解:核心组件、发展与应用 Model Context Protocol(MCP)是用于连接 AI 模型与外部数据及工具的标准化协议。它基于 RAG 和 Function Calling 实现更高效交互,相比传统 API,MCP 支持动态能力发现,降低维护成本。文章介绍了 MCP 的核心组件、发展背景及与传统 API 的区别,并通过实际案例展示了利用 MCP 工具生成完整网页代码的能力,体现了其在智能体开发中的潜力。
初步了解
Mcp 到底是个啥?
Mcp,全称 Model Context Protocol,翻译过来是模型上下文协议。简单说,它就是和大 AI 模型聊天时,一种把相关信息整理好、按规矩传给 AI 的方式。
之前我们使用的 AI 智能体如果比作是个思考问题的大脑,那么 Mcp 就是思考后,给你去干活的。AI 大模型是给你思维结果,而 Mcp 就是调用工具给你做好工作。也就是低代码~
发展
2024 年 11 月,Anthropic(由 OpenAI 前员工创办)发布并开源 Mcp。当时 AIGC 发展快但存痛点,AI 模型与外部数据、工具连接不足,此前方案缺通用性。Mcp 提供标准化交互方式,助 AI 与外部系统互动。后获多家支持,OpenAI 等巨头入局,成 AI 智能体时代关键技术。
理论基础
与 RAG(为大模型提供充足上下文)和 Function Calling(让模型能使用工具)密切相关,在它们基础上实现 AI 与外部系统更高效交互。
核心组件
使用逻辑
目前在 Claude,OpenAI GPT,阿里云百炼,纳米 AI 都有接入 Mcp,可以在工具箱中调用工作使用的 Mcp 来完成现有工作,但是带来的问题是权限过大,不安全。
于传统 API 不同之处
传统 API 参数变更时,用户必须更新代码,否则请求可能失败。
MCP 采用动态灵活方式,客户端连接服务器时会先了解其能力,服务器也会动态更新功能描述,客户端无需重写代码就能适应变化,大幅降低维护成本。
应用示例
通过 MCP 工具,AI 可以生成完整的网页代码。以下是生成的示例代码:
<!DOCTYPE html >
<html = >
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 美妆。保留所有权利.
相关免费在线工具 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转Markdown 将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online
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" >
<link rel ="stylesheet" href ="https://s2.ssl.qhres2.com/static/56662140ef7d5d03.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 >
<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 >