flutter-mcp-ai-chat

MCP.Pizza Chef: leehack

flutter-mcp-ai-chat is a Flutter-based MCP client application that enables users to manage and configure MCP servers easily. It offers a user-friendly interface for API key management, server configuration, and custom environment variable handling. Built with the mcp_dart package, it facilitates seamless communication with MCP servers, making it ideal for developers building AI-enhanced workflows and integrations.

Use This MCP client To

Manage multiple MCP server configurations in one app Securely store and manage API keys for MCP servers Toggle and synchronize MCP server connection states Configure custom environment variables for MCP servers Use Flutter UI to interact with MCP servers and AI workflows Demonstrate MCP client implementation in Flutter applications

README

Flutter + dart_mcp + AI Desktop App Demo

This is a Flutter-based project designed to manage and configure MCP (Multi-Connection Protocol) servers. The application provides a user-friendly interface for managing API keys, configuring server settings, and handling custom environment variables. The application uses the mcp_dart package to facilitate communication with MCP servers.

Screenshots

Main UI Settings MCP Server Setting

Features

  • API Key Management: Save, clear, and manage API keys securely using SharedPreferences.
  • MCP Server Management:
    • Add, edit, and delete MCP server configurations.
    • Toggle server connection states.
    • Apply changes to synchronize server connections.
  • Custom Environment Variables: Define and manage custom environment variables for each server.
  • Display Settings: Toggle the visibility of code blocks in chat messages.

Installation

To run this project, ensure you have Flutter SDK installed on your machine. Follow the guidelines.

  1. Clone the repository:

    git clone git@github.com:leehack/flutter-mcp-ai-chat.git
    cd flutter-mcp-ai-chat
  2. Install dependencies:

    flutter pub get
  3. Run the application:

    flutter run

Usage

API Key Management

The API key is necessary to talk to the Gemini model. You can manage your API key through the settings screen. The key can be created from the Google AI Studio.

  1. Navigate to the Settings screen.
  2. Enter your API key in the provided text field.
  3. Click Save Key to store the key locally.
  4. Use the Clear Key button to remove the stored key.

MCP Server Management

The MCP server management feature allows you to add, edit, and delete server configurations. You can also toggle the connection state of each server. At the moment, the application supports only the stdio based servers. For the example of MCP servers you can find from https://github.com/modelcontextprotocol/servers

  1. Add a new server by clicking the Add New MCP Server button.
  2. Fill in the server details, including name, command, arguments, and custom environment variables.
  3. Save the server configuration.
  4. Toggle the server's connection state using the switch in the server list.
  5. Apply changes to synchronize server connections.

Custom Environment Variables

  1. While adding or editing a server, use the Custom Environment Variables section to define key-value pairs.
  2. Add new variables using the Add Variable button.
  3. Remove variables using the delete icon next to each variable.

Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository.
  2. Create a new branch for your feature or bugfix.
  3. Commit your changes and push them to your fork.
  4. Submit a pull request with a detailed description of your changes.

License

This project is licensed under the MIT License. See the LICENSE file for details.

flutter-mcp-ai-chat FAQ

How does flutter-mcp-ai-chat manage API keys?
It securely saves, clears, and manages API keys using Flutter's SharedPreferences.
Can I add and edit MCP server configurations in this client?
Yes, the app allows adding, editing, and deleting MCP server settings.
How does the app handle server connection states?
Users can toggle server connections and apply changes to synchronize states.
What package does flutter-mcp-ai-chat use to communicate with MCP servers?
It uses the mcp_dart package for MCP server communication.
Is flutter-mcp-ai-chat suitable for building AI-enhanced workflows?
Yes, it integrates AI capabilities and MCP server management in a Flutter app.
Can I configure custom environment variables for MCP servers?
Yes, the app supports managing custom environment variables for servers.
Does flutter-mcp-ai-chat support multiple MCP servers?
Yes, it supports managing multiple MCP server configurations simultaneously.
Is this client app open source and customizable?
Yes, it is open source and designed for developers to customize and extend.