Zum Hauptinhalt springen

​
Was ist MCP Apps?

MCP Apps ist eine offizielle Erweiterung des Model Context Protocols, mit der MCP-Server interaktive HTML/JavaScript-Oberflächen zurückgeben können. Diese werden direkt in der Host-Anwendung (Langdock, Claude Desktop, VS Code usw.) gerendert, statt nur reinen Text.
MCP vs MCP AppsStandard-MCP-Tools geben Text oder strukturierte Daten zurück. MCP Apps Tools können zusätzlich eine vollständig interaktive UI zurückgeben, etwa Formulare, Dashboards oder Visualisierungen, die direkt im Chat gerendert werden.

​
So funktioniert es

1

Tool deklariert eine UI-Ressource

Deine Tool-Definition enthält ein _meta.ui.resourceUri, das auf eine ui://-Ressource verweist, die dein MCP-Server bereitstellt. Das signalisiert kompatiblen Hosts, dass das Tool eine UI-Komponente hat.
2

Host lädt und rendert die UI

Wenn das LLM das Tool aufruft, lädt der Host das HTML von deinem Server und rendert es in einem sandboxed iframe direkt im Chat.
3

Bidirektionale Kommunikation

UI und Host kommunizieren über JSON-RPC via postMessage. Deine App kann Tool-Aufrufe anstoßen, den Kontext des Modells aktualisieren und Ergebnisse empfangen, ohne den Chat zu verlassen.

​
Sicherheitsmodell

MCP Apps läuft in einer Sandbox-Umgebung. Der Host kontrolliert, worauf deine App zugreifen darf:
SchichtWas sie macht
Iframe-SandboxIsoliert die App vom Eltern-Tab und anderen Tabs
Vordeklarierte RessourcenHosts prüfen das HTML vor dem Rendern
Auditierbares JSON-RPCJede App-zu-Host-Kommunikation ist protokollierbar
NutzerzustimmungTool-Aufrufe aus der App brauchen weiterhin die Bestätigung des Nutzers

​
Eigene MCP App bauen

Das offizielle SDK ist @modelcontextprotocol/ext-apps. Es funktioniert mit React, Vue, Svelte, Solid, Preact und Vanilla-JavaScript. Das Kernmuster: Ein Tool gibt _meta.ui.resourceUri zurück, das auf eine ui://-Ressource zeigt, die dein Server als HTML ausliefert. Langdock lädt diese und rendert sie in einem sandboxed iframe direkt im Chat. 
// Tool deklariert eine UI-Ressource
server.tool("render_form", { /* schema */ }, async (input) => ({
  content: [{ type: "text", text: "Formular wird geöffnet..." }],
  _meta: { ui: { resourceUri: "ui://my-form" } }
}));

// Server liefert das HTML aus
server.resource("ui://my-form", async () => ({
  contents: [{ uri: "ui://my-form", mimeType: "text/html", text: "<html>...</html>" }]
}));

MCP Apps Dokumentation

Offizielle Spezifikation, SDK-Referenz und Framework-Guides

ext-apps auf GitHub

SDK-Quellcode, Beispiele und Issue-Tracker

​
Beispiel: ServiceNow MCP Server

Der Langdock ServiceNow MCP Server ist eine Referenzimplementierung. Sie zeigt, wie sich OAuth Dynamic Client Registration (DCR) mit MCP Apps Formularen kombinieren lässt, um ServiceNow-Einträge direkt aus Langdock heraus zu erstellen. Er stellt drei Tools bereit:
ToolBeschreibung
get_form_fieldsLädt verfügbare Felder aus einer ServiceNow-Tabelle
render_formGibt ein interaktives MCP Apps Formular zurück, optional vorausgefüllt aus dem Chat-Kontext
submit_formErstellt einen Eintrag in ServiceNow aus den eingereichten Formulardaten

servicenow-mcp-server

Referenzimplementierung mit OAuth DCR und MCP Apps Formularen für ServiceNow

​
Verbindung zu Langdock

Sobald dein MCP-Server läuft, verbindest du ihn wie jeden anderen MCP-Server mit Langdock. Im MCP Integrations-Guide findest du die Einrichtungsschritte inklusive Authentifizierungsoptionen.

​
Verwandte Dokumentation