MCP-Apps: Interaktive UIs für KI-Assistenten

Architektur

Das MCP implementiert die Client-Host-Server-Architektur, wobei jeder Host mehrere Clients laufen lassen kann. Es wird ein zustandsbehaftetes Sitzungsprotokoll implementiert, das sich auf den Austausch von Kontext und die Koordination von Sampling-Prozessen zwischen Clients und Servern konzentriert (Abbildung 1).

MCP-Host

Der Host fungiert als zentrale Umgebung und Koordinationsinstanz innerhalb der Architektur. Er erstellt und verwaltet (mehrere) Client-Instanzen, steuert deren Verbindungen und Lebenszyklus und setzt Sicherheitsrichtlinien und Zustimmungserfordernisse durch. Zudem übernimmt er Entscheidungen zur Benutzerautorisierung, koordiniert die Integration von KI- bzw. LLM-Komponenten einschließlich des Samplings und sorgt für die Zusammenführung und Verwaltung des Kontextes über mehrere Clients hinweg. Beispiele für MCP-Hosts sind Claude Desktop, Cursor und LibreChat.

MCP-Client

Ein Client wird vom Host erstellt und verwaltet eine isolierte Verbindung zu genau einem Server. Dabei baut er eine zustandsbehaftete Sitzung auf, übernimmt die Aushandlung des Protokolls sowie den Austausch der unterstützten Fähigkeiten und leitet Protokollnachrichten in beide Richtungen weiter. Während der MCP-Host die Anwendung ist, mit der der Nutzer interagiert, ist der MCP-Client eine Komponente auf Protokollebene.

MCP-Server

Server stellen spezialisierte Kontexte und Funktionen innerhalb der MCP-Architektur über standardisierte Protokoll-Schnittstellen bereit. Über MCP-Primitive machen sie Ressourcen, Tools und Prompts verfügbar und arbeiten dabei unabhängig m

it klar abgegrenzten Aufgabenbereichen. Beispiele für MCP-Server sind Notion, Filesystem und WhatsApp.

MCP-Apps

MCP-Apps wurde Ende Januar 2026 als eine offizielle MCP-Erweiterung veröffentlicht. MCP-Apps bietet erstmals die Möglichkeit, interaktive Komponenten in dem User Interface (UI) des MCP-Hosts zu nutzen. Der MCP-Host (z. B. Claude Desktop) rendert dazu ein isoliertes iframe innerhalb einer Sandbox (siehe Abbildung 2). Diese Sandbox verhindert, dass die App das Document Object Model (DOM) des übergeordneten Fensters erreichen kann, und bildet somit ein zentrales Sicherheitsfeature. Die nahtlose Integration in den Chat bietet unter anderem folgende Vorteile [1]:

• Kontextwissen innerhalb des Chats,
• bidirektionalen Datenaustausch zwischen App und MCP-Server,
• Integration mit bestehenden Fähigkeiten des MCP-Hosts sowie
• Sicherheitsgarantien durch das Sandbox-Design.

Funktionsweise von MCP-Apps

Die Möglichkeit von MCP, textuell mit Tools zu interagieren, wird dadurch erweitert, dass den Tools erlaubt wird, eine Referenz zu einer interaktiven UI bereitzustellen, welche direkt innerhalb des MCP-Hosts gerendert werden kann. Der Ablauf einer interaktiven Kommunikation innerhalb des MCP-Hosts lässt sich in vier Abschnitte einteilen: UI-Preloading, Ressourcenabruf, Sandbox-Rendering, bidirektionale Kommunikation [3].

UI-Preloading: Die Toolbeschreibung enthält eine „_meta.ui.resourceUri“, über die der Host die Benutzeroberfläche bereits laden kann, bevor das Tool aufgerufen wird. Dadurch können z. B. Tool-Eingaben direkt an die App gestreamt werden.

Ressourcenabruf: Der Host lädt die UI-Ressource vom Server. Meist handelt es sich um eine HTML-Seite inklusive JavaScript und CSS. Es können weitere externe Ressourcen geladen werden, sofern sie in _meta.ui.csp erlaubt sind.

Sandbox-Rendering: Die Oberfläche wird in einem „sandboxed iframe“ innerhalb der Konversation dargestellt. Dadurch ist der Zugriff auf die übergeordnete Seite eingeschränkt und die Sicherheit wird erhöht. Über _meta.ui können zusätzliche Berechtigungen (z. B. Kamera oder Mikrofon) angefragt werden.

