> 这是一篇迟到了大半年的分享。年初写到一半就扔进了抽屉，直到上个月 OpenAI 发布 Intelligent UI，才让我把它重新翻出来

![ff1f8d07c2dd27c0d17eb840d947bed1_e5d5a8c9-20aa-4ac4-a08b-334e3eacc426.jpg](https://developer.qcloudimg.com/http-save/yehe-6190096/4caa7df6f3fbbd72fb1d3e8f94b9a635.jpg)

## 先看一眼"未来"长什么样
10 月 7 日，OpenAI 给 ChatGPT 全量推送了 GPT-6，这次更新引入了一个叫 Intelligent UI 的能力，让 ChatGPT 能用完全交互式的用户界面来回答问题，而不只是纯文本。

![1b455f81b4bd3f5d36f0df976bf01067_a7797f09-89cd-4cf1-99c1-fc1b7424468a.jpg](https://developer.qcloudimg.com/http-save/yehe-6190096/5312fe70f0352ab9a5d23ae73517fefa.jpg)

看到这里你大概率会「哦」一声——这不就是"AI 画个图给我看"吗？但真正值得玩味的，是这件事背后那套更底层、更早就存在、而且是开放标准的技术路线。它早于 Intelligent UI 出现，却一直不温不火。今天我们就把它和"动态生成 UI"这个终极形态一起捋清楚。

Intelligent UI的闭源能力，拆解开来其实是两个相对独立的问题：
- **怎么让一个预先写好的 UI，出现在 Agent 的对话里，并且能跟 Agent 双向聊天？**
- **这个 UI 能不能不是"预先写好的"，而是模型现场生成的**

我们一步步拆。

## 🛑 痛点溯源：被“锁死”的表达欲，AI 成了“瞎子导航员”

在 MCP Apps 出现之前，所有的 AI 工具都有一个令人窒息的局限：缺乏标准化的视觉展现通道。

换句话说，你让 AI “帮我分析一下第一季度的销售数据”，它脑子里其实已经建好了一个完美的数据模型，但它能做的，就是把一堆数字用干巴巴的文字吐给你：

> “1月销售额 12,000 元，2月 9,800 元，3月 15,400 元……”

![171fff79d1094e6c6b514192950a0e8c_4ae090c3-b8fd-40a6-a5c4-8c9207b4ccbd_timestamp=1793838372&nonce=ae2c2fffc6246390e9f50c98ce30d0b0&sign=NNHjrZSSuW3_8nQh-6wFUjPNm7HzaA8FOG5qesAMnY0=.png](https://developer.qcloudimg.com/http-save/yehe-6190096/444048752f74bf01cd579001004994d1.png)

这就像什么？ 就像你打电话给一个朋友，让他帮你看地图导航，他明明对着一个高清的卫星地图，却只能在电话里跟你念：“前方直行500米，过三个红绿灯，看到沙县小吃左转……” 他没法直接把地图屏幕投射到你眼前。

AI 的能力是通天的，但它的表达方式被文本框死死锁住了。 MCP Apps 诞生的使命，就是砸碎这把锁。

##  🖼️ 破局直觉：在对话框里，硬生生砸出一扇窗

解法说出来其实特别朴素：在 AI 的回复里，直接嵌一个能跑真实网页的小窗口。

我最早的直觉是：iframe 内嵌一个网页不就完了？实际做下来才发现，这只解决了"用户能看"的问题，完全没解决"用户能做"的问题——用户在窗口里点一下按钮，这个动作要怎么传回 AI？所以这扇窗户，需要两把钥匙才能真正打开。

### 🔑 钥匙一：工具身上多了一个"门牌号"

普通的 MCP 工具，就是一个服务器端能执行的函数——查数据库、发邮件、搜索网页。

MCP Apps 的工具，和普通工具**几乎完全一样**，唯一的区别是：它在自我介绍的时候，多带了一行地址：

```json
{
  "name": "visualize_data",
  "description": "以交互式图表方式可视化数据",
  "_meta": {
    "ui": {
      "resourceUri": "ui://charts/interactive"
    }
  }
}
```

![3dfe3af78448b9a7711461382d873e42_cf709786-cd9a-407d-913b-e4591f55f0bb_timestamp=1793838285&nonce=13125ce67d877a4d27382da4d2656bc6&sign=mvRmgvk2LQnAhHLv3xaKFUNeb_i5bwjXp_8CFzDz1CA=.png](https://developer.qcloudimg.com/http-save/yehe-6190096/0007cbdcaaac5164b38708f7170a47c5.png)

这个地址指向MCP服务中一个打包好的UI资源，包括HTML网页和Javascript脚本等。当大模型调用这个工具时，客户端不仅执行了函数，还顺着这个地址把对应的 UI 界面给拉取了下来。比如在下一章我们准备介绍的PPTX-HTML编辑器的MCP中，它就是一个HTML编辑器。

有了这把钥匙，AI 调用 MCP 的整个流程就发生了质变，原本干瘪的文本瞬间拥有了血肉：

![34881ad32d7ebeaa4220d1bfd4112297_71b05f4a-da81-4848-bf02-0f9ff0b0c6fb_timestamp=1793838936&nonce=1ed790d6b3f65d8adfadddfa72daeffe&sign=88pDURcGDXAQUyjRFjPa0H3KaBttHRbFIEA7tOBoSvU=.png](https://developer.qcloudimg.com/http-save/yehe-6190096/21fd296fd7ad08ff544ab9cfdc6b5c3a.png)

### 🔑 钥匙二：如何让窗户里的网页"活"起来
“窗户”开好了，界面也有了。但真正的硬核问题来了：这个嵌进来的网页，怎么知道要显示什么数据？如果我在网页里点了一个“筛选”按钮，它怎么能让 AI 知道，并触发新的查询？

这就是 MCP Apps 最精妙的**双向通信机制**。

#### To UI：数据是怎么进去的

工具执行的结果，包含两部分数据

- **content**：给模型和用户读的文本摘要，当宿主不支持UI也能fallback到常规对话
- **structuredContent**：给 UI 渲染用的结构化 JSON 数据

**这一招“明修栈道，暗度陈仓”，让模型只看文字摘要保持专注，而图表吃到完整的 JSON 数据，两条路径互不干扰。**

#### From UI：用户在 UI 里动了一下，然后呢？

![8f292af3c5ca805ab0b475a101a716e9_b3f778e4-96a7-40dd-8215-63d23fbdf969_timestamp=1793838214&nonce=8a75f4e23bb80fa1d9e3a826b8462717&sign=HRH98YTpTjI3krfovpgf1anSpRhrzVPswcVgzaI-siU=.png](https://developer.qcloudimg.com/http-save/yehe-6190096/4401c6c55897dab352abd46a8c807541.png)

从 View 可以发起三种截然不同的动作：

1. 🚄 **`callServerTool`：绕过 LLM，直达服务器**
   * **原理**：比如用户在图表里点击了"按华东区筛选"，宿主会直接去 MCP 服务器重新查一次数据，把新数据渲染回来。
   * **妙处**：中间**完全不经过大模型**！没有幻觉，100% 准确，毫秒级响应。最适合对数据准确性和速度要求极高的 BI 数据分析场景。

2. 🎭 **`sendMessage`：代替用户，向 AI 喊话**
   * **原理**：你在一个复杂的筛选 UI 里勾选了 10 个条件，点击"开始分析"。UI 会把这 10 个条件组装成一条标准的用户消息（User Message），直接发给 Agent。
   * **妙处**：**大模型看到的，就是一条来自用户的文字指令。** 比如我做的PPTX编辑器，打开后用户可以框选ppt位置进行批注，点击发送就会直接向Agent发送一条包含位置和用户comment的消息让Agent定向优化对应位置。

3.  **`updateModelContext`：最隐秘的上下文注入**
   * **原理**：这是三条路里最精妙的。它会把 App 的当前状态悄悄“塞”进模型的上下文记忆里，**不会触发任何即时回复**。
   * **妙处**：想象一个大众点评的地图 UI，你用鼠标框选了“西直门”。然后你在对话框里随口问：“有什么好吃的？” AI 收到的其实是被 UI 重新组装过的话：`[系统备注：用户当前地图定位在西直门商圈] 有什么好吃的？` 体验极其丝滑自然！

## 🎨 “预制菜”迈向“现炒现卖”的实时 UI

看到这里，懂行的朋友会发现一个盲点：MCP App 解决的只是预设 UI 的双向交互问题。UI 本身还是程序员提前写好的“静态资产”。

**那如何利用大模型逆天的 Coding 能力，让它在聊天中“现场写一个 App”出来呢？** 

![5e773b38424775539a17692dcae57c95_284fe374-1165-4884-bca0-fd7bee37b601_timestamp=1793837844&nonce=72059af4e14c06a31ab43eb96086ca17&sign=4E6eUCNeTDi4m7aIwLqe6rlr675bgRC5aN95itLkJ4U=.png](https://developer.qcloudimg.com/http-save/yehe-6190096/b5236957896cb076a9eba09718574486.png)

这就不得不提 **lustereczko-mcp** 做出的一个精妙绝伦的**“黑客级”操作**：

它直接劫持了 MCP App 获取静态资源的流程！当宿主请求 `ui://` 资源时，它不返回提前写好的 HTML，而是返回一块**“空白画布”**。
紧接着，LLM 会调用一个名为 `display_ui_to_user` 的工具，把它刚刚现场手搓出来的 HTML/JS 代码作为参数传进去，**直接糊在这块空白画布上！**

对比 OpenAI 的 Intelligent UI（通常使用原生组件库 + 专用编译器来保证渲染流式体验和统一风格，类似谷歌年初的A2UI），`lustereczko-mcp` 的方案更加狂野和极客。考虑到当前AI写前端代码的能力，个人还是更看好这种方案，AI已经能飞了何必束手束脚。

当然自由生成就需要解决，比如生成HTML有问题如何排查，更复杂的数据如何交互等问题。例如可以为HTML配备测试环境和日志收集，或许还可以单独提供HTML测试修复的技能等等。

## 🔮 理想丰满，现实骨感？未来的风向标

其实年初我就想写这篇内容，但当时发现 MCP Apps 并没有像预期那样火爆，于是决定让子弹飞一会儿。直到最近我在做纯个人的开源项目 `pptx-skill` 时，正好需要用 MCP-App 作为 HTML 层编辑的协议，才重新审视了这套设计。

**为什么它之前没火？** 
仔细想想，由场景决定的。适合做成这种高度交互 App 形态的，要么是企业内部极其复杂的业务流，要么是重交互的 B2C 应用（电商、地图、外卖）。纯个人使用的场景相对较少，这和 SKILL 纯个人使用的轻量级定位截然不同。

**但现在，风向变了。**
随着 OpenAI 全面推出 Intelligent UI，这头行业大象正在强行重塑用户的习惯。对话框里全面接入各种模态的、可交互的、实时生成的 UI 展示，即将迎来一波彻底的爆发。

属于“图形化 AI 交互”的黄金时代，才刚刚开始。我们，拭目以待！

这是一篇迟到了大半年的分享。年初写到一半就扔进了抽屉，直到上个月 OpenAI 发布 Intelligent UI，才让我把它重新翻出来

解密Prompt系列73. 爆改对话框：揭秘 Intelligent UI 的动态界面魔法

当 AI 只会用文字念数据，就像朋友隔着电话给你念地图。本文从 OpenAI Intelligent UI 出发，拆解 MCP Apps 如何给聊天框“开窗”，实现界面展示与双向交互，并讲透 lustereczko-mcp 如何让 AI 现场手写 UI——带你看懂下一代人机交互的底层逻辑。

人工智能

OpenAI发布IntelligentUI后，MCPApps协议成关注焦点。本文解析如何通过UI资源嵌入、双向通信机制，实现AI对话中动态生成交互界面，对比闭源方案并探讨实时UI生成技术，展现图形化AI交互的黄金时代。

代码解释

数据分析

JavaScript

数据库

服务器

编译器

ChatGPT

Agent

A2UI

JSON

让每一个 Agent，都跑在云上

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

解密Prompt系列73. 爆改对话框：揭秘 Intelligent UI 的动态界面魔法-腾讯云开发者社区-腾讯云

解密Prompt系列73. 爆改对话框：揭秘 Intelligent UI 的动态界面魔法

解密Prompt系列73. 爆改对话框：揭秘 Intelligent UI 的动态界面魔法

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