flutter-mcp-ai-chat MCP Client

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.

Clone the repository:

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

Install dependencies:
```
flutter pub get
```
Run the application:
```
flutter run
```

Usage

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.