Mcpholder

An MCP client application based on Flutter, supporting multi - AI model conversations and MCP service management. It can integrate external tools through Cloudflare to expand AI capabilities.

Artificial intelligence chatbots Developer tools #AI conversation #Protocol extension #Service integration #Tool invocation

rating : 2 points

downloads : 17

update time : 2025-04-29

What is MCPHOLDER?

MCPHOLDER is a mobile application that connects large AI models with external services through the Model Context Protocol (MCP). It allows AI models to perform real - world tasks through external tools and APIs, such as sending emails, querying data, or controlling applications.

How to use MCPHOLDER?

1. Configure the OpenRouter API key. 2. Add MCP services. 3. Interact with AI on the conversation page. 4. AI will automatically call the connected MCP services to complete tasks.

Use cases

- Scenarios where AI needs to perform real - world operations. - Integrating multiple cloud services into the AI workflow. - Using functions similar to the Claude desktop version on mobile devices.

Main Features

Multi - model conversationSupports selecting different large AI models for conversation. The default model is Claude - 3 Sonnet 3.7.

MCP service managementView, add, and test MCP service connections, and manage external tools available to AI.

OAuth authorizationComplete the OAuth authentication process for MCP services through WebView.

Advantages and Limitations

Advantages

Conveniently use MCP functions on mobile devices.

Integrate multiple cloud services into a unified interface.

Support mainstream AI models and custom services.

Limitations

Currently only supports the Claude model on OpenRouter.

The network environment may affect the service response speed.

Requires manual configuration of the API key.

How to Use

Configure the API key

Modify the openRouterApiKey in the lib/config directory.

Add MCP services

Fill in the service information on the MCP service test page and test the connection.

Authorize the service

Click to start OAuth authorization and complete the authentication on the WebView page.

Use AI conversation

Enter a request on the conversation page, and AI will automatically call the appropriate MCP services.

Usage Examples

Simple addition calculationImplement the mathematical calculation ability of AI through the MCP service.

Weather queryGet real - time weather information by connecting to the weather API service.

Frequently Asked Questions

Why does my MCP service connection fail?

How to add a custom MCP service?

Why doesn't AI call the MCP service sometimes?

Related Resources

MCP Protocol Documentation

Cloudflare's detailed introduction to the MCP protocol.

Demo Video

Demonstration of using MCPHOLDER.

Flutter Framework

Application development framework.

🚀 MCP Client Application

This is an MCP (Model Context Protocol) client program called MCPHOLDER for AI large models. It can achieve functions similar to Claude Desktop on mobile phones. The program can aggregate cloud services on Cloudflare to provide external support for AI large models.

🚀 Quick Start

Please modify the openRouterApiKey in the lib/config directory. Currently, the program only supports Claude Sonnet 3.7 on OpenRouter.
Due to network environment issues, I can only upload the Flutter lib library. So the following installation methods may not be available:
1. Make sure you have installed the Flutter environment.
2. Clone this repository.
3. Run the following command to install dependencies:

flutter pub get

4. Run the application:

flutter run

✨ Features

AI Chat Page: Users can choose different large models for conversations. The default model is Claude-3 Sonnet 3.7.
MCP Service Page: Displays currently available MCP services and their statuses, and provides an entry to add new services.
MCP Service Test Page: Used to test new MCP service connections. Enter information such as service name, URL, and port.

📦 Installation

The installation steps are included in the "Quick Start" section above.

🔧 Technical Details

Flutter 3.x
Dart 3.x
font_awesome_flutter: Used for icon display
google_fonts: Used for font styles

📚 Documentation

Project Structure

lib/
  ├── main.dart              # Application entry point
  ├── screens/               # Pages
  │   ├── chat_screen.dart   # AI chat page
  │   ├── services_screen.dart  # MCP service page
  │   └── test_service_screen.dart  # MCP service test page
  ├── widgets/               # Reusable components
  ├── models/                # Data models
  └── utils/                 # Utility functions

MCP Protocol

The Model Context Protocol (MCP) is a protocol that allows AI models to perform operations through external tools and APIs. This enables AI assistants to perform practical tasks, such as sending emails, querying data, or controlling applications.

For more information about the MCP protocol, please visit Cloudflare's MCP documentation.

Demo

Video Link

On the test service page, we need to:

Enter the service name: add
Enter the Cloudflare service URL: https://remote-mcp.yunhaisui.workers.dev/sse
Do not need to fill in the port.
API key: Enter any value, but it cannot be empty.

Then click "Register client to get ID". After successful registration, click "Test connection". At this time, an authentication OAuth authorization button will pop up. Click to start OAuth authorization. Click "approve" in the newly popped WebView page. After that, the app will automatically recognize how many tools are in the MCP.

Then go back to the MCP service page, and you can see a new addition tool. Enter a simple addition problem on the AI chat page, and Claude Sonnet will automatically call the MCP service. Currently, I am using the OpenRouter service. Although the speed is slow, the correct result can still be obtained in the end. Next week, I plan to test several interesting MCP services on Cloudflare.