[Developer] #424 add MCP routing chatbot demo

2026-06-25 15:50:37 +09:00
parent cfad317d73
commit eac43439d5
7 changed files with 448 additions and 0 deletions
--- a/src/main/resources/templates/mcp-chatbot.html
+++ b/src/main/resources/templates/mcp-chatbot.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/layout :: head('MCP Chatbot')}"></head>
+<body>
+<nav th:replace="~{fragments/layout :: nav}"></nav>
+<main class="container page-shell">
+  <section class="page-heading">
+    <h1>MCP Chatbot</h1>
+    <p>질문을 MCP tool로 라우팅하고 ORDS/VPD 조회 결과를 답변으로 정리합니다.</p>
+  </section>
+
+  <section class="content-band chat-shell">
+    <div class="chat-message assistant-message">
+      <strong>Router</strong>
+      <p>보호 객체명이나 업무명을 질문에 넣으면 가장 가까운 MCP tool을 선택합니다. Bearer Token을 입력하면 실제 ORDS 호출까지 실행합니다.</p>
+    </div>
+
+    <div id="mcp-chatbot-result" class="chat-thread">
+      <div class="text-muted">대화 결과가 여기에 표시됩니다.</div>
+    </div>
+
+    <form hx-post="/mcp-chatbot" hx-target="#mcp-chatbot-result" hx-swap="beforeend" class="chat-form">
+      <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
+      <div class="chat-form-row">
+        <label>
+          Context
+          <input class="form-control" name="contextPath" value="vpd-live" pattern="[A-Za-z0-9][A-Za-z0-9_-]{0,63}" required>
+        </label>
+        <label>
+          Limit
+          <input class="form-control" name="limit" type="number" min="1" max="500" value="50">
+        </label>
+      </div>
+      <label>
+        Bearer Token 원문
+        <input class="form-control" name="bearerToken" type="password" autocomplete="off"
+               placeholder="비우면 라우팅만 확인합니다.">
+      </label>
+      <label>
+        질문
+        <textarea class="form-control" name="question" rows="3"
+                  placeholder="예: BOARD_POSTS에서 이 토큰으로 보이는 행과 NULL 처리 컬럼을 요약해줘." required></textarea>
+      </label>
+      <button class="btn rw-btn-primary" type="submit">질문 보내기</button>
+    </form>
+  </section>
+</main>
+</body>
+</html>