langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 12:05:30 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #27099] feat(web): Add parameter rendering to MCP tool item component #31671

New Issue
Closed
opened 2026-02-21 20:49:54 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:49:54 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/27099

State: closed
Merged: Yes

Important

  1. Make sure you have read our contribution guidelines
  2. Ensure there is an associated issue and you have been assigned to it
  3. Use the correct syntax to link this PR: Fixes #<issue number>.

Summary

Added parameter information display functionality to the MCP (Model Context Protocol) tool item component in the tool detail page, allowing users to view detailed parameter information for each tool in the tooltip.

Fixes https://github.com/langgenius/dify/issues/27131

🔧 Changes Made

  • File: web/app/components/tools/mcp/detail/tool-item.tsx
  • New Features:
    • Added renderParameters() function to render tool parameter list
    • Display parameter information in tool tooltip
    • Support multi-language parameter description display
    • Hide parameter section when tool has no parameters

✨ Features

  1. Parameter Information Display: Shows parameter name, type, and description
  2. Multi-language Support: Displays parameter descriptions based on current locale
  3. Graceful Fallback: Shows "No Description" when parameter description is missing
  4. Conditional Rendering: Only displays parameter section when parameters exist
  5. Consistent Styling: Uses project's unified design system and style classes

🎨 UI/UX Improvements

  • Parameter information displayed in list format with clear hierarchy
  • Different text colors to distinguish parameter name, type, and description
  • Maintains consistency with existing design style
  • Reasonable layout in tooltip without affecting original content

🧪 Technical Implementation

  • Utilizes existing parameters field from Tool type definition
  • Uses ToolParameter type to ensure type safety
  • Follows React best practices with map function for list rendering
  • Maintains component's pure function characteristics

📱 User Experience Enhancement

Users can now in the MCP tool detail page:

  • Quickly understand what parameters each tool requires
  • View parameter types and usage descriptions
  • Better understand tool functionality and usage methods

Screenshots

Before After
a8e80808d2161acebe75722d0c867052 ed6e60a41fee82d4e874574fbf54c502

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/27099 **State:** closed **Merged:** Yes --- > [!IMPORTANT] > > 1. Make sure you have read our [contribution guidelines](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) > 1. Ensure there is an associated issue and you have been assigned to it > 1. Use the correct syntax to link this PR: `Fixes #<issue number>`. ## Summary Added parameter information display functionality to the MCP (Model Context Protocol) tool item component in the tool detail page, allowing users to view detailed parameter information for each tool in the tooltip. Fixes https://github.com/langgenius/dify/issues/27131 ### 🔧 Changes Made - **File**: `web/app/components/tools/mcp/detail/tool-item.tsx` - **New Features**: - Added `renderParameters()` function to render tool parameter list - Display parameter information in tool tooltip - Support multi-language parameter description display - Hide parameter section when tool has no parameters ### ✨ Features 1. **Parameter Information Display**: Shows parameter name, type, and description 2. **Multi-language Support**: Displays parameter descriptions based on current locale 3. **Graceful Fallback**: Shows "No Description" when parameter description is missing 4. **Conditional Rendering**: Only displays parameter section when parameters exist 5. **Consistent Styling**: Uses project's unified design system and style classes ### 🎨 UI/UX Improvements - Parameter information displayed in list format with clear hierarchy - Different text colors to distinguish parameter name, type, and description - Maintains consistency with existing design style - Reasonable layout in tooltip without affecting original content ### 🧪 Technical Implementation - Utilizes existing `parameters` field from `Tool` type definition - Uses `ToolParameter` type to ensure type safety - Follows React best practices with `map` function for list rendering - Maintains component's pure function characteristics ### 📱 User Experience Enhancement Users can now in the MCP tool detail page: - Quickly understand what parameters each tool requires - View parameter types and usage descriptions - Better understand tool functionality and usage methods ## Screenshots | Before | After | |--------|-------| | <img width="768" height="682" alt="a8e80808d2161acebe75722d0c867052" src="https://github.com/user-attachments/assets/1a2e0557-b6da-42e0-b6eb-e0f15624d1d6" /> | <img width="780" height="718" alt="ed6e60a41fee82d4e874574fbf54c502" src="https://github.com/user-attachments/assets/96f3e5f0-416b-40a6-ac00-f8ec3de28a2e" /> | ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:49:54 -05:00
yindo closed this issue 2026-02-21 20:49:54 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#31671
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?