OpenAI MCP Server

  • templates
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>OpenAI Code Assistant MCP Server</title> <link rel="stylesheet" href="/static/style.css"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <div class="container"> <h1>OpenAI Code Assistant MCP Server</h1> <div class="stats-grid"> <div class="stat-card"> <div class="stat-label">Status</div> <div class="stat-value" style="color: #27ae60;">{{ status }}</div> </div> <div class="stat-card"> <div class="stat-label">Uptime</div> <div class="stat-value">{{ uptime }}</div> </div> <div class="stat-card"> <div class="stat-label">Requests Served</div> <div class="stat-value">{{ request_count }}</div> </div> <div class="stat-card"> <div class="stat-label">Cache Hit Ratio</div> <div class="stat-value">{{ cache_hit_ratio }}%</div> </div> </div> <div class="card"> <div class="card-header">System Status</div> <div class="card-body"> <canvas id="requestsChart" height="100"></canvas> </div> </div> <h2>Available Models</h2> <div class="card"> <div class="card-body"> <div class="template-grid"> {% for model in models %} <div class="stat-card"> <div class="stat-label">Model</div> <div class="stat-value" style="font-size: 20px;">{{ model }}</div> </div> {% endfor %} </div> </div> </div> <h2>Available Prompt Templates</h2> <div class="template-grid"> {% for template in templates %} <div class="card"> <div class="card-header">{{ template.id }}</div> <div class="card-body"> <p><strong>Description:</strong> {{ template.description }}</p> {% if template.parameters %} <p><strong>Parameters:</strong></p> <ul class="parameter-list"> {% for param in template.parameters %} <li>{{ param }}</li> {% endfor %} </ul> {% else %} <p><em>No parameters required</em></p> {% endif %} <p><strong>Default Model:</strong> <span class="tag">{{ template.default_model }}</span></p> <div style="margin-top: 15px;"> <button class="btn btn-primary" onclick="testTemplate('{{ template.id }}')">Test Template</button> </div> </div> </div> {% endfor %} </div> <h2>API Documentation</h2> <div class="card"> <div class="card-body"> <p>Explore the API using the interactive documentation:</p> <a href="/docs" class="btn btn-primary">Swagger UI</a> <a href="/redoc" class="btn btn-secondary">ReDoc</a> <a href="/metrics" class="btn btn-info">Prometheus Metrics</a> </div> </div> <div class="footer"> <p>OpenAI Code Assistant MCP Server &copy; 2025</p> </div> </div> <!-- Template Test Modal --> <div id="templateModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000;"> <div style="background-color: white; margin: 10% auto; padding: 20px; width: 80%; max-width: 600px; border-radius: 8px;"> <h3 id="modalTitle">Test Template</h3> <div id="modalContent"> <div id="parameterInputs"></div> <div style="margin-top: 20px;"> <button class="btn btn-primary" onclick="submitTemplateTest()">Generate Context</button> <button class="btn btn-secondary" onclick="closeModal()">Cancel</button> </div> </div> <div id="resultContent" style="display: none; margin-top: 20px;"> <h4>Generated Context:</h4> <pre id="contextResult" style="background-color: #f5f5f5; padding: 10px; border-radius: 4px; overflow-x: auto;"></pre> <button class="btn btn-secondary" onclick="closeResults()">Close</button> </div> </div> </div> <script> // Sample data for the chart - in a real implementation, this would come from the server const ctx = document.getElementById('requestsChart').getContext('2d'); const requestsChart = new Chart(ctx, { type: 'line', data: { labels: Array.from({length: 12}, (_, i) => `${i*5} min ago`).reverse(), datasets: [{ label: 'Requests', data: [12, 19, 3, 5, 2, 3, 20, 33, 23, 12, 5, 3], borderColor: '#3498db', tension: 0.1, fill: false }] }, options: { responsive: true, scales: { y: { beginAtZero: true } } } }); // Template testing functionality let currentTemplate = ''; function testTemplate(templateId) { currentTemplate = templateId; document.getElementById('modalTitle').textContent = `Test Template: ${templateId}`; document.getElementById('parameterInputs').innerHTML = ''; document.getElementById('resultContent').style.display = 'none'; // Fetch template details fetch(`/prompts/${templateId}`) .then(response => response.json()) .then(template => { const parametersDiv = document.getElementById('parameterInputs'); // Create input fields for each parameter for (const [paramName, paramInfo] of Object.entries(template.parameters)) { const paramDiv = document.createElement('div'); paramDiv.style.marginBottom = '15px'; const label = document.createElement('label'); label.textContent = `${paramName}: ${paramInfo.description || ''}`; label.style.display = 'block'; label.style.marginBottom = '5px'; const input = document.createElement('input'); input.type = 'text'; input.id = `param-${paramName}`; input.style.width = '100%'; input.style.padding = '8px'; input.style.borderRadius = '4px'; input.style.border = '1px solid #ddd'; paramDiv.appendChild(label); paramDiv.appendChild(input); parametersDiv.appendChild(paramDiv); } // Show the modal document.getElementById('templateModal').style.display = 'block'; }) .catch(error => { console.error('Error fetching template:', error); alert('Error fetching template details'); }); } function submitTemplateTest() { // Collect parameter values const parameters = {}; const inputs = document.querySelectorAll('[id^="param-"]'); inputs.forEach(input => { const paramName = input.id.replace('param-', ''); parameters[paramName] = input.value; }); // Call the context API fetch('/context', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt_id: currentTemplate, parameters: parameters }) }) .then(response => response.json()) .then(data => { // Display the result document.getElementById('contextResult').textContent = data.context; document.getElementById('modalContent').style.display = 'none'; document.getElementById('resultContent').style.display = 'block'; }) .catch(error => { console.error('Error generating context:', error); alert('Error generating context'); }); } function closeModal() { document.getElementById('templateModal').style.display = 'none'; } function closeResults() { document.getElementById('resultContent').style.display = 'none'; document.getElementById('modalContent').style.display = 'block'; closeModal(); } // Close modal when clicking outside window.onclick = function(event) { const modal = document.getElementById('templateModal'); if (event.target === modal) { closeModal(); } } </script> </body> </html>