Skip to main content
Glama

OpenAI and Claude MCP

by Spysailor
test-mcp.html6.18 kB
<!DOCTYPE html> <html> <head> <title>Test MCP</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } h1 { color: #333; } div { margin-bottom: 15px; } textarea, input, select { width: 100%; padding: 8px; box-sizing: border-box; margin-top: 5px; } button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } pre { background-color: #f5f5f5; padding: 15px; border-radius: 4px; white-space: pre-wrap; } .provider-select { display: flex; justify-content: space-between; margin-bottom: 20px; } .provider-option { flex: 1; padding: 10px; text-align: center; background-color: #f1f1f1; border: 1px solid #ddd; cursor: pointer; } .provider-option.active { background-color: #4CAF50; color: white; } .model-options { margin-top: 10px; } </style> <script> let currentProvider = 'auto'; function setProvider(provider) { currentProvider = provider; document.querySelectorAll('.provider-option').forEach(el => { el.classList.remove('active'); }); document.getElementById(`provider-${provider}`).classList.add('active'); // Mettre à jour les options de modèle en fonction du fournisseur updateModelOptions(); } function updateModelOptions() { const modelSelect = document.getElementById('model'); modelSelect.innerHTML = ''; if (currentProvider === 'openai' || currentProvider === 'auto') { addOption(modelSelect, 'gpt-4', 'GPT-4'); addOption(modelSelect, 'gpt-4-turbo', 'GPT-4 Turbo'); addOption(modelSelect, 'gpt-3.5-turbo', 'GPT-3.5 Turbo'); } if (currentProvider === 'claude' || currentProvider === 'auto') { addOption(modelSelect, 'claude-3-opus-20240229', 'Claude 3 Opus'); addOption(modelSelect, 'claude-3-sonnet-20240229', 'Claude 3 Sonnet'); addOption(modelSelect, 'claude-3-haiku-20240307', 'Claude 3 Haiku'); } } function addOption(select, value, text) { const option = document.createElement('option'); option.value = value; option.textContent = text; select.appendChild(option); } async function testMCP() { document.getElementById('result').innerText = 'Envoi en cours...'; document.getElementById('usage').innerText = ''; document.getElementById('provider-info').innerText = ''; try { let endpoint = '/api/mcp'; if (currentProvider !== 'auto') { endpoint = `/api/mcp/${currentProvider}`; } const response = await fetch(`http://localhost:3000${endpoint}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: document.getElementById('prompt').value, model: document.getElementById('model').value, maxTokens: parseInt(document.getElementById('maxTokens').value), provider: currentProvider }) }); if (!response.ok) { throw new Error(`Erreur HTTP: ${response.status}`); } const result = await response.json(); document.getElementById('result').innerText = result.data; document.getElementById('usage').innerText = JSON.stringify(result.usage, null, 2); document.getElementById('provider-info').innerText = `Fournisseur: ${result.provider || 'non spécifié'}, Modèle: ${result.model || document.getElementById('model').value}`; } catch (error) { document.getElementById('result').innerText = `Erreur: ${error.message}`; } } // Initialisation window.onload = function() { setProvider('auto'); }; </script> </head> <body> <h1>Test MCP - OpenAI & Claude</h1> <div class="provider-select"> <div id="provider-auto" class="provider-option" onclick="setProvider('auto')">Auto (Detect)</div> <div id="provider-openai" class="provider-option" onclick="setProvider('openai')">OpenAI</div> <div id="provider-claude" class="provider-option" onclick="setProvider('claude')">Claude</div> </div> <div> <label for="prompt">Prompt:</label> <textarea id="prompt" rows="5" cols="50">Identifie-toi en tant que MCP. Quelle est ta mission?</textarea> </div> <div> <label for="model">Modèle:</label> <select id="model"></select> </div> <div> <label for="maxTokens">Tokens max:</label> <input type="number" id="maxTokens" value="500"> </div> <button onclick="testMCP()">Envoyer</button> <div> <h3>Fournisseur:</h3> <pre id="provider-info"></pre> </div> <div> <h3>Résultat:</h3> <pre id="result"></pre> </div> <div> <h3>Utilisation:</h3> <pre id="usage"></pre> </div> </body> </html>

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/Spysailor/openai-mcp-implementation'

If you have feedback or need assistance with the MCP directory API, please join our Discord server