Pedro77339/flet-mcp-server

📚 Flet 0.28.3 MCP Server

Model Context Protocol server providing accurate, version-specific documentation for Flet 0.28.3

🎯 Why This MCP?

LLMs often provide incorrect syntax for Flet 0.28.3:

• ❌ ft.icons.HOME (doesn't exist in 0.28.3)
• ❌ ft.colors.BLUE (doesn't exist in 0.28.3)
• ❌ dialog.open = True (doesn't work in 0.28.3)

This MCP provides correct, version-specific documentation:

• ✅ Icons as strings: "home", "settings"
• ✅ Colors as hex: "#2196F3", "#4CAF50"
• ✅ Correct dialog syntax: page.open(dialog)

🚀 Quick Start

1. Install

git clone https://github.com/Pedro77339/flet-mcp-server.git
cd flet-mcp-server
npm install

2. Configure Your MCP Client

Claude Desktop (%APPDATA%\Claude\claude_desktop_config.json):

{
  "mcpServers": {
    "flet-docs": {
      "command": "node",
      "args": ["/absolute/path/to/flet-mcp-server/index.js"]
    }
  }
}

Cursor/Windsurf/VS Code (see )

3. Restart Your Client

4. Use with LLM

Copy the prompt from and paste it into your LLM conversation.

🛠️ Tools Available

📖 Documented Controls

Standard Controls (17)

AlertDialog, SnackBar, Icon, IconButton, TextField, ElevatedButton, TextButton, Container, Column, Row, ListTile, Text, Image, Card, Tabs, Divider, AppBar

Custom Controls (3)

TreeView, TreeViewItem, IconConfig

⚠️ Critical Flet 0.28.3 Rules

✅ Correct Syntax

# Icons as strings
ft.Icon("home", color="#2196F3")
ft.IconButton(icon="settings")

# Colors as hex strings
ft.Container(bgcolor="#4CAF50")

# Dialogs with page.open()
dialog = ft.AlertDialog(title=ft.Text("Title"))
page.open(dialog)  # ✅ Correct

# SnackBar with overlay
snackbar = ft.SnackBar(content=ft.Text("Message"))
page.overlay.append(snackbar)
snackbar.open = True
page.update()

❌ Incorrect Syntax

ft.Icon(ft.icons.HOME)        # ❌ Doesn't exist
ft.Container(bgcolor=ft.colors.BLUE)  # ❌ Doesn't exist
dialog.open = True            # ❌ Doesn't work

📁 Project Structure

flet-mcp-server/
├── index.js                      # MCP server
├── package.json                  # Dependencies
├── README.md                     # This file
├── LICENSE                       # MIT License
├── PROMPT_COPIAR_PEGAR.txt      # Ready-to-use prompt
├── GUIA_PARA_LLMS.md            # Complete LLM guide
├── CONFIGURACION_CLIENTES.md    # Client configs
├── QUE_COMPARTIR.md             # Sharing guide
└── docs/                         # JSON documentation
    ├── controls_standard.json
    ├── controls_custom.json
    ├── examples.json
    └── icons_colors.json

🎯 Usage with Different LLMs

Claude Desktop

Already working! Just use it.

Cursor

1. Configure in ~/.cursor/mcp.json
2. Reload window
3. Paste prompt from

Windsurf

1. Configure in ~/.codeium/windsurf/mcp_config.json
2. Restart Windsurf
3. Paste prompt in Cascade

See for details.

✅ Verify Installation

After setup, ask your LLM:

"Search for 'icon' in Flet documentation"

Expected response:

• Icon: Material Design icon
• IconButton: Button with icon
• IconConfig: Icon configuration for TreeView

If correct, MCP is working! ✅

🐛 Troubleshooting

Server doesn't start

# Check Node.js
node --version

# Reinstall dependencies
npm install

"Tool not found" in LLM

1. Verify JSON configuration
2. Restart client completely
3. Check client logs

Incorrect responses

Make sure LLM is using MCP tools. Paste prompt from .

📊 Stats

• Tools: 2
• Resources: 2
• Documented Controls: 20+
• Code Examples: 20+
• Size: ~50KB JSON docs

🤝 Contributing

Found an error in the documentation? Want to add more controls?

1. Edit JSON files in docs/
2. Test with node index.js
3. Submit a PR

📝 License

- Free for personal and commercial use.

🔗 Links

• Repository: https://github.com/Pedro77339/flet-mcp-server
• MCP Protocol: https://modelcontextprotocol.io/
• Flet Framework: https://flet.dev/

📞 Support

Documentation:

• - Complete guide
• - Client setup
• - Ready prompt

Created: November 2025
Version: 1.0.0
Flet: 0.28.3