莫潇羽@无忆研习社 原创内容，转载请注明出处：www.wuyi.wiki
2026年开年，AI领域迎来了一次足以改写办公形态的技术变革。Anthropic为旗下的Claude带来了一项里程碑式的更新——将十余款主流办公应用直接集成到对话界面中，用户无需在不同软件间来回切换，就能在一个聊天窗口里完成从数据分析到项目管理、从设计协作到消息发送的全流程工作。
这项更新的核心技术叫做「MCP Apps」，它是模型上下文协议（Model Context Protocol，简称MCP）的首个官方扩展。如果你还不了解这意味着什么，不妨这样理解：过去我们使用AI助手时，它只能通过文字告诉你答案，或者在后台默默地帮你执行任务；而现在，AI不仅能做事，还能把做事的过程、结果，以可视化、可交互的形式直接呈现在你面前，你甚至可以在AI生成的界面里直接编辑、修改、确认。
这篇文章将带你深入了解MCP协议的前世今生，剖析MCP Apps的技术原理，并手把手教你如何利用这项新功能提升工作效率。无论你是技术从业者还是普通用户，相信读完之后都会对AI的未来有全新的认知。
从碎片化到一体化：为什么我们需要MCP
传统AI集成的困境
在聊MCP Apps之前，我们需要先理解一个问题：AI模型与外部工具的连接，为什么这么难？
莫潇羽在日常工作中经常需要处理这样的场景：写完一份报告后，要把数据从分析工具导出来，粘贴到Word文档里，再截图发到Slack群组，同时在项目管理软件里更新进度。这个过程涉及四五个不同的应用，每个应用都有自己的界面、操作逻辑和数据格式。
当AI助手介入这个流程时，问题就更复杂了。传统的做法是为每一对「AI模型-外部工具」的组合开发一个专门的连接器（Connector）。假设市面上有M种AI应用和N种外部工具，理论上就需要开发M×N个连接器。这种架构被业界形象地称为「N×M问题」，它导致了巨大的开发成本和维护负担。
举个实际的例子：如果你想让ChatGPT连接Google Drive，需要OpenAI团队专门开发一个插件；如果你又想让Claude连接Google Drive，Anthropic团队需要重新开发一遍类似的功能。同样的工作被不同的公司反复做，资源浪费严重，而且各家的实现方式不统一，用户体验也参差不齐。
MCP的诞生：一个通用的连接标准
2024年11月，Anthropic正式开源了MCP协议，试图从根本上解决这个问题。MCP的设计思路很简单但很巧妙：与其让每对AI和工具单独对接，不如建立一个统一的「翻译层」。只要AI应用支持MCP协议（作为MCP客户端），只要外部工具实现了MCP协议（作为MCP服务器），它们就能自动互联互通。
这就像USB接口的诞生一样。在USB标准出现之前，不同品牌的设备各有各的接口规格，一根数据线只能用于特定的设备。USB统一了接口标准后，任何USB设备都能插到任何USB接口上使用。MCP对于AI生态系统的意义，与USB对于硬件生态系统的意义是类似的。
根据维基百科的记录，MCP协议发布后迅速获得了行业认可。OpenAI和Google DeepMind等主要AI服务商相继宣布支持这一标准，Block（前身为Square）、Apollo、Replit、Sourcegraph等知名科技公司也开始在自己的产品中集成MCP。到2025年初，开源社区已经贡献了超过1000个MCP连接器，涵盖了从企业级CRM系统到个人效率工具的各种应用。
MCP协议技术详解：莫潇羽带你看透底层架构
作为无忆研习社的站长，莫潇羽一直关注底层技术的演进。接下来我将用通俗的语言为大家拆解MCP的核心架构，即使你不是程序员也能理解。
MCP的三大角色
MCP协议的通信架构涉及三个核心角色：宿主（Host）、客户端（Client）和服务器（Server）。
宿主可以理解为「总调度中心」。它是整个MCP系统的入口，负责协调多个AI客户端与外部工具之间的通信。在实际场景中，Claude.ai网站或者Claude桌面应用就是一个宿主。当你在Claude里同时连接了Slack、Figma和Asana三个工具时，宿主会统一管理这些连接，确保数据在正确的通道中流转。
客户端是宿主内部运行的「代理人」。每个客户端负责与一个特定的MCP服务器建立一对一的通信。比如，当Claude需要访问你的Google Drive文件时，宿主会派出一个专门的客户端去与Google Drive的MCP服务器对话。客户端的重要职责之一是维护安全边界——一个客户端不应该能够窥探到另一个客户端的数据。
服务器是外部工具暴露给AI系统的「接口」。它定义了工具能提供什么数据、能执行什么操作。比如，一个Slack的MCP服务器可能提供「搜索消息」「发送消息」「列出频道」等功能。服务器可以是本地运行的程序（通过命令行的标准输入输出通信），也可以是部署在云端的远程服务（通过HTTP协议通信）。
MCP的三大原语
MCP协议定义了三种核心「原语」（Primitives），用于描述服务器能提供的能力：
资源（Resources） 是可以被读取的结构化数据。想象一下，当你告诉Claude「帮我找一下上周的销售报告」，Claude需要从你的文件存储服务中获取这份文件。这份文件就是一个「资源」。资源有唯一的URI（统一资源标识符），就像网页有URL一样。MCP客户端可以通过资源的URI来请求获取它的内容。
工具（Tools） 是可以被执行的操作。比如「发送一条Slack消息」「在Asana中创建一个任务」「生成一张图表」，这些都是工具。工具通常有输入参数（比如发送消息需要指定接收人和消息内容）和输出结果（比如消息发送成功或失败的状态）。值得注意的是，工具的执行可能会产生副作用——它不只是读取数据，还可能修改数据或触发外部系统的变化。
提示词（Prompts） 是预定义的指令模板。服务器可以提供一些常用的提示词模式，帮助AI更好地使用该服务。比如，一个数据分析工具的MCP服务器可能提供「按时间段筛选数据」「按类别聚合数据」等提示词模板，让AI在需要时直接调用，而不必每次都从头构造复杂的指令。
通信机制：JSON-RPC协议
MCP的底层通信使用JSON-RPC 2.0协议。如果你熟悉Web开发，可以把它理解为一种轻量级的远程过程调用方式。客户端和服务器之间的每次交互都是一个结构化的JSON消息，包含方法名、参数和唯一标识符。
通信可以通过两种传输层进行：
标准输入/输出（Stdio） 适用于本地运行的MCP服务器。客户端启动一个子进程运行服务器程序，然后通过stdin和stdout进行双向通信。这种方式的优点是延迟低、隐私性好（数据不需要经过网络），非常适合处理敏感信息。
HTTP服务端推送事件（Server-Sent Events） 适用于远程部署的MCP服务器。客户端通过HTTPS连接到服务器，服务器可以持续地向客户端推送更新。这种方式适合需要实时同步状态的场景，比如监控服务器的健康状态。
莫潇羽在研究MCP源码时发现，协议的设计非常注重安全性。规范文档中明确指出，实现者必须构建完善的用户授权流程、提供清晰的安全说明文档、实施适当的访问控制措施。这些要求确保了MCP不会成为数据泄露的风险点。
MCP Apps：从纯文本到交互式界面的跨越
理解MCP Apps解决的问题
MCP协议本身已经很强大了，但它有一个明显的局限：所有的交互都是基于文本的。
莫潇羽举个具体的例子来说明这个问题。假设你让Claude查询公司数据库，找出上个季度销售额最高的前100个客户。MCP服务器可以完美地执行这个查询，返回一张包含100行数据的表格。但接下来呢？
如果你想按地区筛选这些客户，你需要输入一条新的指令：「只显示华东地区的客户」。如果你想按销售额排序，又要输入另一条指令。如果你想查看某个特定客户的详细信息，还要继续输入指令。每一步交互都需要你用自然语言描述需求，AI解析你的意图，然后重新执行查询。
这种方式当然能工作，但效率很低。在传统的数据分析软件里，你只需要点击列头就能排序，拖动筛选器就能过滤，双击某行就能展开详情。这些直觉性的图形界面操作，在纯文本的AI对话中完全无法实现。
MCP Apps正是为了弥补这个差距而诞生的。它让MCP服务器不仅能返回文本数据，还能返回完整的交互式用户界面。这个界面会直接渲染在AI对话窗口中，用户可以像使用普通网页应用一样进行点击、拖拽、输入等操作。
MCP Apps的技术架构
MCP Apps扩展了原有的MCP协议，引入了两个新的核心概念：
带有UI元数据的工具 是MCP Apps的入口点。在原有的工具定义基础上，服务器可以添加一个_meta.ui字段，指向一个UI资源的URI。当客户端调用这个工具时，它不仅会执行工具的逻辑，还会加载并渲染对应的UI。
下面是一个工具定义的示例结构：
{
"name": "visualize_data",
"description": "将数据可视化为交互式图表",
"inputSchema": { ... },
"_meta": {
"ui": {
"resourceUri": "ui://charts/interactive"
}
}
}UI资源 是服务器通过ui://协议提供的HTML/JavaScript代码包。当客户端请求这个资源时，服务器会返回一个完整的前端应用代码。客户端（也就是Claude的界面）会在一个沙箱化的iframe中渲染这段代码，确保安全隔离。
UI资源和宿主之间通过postMessage机制进行双向通信，遵循JSON-RPC协议格式。这意味着：
- UI可以调用MCP服务器提供的任何工具，实现数据的动态加载和更新
- 宿主可以向UI推送新的数据，实现实时同步
- 所有的通信都是可审计的，便于安全监控
安全机制
运行来自第三方的代码总是存在安全风险的，MCP Apps在设计时充分考虑了这一点。
iframe沙箱隔离 是第一道防线。UI代码运行在一个受限的iframe环境中，无法直接访问宿主页面的DOM、Cookie、本地存储等敏感资源。
消息审计 确保所有的通信都是可追踪的。UI发起的每一个工具调用都会被记录，管理员可以随时查看哪些操作被执行了。
宿主授权 要求UI发起的工具调用必须经过宿主的批准。这意味着即使恶意代码试图调用敏感工具，宿主也可以拦截并拒绝。
莫潇羽认为，这套安全机制的设计思路与现代浏览器的安全模型非常相似。浏览器允许网页运行JavaScript代码，但通过同源策略、CSP（内容安全策略）、沙箱等机制将风险控制在可接受的范围内。MCP Apps采用了类似的策略，在开放性和安全性之间取得了平衡。
实战：Claude中的MCP Apps能做什么
首批支持的十大办公工具
Anthropic在此次更新中宣布了首批支持MCP Apps交互的工具，涵盖了企业办公的多个核心场景：
Amplitude 是一款产品分析工具，现在你可以在Claude中直接生成交互式分析图表。你可以在图表上进行缩放、筛选时间范围、切换不同的数据维度，而不需要打开Amplitude的网站。这对于需要频繁查看数据的产品经理和运营人员来说是巨大的效率提升。
Asana 是项目管理领域的明星产品。集成MCP Apps后，你可以在Claude中直接创建项目、添加任务、设置截止日期、分配责任人。更酷的是，你可以在对话中看到交互式的项目时间线，拖拽调整任务的时间安排。
Box 是企业文件存储服务。通过MCP Apps，你可以在Claude中搜索Box里的文件，预览文档内容，甚至对文件提问（比如「这份合同的付款条款是什么？」）。
Canva 把设计能力带进了AI对话。你可以告诉Claude你想做一个什么主题的演示文稿，它会在Canva中生成初稿，然后你可以在Claude界面里实时调整设计风格、颜色方案、字体选择。
Clay 是一款商业智能工具，特别擅长公司研究和联系人查找。你可以让Claude帮你调研一家公司的背景、规模、融资历史，甚至直接在对话中起草个性化的商务邮件。
Figma 是设计师的必备工具。现在你只需要一句话描述需求，Claude就能在FigJam中生成流程图、思维导图、甘特图等可视化图表。莫潇羽试用后发现，这对于快速整理思路、记录会议纪要特别有帮助。
Hex 是一款数据分析平台。你可以用自然语言向它提问，它会返回带有交互式图表、数据表格和引用来源的专业解答。
monday.com 是另一款流行的项目管理工具。与Asana类似，你可以在Claude中直接管理项目看板、更新任务状态、分配工作。
Slack 可能是大家最熟悉的一个了。现在你可以让Claude帮你搜索Slack对话记录获取上下文、起草并格式化消息、在发送前进行预览和编辑。莫潇羽特别喜欢的一点是，你可以直接在Claude界面里给消息添加表情符号。
Salesforce 的集成即将上线，届时企业用户可以通过Agentforce 360将企业级上下文接入Claude，让团队在统一的界面中进行推理、协作和决策。
典型使用场景演示
莫潇羽模拟了几个真实的工作场景，带大家体验MCP Apps的实际效果。
场景一：会议准备
假设下午有一个关于产品改版的评审会，你需要提前准备一些材料。你可以这样对Claude说：「帮我梳理一下新版本仪表盘的上线推广计划」。
Claude会主动调用Figma，在FigJam中生成一份清晰的流程思维导图，列出从内测到全量发布的各个阶段及其关键任务。你可以在Claude界面里直接编辑这张图，添加遗漏的节点或调整顺序。
接着你说：「把上个月的用户参与度数据调出来」。Claude调用Amplitude，生成一张折线图展示DAU、MAU、留存率等核心指标的变化趋势。你可以在图表上点击选择不同的时间范围，或者切换到按用户分群查看。
最后你说：「在Asana里创建一个项目跟踪这次改版的进度」。Claude会在Asana中新建项目，按照刚才讨论的推广计划自动创建各个阶段的任务，并设置好里程碑日期。
整个过程不需要打开任何其他应用，所有操作都在一个对话窗口里完成。
场景二：客户研究
你是一名销售，需要在拜访客户之前快速了解对方公司的情况。你对Claude说：「帮我调研一下Conclusive AI这家公司」。
Claude连接Clay，几秒钟后返回一个交互式的信息卡片，包含公司简介、创始团队、融资历史、产品线、主要客户等信息。你可以点击展开任何一个板块查看详情。
然后你说：「根据这些信息，帮我写一封冷启动邮件」。Claude会基于刚才获取的公司背景，生成一封个性化的商务邮件，突出你们产品与该公司需求的契合点。你可以在Claude界面里直接编辑邮件内容。
场景三：事故响应
这个场景对技术团队特别有价值。当线上系统出现故障时，你需要迅速通知相关人员并协调排查。
你对Claude说：「帮我在Slack的运维频道发一条公告，说明数据库服务目前正在恢复中，预计15分钟后恢复正常」。
Claude调用Slack的MCP服务器，在对话窗口中展示一个消息编辑器。你可以看到消息会如何渲染的预览效果，调整格式、添加emoji、@提及相关的同事，确认无误后点击发送。
与此同时，你可以让Claude在Asana或monday.com中创建一个事故跟踪任务，记录故障的时间线、影响范围和后续改进措施。
开发者指南：如何构建自己的MCP服务器
作为无忆研习社的读者，相信很多人对技术实现细节感兴趣。这一部分莫潇羽将介绍如何从零开始构建一个MCP服务器，并为其添加交互式UI能力。
准备开发环境
MCP官方提供了多种语言的SDK，包括Python、TypeScript、Go、Java、Kotlin和C#。其中Python和TypeScript的SDK最为成熟，社区资源也最丰富。
如果你选择TypeScript（适合前端开发者或全栈开发者），需要先安装Node.js环境。然后执行以下命令创建项目：
mkdir my-mcp-server
cd my-mcp-server
npm init -y
npm install @modelcontextprotocol/sdk zod
npm install -D typescript如果你选择Python（适合数据科学家或后端开发者），推荐使用uv工具管理虚拟环境：
uv init mcp-server
cd mcp-server
uv venv
source .venv/bin/activate
uv add mcp编写一个简单的MCP服务器
莫潇羽以TypeScript为例，展示一个最小化的MCP服务器实现。这个服务器提供一个简单的计算器工具。
首先创建项目配置文件tsconfig.json：
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*"]
}然后在src/index.ts中编写服务器代码：
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
// 创建服务器实例
const server = new McpServer({
name: "calculator-server",
version: "1.0.0"
});
// 注册一个计算工具
server.tool(
"calculate",
{
operation: z.enum(["add", "subtract", "multiply", "divide"]),
a: z.number(),
b: z.number()
},
async ({ operation, a, b }) => {
let result: number;
switch (operation) {
case "add": result = a + b; break;
case "subtract": result = a - b; break;
case "multiply": result = a * b; break;
case "divide": result = a / b; break;
}
return {
content: [{ type: "text", text: `计算结果: ${result}` }]
};
}
);
// 启动服务器，使用标准输入输出作为传输层
async function main() {
const transport = new StdioServerTransport();
await server.connect(transport);
}
main().catch(console.error);编译并运行：
npx tsc
node dist/index.js添加MCP Apps支持
要让服务器支持交互式UI，需要使用@modelcontextprotocol/ext-apps扩展包。以下是一个带有交互式计数器UI的服务器示例。
安装依赖：
npm install @modelcontextprotocol/ext-apps
npm install -D vite vite-plugin-singlefile创建UI资源文件（这是一个会被打包成单文件的HTML/JS代码）：
// src/counter-ui.ts
import { App } from "@modelcontextprotocol/ext-apps";
const app = new App();
// 初始化状态
let count = 0;
// 渲染UI
function render() {
document.body.innerHTML = `
<div style="padding: 20px; font-family: sans-serif;">
<h2>交互式计数器</h2>
<p>当前值: <strong id="count">${count}</strong></p>
<button id="increment">+1</button>
<button id="decrement">-1</button>
<button id="reset">重置</button>
</div>
`;
// 绑定事件
document.getElementById("increment")?.addEventListener("click", async () => {
const result = await app.callTool("update_counter", { action: "increment" });
count = result.value;
render();
});
document.getElementById("decrement")?.addEventListener("click", async () => {
const result = await app.callTool("update_counter", { action: "decrement" });
count = result
