✨ feat: Enhance Agent Panel with Tool Grouping #7951

dustinhealy · 2025-06-17T20:22:57Z

Summary

This PR enhances agent panel tool management by adding support for grouped tools from MCP server configurations, improving tool selection UX, and updating type definitions and rendering logic to better organize large tool sets.

Core Features

Grouped tools are displayed together under collapsible headings in the Agent Panel.
"Select all" checkbox lets users enable or disable all tools in a group at once.
Each tool in a group can also be toggled individually.
Tool descriptions are now shown in hovercards when hovering over the help icon for a given tool in a group.
Group and tool names and icons are displayed using metadata from the tool configuration.
Updated type definitions to support grouped tools.

Change Type

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update
Translation update

Details / Change Breakdown

Tool Grouping & Selection

Organized tools into groups with collapsible sections in the Agent Panel handled by the AgentTool component.
Each group features a "(de)select all" checkbox, plus per-tool selection logic.
Hovercards for subtool descriptions, appearing when hovering over the help icon.

UI/UX

Group and tool names, icons, and metadata displayed throughout selection interface.
Visual and interaction consistency improved for tool management.

Type System & Data Layer

Added new AgentToolType type to support grouping/metadata.
Moved Action and MCP-related types out of assistants.ts and into agents.ts.
Extended type definitions and context to support grouped tools and related metadata.

Screenshots

ToolSelectDialog – Before (No Grouping)

Before: Flat list of all tools without grouping in ToolSelectDialog

ToolSelectDialog – After (Grouped Tools)

After: Tools from the same MCP are organized into a single group in ToolSelectDialog

ToolSelectDialog – Before (Viewport Height Issue)

Before: Dialog can overflow viewport and content may be inaccessible

ToolSelectDialog – After (Viewport Height Fixed)

After: Dialog is constrained to viewport with internal scrolling for large content

AgentConfig – Before & After

Before: All tools shown in a flat list in AgentConfig

After: Tools are grouped with collapsible sections and batch selection in AgentConfig

ToolSelectDialog – Hovercards

Screen.Recording.2025-06-17.at.1.03.33.PM.mov

Grouped tools now show their descriptions when their help icon is hovered over

Testing

I tested the agent panel grouped tools features with the following steps:

Opened Agent Panel and confirmed tools added from MCP server 'filesystem' were now grouped under a collapsible heading.
Used the "select all" checkbox to enable/disable all tools in a group and verified batch selection state.
Individually checked/unchecked tools within the group and confirmed state accuracy.
Hovered over the help icon for each tool in the group and verified that the description appears in a hovercard.
Added and removed tools across different agents and ensured both UI and configuration updated accordingly.
Switched between agents and/or refreshed to confirm selection persistence.
Ensured standalone (non-grouped) tools are unaffected and render as before.

Checklist

My code adheres to this project's style guidelines
I have performed a self-review of my own code
I have commented in any complex areas of my code
I have made pertinent documentation changes (if needed)
My changes do not introduce new warnings

github-actions · 2025-06-17T20:25:18Z

🚨 Unused i18next Keys Detected

The following translation keys are defined in translation.json but are not used in the codebase:

com_ui_tool_info
com_ui_tool_more_info

⚠️ Please remove these unused keys to keep the translation files clean.

client/src/components/SidePanel/Agents/AgentTool.tsx

* 🧰 feat: Added support for grouping tools in the Agent Panel, allowing for better organization and management of related tools. * 💡 feat: Added hovercards for tools belonging to a group which display their tool descriptions when their help icon is hovered over. * 🧹 chore: Updated the AgentPanelContext to include grouped tools and their metadata. * 🔨 refactor: Refactored AgentConfig and AgentTool components to utilize the new tool structure and enhance rendering logic. * 🔍 feat: Improved the ToolSelectDialog to filter and display tools based on user input, including searching for tools within a group, and limits viewport height to prevent overflowing vertically on smaller screens. This update enhances the overall functionality and usability of the Agent Panel, making it easier for users to interact with tools.

…bles Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

…AgentTool

client/src/components/Tools/ToolSelectDialog.tsx

client/src/components/Tools/ToolItem.tsx

client/src/components/Tools/ToolSelectDialog.tsx

