feat(web): Add parameter rendering to MCP tool item component (#27099)

web/app/components/tools/mcp/detail/tool-item.tsx

@@ -6,6 +6,7 @@ import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import Tooltip from '@/app/components/base/tooltip'
 import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   tool: Tool
@@ -16,6 +17,32 @@ const MCPToolItem = ({
 }: Props) => {
   const { locale } = useContext(I18n)
   const language = getLanguage(locale)
+  const { t } = useTranslation()
+
+  const renderParameters = () => {
+    const parameters = tool.parameters
+
+    if (parameters.length === 0)
+      return null
+
+    return (
+      <div className='mt-2'>
+        <div className='title-xs-semi-bold mb-1 text-text-primary'>{t('tools.mcp.toolItem.parameters')}:</div>
+        <ul className='space-y-1'>
+          {parameters.map((parameter) => {
+            const descriptionContent = parameter.human_description[language] || t('tools.mcp.toolItem.noDescription')
+            return (
+              <li key={parameter.name} className='pl-2'>
+                <span className='system-xs-regular font-bold text-text-secondary'>{parameter.name}</span>
+                <span className='system-xs-regular mr-1 text-text-tertiary'>({parameter.type}):</span>
+                <span className='system-xs-regular text-text-tertiary'>{descriptionContent}</span>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    )
+  }
 
   return (
     <Tooltip
@@ -26,6 +53,7 @@ const MCPToolItem = ({
         <div>
           <div className='title-xs-semi-bold mb-1 text-text-primary'>{tool.label[language]}</div>
           <div className='body-xs-regular text-text-secondary'>{tool.description[language]}</div>
+          {renderParameters()}
         </div>
       )}
     >

web/i18n/en-US/tools.ts

@@ -243,6 +243,10 @@ const translation = {
       },
       publishTip: 'App not published. Please publish the app first.',
     },
+    toolItem: {
+      noDescription: 'No description',
+      parameters: 'Parameters',
+    },
   },
   allTools: 'All tools',
 }

web/i18n/zh-Hans/tools.ts

@@ -243,6 +243,10 @@ const translation = {
       },
       publishTip: '应用未发布。请先发布应用。',
     },
+    toolItem: {
+      parameters: '参数',
+      noDescription: '暂无描述',
+    },
   },
   allTools: '全部工具',
 }