Flutter + dart_mcp + AI Desktop App Demo
- desktop-chat
Demonstrate how to implement MCP Client in Flutter application with AI.
About
What is Flutter + dart_mcp + AI Desktop App Demo?
Flutter + dart_mcp + AI Desktop App Demo is a Flutter-based desktop application that manages and configures MCP (Model Context Protocol) servers. It uses the mcp_dart package for communication and integrates with Google’s Gemini model via an API key. This demo is designed for developers exploring MCP and building AI‑powered chat applications.
How to use Flutter + dart_mcp + AI Desktop App Demo?
Clone the repository, run flutter pub get to install dependencies, then flutter run to launch the app. Obtain a Gemini API key from Google AI Studio and enter it in the Settings screen. Use the MCP server management screen to add, edit, delete, and toggle stdio‑based MCP servers, define custom environment variables per server, and apply changes.
Key features of Flutter + dart_mcp + AI Desktop App Demo
- API key management (save/clear/secure) via SharedPreferences
- Add, edit, delete, and toggle MCP server connections
- Custom environment variables for each server configuration
- Display settings to toggle code block visibility
- Supports stdio‑based MCP servers only
- Built with Flutter and the dart_mcp package
Use cases of Flutter + dart_mcp + AI Desktop App Demo
- Manage multiple MCP server configs in a graphical interface
- Test and debug custom stdio‑based MCP servers
- Experiment with Gemini AI chat combined with MCP tool calls
- Customize server arguments and environment variables for different protocols
- Learn how to integrate MCP into a Flutter desktop app
FAQ from Flutter + dart_mcp + AI Desktop App Demo
What is this application?
It is a Flutter desktop demo for managing MCP servers and using them with Google’s Gemini AI model via an API key.
Which MCP servers are supported?
Currently only stdio‑based MCP servers are supported. You can find example servers in the official MCP servers repository.
How do I get an API key?
You can obtain a Gemini API key from Google AI Studio (aistudio.google.com/apikey) and save it in the app’s Settings screen.
How do I add a new MCP server?
Click the “Add New MCP Server” button, fill in the name, command, arguments, and optional custom environment variables, then save. Use the toggle switch to enable the connection and click “Apply” to synchronize.
Is this application free and open‑source?
Yes, it is licensed under the MIT License. No pricing or usage limits are mentioned.
Details
- Author
- leehack
- GitHub stars
- 24
- Category
- desktop-chat
- Repository
- leehack/flutter-mcp-ai-chat
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
<p align="center">
</p>
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.
