Skip to content

feat(ui): adapt Web UI to native MCP endpoints#2725

Open
anubhav756 wants to merge 1 commit intoanubhav-complexfrom
anubhav-web-ui
Open

feat(ui): adapt Web UI to native MCP endpoints#2725
anubhav756 wants to merge 1 commit intoanubhav-complexfrom
anubhav-web-ui

Conversation

@anubhav756
Copy link
Contributor

@anubhav756 anubhav756 commented Mar 12, 2026

Overview

This PR adapts the frontend MCP Toolbox UI directly against the dynamically populated MCP specifications.

Changes

  • Overhauled underlying frontend engine files (runTool.js, loadTools.js).
  • Updated the parser to read direct standard MCP interface Result structures and format content blocks using unified Markdown conversions onto the DOM.
  • Stripped down proxy array mappers that were explicitly tailored for unwrapping old non-schema REST implementations.

Note

This PR is Part 4 of 5 to migrate legacy endpoints to standard MCP endpoints.
(Base PR: #2713)

@anubhav756 anubhav756 self-assigned this Mar 12, 2026
@anubhav756 anubhav756 requested a review from a team as a code owner March 12, 2026 13:32
@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refactors the Web UI's interaction with the backend tool services. It transitions the entire tool management and execution flow to a standardized JSON-RPC protocol via the /mcp endpoint. This change ensures consistency in API communication, adapts the UI to new data structures for tool definitions, and improves error reporting for backend interactions.

Highlights

  • Migration to MCP JSON-RPC: All UI interactions for listing tools, fetching tool details, and invoking tools have been migrated from custom REST-like endpoints to a unified /mcp JSON-RPC endpoint.
  • Standardized Tool Data Structures: The UI now expects tool lists as arrays and tool details to include parameters defined via JSON Schema within an inputSchema property, replacing previous custom parameter structures.
  • Enhanced Error Handling: New error handling has been implemented to specifically catch and display errors returned within the MCP JSON-RPC response payload.
  • Updated Result Parsing: The logic for displaying tool invocation results has been adjusted to correctly extract and parse the actual result content, which may now be nested within the MCP response.
Changelog
  • internal/server/static/js/loadTools.js
    • Migrated tool listing API call from /api/toolset/{toolsetName} to a JSON-RPC call to /mcp using the tools/list method.
    • Updated renderToolList function to expect apiResponse.tools as an array and adjusted tool name extraction.
    • Migrated tool detail fetching API call from /api/tool/{toolName} to a JSON-RPC call to /mcp using the tools/list method.
    • Refactored tool parameter parsing logic to interpret JSON Schema definitions from toolObject.inputSchema.
    • Added specific error handling for MCP JSON-RPC error responses.
  • internal/server/static/js/runTool.js
    • Updated JSDoc comments to reflect the new MCP JSON-RPC endpoint for running tools.
    • Migrated tool invocation API call from /api/tool/{toolId}/invoke to a JSON-RPC call to /mcp using the tools/call method.
    • Adjusted result display logic to handle nested content within the MCP response structure.
    • Added specific error handling for MCP JSON-RPC error responses.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 12, 2026

Link Resolution Note

Local links and directory changes work differently on GitHub than on the docsite. You must ensure fixes pass the GitHub check and also work with hugo server.
See Link Checking and Fixing with Lychee for more details.

Summary

Status Count
🔍 Total 47
✅ Successful 41
⏳ Timeouts 0
👻 Excluded 0
❓ Unknown 0
🚫 Errors 1
⛔ Unsupported 0

Errors per input

Errors in DEVELOPER.md

  • [ERROR] https://play.dgraph.io/ | Network error: Connection failed. Check network connectivity and firewall settings (error sending request for url (https://play.dgraph.io/)): Connection failed. Check network connectivity and firewall settings

Full Github Actions output

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request adapts the Web UI to use the native MCP endpoints, which is a great step forward. I've identified an opportunity to improve code clarity by removing an unused parameter, and a bug in how tool results are processed that could lead to data loss in the UI. My detailed comments and suggestions are below.

Comment on lines 166 to 188
try {
const resultJson = JSON.parse(results.result);
let content = results;
if (results.content && results.content.length > 0 && results.content[0].text) {
content = results.content[0].text;
}

const resultJson = JSON.parse(content);
if (prettify) {
responseArea.value = JSON.stringify(resultJson, null, 2);
} else {
responseArea.value = JSON.stringify(resultJson);
}
} catch (error) {
console.error("Error parsing or stringifying results:", error);
if (typeof results.result === 'string') {
responseArea.value = results.result;
if (results.content && results.content.length > 0 && results.content[0].text) {
responseArea.value = results.content[0].text;
} else if (typeof results === 'string') {
responseArea.value = results;
} else {
responseArea.value = "Error displaying results. Invalid format.";
responseArea.value = JSON.stringify(results, null, 2);
}
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The current implementation only handles the first element of the results.content array. If a tool returns multiple content parts, the others will be ignored. This is a bug.

The logic should be updated to handle all content parts. If there are multiple, they can be displayed as an array. If parsing fails, all raw text parts should be shown.

    try {
        let resultJson;
        if (results.content && Array.isArray(results.content) && results.content.length > 0) {
            const parsedContent = results.content.map(item => {
                try {
                    return JSON.parse(item.text);
                } catch {
                    return item.text;
                }
            });
            resultJson = parsedContent.length === 1 ? parsedContent[0] : parsedContent;
        } else {
            resultJson = results;
        }

        if (prettify) {
            responseArea.value = JSON.stringify(resultJson, null, 2);
        } else {
            responseArea.value = JSON.stringify(resultJson);
        }
    } catch (error) {
        console.error("Error parsing or stringifying results:", error);
        if (results.content && Array.isArray(results.content) && results.content.length > 0) {
             responseArea.value = results.content.map(c => c.text).join('\n');
        } else if (typeof results === 'string') {
             responseArea.value = results;
        } else {
             responseArea.value = JSON.stringify(results, null, 2);
        }
    }

@@ -27,12 +27,31 @@ let toolDetailsAbortController = null;
export async function loadTools(secondNavContent, toolDisplayArea, toolsetName) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The toolsetName parameter is no longer used in this function since the migration to the /mcp endpoint, which lists all tools. It should be removed from the function signature and any calling locations to improve code clarity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant