Roo-Code/webview-ui/src/components/chat/TooManyToolsWarning.tsx
roomote[bot] a148862a06
feat: warn users when too many MCP tools are enabled (#10772)
* feat: warn users when too many MCP tools are enabled

- Add WarningRow component for displaying generic warnings with icon, title, message, and optional docs link
- Add TooManyToolsWarning component that shows when users have more than 40 MCP tools enabled
- Add MAX_MCP_TOOLS_THRESHOLD constant (40)
- Add i18n translations for the warning message
- Integrate warning into ChatView to display after task header
- Add comprehensive tests for both components

Closes ROO-542

* Moves constant to the right place

* Move it to the backend

* i18n

* Add actionlink that takes you to MCP settings in this case

* Add to MCP settings too

* Bump max tools up to 60 since github itself has 50+

* DRY

* Fix test

---------

Co-authored-by: Roo Code <roomote@roocode.com>
Co-authored-by: Bruno Bergher <bruno@roocode.com>
Co-authored-by: Matt Rubens <mrubens@users.noreply.github.com>
2026-01-18 09:22:09 -05:00

39 lines
1.1 KiB
TypeScript

import React, { useCallback } from "react"
import { useAppTranslation } from "@/i18n/TranslationContext"
import { useTooManyTools } from "@src/hooks/useTooManyTools"
import WarningRow from "./WarningRow"
/**
* Displays a warning when the user has too many MCP tools enabled.
* LLMs get confused when offered too many tools, which can lead to errors.
*
* The warning is shown when:
* - The total number of enabled tools across all enabled MCP servers exceeds the threshold
*
* @example
* <TooManyToolsWarning />
*/
export const TooManyToolsWarning: React.FC = () => {
const { t } = useAppTranslation()
const { isOverThreshold, title, message } = useTooManyTools()
const handleOpenMcpSettings = useCallback(() => {
window.postMessage({ type: "action", action: "settingsButtonClicked", values: { section: "mcp" } }, "*")
}, [])
// Don't show warning if under threshold
if (!isOverThreshold) {
return null
}
return (
<WarningRow
title={title}
message={message}
actionText={t("chat:tooManyTools.openMcpSettings")}
onAction={handleOpenMcpSettings}
/>
)
}
export default TooManyToolsWarning