[Developer] #424 add Java MCP client demo tab
This commit is contained in:
devmrko
@@ -37,6 +37,7 @@
|
||||
<div class="rw-menu-panel">
|
||||
<a class="nav-link" href="/mcp-reasoning">Reasoning</a>
|
||||
<a class="nav-link" href="/mcp-sse">SSE 서비스</a>
|
||||
<a class="nav-link" href="/mcp-client-demo">Client Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rw-menu-group">
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
|
||||
<body>
|
||||
<div th:fragment="result">
|
||||
<div class="alert alert-danger" th:if="${errorMessage}">
|
||||
<strong>Java MCP client 호출 실패</strong>
|
||||
<div th:text="${errorMessage}">error</div>
|
||||
</div>
|
||||
|
||||
<div th:if="${result}">
|
||||
<div class="section-heading">
|
||||
<h2>Java Client 결과</h2>
|
||||
<span class="badge"
|
||||
th:classappend="${result.status() == 'SUCCESS'} ? ' text-bg-success' : ' text-bg-secondary'"
|
||||
th:text="${result.status()}">SUCCESS</span>
|
||||
</div>
|
||||
|
||||
<dl class="policy-detail-list">
|
||||
<dt>Context Path</dt>
|
||||
<dd><code th:text="${result.contextPath()}">vpd-live</code></dd>
|
||||
<dt>Message URL</dt>
|
||||
<dd><code th:text="${result.messageUrl()}">http://localhost:8082/mcp/vpd-live/messages</code></dd>
|
||||
<dt>Selected Tool</dt>
|
||||
<dd><code th:text="${result.selectedTool()} ?: '-'">tool</code></dd>
|
||||
</dl>
|
||||
|
||||
<div class="probe-exchange-grid">
|
||||
<section class="probe-exchange">
|
||||
<h3>initialize Response</h3>
|
||||
<pre th:text="${result.initializeResponse()}">{}</pre>
|
||||
</section>
|
||||
<section class="probe-exchange">
|
||||
<h3>tools/list Response</h3>
|
||||
<pre th:text="${result.toolsListResponse()}">{}</pre>
|
||||
</section>
|
||||
<section class="probe-exchange">
|
||||
<h3>tools/call Response</h3>
|
||||
<pre th:text="${result.toolsCallResponse()}">{}</pre>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
76
src/main/resources/templates/mcp-client-demo.html
Normal file
76
src/main/resources/templates/mcp-client-demo.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user