Skip to content

Commit eae9d21

Browse files
leehackleehack
authored
Add Flutter Web Support (#32)
* Support web * reorg exports for web * cors * add flutter_http_client example * Use the same http client * bump version
1 parent 0eac795 commit eae9d21

File tree

142 files changed

+6275
-49
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

142 files changed

+6275
-49
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 0.5.3
2+
3+
- Support Web Client for StreamableHTTP
4+
15
## 0.5.2
26

37
- Preserve required fields in ToolInputSchema

‎example/flutter_http_client/.gitignore‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Miscellaneous
2+
*.class
3+
*.log
4+
*.pyc
5+
*.swp
6+
.DS_Store
7+
.atom/
8+
.build/
9+
.buildlog/
10+
.history
11+
.svn/
12+
.swiftpm/
13+
migrate_working_dir/
14+
15+
# IntelliJ related
16+
*.iml
17+
*.ipr
18+
*.iws
19+
.idea/
20+
21+
# The .vscode folder contains launch configuration and tasks you configure in
22+
# VS Code which you may wish to be included in version control, so this line
23+
# is commented out by default.
24+
#.vscode/
25+
26+
# Flutter/Dart/Pub related
27+
**/doc/api/
28+
**/ios/Flutter/.last_build_id
29+
.dart_tool/
30+
.flutter-plugins
31+
.flutter-plugins-dependencies
32+
.pub-cache/
33+
.pub/
34+
/build/
35+
36+
# Symbolication related
37+
app.*.symbols
38+
39+
# Obfuscation related
40+
app.*.map.json
41+
42+
# Android Studio will place build artifacts here
43+
/android/app/debug
44+
/android/app/profile
45+
/android/app/release

‎example/flutter_http_client/.metadata‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# This file tracks properties of this Flutter project.
2+
# Used by Flutter tool to assess capabilities and perform upgrades etc.
3+
#
4+
# This file should be version controlled and should not be manually edited.
5+
6+
version:
7+
revision: "ea121f8859e4b13e47a8f845e4586164519588bc"
8+
channel: "stable"
9+
10+
project_type: app
11+
12+
# Tracks metadata for the flutter migrate command
13+
migration:
14+
platforms:
15+
- platform: root
16+
create_revision: ea121f8859e4b13e47a8f845e4586164519588bc
17+
base_revision: ea121f8859e4b13e47a8f845e4586164519588bc
18+
- platform: android
19+
create_revision: ea121f8859e4b13e47a8f845e4586164519588bc
20+
base_revision: ea121f8859e4b13e47a8f845e4586164519588bc
21+
- platform: ios
22+
create_revision: ea121f8859e4b13e47a8f845e4586164519588bc
23+
base_revision: ea121f8859e4b13e47a8f845e4586164519588bc
24+
- platform: linux
25+
create_revision: ea121f8859e4b13e47a8f845e4586164519588bc
26+
base_revision: ea121f8859e4b13e47a8f845e4586164519588bc
27+
- platform: macos
28+
create_revision: ea121f8859e4b13e47a8f845e4586164519588bc
29+
base_revision: ea121f8859e4b13e47a8f845e4586164519588bc
30+
- platform: web
31+
create_revision: ea121f8859e4b13e47a8f845e4586164519588bc
32+
base_revision: ea121f8859e4b13e47a8f845e4586164519588bc
33+
- platform: windows
34+
create_revision: ea121f8859e4b13e47a8f845e4586164519588bc
35+
base_revision: ea121f8859e4b13e47a8f845e4586164519588bc
36+
37+
# User provided section
38+
39+
# List of Local paths (relative to this file) that should be
40+
# ignored by the migrate tool.
41+
#
42+
# Files that are not part of the templates will be ignored by default.
43+
unmanaged_files:
44+
- 'lib/main.dart'
45+
- 'ios/Runner.xcodeproj/project.pbxproj'

‎example/flutter_http_client/README.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# MCP Web Client Example
2+
3+
This is an example Flutter web application that demonstrates how to use the MCP (Model Context Protocol) client in a web environment. The application provides a simple button-based interface for direct interaction with an MCP server using streamable HTTP connections.
4+
5+
## Features
6+
7+
- Connect to any MCP-compliant server
8+
- Discover and call server tools
9+
- List and retrieve prompts
10+
- View available resources
11+
- Receive and display notifications from the server
12+
- Full support for StreamableHttpClientTransport from the MCP Dart library
13+
14+
## Getting Started
15+
16+
### Prerequisites
17+
18+
- Flutter SDK (latest stable version)
19+
- Dart SDK (latest stable version)
20+
- An MCP server to connect to (use the included test server)
21+
22+
### Running the Example
23+
24+
1. First, start an MCP server:
25+
26+
```shell
27+
cd /path/to/mcp_dart/example/streamable_https
28+
dart server_streamable_https.dart
29+
```
30+
31+
This will start an MCP server on `http://localhost:3000/mcp`.
32+
33+
2. In a separate terminal, run the Flutter web app:
34+
35+
```shell
36+
cd /path/to/mcp_dart/example/web_client
37+
flutter run -d chrome
38+
```
39+
40+
This will launch the application in Chrome. You can also use other browsers by specifying a different device.
41+
42+
3. In the application, click the "Connect" button to establish a connection to the server.
43+
44+
4. Once connected, you can use various buttons to interact with the server:
45+
- List Tools: See available tools on the server
46+
- Call Tool: Execute a tool with arguments
47+
- List Prompts: View available prompts
48+
- List Resources: See available resources
49+
- Start Notifications: Begin receiving server notifications
50+
51+
## Project Structure
52+
53+
- `lib/main.dart` - Entry point of the application
54+
- `lib/services/streamable_mcp_service.dart` - Service for communicating with MCP servers
55+
- `lib/screens/mcp_client_screen.dart` - Main UI interface with button controls
56+
- `lib/screens/settings_screen.dart` - Settings screen for connection management
57+
- `lib/widgets/chat_widgets.dart` - UI components for the chat interface
58+
- `test_server.dart` - Simple MCP server for testing
59+
60+
## Understanding MCP Communication
61+
62+
The application demonstrates key aspects of MCP client implementation:
63+
64+
1. **Connection**: The client establishes a connection to the MCP server and retrieves capabilities.
65+
2. **Tool Calling**: The client calls tools on the server with parameters.
66+
3. **Notifications**: The client receives real-time notifications from server tools.
67+
4. **Streaming Responses**: For a more interactive experience, the server can stream partial responses as they are generated.
68+
69+
The `McpClientService` class handles all communication with the server and exposes streams that the UI can listen to for updates.
70+
71+
## Customization
72+
73+
You can modify this example to connect to different MCP servers or implement additional features:
74+
75+
- Change the server URL in the settings
76+
- Add support for more complex tool parameters
77+
- Implement authentication for secure MCP servers
78+
- Add file upload/download capabilities
79+
- Customize the UI for your specific use case
80+
81+
## Web Compatibility
82+
83+
This example demonstrates the web-compatible implementation of MCP using streamable HTTP connections. The `mcp_dart` library provides platform-specific implementations that work seamlessly in web environments.

‎example/flutter_http_client/analysis_options.yaml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# This file configures the analyzer, which statically analyzes Dart code to
2+
# check for errors, warnings, and lints.
3+
#
4+
# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
5+
# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
6+
# invoked from the command line by running `flutter analyze`.
7+
8+
# The following line activates a set of recommended lints for Flutter apps,
9+
# packages, and plugins designed to encourage good coding practices.
10+
include: package:flutter_lints/flutter.yaml
11+
12+
linter:
13+
# The lint rules applied to this project can be customized in the
14+
# section below to disable rules from the `package:flutter_lints/flutter.yaml`
15+
# included above or to enable additional rules. A list of all available lints
16+
# and their documentation is published at https://dart.dev/lints.
17+
#
18+
# Instead of disabling a lint rule for the entire project in the
19+
# section below, it can also be suppressed for a single line of code
20+
# or a specific dart file by using the `// ignore: name_of_lint` and
21+
# `// ignore_for_file: name_of_lint` syntax on the line or in the file
22+
# producing the lint.
23+
rules:
24+
# avoid_print: false # Uncomment to disable the `avoid_print` rule
25+
# prefer_single_quotes: true # Uncomment to enable the `prefer_single_quotes` rule
26+
27+
# Additional information about this file can be found at
28+
# https://dart.dev/guides/language/analysis-options

‎example/flutter_http_client/android/.gitignore‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
gradle-wrapper.jar
2+
/.gradle
3+
/captures/
4+
/gradlew
5+
/gradlew.bat
6+
/local.properties
7+
GeneratedPluginRegistrant.java
8+
.cxx/
9+
10+
# Remember to never publicly share your keystore.
11+
# See https://flutter.dev/to/reference-keystore
12+
key.properties
13+
**/*.keystore
14+
**/*.jks

‎example/flutter_http_client/android/app/build.gradle.kts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
plugins {
2+
id("com.android.application")
3+
id("kotlin-android")
4+
// The Flutter Gradle Plugin must be applied after the Android and Kotlin Gradle plugins.
5+
id("dev.flutter.flutter-gradle-plugin")
6+
}
7+
8+
android {
9+
namespace = "com.example.web_client"
10+
compileSdk = flutter.compileSdkVersion
11+
ndkVersion = flutter.ndkVersion
12+
13+
compileOptions {
14+
sourceCompatibility = JavaVersion.VERSION_11
15+
targetCompatibility = JavaVersion.VERSION_11
16+
}
17+
18+
kotlinOptions {
19+
jvmTarget = JavaVersion.VERSION_11.toString()
20+
}
21+
22+
defaultConfig {
23+
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
24+
applicationId = "com.example.web_client"
25+
// You can update the following values to match your application needs.
26+
// For more information, see: https://flutter.dev/to/review-gradle-config.
27+
minSdk = flutter.minSdkVersion
28+
targetSdk = flutter.targetSdkVersion
29+
versionCode = flutter.versionCode
30+
versionName = flutter.versionName
31+
}
32+
33+
buildTypes {
34+
release {
35+
// TODO: Add your own signing config for the release build.
36+
// Signing with the debug keys for now, so `flutter run --release` works.
37+
signingConfig = signingConfigs.getByName("debug")
38+
}
39+
}
40+
}
41+
42+
flutter {
43+
source = "../.."
44+
}

‎example/flutter_http_client/android/app/src/debug/AndroidManifest.xml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
2+
<!-- The INTERNET permission is required for development. Specifically,
3+
the Flutter tool needs it to communicate with the running application
4+
to allow setting breakpoints, to provide hot reload, etc.
5+
-->
6+
<uses-permission android:name="android.permission.INTERNET"/>
7+
</manifest>

‎example/flutter_http_client/android/app/src/main/AndroidManifest.xml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
2+
<application
3+
android:label="web_client"
4+
android:name="${applicationName}"
5+
android:icon="@mipmap/ic_launcher">
6+
<activity
7+
android:name=".MainActivity"
8+
android:exported="true"
9+
android:launchMode="singleTop"
10+
android:taskAffinity=""
11+
android:theme="@style/LaunchTheme"
12+
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
13+
android:hardwareAccelerated="true"
14+
android:windowSoftInputMode="adjustResize">
15+
<!-- Specifies an Android theme to apply to this Activity as soon as
16+
the Android process has started. This theme is visible to the user
17+
while the Flutter UI initializes. After that, this theme continues
18+
to determine the Window background behind the Flutter UI. -->
19+
<meta-data
20+
android:name="io.flutter.embedding.android.NormalTheme"
21+
android:resource="@style/NormalTheme"
22+
/>
23+
<intent-filter>
24+
<action android:name="android.intent.action.MAIN"/>
25+
<category android:name="android.intent.category.LAUNCHER"/>
26+
</intent-filter>
27+
</activity>
28+
<!-- Don't delete the meta-data below.
29+
This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
30+
<meta-data
31+
android:name="flutterEmbedding"
32+
android:value="2" />
33+
</application>
34+
<!-- Required to query activities that can process text, see:
35+
https://developer.android.com/training/package-visibility and
36+
https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.
37+
38+
In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
39+
<queries>
40+
<intent>
41+
<action android:name="android.intent.action.PROCESS_TEXT"/>
42+
<data android:mimeType="text/plain"/>
43+
</intent>
44+
</queries>
45+
</manifest>

‎example/flutter_http_client/android/app/src/main/kotlin/com/example/web_client/MainActivity.kt‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
package com.example.web_client
2+
3+
import io.flutter.embedding.android.FlutterActivity
4+
5+
class MainActivity : FlutterActivity()

0 commit comments

Comments
 (0)