manual_client_setup.mdx•3.79 kB
# AI Assistant Setup
To use the Flutter MCP Toolkit, you need to configure your AI assistant to connect to the running MCP server. It is recommended to use the compiled server binary, which is typically located at `/path/to/your/mcp_flutter/mcp_server_dart/build/flutter_inspector_mcp` after running `make install`.
### Cline Setup
> Note: Please use `--no-resources` flag to disable resources support - for unknown reason it doesn't work with Cline.
1. Add to your `.cline/config.json` (or similar configuration file):
```json
{
"mcpServers": {
"flutter-inspector": {
"command": "/path/to/your/cloned/mcp_flutter/mcp_server_dart/build/flutter_inspector_mcp",
"args": [
"--dart-vm-host=localhost",
"--dart-vm-port=8181",
"--no-resources",
"--images"
],
"env": {},
"disabled": false,
"autoApprove": []
}
}
}
```
2. Restart Cline.
3. The Flutter inspector will be automatically available in your conversations.
4. You're ready! Try commands like "Please get screenshot of my app" or "List all available tools from my Flutter app".
### Cursor Setup
> ⚠️ **Resources Limitations** ⚠️
> Since Cursor doesn't support resources, you need to pass `--no-resources` as an argument. It will make all resources to be displayed as tools instead.
1. Open Cursor's settings.
2. Go to the Features tab.
3. Under "Model Context Protocol", add the server:
```json
{
"mcpServers": {
"flutter-inspector": {
"command": "/path/to/your/cloned/mcp_flutter/mcp_server_dart/build/flutter_inspector_mcp",
"args": [
"--dart-vm-host=localhost",
"--dart-vm-port=8181",
"--no-resources",
"--images"
],
"env": {},
"disabled": false
}
}
}
```
4. Restart Cursor.
5. Open Agent Panel (cmd + L on macOS).
6. You're ready! Try commands like "List all available tools from my Flutter app" or "Take a screenshot of my app".
### Claude Setup
1. Add to your Claude configuration file:
```json
{
"mcpServers": {
"flutter-inspector": {
"command": "/path/to/your/cloned/mcp_flutter/mcp_server_dart/build/flutter_inspector_mcp",
"args": [
"--dart-vm-host=localhost",
"--dart-vm-port=8181",
"--resources",
"--images"
],
"env": {},
"disabled": false
}
}
}
```
2. Restart Claude.
3. The Flutter inspector tools will be automatically available.
4. You're ready! Try commands like "Show me all tools available in my Flutter app".
### RooCode Setup
> Note: It seems that RooCode doesn't support images in MCP server responses as it was earlier with Cline and Cursor. So as a workaround you can use `--save-images` flag to save images to files.
> Note: Also, please use `--no-resources` flag to disable resources support - for unknown reason it doesn't work with RooCode.
1. Add to your RooCode configuration file:
```json
{
"mcpServers": {
"flutter-inspector": {
"command": "/path/to/your/cloned/mcp_flutter/mcp_server_dart/build/flutter_inspector_mcp",
"args": [
"--dart-vm-host=localhost",
"--dart-vm-port=8181",
"--no-resources",
"--images",
"--save-images"
],
"env": {},
"disabled": false
}
}
}
```
2. Restart RooCode.
3. The Flutter inspector tools will be automatically available.
4. You're ready! Try commands like "List all available tools from my Flutter app" or "Take a screenshot of my app".