| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <meta name="color-scheme" content="light dark"> |
| | <style> |
| | html, body { |
| | margin: 0; |
| | padding: 0; |
| | overflow: hidden; |
| | background: transparent; |
| | } |
| | body { |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | height: 340px; |
| | width: 340px; |
| | } |
| | img { |
| | width: 300px; |
| | height: 300px; |
| | border-radius: 8px; |
| | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div id="qr"></div> |
| | <script type="module"> |
| | import { App } from "https://unpkg.com/@modelcontextprotocol/ext-apps@0.3.1/app-with-deps"; |
| | |
| | const app = new App({ name: "QR Widget", version: "1.0.0" }); |
| | |
| | app.ontoolresult = ({ content }) => { |
| | const img = content?.find(c => c.type === 'image'); |
| | if (img) { |
| | const qrDiv = document.getElementById('qr'); |
| | qrDiv.innerHTML = ''; |
| | |
| | const allowedTypes = ['image/png', 'image/jpeg', 'image/gif']; |
| | const mimeType = allowedTypes.includes(img.mimeType) ? img.mimeType : 'image/png'; |
| | |
| | const image = document.createElement('img'); |
| | image.src = `data:${mimeType};base64,${img.data}`; |
| | image.alt = "QR Code"; |
| | qrDiv.appendChild(image); |
| | } |
| | }; |
| | |
| | function handleHostContextChanged(ctx) { |
| | if (ctx.safeAreaInsets) { |
| | document.body.style.paddingTop = `${ctx.safeAreaInsets.top}px`; |
| | document.body.style.paddingRight = `${ctx.safeAreaInsets.right}px`; |
| | document.body.style.paddingBottom = `${ctx.safeAreaInsets.bottom}px`; |
| | document.body.style.paddingLeft = `${ctx.safeAreaInsets.left}px`; |
| | } |
| | } |
| | |
| | app.onhostcontextchanged = handleHostContextChanged; |
| | |
| | await app.connect(); |
| | const ctx = app.getHostContext(); |
| | if (ctx) { |
| | handleHostContextChanged(ctx); |
| | } |
| | </script> |
| | </body> |
| | </html> |
| |
|
