MCP Apps: Interaktive Benutzeroberflächen zu KI-Konversationen hinzufügen

MCP-Tools waren schon immer gut darin, Daten abzurufen und Aktionen auszuführen. Was sie nicht konnten, war Ihnen etwas Nützliches anzuzeigen. Sie baten einen KI-Assistenten, Ihre Verkaufszahlen abzurufen, und erhielten eine Textwand zurück. Nach Region filtern? Das ist ein weiterer Prompt. Nach Umsatz sortieren? Noch ein Prompt. Es funktioniert, aber es ist langsam und frustrierend.

MCP Apps beheben dies. Sie ermöglichen es MCP-Servern, interaktive UI-Komponenten zurückzugeben — Dashboards, Formulare, Visualisierungen, Konfigurationspanels — die direkt in der Konversation gerendert werden. Keine separate App, kein Kontextwechsel.

Was sind MCP Apps?

MCP Apps sind die erste offizielle Erweiterung des Model Context Protocol. Sie wurden Anfang 2026 offiziell und standardisierten Muster, die bereits von MCP-UI und dem OpenAI Apps SDK erforscht wurden.

Vor MCP Apps musste jeder Client das UI-Problem unabhängig lösen. Diese Fragmentierung bedeutete, dass ein für Claude entwickelter Server in VS Code oder ChatGPT nicht auf die gleiche Weise funktionieren würde. MCP Apps etablieren einen gemeinsamen Standard, sodass eine einzige Implementierung in allen unterstützenden Clients funktioniert.

Es ist erwähnenswert, dass MCP Apps noch neu sind und sich weiterentwickeln. Aber sie werden bereits in mehreren MCP-Clients unterstützt, darunter Claude und Entwicklungstools — ein bedeutsamer Anfang.

Wie MCP Interactive Apps funktionieren

Die Architektur ist unkompliziert. Ein Tool referenziert eine UI-Ressource, die auf eine interaktive Oberfläche verweist:

{
  "name": "visualize_sales",
  "description": "Returns an interactive sales dashboard",
  "_meta": {
    "ui": {
      "resourceUri": "ui://dashboards/sales"
    }
  }
}

Der Host ruft diese Ressource ab — ein HTML-Bundle, das unter dem ui://-Schema bereitgestellt wird — und rendert es in einem Sandbox-Iframe. Die UI kommuniziert über JSON-RPC über postMessage zurück zum Host. Das bedeutet, dass alle Nachrichten strukturiert, überprüfbar und konsistent mit der Funktionsweise des restlichen MCP sind.

Das ext-apps SDK verwaltet diese Kommunikationsschicht:

import { App } from "@modelcontextprotocol/ext-apps"

const app = new App()
await app.connect()

app.ontoolresult = (result) => renderDashboard(result.data)

await app.updateModelContext({
  content: [{ type: "text", text: "User filtered by Q3" }],
})

Das Modell bleibt in der Schleife. Wenn ein Benutzer mit der UI interagiert — einen Filter anklickt, eine Konfigurationsoption auswählt, einen Dokumentabschnitt genehmigt — sieht das Modell dies und kann reagieren.

MCP UI-Komponenten sind einfach Webanwendungen

Dies ist der Teil, den Frontend-Entwickler am meisten zu schätzen wissen werden. Ihr UI-Bundle ist eine Standard-Webanwendung. Sie können sie mit React, Vue, Svelte oder einfachem JavaScript erstellen. Es gibt keine proprietäre Rendering-Engine zu erlernen.

Die ui://-Ressource ist eine eigenständige HTML-Datei mit gebündelten Assets. Der Host lädt sie in einem Sandbox-Iframe, sodass sie in einer vertrauten Browser-Umgebung läuft. Sie schreiben Komponenten auf die gleiche Weise wie immer — das einzige neue Element ist die Verwendung des App SDK zur Kommunikation mit dem Host.

UI-Unterstützung ist außerdem eine progressive Erweiterung. Wenn ein Client MCP Apps nicht unterstützt, funktioniert das Tool trotzdem — es gibt nur eine Textantwort zurück. Server sollten immer einen Text-Fallback bereitstellen, was bedeutet, dass Sie nicht von Nicht-UI-Clients ausgeschlossen werden.

Wo MCP Interactive Apps den größten Unterschied machen

Einige Workflows benötigen wirklich eine UI. Textantworten können Folgendes nicht ersetzen:

• Daten-Dashboards, bei denen Benutzer filtern, sortieren und tiefer einsteigen müssen
• Konfigurationsassistenten mit abhängigen Feldern, die sich basierend auf Auswahlen ändern
• Dokumentprüfungspanels, bei denen Benutzer Inline-Inhalte genehmigen oder markieren
• Echtzeit-Monitore, die aktualisiert werden, ohne einen neuen Tool-Aufruf zu erfordern

Shopify hat dies deutlich mit ihrem Commerce-Anwendungsfall demonstriert — Produktvarianten, Bundle-Builder und Bestandsbeschränkungen sind zu komplex, um sie durch Hin- und Her-Prompts zu verwalten. Eine UI erledigt das sauber.

Erste Schritte

Das ext-apps Repository enthält funktionierende Beispiel-Server: threejs-server, map-server, pdf-server und system-monitor-server. Wählen Sie denjenigen aus, der Ihrem Vorhaben am nächsten kommt, und beginnen Sie von dort aus.

Fazit

MCP Apps befinden sich in einem frühen Stadium, sind aber bereits verwendbar. Sie bieten eine standardisierte Möglichkeit, interaktive UIs direkt in KI-Konversationen einzubetten und schließen die Lücke zwischen dem, was MCP-Tools abrufen können, und dem, was Benutzer tatsächlich mit diesen Daten tun können. Wenn Sie bereits MCP-Server entwickeln, ist das Hinzufügen einer UI-Schicht ein natürlicher nächster Schritt — und die Tooling ist dafür bereit.

Häufig gestellte Fragen

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.