为代理赋予视觉表达：VS Code 中的 MCP 应用支持
2026 年 1 月 26 日，作者：Harald Kirschner 和 Connor Peet
AI 编码代理已经变得非常强大。开箱即用，它们可以搜索你的代码库、编辑文件、运行终端命令以及响应编译错误。添加 MCP 服务器，它们就可以查询数据库、使用 Playwright 浏览网页、总结 GitHub 问题以及连接到你的云平台。模型甚至可以处理图像——你可以粘贴截图来调试布局问题，或者让 Playwright 捕获浏览器状态进行验证。
代理可以格式化表格、构建数据并渲染 ASCII 图表。但所有这些都不是交互式的。当你需要重新排序列表、使用具体信息确认破坏性操作，或者探索可视化内容时，你又需要回到用句子来描述事物。
今天，MCP 社区宣布 MCP 应用，这是第一个官方 MCP 扩展。工具调用现在可以返回在对话中直接渲染的交互式 UI 组件：仪表板、表单、可视化内容、多步骤工作流程。这为更丰富、更有效的人机代理协作创造了机会。
VS Code 是首个全面支持 MCP 应用的主要 AI 代码编辑器。现已在 VS Code Insiders 中可用——我们的每日构建版本，新功能首先在此发布。立即安装 Insiders 试用 MCP 应用，预计本周发布的 VS Code 稳定版也将支持此功能。
演示：交互胜于文本
我们构建了一些 演示，以展示代理在与开发人员进行更丰富的协作时有哪些优势。由于 MCP 应用尚属新品，我们期待看到生态系统内更多采用。
交互式列表排序
今天：代理根据其分析提出排序顺序。你阅读文本输出，请求调整，并来回迭代直到顺序符合你的偏好。
使用 MCP 应用：代理显示一个拖放界面以及其建议的顺序。你可以通过视觉方式重新排序项目，或者选择“让 AI 排序”让代理应用其推理。
性能分析器可视化
今天：代理分析 CPU 性能数据并以文本形式总结瓶颈。你看到了摘要，但无法验证假设或探索代理可能忽略的区域。
使用 MCP 应用：代理渲染一个交互式火焰图。你可以深入调用堆栈，悬停以获取时间细节，并使用你自己的领域知识确认或拒绝代理的分析。
功能标志选择器
今天：代理获取标志配置并列出存在的标志。你需要将其与你的部署上下文进行交叉引用，并要求代理在单独的步骤中生成集成代码。
使用 MCP 应用：代理显示一个可搜索的标志选择器，并显示实时环境状态。你可以选择标志，在生产/预发布/开发视图之间切换，并生成 SDK 代码——所有在一个交互中完成。
合作伙伴聚焦：Storybook
Storybook 已向其开源 MCP 服务器 添加了 MCP 应用支持。只需要求代理使用我们的设计系统“构建一个登录表单”，而无需详细描述所需的结果，代理就会在 VS Code 中直接渲染一个交互式组件预览。
“我们一直在与 VS Code 团队合作开发 MCP 应用，并且对结果感到兴奋。用户现在可以直接在代理聊天中预览 Storybook 故事，无需在聊天和 Storybook 之间导航以查看更改。” – Jeppe Reinhold (Storybook 核心贡献者，Chromatic)
VS Code 的自然契合
VS Code 一直不仅仅是一个文本编辑器。扩展通过 webview 面板、自定义编辑器和侧边栏视图将 UI 和交互带入编辑器。Jupyter Notebooks 表明将代码与丰富输出混合可以改变工作流程。GitHub Copilot 代理赋予了 AI 在你的工作区中自主工作的能力。
MCP 应用是下一层：赋予代理视觉表达能力进行沟通。你可以看到正在发生的事情，自信地做出选择，并保持控制。
开始使用
如果你正在构建 MCP 服务器，请添加 MCP 应用以使其更具交互性。VS Code 是你可以使用全面 MCP 支持进行开发和调试的地方。加入今天的 VS Code 直播，与 MCP 核心维护者 Den Delimarsky 一起观看现场演示和问答环节。
尝试构建你的第一个 MCP 应用，并与社区分享你的创作。有时候，展示比讲述更好——现在你的代理可以两者兼顾。
编码愉快！💙