ChatGPT Interactive Components Examples
by skyrmionz
example-mcp2.html•1.63 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
padding: 20px;
max-width: 500px;
margin: 0 auto;
}
.container {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
padding: 24px;
color: white;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 24px;
margin-bottom: 16px;
}
.info {
background: rgba(255, 255, 255, 0.2);
padding: 16px;
border-radius: 8px;
margin-top: 16px;
}
.info p {
margin-bottom: 8px;
line-height: 1.5;
}
.info p:last-child {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>🚀 MCP Server 2</h1>
<p>This is a second MCP server running on the same Heroku app!</p>
<div class="info">
<p><strong>Server:</strong> MCP2</p>
<p><strong>Status:</strong> Active</p>
<p><strong>Message:</strong> <span id="message">Loading...</span></p>
</div>
</div>
<script>
// Get data from toolOutput
const toolOutput = window.openai?.toolOutput || {};
const message = toolOutput.message || 'Hello from MCP2!';
document.getElementById('message').textContent = message;
</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