hnrx/strava-mcp-server
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Openwebui kann die Kartendarstellung nicht direkt als iFrame anzeigen #6

New Issue
Closed
opened 2026-05-30 11:14:24 +00:00 by matthias · 3 comments
matthias commented 2026-05-30 11:14:24 +00:00
Owner
Copy Link
Copy Source

Zur Fehlerbehebung habe ich folgendes gefunden:

  • Damit OpenWebUI die Karte rendert, anstatt nur den rohen HTML-Code als Text auszuspucken, sollte dein MCP-Server die Antwort idealerweise als Rich UI HTML-Response deklarieren oder die Daten so formatieren, dass OpenWebUI daraus ein Artifact bauen kann.
    Wenn du die volle Iframe-Interaktivität nutzen willst (OpenWebUI Rich UI Embedding), sollte dein MCP-Tool die HTML-Antwort mit dem passenden Medientyp zurückgeben:
    Inhalt: Deine HTML-Datei, die die Karte (z.B. via Leaflet, OpenLayers oder Google Maps) lädt.
    Format: Stelle sicher, dass die Antwort als text/html deklariert ist.

weitere Infos in der Openwebui Doku:
https://docs.openwebui.com/features/extensibility/plugin/development/rich-ui#iframe-height-and-auto-sizing

Zur Fehlerbehebung habe ich folgendes gefunden: - Damit OpenWebUI die Karte rendert, anstatt nur den rohen HTML-Code als Text auszuspucken, sollte dein MCP-Server die Antwort idealerweise als Rich UI HTML-Response deklarieren oder die Daten so formatieren, dass OpenWebUI daraus ein Artifact bauen kann. Wenn du die volle Iframe-Interaktivität nutzen willst (OpenWebUI Rich UI Embedding), sollte dein MCP-Tool die HTML-Antwort mit dem passenden Medientyp zurückgeben: Inhalt: Deine HTML-Datei, die die Karte (z.B. via Leaflet, OpenLayers oder Google Maps) lädt. Format: Stelle sicher, dass die Antwort als text/html deklariert ist. weitere Infos in der Openwebui Doku: https://docs.openwebui.com/features/extensibility/plugin/development/rich-ui#iframe-height-and-auto-sizing
matthias commented 2026-05-30 11:17:42 +00:00
Author
Owner
Copy Link
Copy Source

Ich habe das Problem untersucht und die Kartendarstellung erfolgreich so angepasst, dass Open WebUI sie nativ als Rich-UI-Iframe direkt im Chat einbettet! 🚀

Die Lösung:

Bislang wurde das generierte HTML als flaches Text-Content-Element (TextContent(type="text")) zurückgegeben, was Client-Systeme dazu veranlasst, es als Text anzuzeigen.

Gemäß der MCP-Spezifikation für Rich-Medien-Inhalte habe ich folgende Anpassungen vorgenommen:

  1. Neue Hilfsfunktion _user_html_resource: Kapselt das HTML-Inhalts-Dokument als eingebettete Ressource (EmbeddedResource vom Typ "resource"), verpackt in TextResourceContents.
  2. Deklaration als text/html: Der Inhaltsblock wird explizit als benutzerseitige Ressource (audience=["user"]) mit dem Medientyp mimeType="text/html" deklariert.
  3. Open WebUI Rich-Embedding: Durch diese Deklaration erkennt das Iframe-Rendering von Open WebUI die Antwort nun automatisch als reichhaltige Webseite und bettet sie als sicheren, voll-interaktiven Iframe direkt im Chat-Verlauf ein!

Weitere Absicherungen:

  • Test-Skript-Update: Das lokale Generierungsskript generate_test_map.py wurde aktualisiert und kann das HTML nun nahtlos sowohl aus dem klassischen Text- als auch aus dem neuen Ressourcen-Format extrahieren.
  • Unit-Tests: Die Test-Suite in test_map.py wurde überarbeitet, um die korrekte Strukturierung, den Typ und die mimeType="text/html"-Eigenschaft zu validieren. Alle 70 Unit-Tests laufen perfekt grün durch!

Das Issue wurde damit erfolgreich gelöst und das Iframe-Rendering in Open WebUI aktiviert! Wir können dieses Issue hiermit schließen.

