/**
* QR Code Widget
*
* Displays a QR code image generated by the server.
* Ported from modelcontextprotocol/ext-apps qr-server example.
*/
import { useWidgetProps } from "../use-widget-props";
type ToolOutput = {
imageData: string;
mimeType: string;
};
const defaultProps: ToolOutput = {
imageData: "",
mimeType: "image/png",
};
export default function App() {
const props = useWidgetProps<ToolOutput>(defaultProps);
if (!props.imageData) {
return (
<div style={styles.container}>
<p style={styles.placeholder}>Generating QR code...</p>
</div>
);
}
return (
<div style={styles.container}>
<img
src={`data:${props.mimeType};base64,${props.imageData}`}
alt="QR Code"
style={styles.image}
/>
</div>
);
}
const styles: Record<string, React.CSSProperties> = {
container: {
display: "flex",
justifyContent: "center",
alignItems: "center",
width: 340,
height: 340,
margin: 0,
padding: 0,
overflow: "hidden",
background: "transparent",
},
image: {
width: 300,
height: 300,
borderRadius: 8,
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
},
placeholder: {
color: "#6b7280",
fontSize: 14,
},
};
