mirror of
https://github.com/googleapis/genai-toolbox.git
synced 2026-01-14 18:08:05 -05:00
37ae55648d
Add instructions on basic usage + links to the public documentation on the main content area of the Homepage, Tools page, and Toolsets page.
80 lines
3.8 KiB
JavaScript
80 lines
3.8 KiB
JavaScript
// 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, instructionContent) {
|
|
const mainContentContainer = document.getElementById(containerId);
|
|
if (!mainContentContainer) {
|
|
console.error(`Content container with ID "${containerId}" not found.`);
|
|
return;
|
|
}
|
|
|
|
const idAttribute = idString ? `id="${idString}"` : '';
|
|
const contentHTML = `
|
|
<div class="main-content-area">
|
|
<div class="top-bar">
|
|
</div>
|
|
<main class="content" ${idAttribute}">
|
|
${instructionContent}
|
|
</main>
|
|
</div>
|
|
`;
|
|
|
|
mainContentContainer.innerHTML = contentHTML;
|
|
}
|
|
|
|
function getHomepageInstructions() {
|
|
return `
|
|
<div class="resource-instructions">
|
|
<h1 class="resource-title">Welcome to Toolbox UI</h1>
|
|
<p class="resource-intro">Toolbox UI is a built-in web interface that allows users to visually inspect and test out configured resources such as tools and toolsets. To get started, select a resource from the navigation tab to the left.</p>
|
|
<a href="https://googleapis.github.io/genai-toolbox/how-to/use-toolbox-ui/" class="btn btn--externalDocs" target="_blank" rel="noopener noreferrer">Toolbox UI Documentation</a>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function getToolInstructions() {
|
|
return `
|
|
<div class="resource-instructions">
|
|
<h1 class="resource-title">Tools</h1>
|
|
<p class="resource-intro">To inspect and test a tool, please click on one of your tools to the left.</p>
|
|
<h2 class="resource-subtitle">What are Tools?</h2>
|
|
<p class="resource-description">
|
|
Tools define actions an agent can take, such as running a SQL statement or interacting with a source.
|
|
You can define Tools as a map in the <code>tools</code> section of your <code>tools.yaml</code> file. <br><br>
|
|
Some tools also use <strong>parameters</strong>. Parameters for each Tool will define what inputs the agent will need to provide to invoke them.
|
|
</p>
|
|
<a href="https://googleapis.github.io/genai-toolbox/resources/tools/" class="btn btn--externalDocs" target="_blank" rel="noopener noreferrer">Tools Documentation</a>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function getToolsetInstructions() {
|
|
return `
|
|
<div class="resource-instructions">
|
|
<h1 class="resource-title">Toolsets</h1>
|
|
<p class="resource-intro">To inspect a specific toolset, please enter the name of a toolset and press search.</p>
|
|
<h2 class="resource-subtitle">What are Toolsets?</h2>
|
|
<p class="resource-description">
|
|
Toolsets define groups of tools an agent can access. You can define Toolsets as a map in the <code>toolsets</code> section of your <code>tools.yaml</code> file. Toolsets may
|
|
only include valid tools that are also defined in your <code>tools.yaml</code> file.
|
|
</p>
|
|
<a href="https://googleapis.github.io/genai-toolbox/getting-started/configure/#toolsets" class="btn btn--externalDocs" target="_blank" rel="noopener noreferrer">Toolsets Documentation</a>
|
|
</div>
|
|
`;
|
|
} |