test_react_integration.html•10.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP Integration Test</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.status {
padding: 10px;
border-radius: 4px;
margin-bottom: 20px;
}
.status.connected {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status.disconnected {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.test-section {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background: #0056b3;
}
button:disabled {
background: #ccc;
cursor: not-allowed;
}
input, textarea {
width: 100%;
padding: 8px;
margin: 5px 0;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
.response {
background: #f8f9fa;
padding: 10px;
border-radius: 4px;
margin-top: 10px;
white-space: pre-wrap;
border-left: 4px solid #007bff;
}
.error {
background: #f8d7da;
color: #721c24;
padding: 10px;
border-radius: 4px;
margin-top: 10px;
border-left: 4px solid #dc3545;
}
.models {
background: #e2f3ff;
padding: 10px;
border-radius: 4px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>MCP Integration Test</h1>
<div id="status" class="status disconnected">
Checking connection...
</div>
<div class="test-section">
<h3>1. Health Check</h3>
<button onclick="checkHealth()">Check Health</button>
<div id="health-response"></div>
</div>
<div class="test-section">
<h3>2. Available Models</h3>
<button onclick="getModels()">Get Models</button>
<div id="models-response"></div>
</div>
<div class="test-section">
<h3>3. Echo Test</h3>
<input type="text" id="echo-input" placeholder="Enter text to echo" value="Hello MCP!">
<button onclick="testEcho()">Test Echo</button>
<div id="echo-response"></div>
</div>
<div class="test-section">
<h3>4. Chat Test</h3>
<textarea id="chat-input" placeholder="Enter your message" rows="3">What is the capital of France? Answer with just the city name.</textarea>
<select id="model-select">
<option value="mistral:latest">mistral:latest</option>
</select>
<button onclick="testChat()">Send Chat</button>
<div id="chat-response"></div>
</div>
<div class="test-section">
<h3>5. Memory Test</h3>
<input type="text" id="memory-conv-id" placeholder="Conversation ID" value="test_conversation">
<textarea id="memory-content" placeholder="Content to store" rows="2">User asked about France's capital</textarea>
<button onclick="storeMemory()">Store Memory</button>
<button onclick="getMemory()">Get Memory</button>
<div id="memory-response"></div>
</div>
</div>
<script>
const MCP_BASE_URL = 'http://localhost:8000';
async function apiCall(endpoint, options = {}) {
try {
const response = await fetch(`${MCP_BASE_URL}${endpoint}`, {
headers: {
'Content-Type': 'application/json',
...options.headers
},
...options
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return await response.json();
} catch (error) {
throw new Error(`Request failed: ${error.message}`);
}
}
async function checkHealth() {
const responseDiv = document.getElementById('health-response');
const statusDiv = document.getElementById('status');
try {
const data = await apiCall('/health');
responseDiv.innerHTML = `<div class="response">${JSON.stringify(data, null, 2)}</div>`;
statusDiv.className = 'status connected';
statusDiv.textContent = `Connected - ${data.available_models?.length || 0} models available`;
// Update model select
const modelSelect = document.getElementById('model-select');
if (data.available_models) {
modelSelect.innerHTML = data.available_models
.map(model => `<option value="${model}">${model}</option>`)
.join('');
}
} catch (error) {
responseDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
statusDiv.className = 'status disconnected';
statusDiv.textContent = 'Disconnected - Server not responding';
}
}
async function getModels() {
const responseDiv = document.getElementById('models-response');
try {
const data = await apiCall('/api/models');
responseDiv.innerHTML = `<div class="models">${JSON.stringify(data, null, 2)}</div>`;
} catch (error) {
responseDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
}
}
async function testEcho() {
const responseDiv = document.getElementById('echo-response');
const input = document.getElementById('echo-input').value;
try {
const data = await apiCall('/api/echo', {
method: 'POST',
body: JSON.stringify({ text: input })
});
responseDiv.innerHTML = `<div class="response">Echo: ${data.text}</div>`;
} catch (error) {
responseDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
}
}
async function testChat() {
const responseDiv = document.getElementById('chat-response');
const message = document.getElementById('chat-input').value;
const model = document.getElementById('model-select').value;
responseDiv.innerHTML = '<div class="response">Sending to LLM...</div>';
try {
const data = await apiCall('/api/chat', {
method: 'POST',
body: JSON.stringify({
message: message,
model: model,
temperature: 0.7,
max_tokens: 100
})
});
responseDiv.innerHTML = `
<div class="response">
<strong>Response:</strong> ${data.response}
<br><strong>Model:</strong> ${data.model}
<br><strong>Provider:</strong> ${data.provider}
</div>
`;
} catch (error) {
responseDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
}
}
async function storeMemory() {
const responseDiv = document.getElementById('memory-response');
const convId = document.getElementById('memory-conv-id').value;
const content = document.getElementById('memory-content').value;
try {
const data = await apiCall('/api/memory/store', {
method: 'POST',
body: JSON.stringify({
conversation_id: convId,
content: content,
metadata: { source: 'test_page' },
role: 'user'
})
});
responseDiv.innerHTML = `<div class="response">Memory stored with ID: ${data.memory_id}</div>`;
} catch (error) {
responseDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
}
}
async function getMemory() {
const responseDiv = document.getElementById('memory-response');
const convId = document.getElementById('memory-conv-id').value;
try {
const data = await apiCall('/api/memory/get', {
method: 'POST',
body: JSON.stringify({
conversation_id: convId,
limit: 10
})
});
responseDiv.innerHTML = `
<div class="response">
<strong>Found ${data.count} memories:</strong>
<pre>${JSON.stringify(data.memories, null, 2)}</pre>
</div>
`;
} catch (error) {
responseDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
}
}
// Check health on page load
window.onload = checkHealth;
</script>
</body>
</html>