MCP Web Client Example

Features

Streamable HTTP Connections - Real-time communication with MCP servers
Chat Interface - Simple text-based interaction with AI models
Streaming Responses - See responses as they are generated
Cross-Platform - Works on web, mobile, and desktop
Tool Calling - Call various MCP tools on the server

The MCP Web Client is a Flutter application that demonstrates how to use the MCP (Model Context Protocol) Dart client in a web environment. This example shows how to establish streamable HTTP connections, call tools, and handle real-time notifications.

Getting Started

Run the test server:

dart test_server.dart

Then run the Flutter web app:

flutter run -d chrome

Connect to the server and start chatting!

Example Code

Here's a simplified example of how to create an MCP client and call a tool:

// Create a transport
final transport = StreamableHttpClientTransport(
  serverUrl: 'http://localhost:3000/mcp',
);

// Create MCP client
final client = Client(transport: transport);

// Initialize client
await client.initialize();

// Call a tool with streaming notifications
final result = await client.callTool(
  'processText',
  {'text': 'Hello, world!'},
  ToolCallOptions(
    streamNotifications: true,
    notificationHandler: (notification) {
      print('Notification: ${notification.data}');
    },
  ),
);
    

Check out the full source code for more detailed examples.