Widget HTML¶
Each tool that renders UI returns a resource content block alongside the text summary. The resource contains a self-contained HTML page that boots a Preact widget from the CDN.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Glance Fashion</title>
<link rel="stylesheet" href="https://<cdn>/widgets/styles.css">
<link rel="stylesheet" href="https://<cdn>/widgets/CarouselHeader.css">
</head>
<body>
<div id="root"></div>
<script>window.__GLANCEAI_BOOT__ = {"cdnBase": "https://<cdn>/widgets"};</script>
<script type="module" src="https://<cdn>/widgets/carousel.js"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://<cdn>/widgets/mixMatch.css">
<link rel="stylesheet" href="https://<cdn>/widgets/GlanceLoader.css">
<link rel="stylesheet" href="https://<cdn>/widgets/CarouselHeader.css">
</head>
<body>
<div id="root"></div>
<script>window.__GLANCEAI_BOOT__ = {"cdnBase": "https://<cdn>/widgets"};</script>
<script type="module" src="https://<cdn>/widgets/mixMatch.js"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://<cdn>/widgets/tryon.css">
<link rel="stylesheet" href="https://<cdn>/widgets/GlanceLoader.css">
<link rel="stylesheet" href="https://<cdn>/widgets/SelfieUpload.css">
</head>
<body>
<div id="root"></div>
<script>window.__GLANCEAI_BOOT__ = {"cdnBase": "https://<cdn>/widgets"};</script>
<script type="module" src="https://<cdn>/widgets/tryon.js"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://<cdn>/widgets/SelfieUpload.css">
</head>
<body>
<div id="root"></div>
<script>window.__GLANCEAI_BOOT__ = {"cdnBase": "https://<cdn>/widgets"};</script>
<script type="module" src="https://<cdn>/widgets/selfie.js"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://<cdn>/widgets/imageUpload.css">
</head>
<body>
<div id="root"></div>
<script>window.__GLANCEAI_BOOT__ = {"cdnBase": "https://<cdn>/widgets"};</script>
<script type="module" src="https://<cdn>/widgets/imageUpload.js"></script>
</body>
</html>
The __GLANCEAI_BOOT__ object is injected at render time by the MCP server — the widget reads cdnBase to resolve its assets. MCP hosts that support text/html;profile=mcp-app render these pages as iframes inside the chat surface.