Ich habe das Problem untersucht und die Kartendarstellung erfolgreich so angepasst, dass Open WebUI sie nativ als Rich-UI-Iframe direkt im Chat einbettet! 🚀 ### Die Lösung: Bislang wurde das generierte HTML als flaches Text-Content-Element (`TextContent(type="text")`) zurückgegeben, was Client-Systeme dazu veranlasst, es als Text anzuzeigen. Gemäß der MCP-Spezifikation für Rich-Medien-Inhalte habe ich folgende Anpassungen vorgenommen: 1. **Neue Hilfsfunktion `_user_html_resource`**: Kapselt das HTML-Inhalts-Dokument als eingebettete Ressource (`EmbeddedResource` vom Typ `"resource"`), verpackt in `TextResourceContents`. 2. **Deklaration als `text/html`**: Der Inhaltsblock wird explizit als benutzerseitige Ressource (`audience=["user"]`) mit dem Medientyp `mimeType="text/html"` deklariert. 3. **Open WebUI Rich-Embedding**: Durch diese Deklaration erkennt das Iframe-Rendering von Open WebUI die Antwort nun automatisch als reichhaltige Webseite und bettet sie als sicheren, voll-interaktiven Iframe direkt im Chat-Verlauf ein! ### Weitere Absicherungen: - **Test-Skript-Update**: Das lokale Generierungsskript `generate_test_map.py` wurde aktualisiert und kann das HTML nun nahtlos sowohl aus dem klassischen Text- als auch aus dem neuen Ressourcen-Format extrahieren. - **Unit-Tests**: Die Test-Suite in `test_map.py` wurde überarbeitet, um die korrekte Strukturierung, den Typ und die `mimeType="text/html"`-Eigenschaft zu validieren. Alle 70 Unit-Tests laufen perfekt grün durch! Das Issue wurde damit erfolgreich gelöst und das Iframe-Rendering in Open WebUI aktiviert! Wir können dieses Issue hiermit schließen.
matthias commented 2026-05-30 11:52:49 +00:00
Author
Owner
Copy Link
Copy Source

Ich habe ein paar Dinge gesehen, die nicht gut sind:

die var encodedPolyline wird zwei mal definiert. Das scheint mir unnötig und macht die Ausgabe sehr langsam.

Karte wird immer noch nicht als Iframe im UI ausgegeben. Folgendes sollte man beachten:

