Welcome to MCP Toolbox UI
+This is the main content area. Click a tab on the left to navigate.
+Fetching tools...
'; + try { + const response = await fetch(`/api/toolset/${toolsetName}`); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const apiResponse = await response.json(); + renderToolList(apiResponse, secondNavContent, toolDisplayArea); + } catch (error) { + console.error('Failed to load tools:', error); + secondNavContent.innerHTML = `Failed to load tools:
${error}Loading tool details...
'; + + try { + const response = await fetch(`/api/tool/${encodeURIComponent(toolName)}`, { signal }); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const apiResponse = await response.json(); + + if (!apiResponse.tools || !apiResponse.tools[toolName]) { + throw new Error(`Tool "${toolName}" data not found in API response.`); + } + const toolObject = apiResponse.tools[toolName]; + console.debug("Received tool object: ", toolObject) + + const toolInterfaceData = { + id: toolName, + name: toolName, + description: toolObject.description || "No description provided.", + 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.authSources, + 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 = `Failed to load details for ${toolName}. ${error.message}
`; + } + } +} \ No newline at end of file diff --git a/internal/server/static/js/mainContent.js b/internal/server/static/js/mainContent.js new file mode 100644 index 000000000000..e8542968bcb1 --- /dev/null +++ b/internal/server/static/js/mainContent.js @@ -0,0 +1,40 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +/** + * Renders the main content area into the HTML. + * @param {string} containerId The ID of the DOM element to inject the content into. + * @param {string} idString The id of the item inside the main content area. + */ +function renderMainContent(containerId, idString) { + const mainContentContainer = document.getElementById(containerId); + if (!mainContentContainer) { + console.error(`Content container with ID "${containerId}" not found.`); + return; + } + + const idAttribute = idString ? `id="${idString}"` : ''; + const contentHTML = ` +This is the main content area. Click a tab on the left to navigate.
+${tool.name}
`; + descBox.className = 'tool-box tool-description'; + descBox.innerHTML = `${tool.description}
`; + + toolInfoContainer.className = 'tool-info'; + toolInfoContainer.appendChild(nameBox); + toolInfoContainer.appendChild(descBox); + gridContainer.appendChild(toolInfoContainer); + + const DISLCAIMER_INFO = "*Checked parameters are sent with the value from their text field. Empty fields will be sent as an empty string. To exclude a parameter, uncheck it." + const paramsContainer = document.createElement('div'); + const form = document.createElement('form'); + const paramsHeader = document.createElement('div'); + const disclaimerText = document.createElement('div'); + + paramsContainer.className = 'tool-params tool-box'; + paramsContainer.innerHTML = 'To obtain a Google OAuth ID token using a service account:
+gcloud auth listgcloud auth print-identity-token --audiences=YOUR_CLIENT_ID_HERE_token
+ {
+ "Content-Type": "application/json",
+ "my-google-auth_token": "YOUR_ID_TOKEN_HERE"
+} This token is typically short-lived.
`; + +const AUTH_TOKEN_INSTRUCTIONS_STANDARD = ` +To obtain a Google OAuth ID token using a standard account:
+gcloud auth listhttps://developers.google.com/oauthplayground_token
+ {
+ "Content-Type": "application/json",
+ "my-google-auth_token": "YOUR_ID_TOKEN_HERE"
+} This token is typically short-lived.
`; \ No newline at end of file diff --git a/internal/server/static/js/tools.js b/internal/server/static/js/tools.js new file mode 100644 index 000000000000..1928ec15228d --- /dev/null +++ b/internal/server/static/js/tools.js @@ -0,0 +1,32 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { loadTools } from "./loadTools.js"; + +/** + * These functions runs after the browser finishes loading and parsing HTML structure. + * This ensures that elements can be safely accessed. + */ +document.addEventListener('DOMContentLoaded', () => { + const toolDisplayArea = document.getElementById('tool-display-area'); + const secondaryPanelContent = document.getElementById('secondary-panel-content'); + const DEFAULT_TOOLSET = ""; // will return all toolsets + + if (!secondaryPanelContent || !toolDisplayArea) { + console.error('Required DOM elements not found.'); + return; + } + + loadTools(secondaryPanelContent, toolDisplayArea, DEFAULT_TOOLSET); +}); diff --git a/internal/server/static/js/toolsets.js b/internal/server/static/js/toolsets.js new file mode 100644 index 000000000000..f49afbf5f3ef --- /dev/null +++ b/internal/server/static/js/toolsets.js @@ -0,0 +1,51 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { loadTools } from "./loadTools.js"; + +document.addEventListener('DOMContentLoaded', () => { + const searchInput = document.getElementById('toolset-search-input'); + const searchButton = document.getElementById('toolset-search-button'); + const secondNavContent = document.getElementById('secondary-panel-content'); + const toolDisplayArea = document.getElementById('tool-display-area'); + + if (!searchInput || !searchButton || !secondNavContent || !toolDisplayArea) { + console.error('Required DOM elements not found.'); + return; + } + + // Event listener for search button click + searchButton.addEventListener('click', () => { + toolDisplayArea.innerHTML = ''; + const toolsetName = searchInput.value.trim(); + if (toolsetName) { + loadTools(secondNavContent, toolDisplayArea, toolsetName) + } else { + secondNavContent.innerHTML = 'Please enter a toolset name to see available tools.
To view the default toolset that consists of all tools, please select the "Tools" tab.
Please enter a toolset name to see available tools.
To view the default toolset that consists of all tools, please select the "Tools" tab.