Skip to content

mcp server ui refactoring#263

Merged
daisuke-awaji merged 5 commits intomainfrom
mcp-server-ui-refactoring
Nov 2, 2025
Merged

mcp server ui refactoring#263
daisuke-awaji merged 5 commits intomainfrom
mcp-server-ui-refactoring

Conversation

@daisuke-awaji
Copy link
Contributor

  • refactor(chat): remove Monaco editor option from MCP server form
  • refactor(ToolsSection): inline component implementation from container

Remove the rich editor mode toggle and Monaco JSON editor integration from the MCP server configuration form. The form now exclusively uses a simple textarea for JSON input, simplifying the component and reducing dependencies.

Changes:
- Remove editorMode state and toggle functionality
- Remove MonacoJSONEditor component usage
- Simplify UI by removing editor mode switcher button
- Keep only the textarea editor for server configuration input

This streamlines the user experience and reduces code complexity without losing core functionality.
Replace wrapper component with full ToolsSection implementation by moving all logic from ToolsSectionContainer directly into ToolsSection.tsx. This consolidates the component structure by:

- Adding complete state management with custom hooks (useToolsState, useMcpToolsIntegration, useToolsFormatter)
- Implementing tab navigation for Available Tools and Tool Detail Settings
- Integrating ToolInfoModal for displaying tool information
- Adding event handlers and MCP tools integration
- Including translation support via react-i18next

This refactor simplifies the component architecture by removing the unnecessary container wrapper layer while preserving all existing functionality.
Refactor AgentDetailModal following Clean Architecture and Atomic Design principles by:

- Extract business logic into useAgentDetailModal custom hook
- Break down monolithic component into smaller, focused components:
  - AgentHeader, AgentMetadata, SystemPromptSection (Organisms)
  - MCPServersList, ToolsList, ScenariosList (Molecules)
- Replace custom modal implementation with Flowbite-react Modal component for better accessibility and consistency
- Improve maintainability by keeping each file under 100 lines
- Ensure proper TypeScript type safety throughout
- Add comprehensive documentation in README.md

This restructuring improves code reusability, testability, and makes the component easier to maintain and extend.
Add visual icons for standard tools using a Proxy-based dynamic icon system. Each tool now displays a distinctive icon with color coding for better visual identification. MCP tools are filtered from the tools list display and assigned a common server icon when needed.

Key changes:
- Implement toolIcons Proxy for dynamic icon resolution
- Add 20+ tool-specific icons with color-coded styling
- Filter MCP tools from AgentDetailModal tools list
- Display icons alongside tool names in ToolsList component

This improves UX by making tools more visually identifiable and handles standard vs MCP tools differently in the UI.
- Standardize tags across all agent YAML files for better categorization
  - Add 'mcp' tag to MCP-enabled agents
  - Rename generic tags to more specific ones (e.g., 'cost' → 'cost-optimization', 'developer' → 'development')
  - Ensure consistent tag ordering with 'aws' as primary tag
- Refactor AgentListView filtering logic
  - Implement switch-based source selection for better maintainability
  - Improve search filtering to support multiple agent sources
  - Separate filtering concerns (source selection vs search)

These changes improve agent discoverability and make the codebase more maintainable by using consistent tagging conventions and cleaner filtering architecture.
@daisuke-awaji daisuke-awaji merged commit 0c6ec7b into main Nov 2, 2025
4 checks passed
@daisuke-awaji daisuke-awaji deleted the mcp-server-ui-refactoring branch November 2, 2025 02:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant