VS Code 支持 MCP Apps：AI Agent 拥有可视化交互界面

2026 年 1 月 26 日，Harald Kirschner、Connor Peet

AI 编程 Agent 的能力已经相当强大。即使不进行额外配置，它们也能搜索代码库、编辑文件、运行终端命令，并处理编译错误。接入 MCP server 后，它们还能查询数据库、使用 Playwright 浏览网页、总结 GitHub issue，以及连接云平台。模型甚至可以处理图像——你可以粘贴一张截图来调试布局问题，也可以让 Playwright 捕获浏览器状态以进行验证。

Agent 可以格式化表格、组织数据，并绘制 ASCII 图表。但这些内容都无法交互。当你需要重新排列列表、针对破坏性操作确认具体细节，或探索某个可视化结果时，最终还是只能用一句句话来描述自己的需求。

今天，MCP 社区正式发布 MCP Apps，这是 MCP 的第一个官方扩展。现在，工具调用可以返回直接呈现在对话中的交互式 UI 组件，包括仪表盘、表单、可视化图表和多步骤工作流。这为人类与 Agent 之间更丰富、更高效的协作创造了新的可能。

VS Code 是首个完整支持 MCP Apps 的主流 AI 代码编辑器。该功能现已登陆 VS Code Insiders——这是我们的每日构建版本，新功能会率先在这里上线。现在就可以安装 Insiders 体验 MCP Apps；该功能预计将在下周发布的版本中推送至 VS Code Stable。

演示：交互胜过文字的场景

我们制作了几个演示，用来展示在哪些场景中，更丰富的交互能够帮助 Agent 更好地与开发者协作。MCP Apps 才刚刚问世，我们期待看到它在整个生态系统中得到更广泛的采用。

交互式列表排序

现在：Agent 根据分析结果提出一个排序方案。你阅读文本输出、要求调整，然后与 Agent 来回沟通，直到顺序符合你的偏好。

使用 MCP Apps：Agent 在给出建议顺序的同时，还会显示一个支持拖放的界面。你可以直观地重新排列项目，也可以选择“Ask AI to Sort”，让 Agent 运用自己的推理能力完成排序。

性能分析器可视化

现在：Agent 分析 CPU profile 数据，并以文字总结性能瓶颈。你可以看到总结，却无法验证其中的假设，也无法探索 Agent 可能遗漏的区域。

使用 MCP Apps：Agent 会渲染一张交互式火焰图。你可以深入查看调用栈，悬停查看耗时详情，并结合自己的领域知识确认或否定 Agent 的分析。

Feature Flag 选择器

现在：Agent 获取 flag 配置并列出已有内容。你需要在脑中将这些信息与部署环境相互对照，然后再单独要求 Agent 生成集成代码。

使用 MCP Apps：Agent 会显示一个支持搜索的 flag 选择器，并实时展示环境状态。你可以选择 flag，在 prod、staging 和 dev 视图之间切换，还能生成 SDK 代码——所有操作都能在一次交互中完成。

合作伙伴聚焦：Storybook

Storybook 已经为其开源 MCP server 添加了 MCP Apps 支持。你不再需要费力描述想要的结果，只需告诉 Agent“使用我们的 design system 构建一个登录表单”，Agent 就会直接在 VS Code 中渲染可交互的组件预览。

“我们一直在与 VS Code 团队合作开发 MCP Apps，对最终成果感到非常兴奋。现在，用户可以直接在 Agent chat 中预览 Storybook stories，无须再在聊天窗口和 Storybook 之间来回切换以审查变更。”——Jeppe Reinhold（Storybook 核心贡献者，Chromatic）

与 VS Code 天然契合

VS Code 从来都不只是一款文本编辑器。扩展可以通过 webview 面板、自定义编辑器和侧边栏视图，将 UI 与交互能力带入编辑器。Jupyter notebook 已经证明，将代码与丰富的输出形式结合起来，可以彻底改变工作流。GitHub Copilot Agent 则赋予了 AI 在工作区中自主执行任务的能力。

MCP Apps 是下一层能力：它让 Agent 拥有一种可视化的表达方式，以便向你反馈信息。你可以看到正在发生什么，有把握地做出选择，并始终掌握控制权。

如果你正在构建 MCP server，可以加入 MCP Apps，让它们具备更强的交互能力。VS Code 为你提供了具备完整 MCP 支持的开发和调试环境。欢迎参加今天的 VS Code 直播，MCP 核心维护者 Den Delimarsky 将带来现场演示与问答。

MCP Apps 演示仓库

MCP Apps SDK 与示例

VS Code MCP 文档

MCP server 开发指南

MCP Apps 发布公告

试着构建你的第一个 MCP App，并与社区分享你的作品。有时，展示比描述更有效——现在，你的 Agent 两者都能做到。