MCP Tools
- mcp-tools
- public
start.html•11.2 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP工具 - API Key</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #333;
}
.container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 600px;
width: 90%;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.logo {
font-size: 3em;
margin-bottom: 20px;
}
h1 {
color: #2c3e50;
margin-bottom: 30px;
font-size: 2.5em;
font-weight: 700;
}
.api-key-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 15px;
padding: 30px;
margin: 30px 0;
border: 2px dashed #6c757d;
}
.api-key-label {
color: #495057;
font-size: 1.2em;
margin-bottom: 15px;
font-weight: 600;
}
.api-key-display {
background: #212529;
color: #00ff88;
padding: 15px;
border-radius: 10px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.9em;
letter-spacing: 1px;
word-break: break-all;
margin-bottom: 15px;
border: 2px solid #00ff88;
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}
.key-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
.info-card {
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.info-label {
color: #6c757d;
font-size: 0.9em;
margin-bottom: 5px;
}
.info-value {
color: #2c3e50;
font-weight: 600;
font-size: 1.1em;
}
.countdown {
color: #e74c3c;
font-weight: bold;
}
.button-group {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 30px;
}
.btn {
padding: 12px 25px;
border: none;
border-radius: 25px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(102, 126, 234, 0.6);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #5a6268;
transform: translateY(-2px);
}
.btn-success {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
}
.btn-success:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(40, 167, 69, 0.4);
}
.features {
text-align: left;
margin-top: 30px;
background: rgba(248, 249, 250, 0.8);
padding: 20px;
border-radius: 15px;
}
.features h3 {
color: #2c3e50;
margin-bottom: 15px;
text-align: center;
}
.features ul {
list-style: none;
padding: 0;
}
.features li {
padding: 8px 0;
border-bottom: 1px solid rgba(108, 117, 125, 0.2);
color: #495057;
}
.features li:before {
content: "✨ ";
margin-right: 10px;
}
.copy-btn {
background: #17a2b8;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 0.9em;
margin-top: 10px;
transition: all 0.3s ease;
}
.copy-btn:hover {
background: #138496;
}
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #28a745;
margin-right: 8px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
@media (max-width: 768px) {
.key-info {
grid-template-columns: 1fr;
}
.button-group {
flex-direction: column;
}
h1 {
font-size: 2em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="logo">🔑</div>
<h1>MCP 工具平台</h1>
<div class="api-key-section">
<div class="api-key-label">
<span class="status-indicator"></span>
您的 API Key
</div>
<div class="api-key-display" id="apiKeyDisplay">
加载中...
</div>
<button class="copy-btn" onclick="copyApiKey()">📋 复制 API Key</button>
<div class="key-info">
<div class="info-card">
<div class="info-label">过期时间</div>
<div class="info-value" id="expiryTime">--</div>
</div>
<div class="info-card">
<div class="info-label">剩余时间</div>
<div class="info-value countdown" id="timeRemaining">--</div>
</div>
</div>
</div>
<div class="features">
<h3>🚀 平台功能</h3>
<ul>
<li>为Cursor等IDE提供MCP工具调用服务</li>
<li>实时天气查询，支持全国主要城市</li>
<li>强大的数学计算引擎</li>
<li>Word文档自动创建和格式化</li>
<li>表格数据处理和生成</li>
<li>15个专业工具，满足开发需求</li>
</ul>
</div>
<div class="button-group">
<a href="/" class="btn btn-primary">💬 测试对话</a>
<button class="btn btn-secondary" onclick="regenerateApiKey()">🔄 重新生成</button>
<a href="/mcp" class="btn btn-success">🔧 MCP工具</a>
</div>
</div>
<script>
let apiKeyData = null;
let countdownInterval = null;
// 加载API Key信息
async function loadApiKey() {
try {
const response = await fetch('/api/key');
apiKeyData = await response.json();
document.getElementById('apiKeyDisplay').textContent = apiKeyData.apiKey;
document.getElementById('expiryTime').textContent =
new Date(apiKeyData.expiry).toLocaleString('zh-CN');
startCountdown();
} catch (error) {
console.error('加载API Key失败:', error);
document.getElementById('apiKeyDisplay').textContent = '加载失败';
}
}
// 倒计时显示
function startCountdown() {
if (countdownInterval) {
clearInterval(countdownInterval);
}
countdownInterval = setInterval(() => {
const now = Date.now();
const expiry = new Date(apiKeyData.expiry).getTime();
const remaining = expiry - now;
if (remaining <= 0) {
document.getElementById('timeRemaining').textContent = '已过期';
clearInterval(countdownInterval);
loadApiKey(); // 重新加载，服务器会自动生成新的
return;
}
const hours = Math.floor(remaining / (1000 * 60 * 60));
const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((remaining % (1000 * 60)) / 1000);
document.getElementById('timeRemaining').textContent =
`${hours}小时 ${minutes}分钟 ${seconds}秒`;
}, 1000);
}
// 复制API Key
async function copyApiKey() {
try {
await navigator.clipboard.writeText(apiKeyData.apiKey);
const btn = event.target;
const originalText = btn.textContent;
btn.textContent = '✅ 已复制';
btn.style.background = '#28a745';
setTimeout(() => {
btn.textContent = originalText;
btn.style.background = '#17a2b8';
}, 2000);
} catch (error) {
alert('复制失败，请手动复制');
}
}
// 重新生成API Key
async function regenerateApiKey() {
if (!confirm('确定要重新生成API Key吗？旧的Key将立即失效。')) {
return;
}
try {
const response = await fetch('/api/key/regenerate', {
method: 'POST'
});
if (response.ok) {
await loadApiKey();
alert('✅ API Key已重新生成');
} else {
alert('❌ 重新生成失败');
}
} catch (error) {
console.error('重新生成API Key失败:', error);
alert('❌ 重新生成失败');
}
}
// 页面加载时初始化
document.addEventListener('DOMContentLoaded', loadApiKey);
</script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
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/starzzzzzzzzzzzzzz/mcp-tools'
If you have feedback or need assistance with the MCP directory API, please join our Discord server