Notes MCP Server
by lductrong
- MCP
- templates
chat.html•7.66 kB
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notes Chat - Quản lý Ghi chú</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.chat-container {
width: 90%;
max-width: 800px;
height: 90vh;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
text-align: center;
}
.chat-header h1 {
font-size: 24px;
margin-bottom: 5px;
}
.chat-header p {
font-size: 14px;
opacity: 0.9;
}
.chat-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
background: #f5f5f5;
}
.message {
margin-bottom: 15px;
display: flex;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message.user {
justify-content: flex-end;
}
.message-content {
max-width: 70%;
padding: 12px 16px;
border-radius: 18px;
word-wrap: break-word;
white-space: pre-wrap;
}
.message.user .message-content {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.message.bot .message-content {
background: white;
color: #333;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.chat-input-container {
padding: 20px;
background: white;
border-top: 1px solid #e0e0e0;
}
.chat-input-form {
display: flex;
gap: 10px;
}
.chat-input {
flex: 1;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 25px;
font-size: 14px;
outline: none;
transition: border-color 0.3s;
}
.chat-input:focus {
border-color: #667eea;
}
.send-button {
padding: 12px 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: transform 0.2s;
}
.send-button:hover {
transform: scale(1.05);
}
.send-button:active {
transform: scale(0.95);
}
.send-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.loading {
display: none;
text-align: center;
padding: 10px;
color: #666;
}
.loading.active {
display: block;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h1>📝 Notes Chat</h1>
<p>Quản lý ghi chú của bạn bằng chat</p>
</div>
<div class="chat-messages" id="chatMessages">
<div class="message bot">
<div class="message-content">
Xin chào! 👋 Tôi là trợ lý quản lý ghi chú của bạn.
Các lệnh bạn có thể dùng:
• liệt kê - Xem tất cả ghi chú
• tạo "Tiêu đề" "Nội dung" - Tạo ghi chú mới
• đọc [ID] - Đọc ghi chú
• xóa [ID] - Xóa ghi chú
• tìm [từ khóa] - Tìm kiếm ghi chú
</div>
</div>
</div>
<div class="loading" id="loading">Đang xử lý...</div>
<div class="chat-input-container">
<form class="chat-input-form" id="chatForm">
<input
type="text"
class="chat-input"
id="messageInput"
placeholder="Nhập lệnh của bạn..."
autocomplete="off"
required
>
<button type="submit" class="send-button" id="sendButton">Gửi</button>
</form>
</div>
</div>
<script>
const chatMessages = document.getElementById('chatMessages');
const chatForm = document.getElementById('chatForm');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
const loading = document.getElementById('loading');
function addMessage(content, isUser = false) {
const messageDiv = document.createElement('div');
messageDiv.className = `message ${isUser ? 'user' : 'bot'}`;
const contentDiv = document.createElement('div');
contentDiv.className = 'message-content';
contentDiv.textContent = content;
messageDiv.appendChild(contentDiv);
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
async function sendMessage(message) {
try {
loading.classList.add('active');
sendButton.disabled = true;
const response = await fetch('/api/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message: message })
});
const data = await response.json();
if (data.error) {
addMessage('❌ Lỗi: ' + data.error);
} else {
addMessage(data.response);
}
} catch (error) {
addMessage('❌ Lỗi kết nối: ' + error.message);
} finally {
loading.classList.remove('active');
sendButton.disabled = false;
}
}
chatForm.addEventListener('submit', async (e) => {
e.preventDefault();
const message = messageInput.value.trim();
if (!message) return;
addMessage(message, true);
messageInput.value = '';
await sendMessage(message);
});
messageInput.focus();
</script>
</body>
</html>
Latest Blog Posts
- The Operational Metrics and Agent Analytics Driving Successful Model Context Protocol (MCP) ServersBy Om-Shree-0709 on .observabilitymcpAgent-Analytics
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/lductrong/MCP'
If you have feedback or need assistance with the MCP directory API, please join our Discord server