Skip to content

🔨 style: Improve MCP UI #8745

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 30, 2025
Merged

🔨 style: Improve MCP UI #8745

merged 5 commits into from
Jul 30, 2025

Conversation

berry-13
Copy link
Collaborator

@berry-13 berry-13 commented Jul 30, 2025

Summary

  • 🎨 Added tooltips with help icons to AuthField for improved user guidance
  • 🛠 Improved layout flexibility and removed unnecessary placeholders in CustomUserVarsSection
  • 🎨 Standardized button appearances via variant props instead of hardcoded styles
  • 🔄 Replaced Loader2 spinner with unified Spinner component across MCP components
  • 🧹 Removed redundant dialog descriptions and refined dialog sizing for better readability
  • ♻️ Refactored ServerInitializationSection to unify button logic and reduce duplication
  • 📐 Adjusted MCPPanel layout and spacing in line with updated design system
  • ✅ Overall improvements enhance usability, maintainability, and visual consistency across MCP frontend parts

Change Type

  • a11y
  • style

Testing

Tested with these MCPs:

  • Github
  • PayPal
  • time

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
  • My changes do not introduce new warnings
  • I have written tests demonstrating that my changes are effective or that my feature works
  • Local unit tests pass with my changes
  • Any changes dependent on mine have been merged and published in downstream modules.

Copy link
Contributor

🚨 Unused i18next Keys Detected

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

  • com_ui_mcp_not_authenticated
  • com_ui_mcp_not_initialized

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

Comment on lines +72 to +78
const buttonText = isServerInitializing
? localize('com_ui_loading')
: isReinit
? localize('com_ui_reinitialize')
: requiresOAuth
? localize('com_ui_authenticate')
: localize('com_ui_mcp_initialize');

Check warning

Code scanning / ESLint

Disallow nested ternary expressions Warning

Do not nest ternary expressions.
Comment on lines +74 to +78
: isReinit
? localize('com_ui_reinitialize')
: requiresOAuth
? localize('com_ui_authenticate')
: localize('com_ui_mcp_initialize');

Check warning

Code scanning / ESLint

Disallow nested ternary expressions Warning

Do not nest ternary expressions.
@berry-13 berry-13 marked this pull request as ready for review July 30, 2025 14:02
@berry-13 berry-13 changed the title style: MCP update 🔨 style: Enhance MCP UI and Refactor Components Jul 30, 2025
@berry-13 berry-13 added ✨ enhancement New feature or request ♿ a11y Accessibility labels Jul 30, 2025
Copy link
Contributor

github-actions bot commented Jul 30, 2025

🚨 Unused i18next Keys Detected

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

  • com_ui_mcp_not_authenticated
  • com_ui_mcp_not_initialized

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

@danny-avila danny-avila changed the title 🔨 style: Enhance MCP UI and Refactor Components 🔨 style: Improve MCP UI Jul 30, 2025
@danny-avila danny-avila merged commit 09659c1 into dev Jul 30, 2025
7 checks passed
@danny-avila danny-avila deleted the style/MCP branch July 30, 2025 18:56
jhrozek pushed a commit to StacklokLabs/LibreChat that referenced this pull request Jul 31, 2025
* refactor: Enhance MCP components with improved UI elements and localization updates

* refactor: Clean up MCP components by removing unused imports and improving layout

* refactor: Update server status badge styling for improved UI consistency

* refactor: Move group up a level so 'X' and background highlight occur at same time for cancellation button

* refactor: Remove unused translation keys from the localization file

---------

Co-authored-by: Dustin Healy <[email protected]>
xycjscs pushed a commit to xycjscs/LibreChat that referenced this pull request Aug 9, 2025
* refactor: Enhance MCP components with improved UI elements and localization updates

* refactor: Clean up MCP components by removing unused imports and improving layout

* refactor: Update server status badge styling for improved UI consistency

* refactor: Move group up a level so 'X' and background highlight occur at same time for cancellation button

* refactor: Remove unused translation keys from the localization file

---------

Co-authored-by: Dustin Healy <[email protected]>
miguelwon pushed a commit to miguelwon/LibreChat that referenced this pull request Aug 10, 2025
* refactor: Enhance MCP components with improved UI elements and localization updates

* refactor: Clean up MCP components by removing unused imports and improving layout

* refactor: Update server status badge styling for improved UI consistency

* refactor: Move group up a level so 'X' and background highlight occur at same time for cancellation button

* refactor: Remove unused translation keys from the localization file

---------

Co-authored-by: Dustin Healy <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
♿ a11y Accessibility ✨ enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants