79670b4dcdApply host-provided safe area insets as padding on main containers across all examples. This ensures content doesn't render under system UI elements like phone notches. React apps use `useState` + `onhostcontextchanged` handler with initial fetch via `getHostContext()` in `useEffect`. Vanilla JS apps apply padding in the handler and invoke it after `connect()`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
68 lines
1.8 KiB
HTML
68 lines
1.8 KiB
HTML
<!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, PostMessageTransport } from "https://unpkg.com/@modelcontextprotocol/ext-apps@0.0.1";
|
|
|
|
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>
|