# mcp-ui-future-agentic-interfaces-goose-2025-08-25
## Veille
MCP-UI revolutioniert KI-Agenten-Interfaces, interaktive Webkomponenten, Sandboxed Iframes, Barrierefreiheit, generative UI - Goose/Block
## Titre Article
MCP-UI: The Future of Agentic Interfaces
## Date
2025-08-25
## URL
https://block.github.io/goose/blog/2025/08/25/mcp-ui-future-agentic-interfaces/
## Keywords
MCP-UI, Model Context Protocol UI, agentische Interfaces, reichhaltige interaktive Webkomponenten, visuelle KI-Interfaces, eingebettete UI-Ressourcen, plattformübergreifende KI-Integration, Barrierefreiheit, generative UI, Shopify-Integration, Monday.com, Goose, Sandboxed Iframes, Remote DOM, multimodale Erfahrungen
## Authors
Ebony Louis (Developer Advocate - Block/Goose)
## Ton
**Profil:** Konversationell-Professionell | Begeisterter Developer Advocate | Edukativ-Werblich | Fortgeschritten
Louis nimmt die Stimme eines Developer Advocate ein, die Produktbegeisterung mit technischer Bildung ausbalanciert. Der problemorientierte Einstieg ("Textwände", "Kopieren von URLs") etabliert nachvollziehbare Schmerzpunkte. Die Struktur Problem → Lösung → Architektur → Vorteile → Beispiele führt zu einem schrittweisen Verständnis. Zugängliche Fachsprache (Sandboxed Iframes, Remote DOM, Post-Messages) vermeidet Einschüchterung. Konkrete Beispiele (Shopify, Reisen, Restaurants) verankern das abstrakte Protokoll. Die Betonung von Barrierefreiheit und plattformübergreifender Standardisierung zeigt einen wertorientierten Ansatz. Optimistischer Ton ohne naiven Hype (die Akzeptanzhürde wird anerkannt). Typisch für die Developer-Advocacy von Block/Goose, die technische Tiefe, praktischen Nutzen und eine transformative Vision verbindet.
## Pense-betes
- **Gelöstes Problem**: Textwände in Konversationen mit KI-Agenten, Kopieren von URLs, mehrere Tabs
- **MCP-UI = Protokoll + SDK** für interaktive Webkomponenten in Agenten-Konversationen
- **Drei Content-Typen**: externe URLs, rohes HTML, Remote DOM (separate Worker)
- **Sicherheit**: Sandboxed Iframes, Kommunikation ausschließlich über Post-Messages
- **Stakeholder des Ökosystems**: Agenten-Entwickler, MCP-Server-Entwickler, Dienstanbieter, Endnutzer
- **Konkrete Beispiele**: Shopify (visuelle Kataloge), Reisen (Sitzplatzauswahl im Flugzeug), Restaurants (Fotokarten + Bestellung)
- **Shopify**: MCP-Unterstützung in allen Stores ausgerollt
- **Barrierefreiheit**: Agenten bauen personalisierte Interfaces basierend auf Nutzerpräferenzen
- **Plattformübergreifende Standardisierung**: eine Implementierung funktioniert überall
- **Aktuelle Herausforderung**: Akzeptanz, nicht technische Machbarkeit
- **Netzwerkeffekt**: UI-Komponenten funktionieren nach einmaliger Implementierung universell
- **Bewahrt Web-Expertise**: jahrzehntelange UI/UX-Kompetenz + Markenidentität
- **Einstieg**: einfache HTML-Ressource `createUIResource({ type: 'html', content: 'Hello World
' })`
## RésuméDe400mots
**Das Problem rein textueller Interfaces**
Traditionelle KI-Agenten-Interfaces leiden unter einer grundlegenden Einschränkung: Sie zwingen Nutzer dazu, alle Informationen über Textantworten zu konsumieren. Bei Produktempfehlungen, Reiseplanung oder Restaurantsuche erhalten Nutzer überwältigende Textwände mit Beschreibungen, Links und Daten, die manuelles Kopieren und Einfügen sowie den Wechsel zwischen Tabs erfordern. Dies untergräbt den Sinn eines intelligenten Assistenten und erzeugt eine schlechte Nutzererfahrung, insbesondere für nicht-technische Nutzer. Der reine Textansatz funktioniert für Early Adopters, schafft jedoch Hürden für die breite Akzeptanz und begrenzt den Nutzen von Agenten für alltägliche Aufgaben.
**Technische Architektur von MCP-UI**
MCP-UI (Model Context Protocol User Interface) ist sowohl ein Protokoll als auch ein SDK, das die Integration reichhaltiger interaktiver Webkomponenten direkt in Konversationen mit KI-Agenten ermöglicht. Das System nutzt die eingebetteten Ressourcen der MCP-Spezifikation und erlaubt es MCP-Servern, interaktive UI-Komponenten anstelle von reinem Text zurückzugeben. Diese Komponenten werden in **Sandboxed Iframes** gerendert, die ausschließlich über sichere Post-Messages mit der Host-Anwendung kommunizieren, wodurch sichergestellt wird, dass Drittanbieter-Code nicht auf die übergeordnete Anwendung zugreifen oder sie manipulieren kann.
Die Implementierung unterstützt **drei Content-Typen**: externe URLs (bestehende Webanwendungen in Iframes), rohes HTML (individuelles HTML mit CSS und JavaScript) und Remote DOM (UI-Rendering in separaten Workern für erhöhte Sicherheit). Entwickler können mit einfachen HTML-Ressourcen beginnen und diese schrittweise um interaktive Funktionen erweitern.
**Wesentliche Vorteile und Anwendungsfälle**
MCP-UI bewahrt jahrzehntelange Expertise im Bereich Web-UI/UX und erweitert sie um KI-Fähigkeiten. Es erhält die Markenidentität für Unternehmen wie Shopify, bietet nahtlose plattformübergreifende Kompatibilität zwischen verschiedenen KI-Agenten und erzeugt einen **Netzwerkeffekt**, bei dem UI-Komponenten nach einmaliger Implementierung universell funktionieren. Die Technologie adressiert Barrierefreiheit, indem sie Agenten ermöglicht, Interfaces zu bauen, die auf individuelle Präferenzen und Bedürfnisse zugeschnitten sind. Zudem schafft sie Standardisierung und macht separate Integrationen für jede KI-Plattform überflüssig.
**Konkrete Demonstrationen**
Drei überzeugende Beispiele: **(1) Visuelles Einkaufen** – Shopify-Kataloge mit Bildern, Preisen und interaktiven Elementen, bei denen ein Klick Artikel in den Warenkorb legt; **(2) Reiseplanung** – visuelle Karten zur Sitzplatzauswahl im Flugzeug mit automatischer Wetterabfrage für Zielorte; **(3) Restaurant-Entdeckung** – Durchsuchen lokaler Restaurants mit Fotokarten, Bewertungen, Speisekarten und direkter Bestellmöglichkeit, alles innerhalb des Konversationsflusses.
**Zukünftige Implikationen**
MCP-UI weist auf eine **Revolution der Barrierefreiheit** hin, bei der Agenten personalisierte Interfaces bauen, auf **generative UI**, die maßgeschneiderte Erfahrungen für einzelne Nutzer schafft, auf **multimodale Erfahrungen**, die über das Visuelle hinaus Sprache und native mobile Komponenten einbeziehen, sowie auf **plattformübergreifende Standardisierung**. Die aktuelle Herausforderung liegt eher in der Akzeptanz als in der technischen Machbarkeit, wobei große Akteure wie Shopify MCP-Unterstützung bereits in all ihren Stores implementieren.
**Details zur technischen Umsetzung**
Das Stakeholder-Ökosystem umfasst vier Gruppen: Agenten-Entwickler, die MCP-UI-Unterstützung implementieren, MCP-Server-Entwickler, die UI-Komponenten bauen, Dienstanbieter, die reichhaltige Interfaces erstellen, und Endnutzer, die von intuitiven Interaktionen profitieren. Der Einstieg erfordert minimalen Code – Entwickler können mit einfachen HTML-Ressourcen wie `createUIResource({ type: 'html', content: 'Hello World
' })` beginnen und von dort aus erweitern. Die Technologie wird bereits in Goose unterstützt und ist über umfassende Dokumentation sowie eine aktive Discord-Community verfügbar.
MCP-UI stellt einen fundamentalen Wandel dar – weg von textlastigen KI-Interaktionen hin zu reichhaltigen, visuellen und intuitiven Erfahrungen, die eine Brücke zwischen dem Web, wie wir es kennen, und der im Aufbau befindlichen agentenbasierten Zukunft schlagen.
## GrapheDeConnaissance
- MCP-UI —est_basé_sur→ Model Context Protocol (TECHNOLOGIE, 0.98)
- Ido Salomon —a_créé→ MCP-UI (TECHNOLOGIE, 0.95)
- Liad Yosef —a_créé→ MCP-UI (TECHNOLOGIE, 0.95)
- Ido Salomon —travaille_chez→ Monday.com (ORGANISATION, 0.97)
- Liad Yosef —travaille_chez→ Monday.com (ORGANISATION, 0.97)
- MCP-UI —utilise→ sandboxed iframes (CONCEPT, 0.97)
- MCP-UI —remplace→ interfaces textuelles (CONCEPT, 0.92)
- Goose —utilise→ MCP-UI (TECHNOLOGIE, 0.97)
- Shopify —utilise→ MCP-UI (TECHNOLOGIE, 0.93)
- MCP-UI —permet→ préservation de l'identité de marque (CONCEPT, 0.88)
- Andrew Harvard —améliore→ MCP-UI (TECHNOLOGIE, 0.85)
- MCP-UI —permet→ générative UI (CONCEPT, 0.82)
- Block —a_créé→ Goose (TECHNOLOGIE, 0.98)
- MCP-UI —améliore→ accessibilité agents IA (CONCEPT, 0.87)
---
Canonical: https://www.thekb.eu/de/fiches/mcp-ui-future-agentic-interfaces-goose-2025-08-25/