ChatGPT Interactive Components Examples
by skyrmionz
pizza-list.html•4.79 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pizza List</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: #f5f5f5;
padding: 16px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.header {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
margin-bottom: 16px;
}
.icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #F46C21 0%, #FF8C42 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.header-text h1 {
font-size: 20px;
font-weight: 600;
margin-bottom: 4px;
color: #1f2933;
}
.header-text p {
font-size: 14px;
color: #7c8b9a;
}
.list {
display: flex;
flex-direction: column;
gap: 0;
}
.list-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background 0.2s;
}
.list-item:hover {
background: rgba(0, 0, 0, 0.02);
border-radius: 8px;
}
.list-item:last-child {
border-bottom: none;
}
.rank {
font-size: 14px;
color: #7c8b9a;
min-width: 24px;
text-align: center;
}
.thumbnail {
width: 40px;
height: 40px;
border-radius: 8px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 16px;
}
.info {
flex: 1;
}
.name {
font-size: 15px;
font-weight: 500;
color: #1f2933;
margin-bottom: 2px;
}
.details {
font-size: 13px;
color: #7c8b9a;
}
.rating {
font-size: 14px;
font-weight: 500;
color: #F46C21;
}
.empty {
text-align: center;
padding: 32px;
color: #7c8b9a;
}
.topping-badge {
background: #FFF3CD;
color: #856404;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="icon">🍕</div>
<div class="header-text">
<h1>Best Pizza Places</h1>
<p id="subtitle">A ranking of great pizzerias</p>
</div>
</div>
<div id="list-root"></div>
</div>
<script>
console.log('Pizza List Widget loaded');
// Get data from window.openai
const toolOutput = window.openai?.toolOutput || {};
const pizzaTopping = toolOutput.pizzaTopping || 'cheese';
console.log('toolOutput:', toolOutput);
console.log('pizzaTopping:', pizzaTopping);
// Update subtitle with topping
document.getElementById('subtitle').innerHTML = `
Featuring <span class="topping-badge">${pizzaTopping}</span> pizzas
`;
// Demo pizza places
const places = [
{ name: "Tony's Pizzeria", city: "New York, NY", rating: 4.8 },
{ name: "Luigi's Pizza", city: "Chicago, IL", rating: 4.7 },
{ name: "Bella Napoli", city: "San Francisco, CA", rating: 4.9 },
{ name: "Pizza Paradise", city: "Austin, TX", rating: 4.6 },
{ name: "The Dough Room", city: "Portland, OR", rating: 4.5 }
];
function render() {
const root = document.getElementById('list-root');
if (places.length === 0) {
root.innerHTML = '<div class="empty">No pizza places found.</div>';
return;
}
root.innerHTML = `
<div class="list">
${places.map((place, i) => `
<div class="list-item">
<div class="rank">${i + 1}</div>
<div class="thumbnail">${place.name.charAt(0)}</div>
<div class="info">
<div class="name">${place.name}</div>
<div class="details">${place.city}</div>
</div>
<div class="rating">⭐ ${place.rating}</div>
</div>
`).join('')}
</div>
`;
}
render();
console.log('Pizza List Widget ready');
</script>
</body>
</html>
Latest Blog Posts
- Model Context Protocol Proxies: Enabling Enterprise Control with Virtual MCPsBy Om-Shree-0709 on .AI SecurityVirtual MCPKubernetes Operator
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/skyrmionz/chatgpt-mcp-server-interactive-components'
If you have feedback or need assistance with the MCP directory API, please join our Discord server