Bidirektionale Kommunikation: App und Host kommunizieren über JSON-RPC, eine MCP-ähnliche Schnittstelle. Die App kann z. B. Tool-Aufrufe anstoßen, Nachrichten senden, den Modell-Kontext aktualisieren und Daten vom Host empfangen.

Abbildung 2 demonstriert einen beispielhaften Ablauf, wie eine interaktive Komponente genutzt werden kann und wie der Datenaustausch zwischen User, Agent, MCP-App-iframe und MCP-Server durchgeführt wird.

Nutzungsszenarien

Es gibt eine Reihe von Use Cases, die durch MCP-Apps optimiert werden können. Zu nennen wären hier beispielsweise das Arbeiten mit komplexen Daten und Konfigurationen, das Darstellen von Rich Media, Real-time-Monitoring und mehrstufige Workflows. Um die Anwendungsfälle greifbarer zu machen, möchte ich im Folgenden drei Integrationen vorstellen:

• System Monitor App
• Pro-Kern-CPU-Überwachung
• Speichernutzung
• Systeminformationen
• Automatisches Polling
• Theme-Unterstützung
• js App
• Interaktives 3D-Rendering im Chat
• Streaming Preview
• Built-in-Hilfestellung
• Dokumentations-Tool
• PDF App
• Unterstützt lokale PDFs und URLs von akademischen Quellen (aexiv, biorxiv, zenodo, etc.)
• Kontext-Update
• Chunk-basiertes Streamen von Daten

Bei den vorgestellten Anwendungen handelt es sich um offizielle Beispiele der Entwickler des Protokolls. Da die MCP-Apps-Erweiterung erst vor Kurzem erschienen ist, ist davon auszugehen, dass im Laufe der nächsten Monate spannende, interaktive Schnittstellen von verschiedenen Anbietern entwickelt werden.

Zusammenfassung und Ausblick

Wer in der Branche aktiv ist, für den ist das MCP vielleicht schon kalter Kaffee. MCP-Apps hingegen sind hochaktuell und erweitern den Gedanken der textbasierten Tool-Anbindung in Chatbots um interaktive UI-Elemente. Während bereits viele große Softwareanbieter MCP-Server bereitstellen, fehlt es aktuell noch an dazugehörigen MCP-Apps. Vor dem Hintergrund, dass die Erweiterung erst vor wenigen Wochen erschienen ist, ist davon auszugehen, dass die Umsetzung in den kommenden Wochen und Monaten Fahrt aufnimmt und viele spannende Anwendungen mit sich bringt. So könnte der Atlassian-MCP-Server z. B. dafür genutzt werden, um einen Jira-Vorgang anzulegen und ihn in einer interaktiven UI im Chat weiter zu bearbeiten (Priorität ändern, Sub-Task erstellen etc.). Die Erstellung von MCP-Apps ist dabei nicht nur den großen Softwareunternehmen gegönnt. Gute Dokumentation und die Bereitstellung von Grundgerüsten ermöglichen es auch Hobby-Entwicklern, eigene MCP-Apps zu bauen und in Chatbots zu integrieren.

Ich bin sehr gespannt, wie sich die Landschaft der MCP-Apps weiterentwickeln wird und welche Geschäftsmodelle sich daraus ergeben. Wer sich intensiver mit dem Thema beschäftigen möchte oder sogar darüber nachdenkt, eine eigene Integration umzusetzen, dem empfehle ich einen Blick auf die offizielle MCP-Homepage. Dort wird nicht nur das Protokoll ausführlich dokumentiert, sondern es finden sich auch gute Beispiele sowie hilfreiche Grundgerüste, die die Einstiegshürde in die Entwicklung eigener Integrationen sehr gering halten.

Literaturverzeichnis

[1] „modelcontextprotocol.io,“ [Online]. Available: https://modelcontextprotocol.io/docs/getting-started/intro. [Zugriff am 05 03 2026].
[2] GroundbreakingBed597, „reddit.com,“ [Online]. Available: https://www.reddit.com/r/mcp/comments/1r3sa7b/mcp_app_example_observability_data_in_interactive/. [Zugriff am 09 03 2026].
[3] „modelcontextprotocol.io,“ [Online]. Available: https://modelcontextprotocol.io/extensions/apps/overview. [Zugriff am 06 03 2026].
[4] „modelcontextprotocol.io,“ [Online]. Available: https://modelcontextprotocol.io/extensions/apps/overview#why-not-just-build-a-web-app. [Zugriff am 05 03 2026].