feat(agent): Added support for MCP to Friday

[hongxicheng]

Description

Checklist

Please check the following items before code is ready to be reviewed.

• Code has been formatted with npm run format command in the root directory
• Docstrings/comments are in appropriate style (TSDoc/JSDoc for TypeScript/JavaScript, Google style for Python)
• Related documentation has been updated (e.g. links, examples, etc.)
• Code is ready for review

[gemini-code-assist]

Summary of Changes

Hello @hongxicheng, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly expands the capabilities of the Friday agent by integrating Model Context Protocol (MCP) support. It provides a robust framework for users to define and interact with external services, whether running locally or remotely, enhancing Friday's ability to leverage diverse tools and data sources. The changes include both the necessary backend infrastructure for managing these connections and a user-friendly interface for configuration.

Highlights

• Model Context Protocol (MCP) Integration: Introduced comprehensive support for connecting and managing both local and remote MCP servers within the Friday agent, allowing for extended functionality and tool integration.
• Frontend User Interface for MCP Management: Developed a new UI for Friday's chat page, enabling users to add, configure, enable/disable, and delete MCP server configurations through a dedicated management sheet.
• Backend MCP Server Lifecycle Management: Implemented Python backend logic to parse MCP server configurations, establish connections to local (StdIOStatefulClient) and remote (HttpStatelessClient) services, register them with the AgentScope toolkit, and ensure proper connection closure.
• Configuration Persistence and Validation: Enhanced Friday's configuration management to store MCP server settings persistently and added client-side validation for MCP server configurations.

Changelog

• package-lock.json
  • Updated dependency peer properties for various packages, adding peer: true to some and removing it from others.
• packages/app/friday/args.py
  • Added json_list_type function to parse JSON strings into a list of dictionaries.
  • Introduced a new command-line argument --mcpServers for passing MCP server configurations.
• packages/app/friday/main.py
  • Imported connect_mcp_servers and close_mcp_connections from the new mcp_manager module.
  • Integrated logic to connect to configured MCP servers at startup and close connections upon shutdown.
• packages/app/friday/mcp_manager/init.py
  • Added a new Python module mcp_manager to encapsulate MCP connection logic.
  • Exposed connect_mcp_servers and close_mcp_connections functions.
• packages/app/friday/mcp_manager/manager.py
  • Implemented connect_mcp_servers to iterate through MCP configurations, distinguishing between local and remote types.
  • Developed _connect_local_server to launch and connect to local MCP services using StdIOStatefulClient.
  • Created _connect_remote_server to establish connections to remote MCP services via HttpStatelessClient.
  • Added close_mcp_connections to gracefully shut down local MCP client connections in LIFO order.
• packages/client/src/components/MCP/DeleteConfirmDialog.tsx
  • Added a new React component for a confirmation dialog when deleting an MCP server.
• packages/client/src/components/MCP/MCPServerCardHeader.tsx
  • Added a new React component for the header of an MCP server configuration card, including enable/disable switch, server name display, and delete button.
• packages/client/src/components/MCP/MCPServerForm.tsx
  • Added a new React component for the form used to configure MCP server details, supporting both local and remote server types.
• packages/client/src/context/FridaySettingRoomContext.tsx
  • Updated the saveFridayConfig function to refresh the local fridayConfig state upon a successful save operation.
• packages/client/src/context/MCPContext.tsx
  • Added a new React context (MCPContext) to manage the state and actions related to MCP server configurations in the frontend.
• packages/client/src/i18n/en.json
  • Added new English translation keys for MCP server management UI elements, including titles, descriptions, placeholders, and validation messages.
• packages/client/src/i18n/zh.json
  • Added new Chinese translation keys for MCP server management UI elements, including titles, descriptions, placeholders, and validation messages.
• packages/client/src/pages/FridayPage/ChatPage/MCPManagementSheet.tsx
  • Added a new React component (MCPManagementSheet) that provides a sidebar interface for managing MCP server configurations, including adding, editing, and deleting servers.
• packages/client/src/pages/FridayPage/ChatPage/index.tsx
  • Integrated the MCPManagementSheet into the Friday chat page, accessible via a new 'MCP' button.
  • Added state and handlers for opening/closing the MCP management sheet and saving MCP configurations.
• packages/client/src/pages/FridayPage/index.tsx
  • Wrapped the ChatPage component with FridaySettingRoomContextProvider to provide access to Friday's settings context.
• packages/shared/src/config/friday.ts
  • Defined the MCPServer interface to structure MCP server configuration data.
  • Added an optional mcpServers array property to the FridayConfig interface to store multiple MCP server configurations.

Activity

• The pull request introduces a new feature for MCP server management, indicating initial development and implementation.
• The author has included a checklist in the PR description, suggesting a readiness for review and adherence to project standards.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces support for the Model Context Protocol (MCP) to the Friday agent, allowing it to connect to and utilize external services. The changes include backend logic for managing local and remote MCP server connections, a new UI for configuring these servers, and updates to the argument parsing and main application flow to integrate this new functionality. My review focuses on improving the robustness of the new connection logic, ensuring consistency between frontend validation and backend parsing, and addressing a bug in the new UI component. I've also suggested a small cleanup for better code maintainability.

[hongxicheng]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces Model Context Protocol (MCP) server management functionality to the application. Key changes include adding a json5 dependency, implementing new Python argument parsing for --mcpServers (a JSON list of configurations), and creating a new mcp_manager module in the backend to connect and manage both local and remote MCP servers using agentscope.mcp clients. The frontend now features a comprehensive UI for MCP server management, including components for adding, deleting, editing (with simple and advanced JSON modes), and enabling/disabling servers. This UI is integrated into the Friday chat page via a new MCPManagementSheet and uses a dedicated MCPContext for state management and validation. Translation keys for the new MCP features have been added for both English and Chinese locales. Additionally, the FridaySettingRoomContext was updated to ensure local configuration state is only updated upon successful saving.