Brilliant VS Code Becomes First AI Code Editor to Give MCP Agents a Visual Voice

Microsoft is turning AI coding agents into something you can actually click, drag, and explore inside VS Code, thanks to new MCP Apps support that gives agents a visual UI instead of just text.

MCP Apps: giving AI agents a visual voice

In a new VS Code blog post, Microsoft’s Harald Kirschner and Connor Peet introduce MCP Apps as the first official extension for the Model Context Protocol. Until now, AI agents in editors have been powerful but stuck in plain text; they can search your codebase, edit files, run tests, and even render tables or ASCII diagrams, but anything interactive still requires a back‑and‑forth in natural language.

MCP Apps changes that by letting tools return interactive UI components directly into the chat experience. Instead of only reading text responses, developers can now get dashboards, forms, visualizations, and multi‑step workflows rendered inline, creating a tighter loop between the agent’s reasoning and the developer’s decisions. VS Code is the first major AI code editor to ship full MCP Apps support. The feature is available today in VS Code Insiders, Microsoft’s daily build channel, and is expected to roll out to the Stable release as part of next week’s update.

From text‑only answers to interactive MCP Apps

The core idea behind MCP Apps is simple: when a tool call runs, it can now respond with a structured description of UI elements that the client renders as rich components instead of plain text. Those components can include things like sortable tables, charts, drag‑and‑drop lists, wizards, or custom controls tied to specific workflows.

This approach moves AI agents away from “verbose terminal output” and toward something closer to native editor UX. The Model Context Protocol team describes MCP Apps as a cross‑client standard: the same MCP App can render in multiple clients—including Claude, Goose, VS Code, and soon ChatGPT—without the server author having to write custom UI code for each environment.

For VS Code specifically, MCP Apps builds on top of existing MCP support in GitHub Copilot. MCP servers already let agents query external systems such as databases, Playwright browser sessions, GitHub issues, or cloud platforms; now those same servers can respond with interactive UIs when a workflow calls for more than just text.

Concrete demos: when interaction beats text

To show why this matters, the VS Code team has shipped a set of demos and an open MCP Apps playground on GitHub. They highlight three scenarios where interaction clearly improves on chat‑only agents.

1. Interactive list reordering 

   • Today: An agent suggests a sorted list and you iterate via text—“move this up”, “swap those two”, “put X at the top”—until the order matches what you want.

   • With MCP Apps: The agent produces a drag‑and‑drop list UI next to its proposed order. You can rearrange items visually or hit an “Ask AI to Sort” control that applies the agent’s reasoning again.

2. Performance profiler visualization

   • Today: An agent parses a CPU profile and responds with a summary of suspected bottlenecks in natural language. You have no way to validate call stacks or timings yourself without opening a separate tool.

   • With MCP Apps: The agent renders an interactive flame graph, letting you drill into call stacks, hover for detailed timings, and cross‑check the agent’s hypotheses against your own understanding of the system.

3. Feature flag selector

   • Today: The agent lists feature flags and you mentally map them to your environments, then ask for integration code in a separate step.

   • With MCP Apps: The agent shows a searchable flag picker with live environment status; you can flip between production, staging, and development views, select flags, and generate SDK integration code—all within one UI.

These are early examples, but they demonstrate the design goal: when a workflow requires selection, exploration, or confirmation, a structured UI beats a long text prompt exchange.

Storybook shows how MCP Apps fit real design systems

The announcement also highlights Storybook as an early MCP Apps partner, showing how design system workflows can benefit from this new layer. Storybook has added MCP Apps support to its open source MCP server, allowing agents in VS Code to render live previews of Storybook stories right inside the chat.

In practice, a developer can now ask an agent to “build a login form using our design system,” and instead of just returning code or a description, the agent can render an interactive component preview powered by the Storybook MCP server. That means you no longer have to switch between the agent chat and a separate Storybook UI to see or tweak the result.

Storybook core contributor Jeppe Reinhold, from Chromatic, notes that MCP Apps support eliminates this context‑switch: users can review and iterate on Storybook stories right in the agent chat, with the underlying design system staying in sync. It’s a good illustration of MCP Apps as a bridge between AI‑generated code and the real design and component libraries teams rely on.

Why MCP Apps are a natural fit for VS Code

VS Code has long blurred the line between “text editor” and “lightweight IDE,” with extensions adding panels, custom editors, notebooks, and sidebars. The team points to Jupyter notebooks as an early example of how mixing code with rich output fundamentally changes workflows, and GitHub Copilot agents as the step that gave AI more autonomy inside your workspace.

MCP Apps sit on top of that stack as the “visual voice” for agents. Instead of just reading what an AI is doing, you can see and manipulate its outputs—selecting options, adjusting parameters, or exploring visualizations—while staying anchored in the same VS Code window.

On the implementation side, this is backed by recent work in VS Code Insiders to support the MCP Apps “model context update” methods and the broader MCP developer experience. The January 2026 Insiders release notes explicitly call out MCP Apps improvements alongside other AI‑adjacent capabilities, signaling that MCP is now a first‑class part of the VS Code extension story.

How to get started with MCP Apps in VS Code

If you want to experiment with MCP Apps today, you need the latest VS Code Insiders build. Once installed, you can enable GitHub Copilot and connect to MCP servers that support Apps using the existing “Use MCP servers in VS Code” documentation.

Microsoft and the MCP core maintainers provide several resources for builders:

• MCP Apps demo repository – A playground of example apps showing list reordering, visualizations, and other interactive patterns.

• MCP Apps SDK and examples – The official ext‑apps SDK and sample implementations for building your own MCP Apps.

• VS Code MCP documentation – Guidance on configuring MCP servers with GitHub Copilot in VS Code, including transports, authentication, and server definition providers.

• MCP server development guide – A deeper dive into how to register MCP servers, expose tools, and work with resources from inside VS Code extensions.

• MCP Apps announcement post – The broader protocol‑level announcement that details cross‑client support in Claude, Goose, VS Code, and ChatGPT.

Earlier today, the VS Code team hosted a livestream with Den Delimarsky, MCP core maintainer, to walk through MCP Apps, show real demos, and answer questions from developers interested in building or adopting the new UI layer.

For extension authors and MCP server implementers, the message is clear: if your tools already expose useful data to agents, adding MCP Apps is the next step to make those interactions interactive and trustworthy. Sometimes telling a developer what’s happening is not enough—now your agents can show it, and let the user stay in control.

Recent Posts You Might Like

• Security Copilot Now Included in Microsoft 365 E5 as Copilot Business Brings Advanced AI to SMBs
• Maia 200: Microsoft’s Game-Changing New Inference Powerhouse That Could Redefine Azure AI Economics
• How to Access GPT‑5.2 in Microsoft 365 Copilot Chat (Boost Quick Response vs Smarter Think Deeper)
• The Windows 11 January Update Nightmare Continues: Boot Loops, UNMOUNTABLE_BOOT_VOLUME Error And Second Emergency Patch
• A Microsoft BitLocker Privacy Storm: How FBI Access to Encryption Keys Exposes a Major Windows Security Risk