{{ p.category }}

{{ t }}

{{ p.title }}

{{ p.excerpt }}

U{{ author.name }} {{ p.readMins }} min read

{{ p.category }}

{{ p.title }}

{{ mo.sub }}

{{ m.tag }}

{{ m.t }}

{{ m.d }}

{{ m.left.t }}

✕{{ x.t }}

{{ m.right.t }}

✓{{ x.t }}

{{ m.big }}{{ m.label }}

{{ x.t }}

{{ m.label }}

✓{{ x.t }}

{{ x.t }}

{{ m.label }}
{{ x.t }}
{{ m.status }}

{{ m.label }}

{{ x.t }}{{ x.n }}

{{ x.t }}

{{ m.label }}{{ m.stepTxt }}

{{ x.t }}

{{ m.btn }}

{{ x.t }}

{{ m.q }}

{{ m.a }}

{{ x }}

{{ k.n }}

{{ k.v }}

{{ m.label }}

{{ m.status }}

{{ m.label }}

{{ st.n }}{{ st.t }}

{{ m.hub }}

{{ nd.t }}

AaAaAaAa

ButtonInput fieldTag

THE SHORT ANSWER

{{ p.answer }}

KEY TAKEAWAYS

✓{{ k }}

RELATED SERVICES

{{ b.t }}

{{ g.t }}{{ g.t }}

{{ g.t }}

{{ b.label }}:{{ b.t }}

{{ c.ini }}

{{ c.t }}

{{ c.d }}

{{ s.n }}

{{ s.t }}

{{ s.d }}

{{ h }}
{{ c.t }}

{{ b.alt }}

{{ g.alt }}

{{ b.title }}

{{ c.t }}

{{ c.s }}

{{ i }}

{{ c.t }}{{ c.s }}

{{ b.caption }}

{{ s.v }}

{{ s.l }}

{{ s.s }}

{{ b.caption }}

{{ b.title }}

{{ b.unit }}

{{ r.l }}{{ r.d }}

{{ b.caption }}

{{ b.title }}

A{{ b.a.t }}

{{ i }}

B{{ b.b.t }}

✓{{ i }}

{{ b.caption }}

{{ b.title }}

{{ t.d }}

{{ t.t }}

{{ b.caption }}

“

{{ b.t }}

{{ b.by }}

{{ b.title }}

{{ r.d }}

{{ r.l }}

{{ b.caption }}

{{ b.title }}

{{ m.n }}

{{ b.lo }}{{ b.hi }}

{{ m.n }}

{{ m.l }}

{{ m.d }}

{{ b.caption }}

{{ b.cs.client }} case study

Case study · {{ b.cs.client }} {{ b.cs.title }} {{ b.cs.text }}

{{ f.v }}{{ f.l }}

View case study →

SOURCES AND FURTHER READING

Frequently asked questions

{{ f.a }}

U

Written by {{ author.name }}

{{ author.role }}

Keep reading

More articles from across design, AI and marketing.

All articles

{{ r.category }} · {{ r.readMins }} min{{ r.title }}

Special Offer

25% Off Your Startup’s First Project

No Obligation
Quick Response
Exclusive for Startups

MCP Apps: interactive dashboards and forms inside AI chat

MCP Apps is the first official extension to the Model Context Protocol, launched on 26 January 2026. It lets an MCP tool return an interactive interface, such as a dashboard, form, chart, map or multi-step workflow, that renders directly inside an AI conversation. The interface runs in a sandboxed iframe and talks to the host through logged messages. Claude, ChatGPT, Goose and Visual Studio Code supported it at launch.

What are MCP Apps?

Until 2026, MCP tools returned text or structured data that the AI summarised. That works for answers but not for tasks where people want to explore, choose or adjust something, such as filtering a table, picking a time slot or reviewing a highlighted document. MCP Apps fixes that. A tool can declare a user interface resource, and the AI app renders it inside the conversation. The model stays in the loop and can see what the user does. The MCP maintainers’ announcement describes dashboards, forms, visualisations and multi-step workflows as typical uses.

Where do MCP Apps work?

At launch, MCP Apps were supported in Claude on web and desktop, Goose, Visual Studio Code and ChatGPT, according to The Decoder. Because it is an open standard, the same app can work across hosts without client-specific code.

What can you build?

Dashboards: Live metrics and charts from your systems.
Forms and wizards: Bookings, configuration and approvals.
Data tables: Filterable, sortable results the user can explore.
Document review: PDFs with highlighted sections and comments.
Maps: Locations, routes and service areas.
Approvals: Clear confirm or reject screens for agent actions.

How are MCP Apps kept safe?

Sandboxed iframes: UI runs with restricted permissions, isolated from the host page
Pre-declared templates: hosts can review the interface before rendering it
Auditable messages: communication with the host goes through loggable JSON-RPC
User consent: hosts can require approval before UI-initiated tool calls

These controls reduce, but do not remove, risk. The wider issues are covered in MCP security risks.

How do you design a good chat-embedded interface?

Do one job per component: a single form, table or chart
Keep it compact; it sits inside a narrow conversation column
Use clear labels and sensible defaults so people can act quickly
Show what will happen before any action, and confirm afterwards
Respect the host’s light and dark themes
Make it keyboard-accessible with good contrast and readable text

These principles extend our UX principles for AI design and the basics in accessibility in UI/UX design.

What does a good MCP App look like?

Imagine a support lead asking Claude, “which enterprise customers have open urgent tickets?”. Instead of a long paragraph, the helpdesk server returns a compact table with customer, ticket, age and owner, plus a filter for priority. The lead sorts by age, clicks a row to see the latest message and presses “assign to me”. The host asks for confirmation, the tool updates the ticket, and the conversation continues with Claude drafting a reply. The interface does what text is bad at, scanning and choosing, while the model handles the language.

When is an MCP App better than text?

How do you build one?

Start with an MCP server: Build or reuse a server with the tools involved.
Declare a UI resource: Serve HTML for the component and link it to a tool.
Handle messages: Let the component request tool calls through the host.
Test in several hosts: Check layout and behaviour in Claude, ChatGPT and VS Code.
Review security: Limit what the UI can request and log interactions.

Our guide to building an MCP server covers the server side in detail.

Why does this matter for product teams?

As more work happens inside AI assistants, products will increasingly be used through conversations rather than their own websites alone. MCP Apps give product teams a way to keep a recognisable, usable interface in that setting. Teams that design small, reliable components for their most common tasks will be easier to use from Claude or ChatGPT than competitors whose tools only return text.

Start with one high-value task, design it as a small component and test it with real users inside the assistant.

MCP Apps are one form of generative UI, where interfaces are assembled for each request.

How UIUX Studio helps

We design and build MCP Apps that work inside AI conversations, combining interface design with secure MCP engineering. Talk to our product design and product engineering teams.

Frequently asked questions

What are MCP Apps?

An official MCP extension that lets tools return interactive interfaces inside AI chats.

When did MCP Apps launch?

On 26 January 2026, as the first official MCP extension.

Which apps support them?

Claude, ChatGPT, Goose and Visual Studio Code supported them at launch.

Are MCP Apps secure?

They run in sandboxed iframes with logged messages and optional user consent.

Do I need a designer?

Good chat-embedded UI benefits from design: small, focused and accessible components.

Related articles