webrtc-mcp-chat
Version:
A remote WebRTC chat server with secure temporary rooms and MCP support for background agents
160 lines (146 loc) • 7.09 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebRTC MCP Chat v2.0</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- Join Form -->
<div id="join-form" class="form-container">
<h1>🚀 WebRTC MCP Chat v2.0</h1>
<p class="subtitle">Secure Real-time Communication • Web + MCP + Background Agents</p>
<div class="room-type-selector">
<label class="radio-option">
<input type="radio" name="roomType" value="public" checked>
<span>🌐 Public Room</span>
<small>Open to everyone</small>
</label>
<label class="radio-option">
<input type="radio" name="roomType" value="temporary">
<span>🔐 Temporary Room</span>
<small>Secure, token-required</small>
</label>
</div>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label for="room-id">Room ID:</label>
<input type="text" id="room-id" placeholder="Enter room ID (default: general)" value="general">
</div>
<div id="token-group" class="form-group" style="display: none;">
<label for="room-token">Room Token:</label>
<input type="text" id="room-token" placeholder="Required for temporary rooms">
</div>
<div class="button-group">
<button id="join-btn" class="btn">Join Chat</button>
<button id="create-temp-btn" class="btn btn-secondary" style="display: none;">Create Temporary Room</button>
</div>
</div>
<!-- Temporary Room Creator -->
<div id="temp-room-creator" class="form-container" style="display: none;">
<h2>🔐 Create Secure Temporary Room</h2>
<div class="form-group">
<label for="expires-minutes">Expires in:</label>
<select id="expires-minutes" class="form-control">
<option value="15">15 minutes</option>
<option value="30">30 minutes</option>
<option value="60" selected>1 hour</option>
<option value="120">2 hours</option>
<option value="240">4 hours</option>
<option value="480">8 hours</option>
<option value="1440">24 hours</option>
</select>
</div>
<button id="create-room-btn" class="btn">Create Room</button>
<div id="temp-room-result" class="room-result" style="display: none;">
<!-- Room creation result will be displayed here -->
</div>
</div>
<!-- Main Chat Interface -->
<div id="chat-interface" class="chat-interface hidden">
<div class="chat-header">
<h2>Room: <span id="current-room"></span></h2>
<div class="user-info">
<span>Connected as: <strong id="current-user"></strong></span>
<button id="leave-btn" class="btn btn-small">Leave</button>
</div>
</div>
<div class="chat-main">
<!-- Users Panel -->
<div class="users-panel">
<h3>Users (<span id="user-count">0</span>)</h3>
<div id="users-list"></div>
<div class="connection-status">
<div class="status-indicator" id="connection-status"></div>
<span id="status-text">Connecting...</span>
</div>
</div>
<!-- Chat Panel -->
<div class="chat-panel">
<div id="messages" class="messages"></div>
<div class="message-input">
<input type="text" id="message-input" placeholder="Type your message..." disabled>
<button id="send-btn" class="btn" disabled>Send</button>
</div>
</div>
<!-- Video Panel -->
<div class="video-panel">
<h3>Video Chat</h3>
<div class="video-container">
<video id="local-video" autoplay muted></video>
<div id="remote-videos"></div>
</div>
<div class="video-controls">
<button id="toggle-video" class="btn">📹 Video</button>
<button id="toggle-audio" class="btn">🎤 Audio</button>
<button id="screen-share" class="btn">🖥️ Share</button>
</div>
</div>
</div>
</div>
</div>
<!-- MCP Integration Info -->
<div id="mcp-info" class="mcp-info">
<h3>🤖 Integration & API</h3>
<div class="integration-section">
<h4>CLI for Background Agents</h4>
<code>chat-room create --expires 60 --created-by my-agent</code>
<code>chat-room join <roomId> <token> <username></code>
<code>chat-room send <roomId> <token> <username> "message"</code>
</div>
<div class="integration-section">
<h4>MCP Tools (Cursor IDE)</h4>
<code>create_temp_chat(expiresInMinutes=60, createdBy="agent")</code>
<code>join_temp_chat(roomId="tmp_...", roomToken="...", username="user")</code>
<code>send_temp_message(roomId="tmp_...", roomToken="...", message="hi")</code>
</div>
<div class="integration-section">
<h4>REST API</h4>
<code>POST /api/create-temp-room</code>
<pre>{ "expiresInMinutes": 60, "createdBy": "service" }</pre>
<code>POST /mcp/join</code>
<pre>{ "roomId": "tmp_...", "roomToken": "...", "username": "user" }</pre>
<code>GET /health</code>
<small>Server status and metrics</small>
</div>
<div class="features-info">
<div class="feature-card">
<strong>🌍 Web Users:</strong> Full WebRTC with video, audio, screen sharing
</div>
<div class="feature-card">
<strong>🤖 MCP Users:</strong> Text chat via Cursor IDE and MCP clients
</div>
<div class="feature-card">
<strong>🔧 Background Agents:</strong> CLI tools and REST API for automation
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="app.js"></script>
</body>
</html>