MCP Apps:重构 Web 应用,开启 AI 助手的“小程序”时代

MCP Apps:重构 Web 应用,开启 AI 助手的“小程序”时代

前段时间引起“SaaS末日”惊呼的 Claude Cowork 专家插件(Plugins)系统吗?其背后的逻辑是 — 当 AI 助手可以通过插件接入各类企业应用,自动执行复杂任务,并在聊天框中生成交互式界面时,传统 SaaS 厚重的界面形态便显得可有可无。

而其中支撑“在对话框中运行交互式 UI 应用”的关键技术,已于上个月正式纳入 MCP 扩展规范,即 MCP Apps。这一由 OpenAI 与 Anthropic 等推动的开放标准,让传统对话式 AI 助手从“命令行”迈向“图形界面”时代。

本文将带您一起来全面认识 MCP Apps:

  • 认识 MCP Apps:价值、概念、场景、与 Web Apps 的区别
  • 深入 MCP Apps:Server + Host + View 的协同运作机制
  • 体验 MCP Apps:从零构建你的第一个 MCP App
  • MCP Apps 与 A2UI:设计思路、能力边界与适用选择

01 认识 MCP Apps:价值、概念、场景、与Web Apps的区别

MCP 是为 LLM 对接外部数据和工具而设计的开放协议。MCP 扩展(Extensions)是在核心协议基础上增加的扩展功能规范,MCP Apps 就是 MCP 的官方扩展标准之一。

为什么需要 MCP Apps

如果用一句话总结,那就是:

尽管基础的 MCP 协议打通了外部的“数据管道”,但在很多场景下,它还需要更友好、灵活的呈现与交互方式。

看一个具体的例子:

假设在你的 AI 助手客户端中新增一个功能:能够连接企业的 CRM 系统,统计上个季度的销售与订单数据。

以前的方式是:

开发一些 MCP Tool,调用 CRM API 查询数据,并将工具注册给 AI 助手。于是,LLM 可以借助这些工具获得数据,并按要求以合适的方式展示结果;用户通过反复的多轮对话来获得信息。

图片

但这里可能存在的问题是:

  • 单纯的 Markdown 表格或冗长文本,表现力十分有限
  • 展示实时变化的“监控面板”或非文本媒体数据较为麻烦
  • 探索性交互(如排序、点击查看详情)需要来回反复对话
  • 多轮对话会造成上下文膨胀、污染与 token 消耗

这个问题就像:我们给电脑插上了连接外部资源的”管道“(通过 MCP 这个 USB口),但却缺乏一个”可互动的高清显示器“来展示数据。

什么是 MCP Apps

MCP Apps 正是用 UI 交互来弥合这道鸿沟:

MCP Apps 允许 MCP Server 不再仅仅返回文本、代码或结构化数据,而是直接返回交互式的 HTML 前端界面。

图片

比如:当用户要求“分析本季度销售数据”时,AI 不再回复一堆数字,而是在对话框中直接渲染出一个带有筛选器、折线图和钻取功能的交互式仪表盘(嵌入在iframe 中)。用户可以直接浏览、操作、点击;数据也可以根据需要动态更新;甚至可以直接查看PDF等非文本内容。

这种自然顺畅的体验,使 AI 真正具备了替代传统 UI 软件的潜力。

具体而言,MCP Apps 定义了一套标准:

  • MCP Server 中的工具可以声明关联的交互式 UI 资源
  • 返回的交互式 UI 可内嵌渲染在客户端应用(如AI 对话)中
  • 支持嵌入 UI 与客户端应用之间的双向通信

或者说,用户仿佛在聊天里直接收到了一个可以操作的“小程序”。

MCP Apps 的核心应用场景

哪些场景适合用 MCP Apps 来增强 AI 助手的体验呢?

  • 数据探索与可视化:如上文所述 — 销售分析工具返回一个交互式大屏。用户可以直接在 AI 生成的界面中按地区过滤、向下钻取客户详情,并导出报告,全程无需离开对话窗口。
  • 配置向导与多步表单:很多业务场景需要分步骤填写信息,比如创建项目、发起审批等。在纯文本对话中,用户往往需要反复交互;而 MCP Apps 可以呈现具备交互逻辑的表单,简化流程。
  • 富文本/文档的审查:例如 AI 合同分析工具可以在聊天框内直接展示高亮争议条款的 PDF 原文件。你可以点击界面上的“批准”或“标记”按钮,AI 模型会实时感知这些操作。
  • 实时状态监控:在需要持续关注变化的场景中(如任务进度、数据变化、流程状态等),MCP Apps 可以让界面在后台持续更新数据,实时刷新,而无需用户频繁对话刷新。

可以预见,未来会有越来越多的新型“MCP 应用”出现,让 AI 对话框逐渐演变为承载各种功能的小型操作系统。

MCP Apps 与 普通 Web 应用 的本质区别

既然都是基于 HTML / JS / CSS 的 UI 应用,那么 MCP Apps 与传统 Web 应用到底有什么不同?是什么逻辑让传统 SaaS 界面显得“不再重要”?

区别不在于实现技术,而是从“应用优先“到”任务优先“的模式变革。

