delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ai-protocols): add MCP and A2A protocol demos and documentation

Browse Source 
docs(ai-protocols): update AI protocols page with visual demos and detailed explanations
style(git-demos): improve responsive design and layout for git visualization components
refactor(ai-history): simplify and clean up demo components
chore: update config to register new AI protocol components
This commit is contained in:
sanbuphy
2026-02-22 18:26:19 +08:00
parent 4b83a4c23e
commit e5a5b9df5b
31 changed files with 5093 additions and 5333 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/ai-protocols/McpVisualDemo.vue
+284
View File
@@ -0,0 +1,284 @@
<template>
<div class="mcp-visual-demo">
<div class="section-title">MCP 是什么？</div>
<div class="intro-text">
MCP（Model Context Protocol）是 Anthropic 于 2024 年 11 月推出的<strong>AI 与外部工具连接的统一标准</strong>。它让 AI 应用可以调用外部工具、读取资源数据、使用预定义提示，就像给 AI 装上了"手"和"眼睛"。
</div>
<div class="section-title">三大核心能力</div>
<div class="能力-table">
<div class="table-header">
<div class="col-能力">能力</div>
<div class="col-英文">英文</div>
<div class="col-作用">作用</div>
<div class="col-示例">示例</div>
</div>
<div class="table-row">
<div class="col-能力"><strong>工具</strong></div>
<div class="col-英文">Tools</div>
<div class="col-作用">AI 可以调用的功能</div>
<div class="col-示例">查询天气、发送邮件、调用 API</div>
</div>
<div class="table-row">
<div class="col-能力"><strong>资源</strong></div>
<div class="col-英文">Resources</div>
<div class="col-作用">AI 可以读取的数据</div>
<div class="col-示例">文件内容、数据库记录、配置信息</div>
</div>
<div class="table-row">
<div class="col-能力"><strong>提示</strong></div>
<div class="col-英文">Prompts</div>
<div class="col-作用">预定义的提示模板</div>
<div class="col-示例">代码审查模板、写作模板</div>
</div>
</div>
<div class="section-title">什么时候用 MCP？</div>
<div class="use-cases">
<div class="use-case">
<div class="use-case-title">当 AI 需要执行实际操作时</div>
<div class="use-case-desc">AI 不仅要回答问题，还要真正做事：发送邮件、操作文件、调用第三方 API</div>
</div>
<div class="use-case">
<div class="use-case-title">当 AI 需要访问私有数据时</div>
<div class="use-case-desc">读取本地文件、查询数据库、访问企业内部系统</div>
</div>
<div class="use-case">
<div class="use-case-title">当需要标准化工具接入时</div>
<div class="use-case-desc">一次开发，多个 AI 应用可用（Claude、Cursor、Windsurf 等）</div>
</div>
</div>
<div class="section-title">如何使用 MCP？</div>
<div class="usage-steps">
<div class="step">
<div class="step-num">1</div>
<div class="step-content">
<div class="step-title">开发 MCP Server</div>
<div class="step-desc">按 MCP 规范实现 Server，提供 tools/resources/prompts</div>
</div>
</div>
<div class="step">
<div class="step-num">2</div>
<div class="step-content">
<div class="step-title">配置 AI 应用连接</div>
<div class="step-desc">在 AI 应用中添加 MCP Server 配置（本地或远程）</div>
</div>
</div>
<div class="step">
<div class="step-num">3</div>
<div class="step-content">
<div class="step-title">AI 自动调用</div>
<div class="step-desc">AI 根据任务需求，自动发现并调用合适的工具或读取资源</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
</script>
<style scoped>
.mcp-visual-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1.25rem;
margin: 1rem 0;
}
.section-title {
font-weight: 600;
font-size: 1rem;
color: var(--vp-c-text-1);
margin-bottom: 0.75rem;
margin-top: 1.25rem;
}
.section-title:first-child {
margin-top: 0;
}
.intro-text {
font-size: 0.9rem;
color: var(--vp-c-text-2);
line-height: 1.6;
margin-bottom: 1rem;
}
.intro-text strong {
color: var(--vp-c-brand);
}
.能力-table {
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
overflow: hidden;
margin-bottom: 1rem;
}
.table-header {
display: flex;
background: var(--vp-c-bg-alt);
border-bottom: 1px solid var(--vp-c-divider);
font-weight: 600;
font-size: 0.8rem;
}
.table-row {
display: flex;
border-bottom: 1px solid var(--vp-c-divider);
font-size: 0.8rem;
}
.table-row:last-child {
border-bottom: none;
}
.col-能力 {
width: 15%;
padding: 0.5rem 0.6rem;
color: var(--vp-c-text-1);
}
.col-英文 {
width: 18%;
padding: 0.5rem 0.6rem;
color: var(--vp-c-text-2);
}
.col-作用 {
width: 32%;
padding: 0.5rem 0.6rem;
color: var(--vp-c-text-2);
}
.col-示例 {
width: 35%;
padding: 0.5rem 0.6rem;
color: var(--vp-c-text-3);
}
.use-cases {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-bottom: 1rem;
}
.use-case {
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 6px;
border-left: 3px solid var(--vp-c-brand);
}
.use-case-title {
font-weight: 600;
font-size: 0.85rem;
color: var(--vp-c-text-1);
margin-bottom: 0.3rem;
}
.use-case-desc {
font-size: 0.8rem;
color: var(--vp-c-text-2);
line-height: 1.4;
}
.usage-steps {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.step {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 6px;
}
.step-num {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
background: var(--vp-c-brand);
color: white;
border-radius: 50%;
font-size: 0.75rem;
font-weight: 600;
flex-shrink: 0;
}
.step-content {
flex: 1;
}
.step-title {
font-weight: 600;
font-size: 0.85rem;
color: var(--vp-c-text-1);
margin-bottom: 0.2rem;
}
.step-desc {
font-size: 0.8rem;
color: var(--vp-c-text-2);
line-height: 1.4;
}
@media (max-width: 640px) {
.table-header,
.table-row {
flex-direction: column;
}
.col-能力,
.col-英文,
.col-作用,
.col-示例 {
width: 100%;
padding: 0.35rem 0.6rem;
}
.table-header {
display: none;
}
.table-row {
padding: 0.5rem 0;
}
.col-能力 {
font-size: 0.85rem;
padding-bottom: 0.2rem;
}
.col-英文 {
font-size: 0.75rem;
padding-top: 0;
padding-bottom: 0.2rem;
}
.col-作用 {
font-size: 0.8rem;
padding-top: 0;
padding-bottom: 0.2rem;
}
.col-示例 {
font-size: 0.75rem;
padding-top: 0;
}
}
</style>