Flutter + dart_mcp + AI Desktop App Demo

Flutter + dart_mcp + AI Desktop App Demo

By leehack GitHub

Demonstrate how to implement MCP Client in Flutter application with AI.

Overview

What is Flutter + dart_mcp + AI Desktop App Demo?

This project is a Flutter-based application designed to manage and configure MCP (Multi-Connection Protocol) servers, providing a user-friendly interface for handling API keys, server settings, and custom environment variables.

How to use Flutter + dart_mcp + AI Desktop App?

To use the application, clone the repository, install the necessary dependencies, and run the application using Flutter SDK. Manage your API keys and MCP server configurations through the settings screen.

Key features of Flutter + dart_mcp + AI Desktop App?

  • API Key Management: Securely manage API keys using SharedPreferences.
  • MCP Server Management: Add, edit, delete server configurations, and toggle connection states.
  • Custom Environment Variables: Define and manage environment variables for each server.
  • Display Settings: Control the visibility of code blocks in chat messages.

Use cases of Flutter + dart_mcp + AI Desktop App?

  1. Managing multiple MCP server connections.
  2. Configuring API keys for AI model interactions.
  3. Customizing server settings for specific applications.

FAQ from Flutter + dart_mcp + AI Desktop App?

  • How do I manage my API key?

Navigate to the Settings screen, enter your API key, and save it.

  • Can I add multiple MCP servers?

Yes, you can add, edit, and delete multiple MCP server configurations.

  • Is this project open for contributions?

Yes, contributions are welcome! Please follow the contributing guidelines.

Content

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 dart_mcp 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.

No tools information available.
No content found.