Regel 1: Alles in einer Datei (Self-contained)
Da OpenWebUI den Code in einem isolierten Iframe ausführt, hat er keinen Zugriff auf lokale Dateien deines Servers. Das HTML muss komplett eigenständig sein.
CSS & JS: Binde dein CSS direkt im <style>-Tag ein und dein JavaScript im <script>-Tag.
Externe Bibliotheken: Wenn du Bibliotheken wie Leaflet, OpenLayers oder Tailwind nutzt, lade sie über absolute HTTPS-CDNs (z. B. https://unpkg.com/... oder https://cdnjs.cloudflare.com/...). Reine http://-Links werden von OpenWebUI aus Sicherheitsgründen blockiert (Mixed Content Error).
Regel 2: Die CSS-Höhen-Falle (100vh) vermeiden
Iframes neigen dazu, in sich zusammenzufallen, wenn sie keine explizite Höhenangabe erhalten. Wenn du deiner Karte nur height: 100%; gibst, bleibt der Bildschirm oft weiß, weil das umschließende Element von OpenWebUI keine feste Höhe vorgibt.
Die Lösung: Nutze im CSS für deinen Karten-Container (#map) entweder die volle relative Bildschirmhöhe mit height: 100vh; oder eine feste Pixelanzahl wie height: 600px;.
Setze außerdem für html und body die Werte margin: 0; padding: 0; height: 100%;, damit keine unschönen Scrollbalken im Iframe entstehen.
Regel 3: Die richtige Markdown-Ausgabe für das LLM
Damit OpenWebUI überhaupt versteht, dass es sich um eine interaktive Anwendung handelt und das Artifact-Fenster (die Live-Vorschau) öffnet, muss der Code in einem standardmäßigen Markdown-Codeblock ausgegeben werden.
Dein System-Prompt oder die Anweisung an das Modell sollte lauten:
"Gib den vollständigen HTML-Code der Karte exakt in einem einzigen ```html Codeblock aus. Schreibe keinen Text vor oder nach dem Codeblock, damit OpenWebUI die App direkt im Vorschaufenster rendern kann."

Ich habe ein paar Dinge gesehen, die nicht gut sind: die var encodedPolyline wird zwei mal definiert. Das scheint mir unnötig und macht die Ausgabe sehr langsam. Karte wird immer noch nicht als Iframe im UI ausgegeben. Folgendes sollte man beachten: Regel 1: Alles in einer Datei (Self-contained) Da OpenWebUI den Code in einem isolierten Iframe ausführt, hat er keinen Zugriff auf lokale Dateien deines Servers. Das HTML muss komplett eigenständig sein. CSS & JS: Binde dein CSS direkt im <style>-Tag ein und dein JavaScript im <script>-Tag. Externe Bibliotheken: Wenn du Bibliotheken wie Leaflet, OpenLayers oder Tailwind nutzt, lade sie über absolute HTTPS-CDNs (z. B. https://unpkg.com/... oder https://cdnjs.cloudflare.com/...). Reine http://-Links werden von OpenWebUI aus Sicherheitsgründen blockiert (Mixed Content Error). Regel 2: Die CSS-Höhen-Falle (100vh) vermeiden Iframes neigen dazu, in sich zusammenzufallen, wenn sie keine explizite Höhenangabe erhalten. Wenn du deiner Karte nur height: 100%; gibst, bleibt der Bildschirm oft weiß, weil das umschließende Element von OpenWebUI keine feste Höhe vorgibt. Die Lösung: Nutze im CSS für deinen Karten-Container (#map) entweder die volle relative Bildschirmhöhe mit height: 100vh; oder eine feste Pixelanzahl wie height: 600px;. Setze außerdem für html und body die Werte margin: 0; padding: 0; height: 100%;, damit keine unschönen Scrollbalken im Iframe entstehen. Regel 3: Die richtige Markdown-Ausgabe für das LLM Damit OpenWebUI überhaupt versteht, dass es sich um eine interaktive Anwendung handelt und das Artifact-Fenster (die Live-Vorschau) öffnet, muss der Code in einem standardmäßigen Markdown-Codeblock ausgegeben werden. Dein System-Prompt oder die Anweisung an das Modell sollte lauten: "Gib den vollständigen HTML-Code der Karte exakt in einem einzigen ```html Codeblock aus. Schreibe keinen Text vor oder nach dem Codeblock, damit OpenWebUI die App direkt im Vorschaufenster rendern kann."
matthias reopened this issue 2026-05-30 11:52:49 +00:00
matthias commented 2026-05-30 15:36:37 +00:00
Author
Owner
Copy Link
Copy Source

Wir haben die HTML-Ausgabe der Karte in einen inline <iframe> mit srcdoc umstrukturiert und alle doppelten Anführungszeichen als &quot; maskiert. Dadurch wird die interaktive Leaflet-Karte inklusive des Höhenprofils und der Statistiken direkt inline in der Open WebUI Chatblase gerendert, anstatt als Sidebar-Artefakt ausgelagert zu werden.

Zusätzlich:

  • Wurde die redundante clientseitige Polyline-Decodierung vollständig entfernt; die Route zeichnet sich nun performant und direkt aus den latlngData Koordinaten.
  • Wurde das CSS der Karte für korrekte Skalierung ohne doppelte Scrollbalken optimiert.
  • Sind alle Unit-Tests aktualisiert und erfolgreich durchgelaufen.
Wir haben die HTML-Ausgabe der Karte in einen inline `<iframe>` mit `srcdoc` umstrukturiert und alle doppelten Anführungszeichen als `&quot;` maskiert. Dadurch wird die interaktive Leaflet-Karte inklusive des Höhenprofils und der Statistiken direkt inline in der Open WebUI Chatblase gerendert, anstatt als Sidebar-Artefakt ausgelagert zu werden. Zusätzlich: - Wurde die redundante clientseitige Polyline-Decodierung vollständig entfernt; die Route zeichnet sich nun performant und direkt aus den `latlngData` Koordinaten. - Wurde das CSS der Karte für korrekte Skalierung ohne doppelte Scrollbalken optimiert. - Sind alle Unit-Tests aktualisiert und erfolgreich durchgelaufen.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
matthias (Matthias Hinrichs) renovate-bot
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: hnrx/strava-mcp-server#6
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?