feat: add MCP server management functionality to Chat component #80
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Collaborator
Gyurmatag
commented
May 12, 2025
Gyurmatag
commented
- Introduced MCP server addition and removal capabilities in the Chat component.
- Implemented fetching of MCP connections on component mount.
- Added UI elements for displaying and managing MCP connections.
- Updated dependencies including @radix-ui/react-dialog and agents.
- Enhanced session management with unique session IDs stored in localStorage.
- Introduced MCP server addition and removal capabilities in the Chat component. - Implemented fetching of MCP connections on component mount. - Added UI elements for displaying and managing MCP connections. - Updated dependencies including @radix-ui/react-dialog and agents. - Enhanced session management with unique session IDs stored in localStorage.
Gyurmatag
commented
May 12, 2025
…iguration - Updated the agents package from version 0.0.83 to 0.0.88 in package.json and package-lock.json. - Added session ID retrieval from localStorage to the agent configuration in the Chat component.
- Added DropdownMenu component to the Chat interface, providing a control panel with placeholder actions. - Refactored fetchMcpConnections to use useCallback for better performance. - Adjusted layout and styling for improved UI consistency.
…ion items - Replaced static menu items in the DropdownMenu with dynamic items generated from mcpConnections. - Improved UI to display connection URLs and placeholder tool counts for better user experience.
…t component - Enhanced the McpConnection type to include an optional tools property for better data handling. - Updated the fetching logic to accommodate the new tools property from the API response. - Modified the DropdownMenu to dynamically display the count of tools associated with each MCP connection.
- Changed the CSS file reference from styles.css to index.css in components.json and client.tsx. - Updated Tailwind CSS and related packages to version 4.1.7 in package.json and package-lock.json. - Removed the deprecated styles.css file, consolidating styles into index.css for better organization. - Adjusted README.md to reflect the new CSS file structure.
- Updated DropdownMenuContent and DropdownMenuSubTrigger with new Tailwind CSS classes for improved styling and responsiveness. - Added hover effects to DropdownMenuSubTrigger and DropdownMenuItem for better user interaction. - Enhanced DropdownMenuSubContent with border styling for a more polished appearance.
- Introduced a new DropdownMenuItem for adding MCP servers, enhancing user interaction. - Updated styling for the new menu item to maintain consistency with existing UI elements.
…component - Removed the static MCP connections list and integrated a dynamic display within the DropdownMenu. - Added a message for when no MCP servers are available, enhancing user feedback. - Improved the layout and styling of MCP connection items for better usability and visual consistency. - Updated the remove MCP connection functionality to prevent event propagation issues.
- Added onMcpUpdate handler to dynamically update MCP connections based on server state changes. - Removed the fetchMcpConnections function and its associated calls, as real-time updates now handle connection management. - Enhanced tools extraction logic from MCP server data for improved connection details. - Updated connection state display to reflect real-time statuses.
…field - Removed the localUrl state and its associated input field from the AddMcpServerDialog component. - Updated the onSubmit function to only require name and url parameters. - Cleaned up the component's state management and UI for a more streamlined user experience.
…erverDialog - Added react-hook-form to manage form state and validation for the AddMcpServerDialog component. - Replaced local state management for name and url with form registration and validation. - Enhanced user feedback by displaying error messages for required fields. - Streamlined the form submission process and reset functionality for better user experience.
- Replaced DropdownMenuSub with DropdownMenuItem for a more streamlined layout of MCP connections. - Improved the styling and structure of connection items for better usability. - Maintained functionality for removing MCP connections while enhancing the overall user experience.
- Added a name property to the connection object to enhance the display of MCP connections. - Updated the connection display logic to show the name if available, falling back to the URL otherwise for improved clarity.
- Removed the name property from the connection object to simplify the display logic. - Updated the connection display to show only the URL, enhancing clarity and consistency in the Chat component. - Adjusted the server-side logic to use the APP_URL as a fallback for localUrl when adding MCP servers.
- Replaced react-hook-form with custom state management for name and URL inputs in AddMcpServerDialog. - Implemented validation logic to ensure required fields are filled and URLs are correctly formatted. - Updated form submission to reset input fields and clear error messages after submission. - Adjusted the Chat component to handle MCP connections with the new name property for improved display.
- Changed the CSS file name from index.css to styles.css for better clarity and organization. - Updated all references in components.json, README.md, and client.tsx to reflect the new file name. - Removed the old index.css file to streamline the project structure.
- Eliminated unnecessary comments regarding fetching MCP connections, as real-time updates are now handling connection management. - Streamlined the code for better readability and clarity in the Chat component.
- Moved DropdownMenu components from dropdown-menu.tsx to a new directory structure under dropdown/DropdownMenu.tsx for better organization. - Updated import paths in app.tsx to reflect the new component location. - Removed the old dropdown-menu.tsx file to streamline the project structure.
- Removed redundant methods for adding, removing, and retrieving MCP connections, simplifying the codebase. - Updated the logic to directly call the relevant methods from the mcp object, enhancing clarity and reducing complexity. - Improved response handling for MCP connection requests in the chat message processing logic.
- Changed the method call for retrieving MCP servers from an asynchronous to a synchronous call, improving performance and simplifying the code. - Ensured the response format remains consistent with previous implementations for seamless integration.
- Added react-hook-form to manage form state and validation for the AddMcpServerDialog component. - Replaced local state management for name and URL inputs with form registration and validation. - Improved error handling by displaying messages for required fields and invalid URLs. - Streamlined form submission and reset functionality for enhanced user experience. - Updated Input component to simplify its structure and improve usability.
- Replaced inline mapping logic for MCP server connections with a dedicated function, improving code readability and maintainability. - Updated the name property assignment to use sessionId directly, enhancing clarity. - Streamlined the handling of tools within the connection mapping for better performance and consistency.
- Updated package dependencies, including the addition of @tailwindcss/vite for improved styling capabilities. - Refactored the Chat component to enhance MCP connection handling, including clearer type definitions and improved state management. - Streamlined the AddMcpServerDialog component with better form handling and validation using react-hook-form. - Improved the DropdownMenu and dialog components for better organization and usability. - Enhanced the Input component structure for improved clarity and maintainability.
- Enhanced the formatting of the mapMcpServersToConnections function for better readability. - Maintained existing functionality while improving code structure and organization.
- Changed the import statement for the Input component to use a type import for better clarity and maintainability. - Ensured consistency in component imports within the AddMcpServerDialog file.
- Changed the import statement for the Input component to ensure it aligns with the project's component structure. - Improved clarity and maintainability of the AddMcpServerDialog file by using the correct import path.
…ency - Updated the import statement for the Input component to match the correct casing in the file path. - Ensured alignment with the project's component structure for improved maintainability.
…ency - Updated the import statement for the Input component to match the correct casing in the file path. - Ensured alignment with the project's component structure for improved maintainability.
- Eliminated unnecessary comments related to the Settings Icon Button and Control Panel DropdownMenu to enhance code readability. - Improved overall cleanliness of the Chat component by removing outdated or redundant comments.
- Removed the inline mapMcpServersToConnections function from the Chat component for better organization. - Imported the function from the mcp types module to enhance code clarity and maintainability. - Updated type definitions for MCP connections to streamline the connection handling process.
- Adjusted the structure of the connection display to use a flex column layout for better organization. - Improved styling by ensuring the connection name and state are clearly presented within a dedicated container. - Enhanced readability and maintainability of the Chat component's UI.
Collaborator
Author
|
So so far the look and feel of this feature is this: |
Gyurmatag
commented
May 21, 2025
| interface Env { | ||
| APP_URL: string; | ||
| OPENAI_API_KEY: string; | ||
| ANTHROPIC_API_KEY: string; |
Collaborator
Author
There was a problem hiding this comment.
Just fyi, we need Anthropic to handle the MCP tools without parameters. The Open AI API has some bug with that one as seen on the other PR comment.
- Added new environment variables for application configuration, including APP_URL and ANTHROPIC_API_KEY. - Improved styling in the Chat component for better visual feedback and accessibility in dark mode. - Updated AddMcpServerDialog to enhance text visibility and consistency in dark mode. - Refined Input component styles for improved user experience across themes.
…ponents in Chat - Updated @radix-ui/react-slot from version 1.2.2 to 1.2.3 in package.json and package-lock.json. - Refactored button elements in the Chat component to use a custom Button component for improved styling and consistency.
…pServerDialog - Updated the AddMcpServerDialog to use a custom Label component for form fields, enhancing consistency and maintainability. - Improved accessibility by ensuring required fields are clearly indicated and validation states are properly managed.
- Consolidated the Label component for the MCP URL input by removing unnecessary line breaks, enhancing readability and maintainability of the code. - Maintained required field indication and validation state management for improved accessibility.
- Eliminated the 'destructive' variant from the Button component in the Chat to streamline its appearance and functionality. - Enhanced consistency in button styling across the Chat component.
mmkal
reviewed
Jun 24, 2025
mmkal
left a comment
mmkal
left a comment
There was a problem hiding this comment.
This is great! Aside from my minor comment, I also had to make the below change to wrangler.jsonc to get this working
There was a problem hiding this comment.
I think nanoid is missing from here. If it's working it may be being hoisted into node_modules as a transient dependency - vite caught it after I accidentally installed with pnpm which doesn't hoist.
Collaborator
Author
There was a problem hiding this comment.
Thanks for the heads up! I will fix it after @threepointone looked at this PR.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.