[Developer] #424 add Java MCP client demo tab

2026-06-25 15:38:17 +09:00
parent 8bc89ee3dc
commit cfad317d73
6 changed files with 341 additions and 0 deletions
--- a/src/main/resources/templates/mcp-client-demo.html
+++ b/src/main/resources/templates/mcp-client-demo.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/layout :: head('MCP Client Demo')}"></head>
+<body>
+<nav th:replace="~{fragments/layout :: nav}"></nav>
+<main class="container page-shell">
+  <section class="page-heading">
+    <h1>MCP Client Demo</h1>
+    <p>백오피스 Java client가 MCP message endpoint를 호출해 initialize, tools/list, tools/call 결과를 확인합니다.</p>
+  </section>
+
+  <section th:if="${runtimeError}" class="alert alert-warning">
+    <strong th:text="${runtimeError.title()}">DB 연결 설정이 필요합니다.</strong>
+    <div th:text="${runtimeError.message()}">DB 연결을 확인할 수 없습니다.</div>
+  </section>
+
+  <section class="content-band">
+    <h2>Java Client 호출</h2>
+    <form hx-post="/mcp-client-demo" hx-target="#mcp-client-demo-result" hx-swap="innerHTML" class="form-grid">
+      <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
+      <label>
+        Context Path
+        <input class="form-control" name="contextPath" value="vpd-live" pattern="[A-Za-z0-9][A-Za-z0-9_-]{0,63}" required>
+      </label>
+      <label>
+        Tool
+        <select class="form-select" name="toolName">
+          <option value="">tools/list만 실행</option>
+          <option th:each="tool : ${tools}"
+                  th:value="${tool.name()}"
+                  th:text="${tool.name() + ' / ' + tool.displayName()}"></option>
+        </select>
+      </label>
+      <label>
+        Limit
+        <input class="form-control" name="limit" type="number" min="1" max="500" value="50">
+      </label>
+      <label class="span-2">
+        Bearer Token 원문
+        <input class="form-control" name="bearerToken" type="password" autocomplete="off"
+               placeholder="비우면 tools/call은 실행하지 않습니다.">
+      </label>
+      <button class="btn rw-btn-primary" type="submit">Java Client 실행</button>
+    </form>
+  </section>
+
+  <section class="content-band">
+    <div class="section-heading">
+      <h2>호출 흐름</h2>
+      <span class="badge text-bg-secondary">HTTP JSON-RPC</span>
+    </div>
+    <div class="mcp-service-grid">
+      <div class="mcp-service-item">
+        <span>1</span>
+        <strong><code>initialize</code></strong>
+        <small>context path가 반영된 MCP serverInfo와 tools capability를 확인합니다.</small>
+      </div>
+      <div class="mcp-service-item">
+        <span>2</span>
+        <strong><code>tools/list</code></strong>
+        <small>현재 보호 객체에서 생성된 ORDS query tool 목록을 조회합니다.</small>
+      </div>
+      <div class="mcp-service-item">
+        <span>3</span>
+        <strong><code>tools/call</code></strong>
+        <small>Bearer Token이 입력된 경우 선택한 tool을 호출해 ORDS/VPD 결과를 받습니다.</small>
+      </div>
+    </div>
+  </section>
+
+  <section id="mcp-client-demo-result" class="content-band">
+    <div class="text-muted">Java MCP client 실행 결과가 여기에 표시됩니다.</div>
+  </section>
+</main>
+</body>
+</html>