mcp_chat_interface.htmlβ’13.3 kB
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP Git μ±ν
μΈν°νμ΄μ€</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 100vh;
}
.chat-container {
max-width: 1000px;
margin: 20px auto;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
height: calc(100vh - 40px);
}
.chat-header {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: white;
padding: 20px;
border-radius: 15px 15px 0 0;
text-align: center;
}
.chat-header h1 {
margin: 0;
font-size: 24px;
}
.chat-header p {
margin: 5px 0 0 0;
opacity: 0.8;
font-size: 14px;
}
.chat-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
background: #f8f9fa;
}
.message {
margin-bottom: 20px;
display: flex;
align-items: flex-start;
}
.message.user {
justify-content: flex-end;
}
.message.assistant {
justify-content: flex-start;
}
.message-content {
max-width: 70%;
padding: 15px 20px;
border-radius: 20px;
position: relative;
word-wrap: break-word;
}
.message.user .message-content {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-bottom-right-radius: 5px;
}
.message.assistant .message-content {
background: white;
color: #333;
border: 1px solid #e9ecef;
border-bottom-left-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.message-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
}
.message.user .message-avatar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.message.assistant .message-avatar {
background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
color: white;
}
.chat-input-container {
padding: 20px;
background: white;
border-radius: 0 0 15px 15px;
border-top: 1px solid #e9ecef;
}
.chat-input-wrapper {
display: flex;
gap: 10px;
}
.chat-input {
flex: 1;
padding: 15px;
border: 2px solid #e9ecef;
border-radius: 25px;
font-size: 16px;
outline: none;
transition: border-color 0.3s;
}
.chat-input:focus {
border-color: #667eea;
}
.send-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 15px 25px;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
transition: transform 0.2s;
}
.send-button:hover {
transform: translateY(-2px);
}
.send-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.quick-actions {
display: flex;
gap: 10px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.quick-action-btn {
background: #f8f9fa;
border: 1px solid #e9ecef;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.quick-action-btn:hover {
background: #667eea;
color: white;
border-color: #667eea;
}
.typing-indicator {
display: none;
padding: 15px 20px;
background: white;
border-radius: 20px;
border: 1px solid #e9ecef;
margin-bottom: 20px;
color: #666;
font-style: italic;
}
.typing-indicator.show {
display: block;
}
.message-time {
font-size: 12px;
opacity: 0.7;
margin-top: 5px;
}
.message.user .message-time {
text-align: right;
}
.message.assistant .message-time {
text-align: left;
}
.tool-info {
background: #e3f2fd;
border-left: 4px solid #2196f3;
padding: 10px;
margin-top: 10px;
border-radius: 0 5px 5px 0;
font-size: 12px;
color: #1976d2;
}
.error-message {
background: #ffebee;
border-left: 4px solid #f44336;
padding: 10px;
margin-top: 10px;
border-radius: 0 5px 5px 0;
font-size: 12px;
color: #c62828;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h1>π€ MCP Git μ±ν
μ΄μμ€ν΄νΈ</h1>
<p>μμ°μ€λ½κ² λννλ©΄μ Git μμ
μ μ§νν΄λ³΄μΈμ!</p>
</div>
<div class="chat-messages" id="chatMessages">
<div class="message assistant">
<div class="message-avatar">π€</div>
<div class="message-content">
μλ
νμΈμ! μ λ MCP Git μ΄μμ€ν΄νΈμ
λλ€.
<br><br>
μ΄λ€ Git μμ
μ λμλ릴κΉμ?
<br><br>
μμ:
β’ "νμ¬ Git μνλ₯Ό νμΈν΄μ€"
β’ "λ³κ²½μ¬νμ μ€ν
μ΄μ§νκ³ μ»€λ°ν΄μ€"
β’ "μλ‘μ΄ νμΌμ μΆκ°νκ³ νΈμν΄μ€"
<div class="message-time" id="currentTime"></div>
</div>
</div>
</div>
<div class="chat-input-container">
<div class="quick-actions">
<button class="quick-action-btn" onclick="sendQuickMessage('νμ¬ Git μνλ₯Ό νμΈν΄μ€')">π Git μν νμΈ</button>
<button class="quick-action-btn" onclick="sendQuickMessage('λ³κ²½μ¬νμ λͺ¨λ μ€ν
μ΄μ§ν΄μ€')">π μ€ν
μ΄μ§</button>
<button class="quick-action-btn" onclick="sendQuickMessage('컀λ°μ μμ±ν΄μ€')">πΎ 컀λ°</button>
<button class="quick-action-btn" onclick="sendQuickMessage('μ격 μ μ₯μμ νΈμν΄μ€')">π νΈμ</button>
</div>
<div class="typing-indicator" id="typingIndicator">
π€ MCP ν΄λΌμ΄μΈνΈκ° μμ
μ€μ
λλ€...
</div>
<div class="chat-input-wrapper">
<input type="text" class="chat-input" id="chatInput" placeholder="Git μμ
μ λν΄ μμ°μ€λ½κ² λ§ν΄λ³΄μΈμ..." onkeypress="handleKeyPress(event)">
<button class="send-button" id="sendButton" onclick="sendMessage()">μ μ‘</button>
</div>
</div>
</div>
<script>
const MCP_BASE_URL = 'http://localhost:8081';
let currentThreadId = 'chat_interface_' + Date.now();
let isProcessing = false;
// νμ¬ μκ° νμ
function updateCurrentTime() {
const now = new Date();
const timeString = now.toLocaleTimeString('ko-KR');
document.getElementById('currentTime').textContent = timeString;
}
updateCurrentTime();
setInterval(updateCurrentTime, 1000);
// λ©μμ§ μ μ‘
async function sendMessage() {
const input = document.getElementById('chatInput');
const message = input.value.trim();
if (!message || isProcessing) return;
// μ¬μ©μ λ©μμ§ νμ
addMessage(message, 'user');
input.value = '';
// AI μλ΅ λκΈ°
await getAIResponse(message);
}
// λΉ λ₯Έ λ©μμ§ μ μ‘
function sendQuickMessage(message) {
document.getElementById('chatInput').value = message;
sendMessage();
}
// ν€λ³΄λ μ΄λ²€νΈ μ²λ¦¬
function handleKeyPress(event) {
if (event.key === 'Enter') {
sendMessage();
}
}
// λ©μμ§ μΆκ°
function addMessage(content, sender) {
const messagesContainer = document.getElementById('chatMessages');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}`;
const avatar = sender === 'user' ? 'π€' : 'π€';
const time = new Date().toLocaleTimeString('ko-KR');
messageDiv.innerHTML = `
<div class="message-avatar">${avatar}</div>
<div class="message-content">
${content}
<div class="message-time">${time}</div>
</div>
`;
messagesContainer.appendChild(messageDiv);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
// AI μλ΅ λ°κΈ°
async function getAIResponse(userMessage) {
isProcessing = true;
document.getElementById('sendButton').disabled = true;
document.getElementById('typingIndicator').classList.add('show');
try {
const response = await fetch(`${MCP_BASE_URL}/chat`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: userMessage,
thread_id: currentThreadId
})
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
// μλ΅ λ΄μ© νμ±
let responseContent = result.response;
// μ¬μ©λ λꡬ μ 보 μΆκ°
if (result.used_tools && result.used_tools.length > 0) {
responseContent += '\n\nπ§ μ¬μ©λ λꡬλ€:';
result.used_tools.forEach(tool => {
responseContent += `\nβ’ ${tool.name}`;
if (tool.result) {
try {
const toolResult = JSON.parse(tool.result);
if (toolResult.success) {
responseContent += ' β
';
} else {
responseContent += ' β';
}
} catch (e) {
responseContent += ' β οΈ';
}
}
});
}
// μλ¬κ° μλ κ²½μ° νμ
if (result.status === 'error') {
responseContent += '\n\nβ μ€λ₯κ° λ°μνμ΅λλ€.';
}
addMessage(responseContent, 'assistant');
} catch (error) {
console.error('MCP API νΈμΆ μ€λ₯:', error);
addMessage(`β μ€λ₯κ° λ°μνμ΅λλ€: ${error.message}`, 'assistant');
} finally {
isProcessing = false;
document.getElementById('sendButton').disabled = false;
document.getElementById('typingIndicator').classList.remove('show');
}
}
// νμ΄μ§ λ‘λ μ μ΄κΈ°ν
window.onload = function() {
document.getElementById('chatInput').focus();
};
</script>
</body>
</html>