图片

传统企业信息系统(CRM / MES / WMS / SRM 等)遵循典型的 “应用优先” 模式。业务人员可能需要在多个系统来回切换以完成一件事:

  • 在 ERP 里查订单和客户信息
  • 切到 MES 看生产进度和排产情况
  • 再打开 WMS 确认库存与出库状态
  • 回到 OA 发起审批或催办流程

系统割裂了流程,上下文也被拆散在各个界面里。即使在这些传统应用中引入 AI,AI 也只是被调用者,不掌握完整的任务上下文。

而 AI + MCP Apps 则更接近一种 “任

Read more

Retrieval-based-Voice-Conversion-WebUI:低资源语音克隆技术的突破性实践

Retrieval-based-Voice-Conversion-WebUI:低资源语音克隆技术的突破性实践 【免费下载链接】Retrieval-based-Voice-Conversion-WebUI语音数据小于等于10分钟也可以用来训练一个优秀的变声模型! 项目地址: https://gitcode.com/GitHub_Trending/re/Retrieval-based-Voice-Conversion-WebUI 在语音技术领域,Retrieval-based-Voice-Conversion-WebUI正以其独特的技术路径重新定义语音克隆的可能性。这款基于VITS架构的开源框架打破了传统语音转换对大量训练数据的依赖,仅需10分钟语音即可构建高质量的声音模型,为开发者和语音爱好者提供了前所未有的技术体验。 技术原理:重新定义语音转换的底层逻辑 核心架构解析 Retrieval-based-Voice-Conversion-WebUI的技术突破源于其创新的检索机制与生成模型的深度融合。系统采用模块化设计,主要由四大核心组件构成: * 特征提取模块:通过预训练的

web网络安全-每日一练-Training-WWW-Robots

web网络安全-每日一练-Training-WWW-Robots

练习题目:Training-WWW-Robots 练习网站(攻防世界):https://adworld.xctf.org.cn/ 解题步骤 1、打开题目场景 在这个小小的训练挑战中,你将了解Repbots_exclusion_standard。 robots.txt文件被网络爬虫用于检查它们是否被允许爬取和索引你的网站,或者只是网站的部分内容。 有时这些文件会暴露目录结构,而不是保护内容不被爬取。 祝你玩得开心! 2、利用Robots协议 发现根目录下有一个 f10g.php 的文件,访问这个文件内容 3、访问网站根目录的 f10g.php 文件 得到正确答案 知识点讲解:Web 安全信息收集:robots.txt 的原理、利用与防御实战 ⚠️ 警告: 本文仅用于授权测试和安全学习,未经授权扫描目标属于违法行为。 一、写在前面:关于「Repbots」的纠正

爬虫前端调试常见反调试问题及解决方案(超详细实操版)

爬虫前端调试常见反调试问题及解决方案(超详细实操版)

爬虫前端调试常见反调试问题及解决方案(网页实操版) 在爬虫开发过程中,前端调试是获取接口、分析渲染逻辑的关键步骤,但很多网站会设置反调试机制,阻碍我们正常调试。本文整理了7个爬虫前端调试中最常遇到的反调试问题,每个问题都详细说明现象、原因,并给出一步一步的实操解决方案,同时预留截图位置,方便大家插入操作截图,快速上手解决问题。 适用场景:爬虫开发、前端调试、反调试绕过,适合新手入门,也可作为老开发者的调试手册。 问题1:打断点时出现webpack://…相关报错 一、问题现象 在浏览器开发者工具(F12)的Sources面板打断点后,控制台频繁弹出报错,报错信息中包含“webpack://”开头的路径,且断点无法正常触发,调试流程被中断,无法查看代码执行逻辑和参数传递过程。 二、问题原因 这是因为目标网站使用了Webpack打包工具,Webpack在打包时会保留源码的溯源信息,而浏览器开发者工具默认开启了JavaScript溯源功能,会尝试解析Webpack打包后的源码路径,当路径无法匹配或被网站反调试拦截时,就会抛出此类报错,同时干扰断点的正常执行。 三、解决方案(

网页抓取(Web Scraping)完整技术指南:从原理到实战

在数据驱动的时代,结构化信息已成为企业决策、AI 训练与市场分析的核心资源。网页抓取(Web Scraping) 作为从非结构化网页中提取结构化数据的关键技术,广泛应用于电商、金融、舆情监测、学术研究等领域。 本文将系统解析网页抓取的工作原理、工具链、反爬对抗策略与法律边界,并提供可落地的工程建议。 一、什么是网页抓取? 网页抓取是指通过程序自动访问网页,解析 HTML/JSON 内容,并将目标数据提取、转换为结构化格式(如 CSV、数据库记录)的过程。 与网络爬虫(Crawler)的区别:爬虫:广度优先遍历全站链接(如搜索引擎);抓取:深度聚焦特定页面的数据字段(如商品价格、评论)。 典型应用场景包括: * 电商比价(Amazon、Shopee 商品监控) * 招聘数据聚合(职位趋势分析) * 社交媒体舆情监测(公开评论情感分析) * 学术数据采集(论文元数据批量下载)