Add static web files from shinhan-mcp-prebuild
This commit is contained in:
jade
512
src/main/resources/static/index.html
Normal file
512
src/main/resources/static/index.html
Normal file
@@ -0,0 +1,512 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Shinhan AI MCP Gateway</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Pretendard:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Pretendard', 'sans-serif'],
|
||||||
|
outfit: ['Outfit', 'sans-serif'],
|
||||||
|
mono: ['Fira Code', 'monospace']
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
50: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#3b82f6',
|
||||||
|
600: '#2563eb',
|
||||||
|
900: '#1e3a8a',
|
||||||
|
950: '#172554',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'float': 'float 8s ease-in-out infinite',
|
||||||
|
'float-delayed': 'float 8s ease-in-out 4s infinite',
|
||||||
|
'spin-slow': 'spin 3s linear infinite',
|
||||||
|
'pulse-glow': 'pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
'float': {
|
||||||
|
'0%, 100%': { transform: 'translateY(0px) scale(1)' },
|
||||||
|
'50%': { transform: 'translateY(-20px) scale(1.05)' },
|
||||||
|
},
|
||||||
|
'pulse-glow': {
|
||||||
|
'0%, 100%': { opacity: 0.5, transform: 'scale(1)' },
|
||||||
|
'50%': { opacity: 1, transform: 'scale(1.05)' },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #020617; /* slate-950 */
|
||||||
|
color: #f8fafc;
|
||||||
|
overflow-x: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Premium Dark Grid Background */
|
||||||
|
.bg-grid {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background-size: 40px 40px;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||||
|
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
|
||||||
|
-webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(15, 23, 42, 0.6); /* slate-900 */
|
||||||
|
backdrop-filter: blur(24px);
|
||||||
|
-webkit-backdrop-filter: blur(24px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-premium {
|
||||||
|
background: rgba(30, 41, 59, 0.5); /* slate-800 */
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
color: #f8fafc;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-premium:focus {
|
||||||
|
background: rgba(30, 41, 59, 0.8);
|
||||||
|
border-color: #3b82f6;
|
||||||
|
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), inset 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styling the select options for a dark theme (browser native fallback) */
|
||||||
|
select.input-premium option, select.input-premium optgroup {
|
||||||
|
background: #1e293b;
|
||||||
|
color: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.json-pre {
|
||||||
|
background: transparent;
|
||||||
|
color: #cbd5e1;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-glow {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.btn-glow::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -2px;
|
||||||
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
|
||||||
|
background-size: 200% auto;
|
||||||
|
z-index: -1;
|
||||||
|
border-radius: 12px;
|
||||||
|
filter: blur(10px);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.4s ease;
|
||||||
|
animation: gradient-shift 3s linear infinite;
|
||||||
|
}
|
||||||
|
.btn-glow:hover::before {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
@keyframes gradient-shift {
|
||||||
|
0% { background-position: 0% center; }
|
||||||
|
100% { background-position: 200% center; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading Overlay Overlay */
|
||||||
|
#loadingOverlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(15, 23, 42, 0.85);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 50;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.4s ease;
|
||||||
|
}
|
||||||
|
#loadingOverlay.active {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modern Spinner */
|
||||||
|
.modern-spinner {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid rgba(59, 130, 246, 0.1);
|
||||||
|
border-top-color: #3b82f6;
|
||||||
|
border-right-color: #8b5cf6;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom Scrollbar */
|
||||||
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||||
|
::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.5); }
|
||||||
|
::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.8); border-radius: 10px; }
|
||||||
|
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 1); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="antialiased selection:bg-brand-500/30 selection:text-brand-50">
|
||||||
|
|
||||||
|
<div class="bg-grid"></div>
|
||||||
|
|
||||||
|
<!-- Premium Glowing Orbs -->
|
||||||
|
<div class="fixed top-0 left-[20%] w-[500px] h-[500px] bg-brand-600/20 rounded-full mix-blend-screen filter blur-[120px] animate-float pointer-events-none"></div>
|
||||||
|
<div class="fixed bottom-0 right-[20%] w-[600px] h-[600px] bg-purple-600/20 rounded-full mix-blend-screen filter blur-[150px] animate-float-delayed pointer-events-none"></div>
|
||||||
|
|
||||||
|
<div class="max-w-[850px] w-full px-5 z-10 relative flex flex-col">
|
||||||
|
|
||||||
|
<!-- Header (Luxurious) -->
|
||||||
|
<div class="text-center space-y-4 mb-8 shrink-0 pt-6 relative">
|
||||||
|
<!-- Agent ID Mini Badge -->
|
||||||
|
<div class="absolute right-0 top-2 flex items-center bg-slate-800/50 border border-slate-700/50 rounded-lg px-3 py-1.5 shadow-sm">
|
||||||
|
<svg class="w-3.5 h-3.5 mr-1.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
|
||||||
|
<input type="text" id="agentId" name="agentId" value="AGENT-AI-1" class="bg-transparent border-none text-xs text-slate-300 font-mono focus:outline-none w-20 text-right" readonly>
|
||||||
|
</div>
|
||||||
|
<div class="inline-flex items-center px-3 py-1 rounded-full border border-brand-500/30 bg-brand-500/10 text-brand-400 text-[10px] font-bold uppercase tracking-[0.2em] mb-2">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-brand-400 mr-2 animate-pulse"></span>
|
||||||
|
Next-Gen Router
|
||||||
|
</div>
|
||||||
|
<h1 class="text-5xl font-outfit font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-br from-white via-slate-200 to-slate-500 drop-shadow-sm">
|
||||||
|
AI MCP Gateway
|
||||||
|
</h1>
|
||||||
|
<p class="text-sm text-slate-400 font-medium tracking-wide">
|
||||||
|
엔터프라이즈 환경을 위한 차세대 통합 라우팅 시스템
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Configuration Panel -->
|
||||||
|
<div class="glass-panel rounded-[2rem] p-8 relative shrink-0">
|
||||||
|
|
||||||
|
<!-- Loading Overlay -->
|
||||||
|
<div id="loadingOverlay">
|
||||||
|
<div class="relative w-16 h-16 mb-6">
|
||||||
|
<div class="modern-spinner absolute inset-0"></div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div class="w-2 h-2 bg-brand-400 rounded-full animate-ping"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-outfit font-semibold text-white tracking-wider">처리중 입니다...</h3>
|
||||||
|
<p class="text-slate-400 text-sm mt-2 font-medium">EIMS 시스템과 안전하게 통신 중입니다</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="mcpForm" class="space-y-6">
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<!-- Target Tool Selection -->
|
||||||
|
<div class="group">
|
||||||
|
<label for="toolName" class="flex items-center text-xs font-bold text-slate-400 mb-2 uppercase tracking-widest transition-colors group-focus-within:text-brand-400">
|
||||||
|
<svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||||
|
대상 툴 (Target Tool)
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<select id="toolName" name="toolName" class="input-premium block w-full pl-4 pr-10 py-3 text-sm rounded-xl appearance-none cursor-pointer font-medium">
|
||||||
|
<option value="">로딩 중...</option>
|
||||||
|
</select>
|
||||||
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Target Action Selection -->
|
||||||
|
<div class="group">
|
||||||
|
<label for="toolAction" class="flex items-center text-xs font-bold text-slate-400 mb-2 uppercase tracking-widest transition-colors group-focus-within:text-brand-400">
|
||||||
|
<svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||||
|
실행 함수 (Action)
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<select id="toolAction" name="toolAction" class="input-premium block w-full pl-4 pr-10 py-3 text-sm rounded-xl appearance-none cursor-pointer font-medium">
|
||||||
|
</select>
|
||||||
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Agent ID moved to Header -->
|
||||||
|
|
||||||
|
<!-- User Prompt -->
|
||||||
|
<div class="group">
|
||||||
|
<label for="userPrompt" class="flex items-center text-xs font-bold text-slate-400 mb-2 uppercase tracking-widest transition-colors group-focus-within:text-brand-400">
|
||||||
|
<svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||||
|
사용자 프롬프트 (User Prompt)
|
||||||
|
</label>
|
||||||
|
<textarea id="userPrompt" name="userPrompt" rows="2" class="input-premium block w-full py-3 px-4 text-sm rounded-xl resize-none placeholder-slate-600 font-medium" placeholder="요청하실 내용을 자유롭게 입력하세요. (예: 김신한 고객 정보 조회)"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action Area -->
|
||||||
|
<div class="flex items-center justify-between pt-4 mt-2 border-t border-white/5">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="text-xs font-mono bg-slate-900/80 px-3 py-2 rounded-lg border border-slate-700/50 flex items-center shadow-inner">
|
||||||
|
<span class="text-emerald-400 font-bold mr-2 text-[10px] tracking-wider">POST</span>
|
||||||
|
<span class="text-slate-300">/mcp/api/v1/tools/call</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-glow">
|
||||||
|
<button type="submit" class="relative inline-flex items-center px-8 py-3 text-sm font-bold rounded-xl text-white bg-gradient-to-r from-brand-600 to-indigo-600 hover:from-brand-500 hover:to-indigo-500 shadow-lg shadow-brand-500/25 transition-all transform hover:-translate-y-0.5 active:translate-y-0">
|
||||||
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||||
|
Execute
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Terminal Result Panel -->
|
||||||
|
<div id="resultContainer" class="hidden transition-all duration-500 ease-out opacity-0 translate-y-8 mt-6 pb-6">
|
||||||
|
<div class="bg-[#0d1117] rounded-2xl shadow-2xl border border-slate-700/50 flex flex-col overflow-hidden relative group">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="bg-[#161b22] px-5 py-3 flex justify-between items-center border-b border-slate-800 shrink-0">
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-[#ff5f56] border border-[#e0443e]"></div>
|
||||||
|
<div class="w-3 h-3 rounded-full bg-[#ffbd2e] border border-[#dea123]"></div>
|
||||||
|
<div class="w-3 h-3 rounded-full bg-[#27c93f] border border-[#1aab29]"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[10px] font-mono font-medium text-slate-500 tracking-widest uppercase">Output_Terminal</div>
|
||||||
|
<span id="statusBadge" class="inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-bold font-mono hidden"></span>
|
||||||
|
</div>
|
||||||
|
<!-- Payload Output -->
|
||||||
|
<div class="p-6 relative">
|
||||||
|
<pre id="jsonResponse" class="json-pre m-0 whitespace-pre-wrap font-mono relative z-10 font-medium"></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let toolFunctions = {};
|
||||||
|
let actionPrompts = {};
|
||||||
|
|
||||||
|
const toolSelect = document.getElementById('toolName');
|
||||||
|
const toolActionSelect = document.getElementById('toolAction');
|
||||||
|
|
||||||
|
async function fetchTools() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/mcp/api/v1/tools/list', {
|
||||||
|
headers: { 'X-API-KEY': 'SHINHAN_MCP_TEST_KEY_9999' }
|
||||||
|
});
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
toolSelect.innerHTML = '';
|
||||||
|
toolFunctions = {};
|
||||||
|
actionPrompts = {};
|
||||||
|
|
||||||
|
const tools = data.result?.tools || [];
|
||||||
|
|
||||||
|
if (tools.length === 0) {
|
||||||
|
toolSelect.innerHTML = '<option value="">등록된 툴이 없습니다</option>';
|
||||||
|
updateActionDropdown();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const groupedTools = {};
|
||||||
|
tools.forEach(tool => {
|
||||||
|
const group = tool.domainGroup || '기타 그룹';
|
||||||
|
if (!groupedTools[group]) {
|
||||||
|
groupedTools[group] = [];
|
||||||
|
}
|
||||||
|
groupedTools[group].push(tool);
|
||||||
|
});
|
||||||
|
|
||||||
|
Object.keys(groupedTools).sort().forEach(group => {
|
||||||
|
const optgroup = document.createElement('optgroup');
|
||||||
|
let label = group;
|
||||||
|
if (group.toLowerCase().startsWith('group_')) {
|
||||||
|
label = 'Group ' + group.split('_')[1];
|
||||||
|
}
|
||||||
|
optgroup.label = label;
|
||||||
|
|
||||||
|
groupedTools[group].forEach(tool => {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.value = tool.toolName;
|
||||||
|
const commType = tool.integrationType ? tool.integrationType : 'HTTP';
|
||||||
|
option.textContent = tool.description ? `[${commType}] ${tool.description} (${tool.toolName})` : `[${commType}] ${tool.toolName}`;
|
||||||
|
option.dataset.schema = JSON.stringify(tool.parametersSchema);
|
||||||
|
option.dataset.prompts = JSON.stringify(tool.actionPrompts || {});
|
||||||
|
optgroup.appendChild(option);
|
||||||
|
|
||||||
|
const enums = tool.parametersSchema?.properties?.action?.enum || [];
|
||||||
|
const descStr = tool.parametersSchema?.properties?.action?.description || "";
|
||||||
|
|
||||||
|
let descMap = {};
|
||||||
|
if(descStr.includes(":")) {
|
||||||
|
const items = descStr.split(":")[1].split(",");
|
||||||
|
items.forEach(item => {
|
||||||
|
const parts = item.trim().split("(");
|
||||||
|
if(parts.length > 1) {
|
||||||
|
descMap[parts[0]] = parts[1].replace(")","");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
toolFunctions[tool.toolName] = enums.map(e => {
|
||||||
|
return { value: e, label: descMap[e] || e };
|
||||||
|
});
|
||||||
|
|
||||||
|
if (tool.actionPrompts) {
|
||||||
|
Object.assign(actionPrompts, tool.actionPrompts);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
toolSelect.appendChild(optgroup);
|
||||||
|
});
|
||||||
|
|
||||||
|
updateActionDropdown();
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to fetch tools", err);
|
||||||
|
toolSelect.innerHTML = '<option value="">데이터 로드 실패</option>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateActionDropdown() {
|
||||||
|
const toolName = toolSelect.value;
|
||||||
|
const actions = toolFunctions[toolName] || [];
|
||||||
|
|
||||||
|
toolActionSelect.innerHTML = '';
|
||||||
|
|
||||||
|
if (actions.length === 0) {
|
||||||
|
const defaultOption = document.createElement('option');
|
||||||
|
defaultOption.value = 'default';
|
||||||
|
defaultOption.textContent = '기본 동작';
|
||||||
|
toolActionSelect.appendChild(defaultOption);
|
||||||
|
document.getElementById('userPrompt').value = "";
|
||||||
|
} else {
|
||||||
|
actions.forEach(action => {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.value = action.value;
|
||||||
|
option.textContent = action.label;
|
||||||
|
toolActionSelect.appendChild(option);
|
||||||
|
});
|
||||||
|
|
||||||
|
updatePrompt(actions[0].value, toolName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePrompt(actionValue, toolName) {
|
||||||
|
let promptKey = actionValue;
|
||||||
|
if (toolName === "customer_info_tool" && actionValue === "detail") {
|
||||||
|
promptKey = "detail_cust";
|
||||||
|
}
|
||||||
|
document.getElementById('userPrompt').value = actionPrompts[promptKey] || "작업을 실행해주세요.";
|
||||||
|
}
|
||||||
|
|
||||||
|
toolSelect.addEventListener('change', updateActionDropdown);
|
||||||
|
|
||||||
|
toolActionSelect.addEventListener('change', function() {
|
||||||
|
updatePrompt(this.value, toolSelect.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', fetchTools);
|
||||||
|
|
||||||
|
document.getElementById('mcpForm').addEventListener('submit', async function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const loadingOverlay = document.getElementById('loadingOverlay');
|
||||||
|
const resultContainer = document.getElementById('resultContainer');
|
||||||
|
const jsonResponse = document.getElementById('jsonResponse');
|
||||||
|
const statusBadge = document.getElementById('statusBadge');
|
||||||
|
|
||||||
|
resultContainer.classList.add('opacity-0', 'translate-y-8');
|
||||||
|
setTimeout(() => resultContainer.classList.add('hidden'), 300);
|
||||||
|
|
||||||
|
// Show Loading
|
||||||
|
loadingOverlay.classList.add('active');
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
traceId: "MCP-REQ-" + Math.floor(Math.random() * 90000 + 10000),
|
||||||
|
agentId: document.getElementById('agentId').value,
|
||||||
|
userPrompt: document.getElementById('userPrompt').value || document.getElementById('userPrompt').placeholder,
|
||||||
|
toolName: document.getElementById('toolName').value,
|
||||||
|
action: document.getElementById('toolAction').value
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const startTime = Date.now();
|
||||||
|
const response = await fetch('/mcp/api/v1/tools/call', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json', 'X-API-KEY': 'SHINHAN_MCP_TEST_KEY_9999' },
|
||||||
|
body: JSON.stringify(payload)
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
const latency = Date.now() - startTime;
|
||||||
|
|
||||||
|
// Dark theme optimized syntax highlighting
|
||||||
|
let formattedJson = JSON.stringify(data, null, 4)
|
||||||
|
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||||
|
.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
|
||||||
|
let cls = 'text-slate-300';
|
||||||
|
if (/^"/.test(match)) {
|
||||||
|
if (/:$/.test(match)) {
|
||||||
|
cls = 'text-cyan-400 font-medium'; // Key
|
||||||
|
} else {
|
||||||
|
cls = 'text-emerald-400'; // String
|
||||||
|
}
|
||||||
|
} else if (/true|false/.test(match)) {
|
||||||
|
cls = 'text-amber-400 font-medium'; // Boolean
|
||||||
|
} else if (/null/.test(match)) {
|
||||||
|
cls = 'text-slate-500 italic'; // Null
|
||||||
|
} else {
|
||||||
|
cls = 'text-pink-400'; // Number
|
||||||
|
}
|
||||||
|
return '<span class="' + cls + '">' + match + '</span>';
|
||||||
|
});
|
||||||
|
|
||||||
|
jsonResponse.innerHTML = formattedJson;
|
||||||
|
|
||||||
|
statusBadge.classList.remove('hidden');
|
||||||
|
if(response.ok) {
|
||||||
|
statusBadge.innerHTML = `200 OK <span class="ml-2 opacity-60 font-medium">${latency}ms</span>`;
|
||||||
|
statusBadge.className = 'inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-bold font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20';
|
||||||
|
} else {
|
||||||
|
statusBadge.innerHTML = `${response.status} ERR <span class="ml-2 opacity-60 font-medium">${latency}ms</span>`;
|
||||||
|
statusBadge.className = 'inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-bold font-mono bg-rose-500/10 text-rose-400 border border-rose-500/20';
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
jsonResponse.textContent = "Error: " + error.message;
|
||||||
|
statusBadge.innerHTML = `FAILED`;
|
||||||
|
statusBadge.className = 'inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-bold font-mono bg-rose-500/10 text-rose-400 border border-rose-500/20';
|
||||||
|
statusBadge.classList.remove('hidden');
|
||||||
|
} finally {
|
||||||
|
setTimeout(() => {
|
||||||
|
loadingOverlay.classList.remove('active');
|
||||||
|
resultContainer.classList.remove('hidden');
|
||||||
|
void resultContainer.offsetWidth; // Force reflow
|
||||||
|
resultContainer.classList.remove('opacity-0', 'translate-y-8');
|
||||||
|
}, 800); // slightly longer loading effect for premium feel
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
512
src/main/resources/static/static/index.html
Normal file
512
src/main/resources/static/static/index.html
Normal file
@@ -0,0 +1,512 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Shinhan AI MCP Gateway</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Pretendard:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Pretendard', 'sans-serif'],
|
||||||
|
outfit: ['Outfit', 'sans-serif'],
|
||||||
|
mono: ['Fira Code', 'monospace']
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
50: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#3b82f6',
|
||||||
|
600: '#2563eb',
|
||||||
|
900: '#1e3a8a',
|
||||||
|
950: '#172554',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'float': 'float 8s ease-in-out infinite',
|
||||||
|
'float-delayed': 'float 8s ease-in-out 4s infinite',
|
||||||
|
'spin-slow': 'spin 3s linear infinite',
|
||||||
|
'pulse-glow': 'pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
'float': {
|
||||||
|
'0%, 100%': { transform: 'translateY(0px) scale(1)' },
|
||||||
|
'50%': { transform: 'translateY(-20px) scale(1.05)' },
|
||||||
|
},
|
||||||
|
'pulse-glow': {
|
||||||
|
'0%, 100%': { opacity: 0.5, transform: 'scale(1)' },
|
||||||
|
'50%': { opacity: 1, transform: 'scale(1.05)' },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #020617; /* slate-950 */
|
||||||
|
color: #f8fafc;
|
||||||
|
overflow-x: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Premium Dark Grid Background */
|
||||||
|
.bg-grid {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background-size: 40px 40px;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||||
|
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
|
||||||
|
-webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(15, 23, 42, 0.6); /* slate-900 */
|
||||||
|
backdrop-filter: blur(24px);
|
||||||
|
-webkit-backdrop-filter: blur(24px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-premium {
|
||||||
|
background: rgba(30, 41, 59, 0.5); /* slate-800 */
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
color: #f8fafc;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-premium:focus {
|
||||||
|
background: rgba(30, 41, 59, 0.8);
|
||||||
|
border-color: #3b82f6;
|
||||||
|
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), inset 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styling the select options for a dark theme (browser native fallback) */
|
||||||
|
select.input-premium option, select.input-premium optgroup {
|
||||||
|
background: #1e293b;
|
||||||
|
color: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.json-pre {
|
||||||
|
background: transparent;
|
||||||
|
color: #cbd5e1;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-glow {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.btn-glow::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -2px;
|
||||||
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
|
||||||
|
background-size: 200% auto;
|
||||||
|
z-index: -1;
|
||||||
|
border-radius: 12px;
|
||||||
|
filter: blur(10px);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.4s ease;
|
||||||
|
animation: gradient-shift 3s linear infinite;
|
||||||
|
}
|
||||||
|
.btn-glow:hover::before {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
@keyframes gradient-shift {
|
||||||
|
0% { background-position: 0% center; }
|
||||||
|
100% { background-position: 200% center; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading Overlay Overlay */
|
||||||
|
#loadingOverlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(15, 23, 42, 0.85);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 50;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.4s ease;
|
||||||
|
}
|
||||||
|
#loadingOverlay.active {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modern Spinner */
|
||||||
|
.modern-spinner {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid rgba(59, 130, 246, 0.1);
|
||||||
|
border-top-color: #3b82f6;
|
||||||
|
border-right-color: #8b5cf6;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom Scrollbar */
|
||||||
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||||
|
::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.5); }
|
||||||
|
::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.8); border-radius: 10px; }
|
||||||
|
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 1); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="antialiased selection:bg-brand-500/30 selection:text-brand-50">
|
||||||
|
|
||||||
|
<div class="bg-grid"></div>
|
||||||
|
|
||||||
|
<!-- Premium Glowing Orbs -->
|
||||||
|
<div class="fixed top-0 left-[20%] w-[500px] h-[500px] bg-brand-600/20 rounded-full mix-blend-screen filter blur-[120px] animate-float pointer-events-none"></div>
|
||||||
|
<div class="fixed bottom-0 right-[20%] w-[600px] h-[600px] bg-purple-600/20 rounded-full mix-blend-screen filter blur-[150px] animate-float-delayed pointer-events-none"></div>
|
||||||
|
|
||||||
|
<div class="max-w-[850px] w-full px-5 z-10 relative flex flex-col">
|
||||||
|
|
||||||
|
<!-- Header (Luxurious) -->
|
||||||
|
<div class="text-center space-y-4 mb-8 shrink-0 pt-6 relative">
|
||||||
|
<!-- Agent ID Mini Badge -->
|
||||||
|
<div class="absolute right-0 top-2 flex items-center bg-slate-800/50 border border-slate-700/50 rounded-lg px-3 py-1.5 shadow-sm">
|
||||||
|
<svg class="w-3.5 h-3.5 mr-1.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
|
||||||
|
<input type="text" id="agentId" name="agentId" value="AGENT-AI-1" class="bg-transparent border-none text-xs text-slate-300 font-mono focus:outline-none w-20 text-right" readonly>
|
||||||
|
</div>
|
||||||
|
<div class="inline-flex items-center px-3 py-1 rounded-full border border-brand-500/30 bg-brand-500/10 text-brand-400 text-[10px] font-bold uppercase tracking-[0.2em] mb-2">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-brand-400 mr-2 animate-pulse"></span>
|
||||||
|
Next-Gen Router
|
||||||
|
</div>
|
||||||
|
<h1 class="text-5xl font-outfit font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-br from-white via-slate-200 to-slate-500 drop-shadow-sm">
|
||||||
|
AI MCP Gateway
|
||||||
|
</h1>
|
||||||
|
<p class="text-sm text-slate-400 font-medium tracking-wide">
|
||||||
|
엔터프라이즈 환경을 위한 차세대 통합 라우팅 시스템
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Configuration Panel -->
|
||||||
|
<div class="glass-panel rounded-[2rem] p-8 relative shrink-0">
|
||||||
|
|
||||||
|
<!-- Loading Overlay -->
|
||||||
|
<div id="loadingOverlay">
|
||||||
|
<div class="relative w-16 h-16 mb-6">
|
||||||
|
<div class="modern-spinner absolute inset-0"></div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div class="w-2 h-2 bg-brand-400 rounded-full animate-ping"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-outfit font-semibold text-white tracking-wider">처리중 입니다...</h3>
|
||||||
|
<p class="text-slate-400 text-sm mt-2 font-medium">EIMS 시스템과 안전하게 통신 중입니다</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="mcpForm" class="space-y-6">
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<!-- Target Tool Selection -->
|
||||||
|
<div class="group">
|
||||||
|
<label for="toolName" class="flex items-center text-xs font-bold text-slate-400 mb-2 uppercase tracking-widest transition-colors group-focus-within:text-brand-400">
|
||||||
|
<svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||||
|
대상 툴 (Target Tool)
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<select id="toolName" name="toolName" class="input-premium block w-full pl-4 pr-10 py-3 text-sm rounded-xl appearance-none cursor-pointer font-medium">
|
||||||
|
<option value="">로딩 중...</option>
|
||||||
|
</select>
|
||||||
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Target Action Selection -->
|
||||||
|
<div class="group">
|
||||||
|
<label for="toolAction" class="flex items-center text-xs font-bold text-slate-400 mb-2 uppercase tracking-widest transition-colors group-focus-within:text-brand-400">
|
||||||
|
<svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||||
|
실행 함수 (Action)
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<select id="toolAction" name="toolAction" class="input-premium block w-full pl-4 pr-10 py-3 text-sm rounded-xl appearance-none cursor-pointer font-medium">
|
||||||
|
</select>
|
||||||
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500">
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Agent ID moved to Header -->
|
||||||
|
|
||||||
|
<!-- User Prompt -->
|
||||||
|
<div class="group">
|
||||||
|
<label for="userPrompt" class="flex items-center text-xs font-bold text-slate-400 mb-2 uppercase tracking-widest transition-colors group-focus-within:text-brand-400">
|
||||||
|
<svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||||
|
사용자 프롬프트 (User Prompt)
|
||||||
|
</label>
|
||||||
|
<textarea id="userPrompt" name="userPrompt" rows="2" class="input-premium block w-full py-3 px-4 text-sm rounded-xl resize-none placeholder-slate-600 font-medium" placeholder="요청하실 내용을 자유롭게 입력하세요. (예: 김신한 고객 정보 조회)"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action Area -->
|
||||||
|
<div class="flex items-center justify-between pt-4 mt-2 border-t border-white/5">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="text-xs font-mono bg-slate-900/80 px-3 py-2 rounded-lg border border-slate-700/50 flex items-center shadow-inner">
|
||||||
|
<span class="text-emerald-400 font-bold mr-2 text-[10px] tracking-wider">POST</span>
|
||||||
|
<span class="text-slate-300">/mcp/api/v1/tools/call</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-glow">
|
||||||
|
<button type="submit" class="relative inline-flex items-center px-8 py-3 text-sm font-bold rounded-xl text-white bg-gradient-to-r from-brand-600 to-indigo-600 hover:from-brand-500 hover:to-indigo-500 shadow-lg shadow-brand-500/25 transition-all transform hover:-translate-y-0.5 active:translate-y-0">
|
||||||
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||||
|
Execute
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Terminal Result Panel -->
|
||||||
|
<div id="resultContainer" class="hidden transition-all duration-500 ease-out opacity-0 translate-y-8 mt-6 pb-6">
|
||||||
|
<div class="bg-[#0d1117] rounded-2xl shadow-2xl border border-slate-700/50 flex flex-col overflow-hidden relative group">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="bg-[#161b22] px-5 py-3 flex justify-between items-center border-b border-slate-800 shrink-0">
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-[#ff5f56] border border-[#e0443e]"></div>
|
||||||
|
<div class="w-3 h-3 rounded-full bg-[#ffbd2e] border border-[#dea123]"></div>
|
||||||
|
<div class="w-3 h-3 rounded-full bg-[#27c93f] border border-[#1aab29]"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[10px] font-mono font-medium text-slate-500 tracking-widest uppercase">Output_Terminal</div>
|
||||||
|
<span id="statusBadge" class="inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-bold font-mono hidden"></span>
|
||||||
|
</div>
|
||||||
|
<!-- Payload Output -->
|
||||||
|
<div class="p-6 relative">
|
||||||
|
<pre id="jsonResponse" class="json-pre m-0 whitespace-pre-wrap font-mono relative z-10 font-medium"></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let toolFunctions = {};
|
||||||
|
let actionPrompts = {};
|
||||||
|
|
||||||
|
const toolSelect = document.getElementById('toolName');
|
||||||
|
const toolActionSelect = document.getElementById('toolAction');
|
||||||
|
|
||||||
|
async function fetchTools() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/mcp/api/v1/tools/list', {
|
||||||
|
headers: { 'X-API-KEY': 'SHINHAN_MCP_TEST_KEY_9999' }
|
||||||
|
});
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
toolSelect.innerHTML = '';
|
||||||
|
toolFunctions = {};
|
||||||
|
actionPrompts = {};
|
||||||
|
|
||||||
|
const tools = data.result?.tools || [];
|
||||||
|
|
||||||
|
if (tools.length === 0) {
|
||||||
|
toolSelect.innerHTML = '<option value="">등록된 툴이 없습니다</option>';
|
||||||
|
updateActionDropdown();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const groupedTools = {};
|
||||||
|
tools.forEach(tool => {
|
||||||
|
const group = tool.domainGroup || '기타 그룹';
|
||||||
|
if (!groupedTools[group]) {
|
||||||
|
groupedTools[group] = [];
|
||||||
|
}
|
||||||
|
groupedTools[group].push(tool);
|
||||||
|
});
|
||||||
|
|
||||||
|
Object.keys(groupedTools).sort().forEach(group => {
|
||||||
|
const optgroup = document.createElement('optgroup');
|
||||||
|
let label = group;
|
||||||
|
if (group.toLowerCase().startsWith('group_')) {
|
||||||
|
label = 'Group ' + group.split('_')[1];
|
||||||
|
}
|
||||||
|
optgroup.label = label;
|
||||||
|
|
||||||
|
groupedTools[group].forEach(tool => {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.value = tool.toolName;
|
||||||
|
const commType = tool.integrationType ? tool.integrationType : 'HTTP';
|
||||||
|
option.textContent = tool.description ? `[${commType}] ${tool.description} (${tool.toolName})` : `[${commType}] ${tool.toolName}`;
|
||||||
|
option.dataset.schema = JSON.stringify(tool.parametersSchema);
|
||||||
|
option.dataset.prompts = JSON.stringify(tool.actionPrompts || {});
|
||||||
|
optgroup.appendChild(option);
|
||||||
|
|
||||||
|
const enums = tool.parametersSchema?.properties?.action?.enum || [];
|
||||||
|
const descStr = tool.parametersSchema?.properties?.action?.description || "";
|
||||||
|
|
||||||
|
let descMap = {};
|
||||||
|
if(descStr.includes(":")) {
|
||||||
|
const items = descStr.split(":")[1].split(",");
|
||||||
|
items.forEach(item => {
|
||||||
|
const parts = item.trim().split("(");
|
||||||
|
if(parts.length > 1) {
|
||||||
|
descMap[parts[0]] = parts[1].replace(")","");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
toolFunctions[tool.toolName] = enums.map(e => {
|
||||||
|
return { value: e, label: descMap[e] || e };
|
||||||
|
});
|
||||||
|
|
||||||
|
if (tool.actionPrompts) {
|
||||||
|
Object.assign(actionPrompts, tool.actionPrompts);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
toolSelect.appendChild(optgroup);
|
||||||
|
});
|
||||||
|
|
||||||
|
updateActionDropdown();
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to fetch tools", err);
|
||||||
|
toolSelect.innerHTML = '<option value="">데이터 로드 실패</option>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateActionDropdown() {
|
||||||
|
const toolName = toolSelect.value;
|
||||||
|
const actions = toolFunctions[toolName] || [];
|
||||||
|
|
||||||
|
toolActionSelect.innerHTML = '';
|
||||||
|
|
||||||
|
if (actions.length === 0) {
|
||||||
|
const defaultOption = document.createElement('option');
|
||||||
|
defaultOption.value = 'default';
|
||||||
|
defaultOption.textContent = '기본 동작';
|
||||||
|
toolActionSelect.appendChild(defaultOption);
|
||||||
|
document.getElementById('userPrompt').value = "";
|
||||||
|
} else {
|
||||||
|
actions.forEach(action => {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.value = action.value;
|
||||||
|
option.textContent = action.label;
|
||||||
|
toolActionSelect.appendChild(option);
|
||||||
|
});
|
||||||
|
|
||||||
|
updatePrompt(actions[0].value, toolName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePrompt(actionValue, toolName) {
|
||||||
|
let promptKey = actionValue;
|
||||||
|
if (toolName === "customer_info_tool" && actionValue === "detail") {
|
||||||
|
promptKey = "detail_cust";
|
||||||
|
}
|
||||||
|
document.getElementById('userPrompt').value = actionPrompts[promptKey] || "작업을 실행해주세요.";
|
||||||
|
}
|
||||||
|
|
||||||
|
toolSelect.addEventListener('change', updateActionDropdown);
|
||||||
|
|
||||||
|
toolActionSelect.addEventListener('change', function() {
|
||||||
|
updatePrompt(this.value, toolSelect.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', fetchTools);
|
||||||
|
|
||||||
|
document.getElementById('mcpForm').addEventListener('submit', async function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const loadingOverlay = document.getElementById('loadingOverlay');
|
||||||
|
const resultContainer = document.getElementById('resultContainer');
|
||||||
|
const jsonResponse = document.getElementById('jsonResponse');
|
||||||
|
const statusBadge = document.getElementById('statusBadge');
|
||||||
|
|
||||||
|
resultContainer.classList.add('opacity-0', 'translate-y-8');
|
||||||
|
setTimeout(() => resultContainer.classList.add('hidden'), 300);
|
||||||
|
|
||||||
|
// Show Loading
|
||||||
|
loadingOverlay.classList.add('active');
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
traceId: "MCP-REQ-" + Math.floor(Math.random() * 90000 + 10000),
|
||||||
|
agentId: document.getElementById('agentId').value,
|
||||||
|
userPrompt: document.getElementById('userPrompt').value || document.getElementById('userPrompt').placeholder,
|
||||||
|
toolName: document.getElementById('toolName').value,
|
||||||
|
action: document.getElementById('toolAction').value
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const startTime = Date.now();
|
||||||
|
const response = await fetch('/mcp/api/v1/tools/call', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json', 'X-API-KEY': 'SHINHAN_MCP_TEST_KEY_9999' },
|
||||||
|
body: JSON.stringify(payload)
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
const latency = Date.now() - startTime;
|
||||||
|
|
||||||
|
// Dark theme optimized syntax highlighting
|
||||||
|
let formattedJson = JSON.stringify(data, null, 4)
|
||||||
|
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||||
|
.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
|
||||||
|
let cls = 'text-slate-300';
|
||||||
|
if (/^"/.test(match)) {
|
||||||
|
if (/:$/.test(match)) {
|
||||||
|
cls = 'text-cyan-400 font-medium'; // Key
|
||||||
|
} else {
|
||||||
|
cls = 'text-emerald-400'; // String
|
||||||
|
}
|
||||||
|
} else if (/true|false/.test(match)) {
|
||||||
|
cls = 'text-amber-400 font-medium'; // Boolean
|
||||||
|
} else if (/null/.test(match)) {
|
||||||
|
cls = 'text-slate-500 italic'; // Null
|
||||||
|
} else {
|
||||||
|
cls = 'text-pink-400'; // Number
|
||||||
|
}
|
||||||
|
return '<span class="' + cls + '">' + match + '</span>';
|
||||||
|
});
|
||||||
|
|
||||||
|
jsonResponse.innerHTML = formattedJson;
|
||||||
|
|
||||||
|
statusBadge.classList.remove('hidden');
|
||||||
|
if(response.ok) {
|
||||||
|
statusBadge.innerHTML = `200 OK <span class="ml-2 opacity-60 font-medium">${latency}ms</span>`;
|
||||||
|
statusBadge.className = 'inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-bold font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20';
|
||||||
|
} else {
|
||||||
|
statusBadge.innerHTML = `${response.status} ERR <span class="ml-2 opacity-60 font-medium">${latency}ms</span>`;
|
||||||
|
statusBadge.className = 'inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-bold font-mono bg-rose-500/10 text-rose-400 border border-rose-500/20';
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
jsonResponse.textContent = "Error: " + error.message;
|
||||||
|
statusBadge.innerHTML = `FAILED`;
|
||||||
|
statusBadge.className = 'inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-bold font-mono bg-rose-500/10 text-rose-400 border border-rose-500/20';
|
||||||
|
statusBadge.classList.remove('hidden');
|
||||||
|
} finally {
|
||||||
|
setTimeout(() => {
|
||||||
|
loadingOverlay.classList.remove('active');
|
||||||
|
resultContainer.classList.remove('hidden');
|
||||||
|
void resultContainer.offsetWidth; // Force reflow
|
||||||
|
resultContainer.classList.remove('opacity-0', 'translate-y-8');
|
||||||
|
}, 800); // slightly longer loading effect for premium feel
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user