configurator.html•3.86 kB
<!DOCTYPE html>
<html>
<head>
<title>ClickUp MCP Server Configurator</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; }
.version { border: 1px solid #ddd; padding: 15px; margin: 10px 0; border-radius: 5px; cursor: pointer; }
.version:hover { background: #f5f5f5; }
.version.selected { border-color: #007cba; background: #e7f3ff; }
.config-output { background: #f8f8f8; padding: 15px; border-radius: 5px; font-family: monospace; white-space: pre-wrap; }
input[type="text"] { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 3px; }
button { background: #007cba; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer; }
button:hover { background: #005a8b; }
</style>
</head>
<body>
<h1>🚀 ClickUp MCP Server Configurator</h1>
<h3>1. Select Version:</h3>
<div class="version" data-version="clickup-mcp-server-basic">
<strong>Basic</strong> - Essential tools (~150)
</div>
<div class="version selected" data-version="clickup-mcp-server-enhanced">
<strong>Enhanced ⭐</strong> - Production ready (170+ tools)
</div>
<div class="version" data-version="clickup-mcp-server-efficiency">
<strong>Efficiency 🚀</strong> - Smart shortcuts (170+ tools)
</div>
<div class="version" data-version="clickup-mcp-server-ai">
<strong>AI-Powered 🧠</strong> - Intelligent suggestions (170+ tools)
</div>
<h3>2. Enter API Token:</h3>
<input type="text" id="apiToken" placeholder="Your ClickUp API Token">
<h3>3. Generated Configuration:</h3>
<div class="config-output" id="configOutput"></div>
<button onclick="downloadConfig()">Download Config File</button>
<h3>4. Installation:</h3>
<p>Save the downloaded file as <code>claude_desktop_config.json</code> in:</p>
<ul>
<li><strong>macOS:</strong> <code>~/Library/Application Support/Claude/</code></li>
<li><strong>Windows:</strong> <code>%APPDATA%\Claude\</code></li>
</ul>
<p>Then restart Claude Desktop.</p>
<script>
let selectedVersion = 'clickup-mcp-server-enhanced';
document.querySelectorAll('.version').forEach(el => {
el.addEventListener('click', () => {
document.querySelectorAll('.version').forEach(v => v.classList.remove('selected'));
el.classList.add('selected');
selectedVersion = el.dataset.version;
updateConfig();
});
});
document.getElementById('apiToken').addEventListener('input', updateConfig);
function updateConfig() {
const token = document.getElementById('apiToken').value || 'YOUR_API_TOKEN_HERE';
const config = {
mcpServers: {
clickup: {
command: 'npx',
args: ['-y', selectedVersion],
env: {
CLICKUP_API_TOKEN: token
}
}
}
};
document.getElementById('configOutput').textContent = JSON.stringify(config, null, 2);
}
function downloadConfig() {
const config = document.getElementById('configOutput').textContent;
const blob = new Blob([config], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'claude_desktop_config.json';
a.click();
URL.revokeObjectURL(url);
}
updateConfig();
</script>
</body>
</html>