赋予智能体可视化表达能力：VS Code 全面支持 MCP Apps
2026年1月26日 由 Harald Kirschner 和 Connor Peet 发布
AI 编码智能体已经变得非常强大。开箱即用，它们就能搜索代码库、编辑文件、运行终端命令并响应编译错误。通过添加 MCP 服务器，它们还可以查询数据库、使用 Playwright 浏览网页、总结 GitHub 问题并连接到你的云平台。模型甚至可以处理图像——你可以粘贴截图来调试布局问题，或者让 Playwright 捕获浏览器状态以进行验证。
智能体可以格式化表格、结构化数据并渲染 ASCII 图表。但这些都不是交互式的。当你需要重新排序列表、确认具体的操作，或者探索某种可视化效果时，你只能回到用语言描述这些需求的原始方式。
今天，MCP 社区正式发布了 MCP Apps，这是首个官方 MCP 扩展。工具调用现在可以直接返回交互式 UI 组件，并直接在对话中渲染：包括仪表板、表单、可视化图表和多步骤工作流。这为实现更丰富、更高效的人机协作创造了契机。
VS Code 是首个全面支持 MCP Apps 的主流 AI 代码编辑器。 该功能现已在 VS Code Insiders 中提供——这是我们优先推送新功能的每日构建版本。安装 Insiders 即可立即体验 MCP Apps，预计该功能将于下周发布的 VS Code 正式版中推出。
演示：交互胜于雄辩
我们构建了一些 演示案例，旨在展示智能体如何通过更丰富的协作方式造福开发者。由于 MCP Apps 是新功能，我们期待看到整个生态系统中有更多的采用。
交互式列表重排
现状： 智能体根据分析提出一个排序建议。你阅读文本输出，提出调整要求，反复沟通直到顺序符合你的偏好。
使用 MCP Apps： 智能体会在建议的顺序旁显示一个拖拽式界面。你可以可视化地重排项目，或选择“请求 AI 排序”让智能体应用其逻辑。
性能分析可视化
现状： 智能体分析 CPU 性能数据并以文本形式总结瓶颈。你看到了总结，却无法验证其假设，也无法探索智能体可能遗漏的区域。
使用 MCP Apps： 智能体渲染一个交互式火焰图。你可以深入查看调用栈，悬停查看计时详情，并利用你的领域知识确认或反驳智能体的分析。
功能标志 (Feature Flag) 选择器
现状： 智能体获取标志配置并列出现有项。你需要在脑海中将其与部署上下文进行交叉比对，然后分步骤要求智能体生成集成代码。
使用 MCP Apps： 智能体显示一个可搜索的标志选择器，并实时显示环境状态。你可以选择标志、在生产/预发布/开发环境视图间切换，并生成 SDK 代码——这一切都在一次交互中完成。
合作伙伴聚焦：Storybook
Storybook 已在其开源 MCP 服务器中 添加了对 MCP Apps 的支持。只需告诉智能体“使用我们的设计系统构建一个登录表单”，而无需详细描述结果，智能体就会直接在 VS Code 中渲染出一个交互式的组件预览。
“我们一直与 VS Code 团队在 MCP Apps 上紧密合作，对结果感到非常振奋。用户现在可以直接在智能体对话中预览 Storybook 故事，无需在聊天窗口和 Storybook 之间来回切换以检查变更。” —— Jeppe Reinhold（Storybook 核心贡献者，Chromatic）
VS Code 的天然契合点
VS Code 从来不仅仅是一个文本编辑器。扩展程序通过 Webview 面板、自定义编辑器和侧边栏视图将 UI 和交互带入了编辑器。Jupyter Notebook 表明，将代码与丰富的输出结合可以变革工作流。GitHub Copilot 智能体 则赋予了 AI 在工作空间中自主工作的能力。
MCP Apps 是下一层级：赋予智能体一种可视化语言来进行反馈。你可以看到正在发生的事情，自信地做出选择，并始终保持掌控力。
开始使用
如果你正在构建 MCP 服务器，请添加 MCP Apps 以增加其交互性。VS Code 是你开发和调试这些服务器的首选环境，并提供完整的 MCP 支持。欢迎参加今天由 MCP 核心维护者 Den Delimarsky 主讲的 VS Code 直播，观看实时演示及问答。
尝试构建你的第一个 MCP App，并与社区分享你的作品。有时候，展示胜于言说——现在你的智能体可以两者兼顾。
Happy Coding! 💙