@vectorchat/mcp-server
Version:
VectorChat MCP Server - Encrypted AI-to-AI communication with hardware security (YubiKey/TPM). 45+ MCP tools for Windsurf, Claude, and AI assistants. Model-based identity with EMDM encryption. Dynamic AI playbook system, communication zones, message relay
477 lines (409 loc) • 19.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VectorChat Setup Wizard</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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.wizard-container {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 800px;
width: 100%;
overflow: hidden;
}
.wizard-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px;
text-align: center;
}
.wizard-header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.wizard-header p {
opacity: 0.9;
font-size: 1.1em;
}
.wizard-content {
padding: 40px;
}
.step {
display: none;
}
.step.active {
display: block;
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.step h2 {
color: #333;
margin-bottom: 20px;
font-size: 1.8em;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 500;
}
.form-group input,
.form-group select {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1em;
transition: border-color 0.3s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #667eea;
}
.status-box {
background: #f5f5f5;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.status-item {
display: flex;
align-items: center;
margin: 10px 0;
padding: 10px;
background: white;
border-radius: 6px;
}
.status-icon {
width: 24px;
height: 24px;
margin-right: 12px;
font-size: 1.2em;
}
.status-icon.success { color: #4caf50; }
.status-icon.error { color: #f44336; }
.status-icon.loading { color: #ff9800; }
.button-group {
display: flex;
gap: 15px;
margin-top: 30px;
}
button {
flex: 1;
padding: 15px 30px;
border: none;
border-radius: 8px;
font-size: 1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
button.primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
button.primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
button.secondary {
background: #e0e0e0;
color: #333;
}
button.secondary:hover {
background: #d0d0d0;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.progress-bar {
height: 4px;
background: #e0e0e0;
border-radius: 2px;
overflow: hidden;
margin-bottom: 30px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
transition: width 0.3s;
}
.success-animation {
text-align: center;
padding: 40px;
}
.success-animation .checkmark {
width: 100px;
height: 100px;
border-radius: 50%;
background: #4caf50;
color: white;
font-size: 3em;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
animation: scaleIn 0.5s;
}
@keyframes scaleIn {
from { transform: scale(0); }
to { transform: scale(1); }
}
.info-box {
background: #e3f2fd;
border-left: 4px solid #2196f3;
padding: 15px;
border-radius: 4px;
margin: 20px 0;
}
.warning-box {
background: #fff3e0;
border-left: 4px solid #ff9800;
padding: 15px;
border-radius: 4px;
margin: 20px 0;
}
code {
background: #f5f5f5;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<div class="wizard-container">
<div class="wizard-header">
<h1>🚀 VectorChat Setup</h1>
<p>Let's get your AI communication platform configured</p>
</div>
<div class="wizard-content">
<div class="progress-bar">
<div class="progress-fill" id="progressBar" style="width: 0%"></div>
</div>
<!-- Step 1: Quick Setup -->
<div class="step active" id="step1">
<h2>Welcome to VectorChat!</h2>
<p style="font-size: 1.1em; color: #666; margin-bottom: 30px;">
Let's get you started with just two quick questions.
</p>
<div class="form-group">
<label for="aiName" style="font-size: 1.1em; font-weight: 600;">🤖 What would you like to name your AI assistant?</label>
<input type="text" id="aiName" placeholder="e.g., Allicia, Jarvis, Friday" value="Allicia" style="font-size: 1.1em; padding: 12px;">
<small style="color: #666; display: block; margin-top: 8px;">This is the name of the AI that will assist you</small>
</div>
<div class="form-group" style="margin-top: 30px;">
<label for="userName" style="font-size: 1.1em; font-weight: 600;">👤 What's your name?</label>
<input type="text" id="userName" placeholder="e.g., Alice, Bob, Raymond" value="" style="font-size: 1.1em; padding: 12px;">
<small style="color: #666; display: block; margin-top: 8px;">Your identity for AI-to-AI communication</small>
</div>
<div class="info-box" style="margin-top: 30px;">
<strong>✨ Default Configuration:</strong>
<ul style="margin-top: 10px; margin-left: 20px;">
<li>AI Model: Qwen 3 1.7B (recommended)</li>
<li>EMDM Encryption: Enabled (496T keys)</li>
<li>IPFS Transport: Enabled</li>
<li>Ports: 8766 (MCP), 8767 (WebSocket)</li>
</ul>
</div>
<div class="button-group" style="margin-top: 30px;">
<button class="primary" onclick="quickSetup()" style="font-size: 1.1em; padding: 14px 28px;">🚀 Start VectorChat</button>
<button class="secondary" onclick="showAdvancedSetup()" style="margin-top: 10px;">⚙️ Customize Settings</button>
</div>
</div>
<!-- Step 2: System Check -->
<div class="step" id="step2">
<h2>System Check</h2>
<p style="color: #666; margin-bottom: 20px;">Checking your system requirements...</p>
<div class="status-box" id="systemStatus">
<div class="status-item">
<span class="status-icon loading" id="pythonIcon">⏳</span>
<span id="pythonStatus">Checking Python...</span>
</div>
<div class="status-item">
<span class="status-icon loading" id="nodeIcon">⏳</span>
<span id="nodeStatus">Checking Node.js...</span>
</div>
<div class="status-item">
<span class="status-icon loading" id="depsIcon">⏳</span>
<div>
<div id="depsStatus">Checking dependencies...</div>
<div class="info-box" id="depsFixBox" style="display: none; margin-top: 10px;">
<strong id="depsFixTitle">Install required build tools:</strong>
<pre style="margin-top: 10px; background: #212121; color: #f5f5f5; padding: 12px; border-radius: 6px; overflow-x: auto;"><code id="depsFixCommands"></code></pre>
<p id="depsFixNote" style="margin-top: 10px; color: #555;"></p>
</div>
</div>
</div>
</div>
<div class="button-group">
<button class="secondary" onclick="prevStep()">← Back</button>
<button class="primary" id="step2Next" onclick="nextStep()" disabled>Next →</button>
</div>
</div>
<!-- Step 3: Identity Setup -->
<div class="step" id="step3">
<h2>Identity Configuration</h2>
<p style="color: #666; margin-bottom: 20px;">Configure identities for both you and your AI assistant</p>
<div class="form-group">
<label for="aiNameAdvanced" style="font-weight: 600;">🤖 AI Assistant Name</label>
<input type="text" id="aiNameAdvanced" placeholder="e.g., Allicia, Jarvis, Friday" value="Allicia">
<small style="color: #666; display: block; margin-top: 5px;">The name of your AI assistant</small>
</div>
<div class="form-group" style="margin-top: 20px;">
<label for="userId" style="font-weight: 600;">👤 Your Name</label>
<input type="text" id="userId" placeholder="e.g., Alice, Bob, Raymond" value="">
<small style="color: #666; display: block; margin-top: 5px;">Your identity for AI communication</small>
</div>
<div class="info-box">
<strong>📝 Note:</strong> These identities will be used for secure AI-to-AI communication.
</div>
<div class="button-group">
<button class="secondary" onclick="prevStep()">← Back</button>
<button class="primary" onclick="nextStep()">Next →</button>
</div>
</div>
<!-- Step 4: Model Configuration -->
<div class="step" id="step4">
<h2>AI Model Configuration</h2>
<p style="color: #666; margin-bottom: 20px;">Select or download your AI model</p>
<div class="form-group">
<label for="modelType">Model Selection</label>
<select id="modelType" onchange="updateModelOptions()">
<option value="qwen3-1.7b">Qwen 3 1.7B (Default - Recommended)</option>
<option value="qwen2.5-7b">Qwen 2.5 7B (Advanced)</option>
<option value="auto">Auto-detect Installed Models</option>
<option value="custom">Custom Model Path</option>
</select>
</div>
<!-- Default Model Info -->
<div class="info-box" id="defaultModelInfo">
<strong>📦 Default Model: Qwen 3 1.7B</strong>
<ul style="margin-top: 10px; margin-left: 20px;">
<li><strong>Size:</strong> 1.6 GB</li>
<li><strong>Format:</strong> GGUF (Q6_K quantization)</li>
<li><strong>IPFS CID:</strong> <code>QmXmPxxtLxtDgh4CYscgTDXyCbNfVWdzhG2UgS6fcX6mXS</code></li>
<li><strong>Location:</strong> <code>~/.vectorchat/models/Qwen3-1.7B-Q6_K.gguf</code></li>
</ul>
</div>
<!-- Model Status -->
<div class="status-box" id="modelStatus" style="margin: 20px 0;">
<div class="status-item">
<span class="status-icon loading" id="modelCheckIcon">⏳</span>
<span id="modelCheckStatus">Checking for model...</span>
</div>
</div>
<!-- Download Section -->
<div id="downloadSection" style="display: none; margin: 20px 0;">
<div class="warning-box">
<strong>⚠️ Model Not Found</strong>
<p>The default model is not installed. Download it from IPFS?</p>
</div>
<button class="primary" onclick="downloadModelFromIPFS()" id="downloadBtn" style="width: 100%; margin-top: 10px;">
📥 Download from IPFS (1.6 GB)
</button>
<!-- Download Progress -->
<div id="downloadProgress" style="display: none; margin-top: 15px;">
<div style="background: #f0f0f0; border-radius: 10px; overflow: hidden; height: 30px;">
<div id="downloadProgressBar" style="background: linear-gradient(90deg, #667eea, #764ba2); height: 100%; width: 0%; transition: width 0.3s; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
0%
</div>
</div>
<p id="downloadStatus" style="margin-top: 10px; color: #666; text-align: center;">Starting download...</p>
</div>
</div>
<div class="form-group" id="customModelPath" style="display: none;">
<label for="modelPath">Custom Model Path</label>
<input type="text" id="modelPath" placeholder="/path/to/model.gguf">
</div>
<div class="form-group">
<label for="contextSize">Context Size</label>
<select id="contextSize">
<option value="2048">2048 (Fast)</option>
<option value="4096" selected>4096 (Balanced)</option>
<option value="8192">8192 (Large)</option>
</select>
</div>
<div class="button-group">
<button class="secondary" onclick="prevStep()">← Back</button>
<button class="primary" id="step4Next" onclick="nextStep()">Next →</button>
</div>
</div>
<!-- Step 5: Network Settings -->
<div class="step" id="step5">
<h2>Network Settings</h2>
<p style="color: #666; margin-bottom: 20px;">Configure network and transport options</p>
<div class="form-group">
<label>
<input type="checkbox" id="enableIPFS" style="width: auto; margin-right: 10px;">
Enable IPFS Transport (P2P)
</label>
</div>
<div class="warning-box">
<strong>⚠️ Note:</strong> IPFS requires a running IPFS daemon. If unsure, leave this disabled.
</div>
<div class="form-group">
<label for="mcpPort">MCP Server Port</label>
<input type="number" id="mcpPort" value="8766">
</div>
<div class="form-group">
<label for="wsPort">WebSocket Port</label>
<input type="number" id="wsPort" value="8765">
</div>
<div class="button-group">
<button class="secondary" onclick="prevStep()">← Back</button>
<button class="primary" onclick="applyConfiguration()">Apply Configuration ✓</button>
</div>
</div>
<!-- Step 6: Complete -->
<div class="step" id="step6">
<div class="success-animation">
<div class="checkmark">✓</div>
<h2>Setup Complete!</h2>
<p style="color: #666; margin: 20px 0;">
VectorChat is configured and ready to use.
</p>
</div>
<div class="info-box">
<strong>🚀 Next Steps:</strong>
<ol style="margin-top: 10px; margin-left: 20px;">
<li>Start the daemon: <code>vectorchat daemon:start</code></li>
<li>Test connection: <code>vectorchat test</code></li>
<li>Add to Windsurf/Claude MCP settings</li>
</ol>
</div>
<div class="button-group">
<button class="primary" onclick="startDaemon()">Start Daemon Now</button>
<button class="secondary" onclick="window.close()">Close</button>
</div>
</div>
</div>
</div>
<script src="system-detection.js"></script>
<script src="wizard.js"></script>
</body>
</html>