feat(ui): migrate static ui from native API to MCP API endpoints (#2826)

anubhav756 · anubhav756 · commit 8406e57eacbe · 2026-03-25T11:45:10.000+05:30
diff --git a/internal/server/static/js/loadTools.js b/internal/server/static/js/loadTools.js
@@ -15,10 +15,10 @@
 import { renderToolInterface } from "./toolDisplay.js";
 import { escapeHtml } from "./sanitize.js";
 
-let toolDetailsAbortController = null;
+let currentToolsList = [];
 
 /**
- * Fetches a toolset from the /api/toolset endpoint and initiates creating the tool list.
+ * Fetches a toolset from the /mcp endpoint and initiates creating the tool list.
  * @param {!HTMLElement} secondNavContent The HTML element where the tool list will be rendered.
  * @param {!HTMLElement} toolDisplayArea The HTML element where the details of a selected tool will be displayed.
  * @param {string} toolsetName The name of the toolset to load (empty string loads all tools).
@@ -27,10 +27,22 @@ let toolDetailsAbortController = null;
 export async function loadTools(secondNavContent, toolDisplayArea, toolsetName) {
     secondNavContent.innerHTML = '<p>Fetching tools...</p>';
     try {
-        const response = await fetch(`/api/toolset/${toolsetName}`);
+        const url = toolsetName ? `/mcp/${toolsetName}` : `/mcp`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                jsonrpc: "2.0",
+                id: "1",
+                method: "tools/list",
+                'Mcp-Protocol-Version': '2025-11-25'
+            })
+        });
+        
         if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);
         }
+        
         const apiResponse = await response.json();
         renderToolList(apiResponse, secondNavContent, toolDisplayArea);
     } catch (error) {
@@ -41,33 +53,32 @@ export async function loadTools(secondNavContent, toolDisplayArea, toolsetName)
 
 /**
  * Renders the list of tools as buttons within the provided HTML element.
- * @param {?{tools: ?Object<string,*>} } apiResponse The API response object containing the tools.
+ * @param {Object} apiResponse The API response object containing the tools.
  * @param {!HTMLElement} secondNavContent The HTML element to render the tool list into.
  * @param {!HTMLElement} toolDisplayArea The HTML element for displaying tool details (passed to event handlers).
  */
 function renderToolList(apiResponse, secondNavContent, toolDisplayArea) {
     secondNavContent.innerHTML = '';
 
-    if (!apiResponse || typeof apiResponse.tools !== 'object' || apiResponse.tools === null) {
-        console.error('Error: Expected an object with a "tools" property, but received:', apiResponse);
+    if (!apiResponse || !apiResponse.result || !Array.isArray(apiResponse.result.tools)) {
+        console.error('Error: Expected a valid MCP response with "result.tools" array, but received:', apiResponse);
         secondNavContent.textContent = 'Error: Invalid response format from toolset API.';
         return;
     }
 
-    const toolsObject = apiResponse.tools;
-    const toolNames = Object.keys(toolsObject);
+    currentToolsList = apiResponse.result.tools;
 
-    if (toolNames.length === 0) {
+    if (currentToolsList.length === 0) {
         secondNavContent.textContent = 'No tools found.';
         return;
     }
 
     const ul = document.createElement('ul');
-    toolNames.forEach(toolName => {
+    currentToolsList.forEach(toolObj => {
         const li = document.createElement('li');
         const button = document.createElement('button');
-        button.textContent = toolName;
-        button.dataset.toolname = toolName;
+        button.textContent = toolObj.name;
+        button.dataset.toolname = toolObj.name;
         button.classList.add('tool-button');
         button.addEventListener('click', (event) => handleToolClick(event, secondNavContent, toolDisplayArea));
         li.appendChild(button);
@@ -90,86 +101,81 @@ function handleToolClick(event, secondNavContent, toolDisplayArea) {
             currentActive.classList.remove('active');
         }
         event.target.classList.add('active');
-        fetchToolDetails(toolName, toolDisplayArea);
+        renderToolDetails(toolName, toolDisplayArea);
     }
 }
 
 /**
- * Fetches details for a specific tool /api/tool endpoint.
- * It aborts any previous in-flight request for tool details to stop race condition.
- * @param {string} toolName The name of the tool to fetch details for.
+ * Renders details for a specific tool from the cached MCP tools list.
+ * @param {string} toolName The name of the tool to render details for.
  * @param {!HTMLElement} toolDisplayArea The HTML element to display the tool interface in.
- * @returns {!Promise<void>} A promise that resolves when the tool details are fetched and rendered, or rejects on error.
  */
-async function fetchToolDetails(toolName, toolDisplayArea) {
-    if (toolDetailsAbortController) {
-        toolDetailsAbortController.abort();
-        console.debug("Aborted previous tool fetch.");
-    }
+function renderToolDetails(toolName, toolDisplayArea) {
+    const toolObject = currentToolsList.find(t => t.name === toolName);
 
-    toolDetailsAbortController = new AbortController();
-    const signal = toolDetailsAbortController.signal;
+    if (!toolObject) {
+        toolDisplayArea.innerHTML = `<p class="error">Tool "${escapeHtml(toolName)}" data not found.</p>`;
+        return;
+    }
 
-    toolDisplayArea.innerHTML = '<p>Loading tool details...</p>';
+    console.debug("Rendering tool object: ", toolObject);
 
-    try {
-        const response = await fetch(`/api/tool/${encodeURIComponent(toolName)}`, { signal });
-        if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
+    let toolAuthRequired = [];
+    let toolAuthParams = {};
+    if (toolObject._meta) {
+        if (toolObject._meta["toolbox/authInvoke"]) {
+            toolAuthRequired = toolObject._meta["toolbox/authInvoke"];
         }
-        const apiResponse = await response.json();
-
-        if (!apiResponse.tools || !apiResponse.tools[toolName]) {
-            throw new Error(`Tool "${toolName}" data not found in API response.`);
+        if (toolObject._meta["toolbox/authParam"]) {
+            toolAuthParams = toolObject._meta["toolbox/authParam"];
         }
-        const toolObject = apiResponse.tools[toolName];
-        console.debug("Received tool object: ", toolObject)
-
-        const toolInterfaceData = {
-            id: toolName,
-            name: toolName,
-            description: toolObject.description || "No description provided.",
-            authRequired: toolObject.authRequired || [],
-            parameters: (toolObject.parameters || []).map(param => {
-                let inputType = 'text'; 
-                const apiType = param.type ? param.type.toLowerCase() : 'string';
-                let valueType = 'string'; 
-                let label = param.description || param.name;
-
-                if (apiType === 'integer' || apiType === 'float') {
-                    inputType = 'number';
-                    valueType = 'number';
-                } else if (apiType === 'boolean') {
-                    inputType = 'checkbox';
-                    valueType = 'boolean';
-                } else if (apiType === 'array') {
-                    inputType = 'textarea'; 
-                    const itemType = param.items && param.items.type ? param.items.type.toLowerCase() : 'string';
-                    valueType = `array<${itemType}>`;
-                    label += ' (Array)';
-                }
-
-                return {
-                    name: param.name,
-                    type: inputType,    
-                    valueType: valueType, 
-                    label: label,
-                    authServices: param.authServices, // TODO: to be updated when the native endpoint is no longer supported.
-                    required: param.required || false,
-                    // defaultValue: param.default, can't do this yet bc tool manifest doesn't have default
-                };
-            })
-        };
-
-        console.debug("Transformed toolInterfaceData:", toolInterfaceData);
+    }
 
-        renderToolInterface(toolInterfaceData, toolDisplayArea);
-    } catch (error) {
-        if (error.name === 'AbortError') {
-            console.debug("Previous fetch was aborted, expected behavior.");
-        } else {
-            console.error(`Failed to load details for tool "${toolName}":`, error);
-            toolDisplayArea.innerHTML = `<p class="error">Failed to load details for ${escapeHtml(toolName)}. ${escapeHtml(error.message)}</p>`;
-        }
+    // Default processing if inputSchema properties are not present
+    let toolParameters = [];
+    if (toolObject.inputSchema && toolObject.inputSchema.properties) {
+        const props = toolObject.inputSchema.properties;
+        const requiredFields = toolObject.inputSchema.required || [];
+
+        toolParameters = Object.keys(props).map(paramName => {
+            const param = props[paramName];
+            let inputType = 'text'; 
+            const apiType = param.type ? param.type.toLowerCase() : 'string';
+            let valueType = 'string'; 
+            let label = param.description || paramName;
+
+            if (apiType === 'integer' || apiType === 'number') {
+                inputType = 'number';
+                valueType = 'number';
+            } else if (apiType === 'boolean') {
+                inputType = 'checkbox';
+                valueType = 'boolean';
+            } else if (apiType === 'array') {
+                inputType = 'textarea'; 
+                const itemType = param.items && param.items.type ? param.items.type.toLowerCase() : 'string';
+                valueType = `array<${itemType}>`;
+                label += ' (Array)';
+            }
+
+            return {
+                name: paramName,
+                type: inputType,    
+                valueType: valueType, 
+                label: label,
+                required: requiredFields.includes(paramName),
+                authServices: toolAuthParams[paramName] || []
+            };
+        });
     }
+
+    const toolInterfaceData = {
+        id: toolName,
+        name: toolName,
+        description: toolObject.description || "No description provided.",
+        authRequired: toolAuthRequired,
+        parameters: toolParameters
+    };
+
+    console.debug("Transformed toolInterfaceData:", toolInterfaceData);
+    renderToolInterface(toolInterfaceData, toolDisplayArea);
 }
diff --git a/internal/server/static/js/runTool.js b/internal/server/static/js/runTool.js
@@ -80,15 +80,33 @@ export async function handleRunTool(toolId, form, responseArea, parameters, pret
 
     console.debug('Running tool:', toolId, 'with typed params:', typedParams);
     try {
-        const response = await fetch(`/api/tool/${toolId}/invoke`, {
+        const body = {
+            jsonrpc: "2.0",
+            id: "2",
+            method: "tools/call",
+            params: {
+                name: toolId,
+                arguments: typedParams
+            }
+        };
+
+        const mcpHeaders = { 
+            ...headers, 
+            'Content-Type': 'application/json',
+            'Mcp-Protocol-Version': '2025-11-25'
+        };
+
+        const response = await fetch(`/mcp`, {
             method: 'POST',
-            headers: headers,
-            body: JSON.stringify(typedParams)
+            headers: mcpHeaders,
+            body: JSON.stringify(body)
         });
+
         if (!response.ok) {
             const errorBody = await response.text();
             throw new Error(`HTTP error ${response.status}: ${errorBody}`);
         }
+        
         const results = await response.json();
         updateLastResults(results);
         displayResults(results, responseArea, prettifyCheckbox.checked);
@@ -144,19 +162,34 @@ export function displayResults(results, responseArea, prettify) {
     if (results === null || results === undefined) {
         return;
     }
+
+    if (results.error) {
+        responseArea.value = `MCP Error ${results.error.code}: ${results.error.message}\n${JSON.stringify(results.error.data, null, 2) || ''}`;
+        return;
+    }
+
     try {
-        const resultJson = JSON.parse(results.result);
-        if (prettify) {
-            responseArea.value = JSON.stringify(resultJson, null, 2);
+        let textContent = "";
+        if (results.result && Array.isArray(results.result.content)) {
+            textContent = results.result.content
+                .filter(c => c.type === 'text' && typeof c.text === 'string')
+                .map(c => c.text)
+                .join('\n');
+        } else if (results.result && typeof results.result.content === 'string') {
+            textContent = results.result.content;
         } else {
-            responseArea.value = JSON.stringify(resultJson);
+            textContent = JSON.stringify(results.result, null, 2);
+        }
+
+        try {
+            const resultJson = JSON.parse(textContent);
+            responseArea.value = prettify ? JSON.stringify(resultJson, null, 2) : JSON.stringify(resultJson);
+        } catch (e) {
+            // Not pure JSON string, output as-is
+            responseArea.value = textContent;
         }
     } catch (error) {
         console.error("Error parsing or stringifying results:", error);
-        if (typeof results.result === 'string') {
-            responseArea.value = results.result;
-        } else {
-            responseArea.value = "Error displaying results. Invalid format.";
-        }
+        responseArea.value = typeof results === 'object' ? JSON.stringify(results, null, 2) : String(results);
     }
 }
