test-mcp.html•6.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>