546f507e49* Add QR code Python MCP server example A minimal Python MCP server that generates customizable QR codes with an interactive widget UI. Features: - Generate QR codes from any text or URL - Customizable colors, size, border, and error correction - Interactive widget using MCP Apps SDK protocol - Supports both HTTP (for web clients) and stdio (for Claude Desktop) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Potential fix for code scanning alert no. 10: Client-side cross-site scripting Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * Add semicolon * Bind to 0.0.0.0 for Docker compatibility * Use SDK from unpkg + add CSP resourceDomains for external scripts --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
52 lines
1.3 KiB
HTML
52 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<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.4";
|
|
|
|
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);
|
|
}
|
|
};
|
|
|
|
await app.connect(new PostMessageTransport(window.parent));
|
|
</script>
|
|
</body>
|
|
</html>
|