> ## Documentation Index > Fetch the complete documentation index at: https://docs.langdock.com/llms.txt > Use this file to discover all available pages before exploring further. # MCP-Server mit MCP Apps bauen > MCP Apps ist eine offizielle MCP-Erweiterung, mit der dein Server interaktive UIs zurückgeben kann, die direkt in Langdock und anderen MCP-Hosts gerendert werden. ## 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 Apps** Standard-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 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. 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. 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: | Schicht | Was sie macht | | ----------------------------- | ----------------------------------------------------------------------- | | **Iframe-Sandbox** | Isoliert die App vom Eltern-Tab und anderen Tabs | | **Vordeklarierte Ressourcen** | Hosts prüfen das HTML vor dem Rendern | | **Auditierbares JSON-RPC** | Jede App-zu-Host-Kommunikation ist protokollierbar | | **Nutzerzustimmung** | Tool-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. ```typescript theme={null} // 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: "..." }] })); ``` Offizielle Spezifikation, SDK-Referenz und Framework-Guides 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: | Tool | Beschreibung | | ----------------- | ------------------------------------------------------------------------------------------- | | `get_form_fields` | Lädt verfügbare Felder aus einer ServiceNow-Tabelle | | `render_form` | Gibt ein interaktives MCP Apps Formular zurück, optional vorausgefüllt aus dem Chat-Kontext | | `submit_form` | Erstellt einen Eintrag in ServiceNow aus den eingereichten Formulardaten | 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 * [MCP Integrations-Guide](/de/using-langdock/guides/integrations/mcp/mcp) - So verbindest du MCP-Server mit Langdock * [MCP Server Verzeichnis](/de/using-langdock/integrations/mcp-directory) - Verifizierte Remote-MCP-Server, die du sofort verbinden kannst * [A2A-Protokoll](/de/using-langdock/integrations/a2a-protocol) - Agent-zu-Agent-Kommunikation