Anthropic MCP Apps: Interactive UIs Inside Claude
Anthropic launches MCP Apps rendering charts, forms, and dashboards inside Claude. Integration guide for Amplitude, Asana, Figma, Slack, and more.
Launch Integrations
UI Rendering
Security Model
MCP Extension
Key Takeaways
On January 26, 2026, Anthropic launched MCP Apps—the first official extension to the Model Context Protocol. The update enables third-party applications to render interactive user interfaces directly inside Claude's chat window, turning the AI assistant into a workspace hub where users can build analytics charts, manage project timelines, draft Slack messages, and edit design files without switching between applications.
Nine launch partners—Amplitude, Asana, Box, Canva, Clay, Figma, Hex, monday.com, and Slack—shipped on day one, with Salesforce confirmed as coming soon. For enterprise teams already invested in AI-assisted workflows, MCP Apps represents a shift from text-only AI interactions to full-featured, interactive application embedding. This guide covers the technical architecture, each launch integration's capabilities, the security model, and practical strategies for adoption.
What Are MCP Apps?
The Model Context Protocol, introduced by Anthropic in late 2024, established a standard way for AI assistants to connect with external tools and data sources. In its original form, MCP tools return structured data that the AI model interprets and presents as text. MCP Apps extends this by adding a UI rendering layer—tools can now declare associated user interfaces that the host application (in this case, Claude) renders inline as interactive components.
The practical difference is significant. Instead of Claude describing a chart in text, the Amplitude integration renders an actual interactive chart that users can hover over, adjust parameters on, and explore visually. Instead of Claude summarizing a Slack thread, the Slack integration displays a formatted message composer where users can review, edit, and send directly. The interaction model shifts from "Claude tells you about your data" to "Claude gives you your data to work with."
- •Claude calls a tool and receives JSON data
- •Model interprets the data and writes a text summary
- •User reads the summary and switches to the app to act
- •Context is lost on every application switch
- Claude calls a tool and renders its interactive UI
- User interacts with live charts, forms, and dashboards
- Actions happen inside Claude without leaving the chat
- Conversation context is preserved throughout the workflow
MCP Apps launched as the first official MCP extension, and the specification was developed with contributions from both Anthropic and OpenAI engineers. Support is already expanding beyond Claude to VS Code Insiders, Goose, and ChatGPT (rolling out), which positions MCP Apps as a cross-platform standard rather than a vendor-locked feature.
Technical Architecture
MCP Apps introduces two key primitives to the existing MCP protocol: UI-annotated tools and UI resources served via a dedicated URI scheme. Understanding this architecture is important for teams evaluating whether to build custom integrations or adopt the launch partners' offerings.
How Rendering Works
When an MCP server supports apps, its tools include a metadata field (_meta.ui.resourceUri) pointing to a UI resource. These resources use the ui:// URI scheme and contain bundled HTML and JavaScript. When Claude calls such a tool, the host fetches the associated UI resource, renders it inside a sandboxed iframe, and establishes bidirectional communication through JSON-RPC messages sent over the postMessage API.
MCP servers declare UI resources using the ui:// URI scheme. Each resource is a self-contained HTML/JavaScript bundle that the host fetches and renders. The server controls what the UI looks like and how it behaves, while the host controls where and how it is displayed.
Tools declare their UI association through the _meta.ui.resourceUri field. When the tool executes, the host checks for this field and renders the linked resource if present. A single server can provide multiple tools, each linked to different UI resources for different interaction patterns.
The embedded UI and the host communicate through JSON-RPC messages over postMessage. This enables the UI to receive tool results, call back into the server for additional data, and update the model's conversation context. All messages are structured, typed, and auditable.
The specification uses a double iframe architecture for security. The host initializes a first sandboxed iframe, which in turn launches a second iframe containing the MCP server's UI resources. This layered approach prevents apps from accessing the parent window's context.
The App Communication Lifecycle
The @modelcontextprotocol/ext-apps npm package provides an App class that handles the communication lifecycle. Developers instantiate the class, connect to the host, listen for tool results, and can call back into the server or update the conversation context. The key operations include receiving tool execution results, calling additional server tools from the UI, and pushing context updates back to the model so Claude understands what the user did inside the embedded app.
github.com/modelcontextprotocol/ext-apps. The protocol uses a dialect of JSON-RPC where some requests share method names with core MCP (such as tools/call), while app-specific methods use a ui/ prefix.All 9 Launch Integrations
The nine launch partners span analytics, project management, design, file storage, data enrichment, business intelligence, and communication. Users activate integrations through claude.ai/directory and can use multiple apps within a single conversation. Each integration renders its own interactive UI directly in the chat window.
1. Amplitude
Renders analytics charts inside Claude that users can explore interactively. Adjust parameters, explore trends, and uncover patterns without leaving the conversation. Particularly useful for product and marketing teams running ad-hoc analyses during planning sessions.
2. Asana
Turns natural language conversations into actionable projects, tasks, and timelines that your team can see and execute in Asana. Claude translates discussion context into structured project plans, reducing the gap between planning conversations and task execution.
3. Box
Search for files across your Box account, preview documents inline within Claude, and extract insights by asking questions about document content. Brings cloud file management into the AI conversation flow without requiring manual file downloads or application switching.
4. Canva
Create presentation outlines inside Claude, then customize branding and design elements in real time to produce client-ready decks. The integration lets marketing and sales teams iterate on visual content during conversations, bridging the gap between ideation and design production.
5. Clay
Supports company research, contact discovery, and personalized outreach drafting using business data such as company size, funding stage, and industry signals. Sales and business development teams can enrich leads and draft outreach sequences directly within Claude conversations.
6. Figma
Convert text descriptions and images into flowcharts, Gantt charts, or other visual diagrams in FigJam. The integration targets the diagramming and collaborative whiteboarding use case rather than full design editing, making it practical for product and project teams building process visualizations.
7. Hex
Ask questions about your data and receive answers with interactive charts, tables, and citations. Hex's integration turns Claude into a natural language interface for business intelligence queries, allowing non-technical stakeholders to explore datasets through conversation.
8. monday.com
Manage workflows, coordinate projects, and track team workloads inside Claude. The integration provides interactive board views and task management capabilities that sync back to your monday.com workspace, keeping project status aligned across both platforms.
9. Slack
Search and retrieve Slack conversations for context, generate formatted message drafts, customize tone and structure, and review messages before sending. The Slack integration (built by Salesforce) provides a full message composition workflow inside Claude, reducing the back-and-forth between AI drafting and manual posting.
Integration Capabilities Compared
Understanding what each integration can and cannot do helps teams prioritize which apps to enable first. The following comparison groups integrations by primary function and outlines the interactive capabilities available inside Claude.
| Integration | Category | Interactive UI | Primary Use Case |
|---|---|---|---|
| Amplitude | Analytics | Charts, trend exploration | Product analytics during planning |
| Asana | Project Mgmt | Projects, tasks, timelines | Converting plans to trackable work |
| Box | File Storage | File search, inline preview | Document retrieval and Q&A |
| Canva | Design | Deck builder, branding tools | Presentation creation from prompts |
| Clay | Data Enrichment | Lead profiles, outreach drafts | Sales prospecting and research |
| Figma | Design | FigJam diagrams, flowcharts | Visual diagramming from text |
| Hex | Business Intelligence | Charts, tables, data citations | Natural language data exploration |
| monday.com | Project Mgmt | Board views, task management | Workflow coordination |
| Slack | Communication | Message composer, thread search | Contextual messaging workflows |
Workflow Combinations
The real power of MCP Apps emerges when combining multiple integrations in a single conversation. A product manager can pull Amplitude analytics, use those insights to plan features in Asana, and share the plan summary in Slack—all within one Claude thread. Each app hands context to the next, eliminating the manual copy-paste workflows that consume time across disconnected tools.
Pull engagement data from Amplitude, create campaign assets in Canva, share results in Slack.
Research prospects with Clay, review account docs in Box, plan follow-ups in Asana.
Query metrics in Hex, build diagrams in Figma, track tasks in monday.com.
Security and Sandboxing Model
Embedding third-party UI inside an AI assistant raises legitimate security questions. Anthropic addressed these through a layered security architecture that isolates MCP Apps from the host application and gives users explicit control over actions.
- Apps cannot access the parent window's DOM
- No access to host cookies or local storage
- Cannot navigate or modify the parent page
- Script execution restricted to sandbox context
- All messages use auditable JSON-RPC format
- UI-initiated tool calls require user approval
- Hosts review HTML templates before rendering
- Double iframe architecture adds isolation layer
The double iframe approach deserves particular attention. The host (Claude) initializes a first sandboxed iframe, and this iframe in turn launches a second iframe containing the actual MCP server UI resources. This double layer ensures that even if a malicious app attempts to break out of its sandbox, it encounters an additional isolation boundary before reaching the host application. All communication passes through structured JSON-RPC channels that can be logged and audited.
Enterprise Adoption Strategies
For organizations evaluating MCP Apps, the adoption path depends on existing tool infrastructure and team readiness. The integrations work best when aligned with workflows that currently involve frequent context switching between applications.
Phase 1: Identify High-Switch Workflows
Start by mapping workflows where team members regularly switch between Claude and other applications. Common examples include pulling analytics data to inform content decisions, creating project tasks based on discussion outcomes, and drafting communications that reference multiple data sources. These workflows benefit immediately from in-line app access.
- Marketing teams: Amplitude for analytics, Canva for asset creation, Slack for distribution. Reduces the loop between data analysis, creative production, and team communication.
- Product teams: Hex for data queries, Figma for diagramming, Asana or monday.com for task management. Keeps planning, visualization, and execution in a single flow.
- Sales teams: Clay for prospect research, Box for document retrieval, Slack for team coordination. Consolidates the research-to-outreach pipeline.
Phase 2: Enable and Evaluate
MCP Apps are activated through claude.ai/directory. Enterprise administrators can control which integrations are available. Start with two or three integrations that align with your highest-impact workflows, run a pilot with a small team for two to four weeks, and measure time savings and workflow completion rates against the baseline.
- Slack message drafting with context preservation
- Asana task creation from meeting notes
- Box document search during research conversations
- Multi-app conversation chains (analytics to tasks)
- Data-driven presentations (Hex to Canva)
- Prospect enrichment to personalized outreach (Clay to Slack)
Phase 3: Scale and Customize
Once pilot results validate the approach, expand to additional teams and integrations. Organizations with development resources can build custom MCP Apps that connect to internal tools not covered by the launch partners. The open specification means any application with a web-based UI can become an MCP App with moderate engineering effort.
Building Custom MCP Apps
The open MCP Apps specification enables developers to build custom integrations for any application with a web-based interface. For organizations with proprietary internal tools, custom dashboards, or niche SaaS products not covered by the launch partners, building a custom MCP App provides the same interactive UI experience inside Claude.
What You Need to Build
1. MCP Server with UI Resources
Your MCP server needs to declare tools with _meta.ui.resourceUri fields pointing to UI resources served via the ui:// scheme. Each resource is a self-contained HTML/JavaScript bundle that renders the interactive interface for that tool.
2. App Communication Layer
Use the @modelcontextprotocol/ext-apps package to handle bidirectional communication. The App class provides methods for receiving tool results, calling back into your server for additional data, and updating Claude's conversation context when users interact with your UI.
3. Sandbox-Compatible UI
Your UI must function within the sandbox restrictions—no access to parent window APIs, no cookie or storage access, and all external communication routed through the JSON-RPC channel. Design your interface to work within these constraints from the start.
Supported Interaction Patterns
The MCP Apps specification supports several categories of interactive UI that developers can implement. These go well beyond simple data display.
Dashboards, charts, graphs, and real-time monitoring displays. Users can explore data interactively—hover for details, adjust parameters, filter by dimensions.
Multi-step forms with dependent field logic, approval workflows, and configuration wizards. Useful for internal tools with structured data entry requirements.
PDF preview with inline highlighting, spreadsheet display, and rich text editors. Allows users to review and annotate content without downloading files.
Drag-and-drop interfaces, canvas editors, and timeline builders. These enable users to create or modify content through spatial interaction rather than text commands.
What Comes Next
MCP Apps launched with nine integrations, but the trajectory points toward a substantially larger ecosystem. The open specification and cross-platform support signal that Anthropic is building infrastructure, not just features. Several developments are worth tracking.
- Salesforce Agentforce 360: The confirmed upcoming integration will bring CRM data, customer interactions, and enterprise context into Claude conversations. For sales and customer success teams, this could consolidate the most common cross-application workflow into a single interface.
- Cross-platform expansion: With ChatGPT rolling out MCP Apps support and VS Code Insiders already compatible, the same MCP App server can potentially serve multiple AI platforms. Developers who build an MCP App for Claude get cross-platform reach without additional engineering.
- Developer ecosystem growth: The open specification and npm package lower the barrier for third-party developers. Expect a wave of MCP Apps from SaaS vendors seeking distribution through AI assistants, similar to how chatbot integrations drove the Slack app marketplace.
- Cowork integration: Anthropic's Cowork desktop agent already supports MCP-based plugins. As both systems mature, deeper integration between cloud-based MCP Apps and local-first Cowork plugins could create unified workflows that span web and desktop.
For enterprises, the strategic implication is clear: MCP Apps positions Claude as a workspace aggregation layer rather than a standalone chat tool. Organizations already investing in AI workflows should evaluate which of their current tool-switching bottlenecks MCP Apps can eliminate, and plan for custom integrations that connect internal systems to the expanding MCP ecosystem.
Conclusion
Anthropic's MCP Apps represents the most significant expansion of Claude's capabilities since the original Model Context Protocol launch. By enabling interactive UI rendering inside conversations, it transforms Claude from a text-based assistant into a workspace where users can operate their tools directly. The nine launch integrations cover analytics, project management, design, file storage, data enrichment, business intelligence, and communication—enough to demonstrate immediate value across most enterprise departments.
The technical foundation—sandboxed iframes, auditable JSON-RPC communication, and an open specification with cross-platform support—suggests that MCP Apps will evolve into a standard rather than remain a single-vendor feature. For organizations evaluating AI integration strategies, MCP Apps provides a practical, security-conscious approach to reducing context switching and consolidating workflows around AI-assisted decision making.
Ready to Integrate AI into Your Workflows?
Our team helps organizations evaluate MCP Apps, build custom integrations, and develop AI automation strategies that reduce tool switching and accelerate decision making.
Frequently Asked Questions
Related Articles
Continue reading