<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSG Portal MCP Connector for Claude.ai</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
.container {
background: white;
border-radius: 12px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
max-width: 800px;
width: 100%;
padding: 3rem;
}
h1 {
color: #333;
margin-bottom: 1rem;
font-size: 2rem;
}
.subtitle {
color: #666;
margin-bottom: 2rem;
font-size: 1.125rem;
}
.section {
margin-bottom: 2rem;
}
h2 {
color: #444;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.url-box {
background: #f7f9fc;
border: 2px solid #e2e8f0;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
font-family: 'Monaco', 'Menlo', monospace;
word-break: break-all;
color: #2d3748;
}
.copy-button {
background: #667eea;
color: white;
border: none;
border-radius: 6px;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.copy-button:hover {
background: #5a67d8;
}
.copy-button:active {
background: #4c51bf;
}
.steps {
list-style: none;
counter-reset: step;
margin-bottom: 2rem;
}
.steps li {
counter-increment: step;
position: relative;
padding-left: 3rem;
margin-bottom: 1rem;
line-height: 1.6;
}
.steps li::before {
content: counter(step);
position: absolute;
left: 0;
top: 0;
background: #667eea;
color: white;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.warning {
background: #fff8e1;
border-left: 4px solid #ffc107;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 4px;
}
.warning-title {
font-weight: bold;
color: #f57c00;
margin-bottom: 0.5rem;
}
.tools {
background: #f0f4ff;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1rem;
}
.tools ul {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.5rem;
}
.tools li {
padding: 0.5rem;
background: white;
border-radius: 4px;
display: flex;
align-items: center;
}
.tools li::before {
content: 'š§';
margin-right: 0.5rem;
}
code {
background: #f1f5f9;
padding: 0.125rem 0.25rem;
border-radius: 3px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="container">
<h1>CSG Portal MCP Connector</h1>
<p class="subtitle">Connect Columbus School for Girls portal to Claude.ai</p>
<div class="warning">
<div class="warning-title">ā ļø UNOFFICIAL PROJECT</div>
This is an unofficial, community-created connector. It is not affiliated with, endorsed by, or supported by Columbus School for Girls, Veracross, or Anthropic.
</div>
<div class="section">
<h2>Available Tools</h2>
<div class="tools">
<ul>
<li>Login to Portal</li>
<li>Search Directory</li>
<li>View School Events</li>
<li>Check Lunch Volunteers</li>
<li>Set Default User</li>
<li>Check Authentication</li>
<li>Logout</li>
<li>Clear Credentials</li>
</ul>
</div>
</div>
<div class="section">
<h2>Setup Instructions</h2>
<ol class="steps">
<li>Open Claude.ai and go to your account settings</li>
<li>Navigate to "Custom Connectors" or "MCP Settings"</li>
<li>Click "Add Custom Connector"</li>
<li>Enter the URL below as your connector endpoint</li>
<li>Save and enable the connector</li>
<li>Start using CSG Portal tools in your Claude conversations!</li>
</ol>
</div>
<div class="section">
<h2>Connector URL</h2>
<div class="url-box" id="connector-url"></div>
<button class="copy-button" onclick="copyUrl()">Copy URL</button>
</div>
<div class="section">
<h2>First Time Setup</h2>
<p style="margin-bottom: 1rem;">After adding the connector to Claude.ai:</p>
<ol class="steps">
<li>Ask Claude: "Set me as the default user with email: <code>your-email@example.com</code>"</li>
<li>Ask Claude: "Please log me in to the CSG portal"</li>
<li>A browser window will open for secure authentication</li>
<li>Enter your Veracross credentials</li>
<li>You're ready to use all portal features!</li>
</ol>
</div>
</div>
<script>
// Set the connector URL based on current location
const url = window.location.origin + '/.netlify/functions/mcp-api';
document.getElementById('connector-url').textContent = url;
function copyUrl() {
navigator.clipboard.writeText(url).then(() => {
const button = document.querySelector('.copy-button');
const originalText = button.textContent;
button.textContent = 'Copied!';
setTimeout(() => {
button.textContent = originalText;
}, 2000);
});
}
</script>
</body>
</html>