* ✨ feat: Enhance Agent Panel with Tool Grouping * 🧰 feat: Added support for grouping tools in the Agent Panel, allowing for better organization and management of related tools. * 💡 feat: Added hovercards for tools belonging to a group which display their tool descriptions when their help icon is hovered over. * 🧹 chore: Updated the AgentPanelContext to include grouped tools and their metadata. * 🔨 refactor: Refactored AgentConfig and AgentTool components to utilize the new tool structure and enhance rendering logic. * 🔍 feat: Improved the ToolSelectDialog to filter and display tools based on user input, including searching for tools within a group, and limits viewport height to prevent overflowing vertically on smaller screens. This update enhances the overall functionality and usability of the Agent Panel, making it easier for users to interact with tools. * Potential fix for code scanning alert no. 6217: Disallow unused variables Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * fix: Agent tool type mismatches * fix: accessibility issues and mcp tool overflow issue * fix: enhance keyboard accessibility and prevent event propagation in AgentTool * chore: WIP types * chore: address comments and fix accordian collapse bug --------- Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> Co-authored-by: Danny Avila <danny@librechat.ai>

github-advanced-security bot found potential problems Jun 17, 2025

View reviewed changes

client/src/components/SidePanel/Agents/AgentTool.tsx Fixed Show fixed Hide fixed

dustinhealy force-pushed the feat/mcp-tool-groups branch 5 times, most recently from aa05dca to e36ff09 Compare June 17, 2025 22:15

github-advanced-security bot found potential problems Jun 17, 2025

View reviewed changes

client/src/components/SidePanel/Agents/AgentTool.tsx Fixed Show fixed Hide fixed

dustinhealy marked this pull request as ready for review June 17, 2025 23:14

dustinhealy requested a review from danny-avila June 17, 2025 23:14

dustinhealy and others added 2 commits June 18, 2025 02:06

Potential fix for code scanning alert no. 6217: Disallow unused varia…

740c119

…bles Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

danny-avila force-pushed the feat/mcp-tool-groups branch from ed1393d to 740c119 Compare June 18, 2025 06:09

danny-avila added 4 commits June 18, 2025 02:30

fix: Agent tool type mismatches

b0bd7a9

fix: accessibility issues and mcp tool overflow issue

a0368c9

fix: enhance keyboard accessibility and prevent event propagation in …

210b15a

…AgentTool

chore: WIP types

ab1d00e

danny-avila requested changes Jun 18, 2025

View reviewed changes

chore: address comments and fix accordian collapse bug

514df09

dustinhealy force-pushed the feat/mcp-tool-groups branch from 38c0668 to 514df09 Compare June 19, 2025 01:51

danny-avila approved these changes Jun 19, 2025

View reviewed changes

danny-avila merged commit 8b15bb2 into dev Jun 19, 2025
6 checks passed

danny-avila deleted the feat/mcp-tool-groups branch June 19, 2025 14:01

danny-avila mentioned this pull request Jun 20, 2025

[Enhancement]: Group tools at higher level (for ex. Playwright) within the MCP server #6950

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

✨ feat: Enhance Agent Panel with Tool Grouping #7951

✨ feat: Enhance Agent Panel with Tool Grouping #7951

Uh oh!

dustinhealy commented Jun 17, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 17, 2025 •

edited by dustinhealy

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

✨ feat: Enhance Agent Panel with Tool Grouping #7951

✨ feat: Enhance Agent Panel with Tool Grouping #7951

Uh oh!

Conversation

dustinhealy commented Jun 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Core Features

Change Type

Details / Change Breakdown

Tool Grouping & Selection

UI/UX

Type System & Data Layer

Screenshots

ToolSelectDialog – Before (No Grouping)

ToolSelectDialog – After (Grouped Tools)

ToolSelectDialog – Before (Viewport Height Issue)

ToolSelectDialog – After (Viewport Height Fixed)

AgentConfig – Before & After

ToolSelectDialog – Hovercards

Testing

Checklist

Uh oh!

github-actions bot commented Jun 17, 2025 • edited by dustinhealy Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚨 Unused i18next Keys Detected

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dustinhealy commented Jun 17, 2025 •

edited

Loading

github-actions bot commented Jun 17, 2025 •

edited by dustinhealy

Loading