跳到主要内容 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
相关免费在线工具 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 =>style .opacity = '0' ;
setTimeout (() => {
el.style .transition = 'opacity 1s ease' ;
el.style .opacity = '1' ;
}, 100 );
});
const productCards = document .querySelectorAll ('.product-card' );
productCards.forEach (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 >
