Welcome! This guide will walk you through the complete setup process to securely connect your FlutterFlow project with Claude Desktop (Free Plan) using the MCP Server. Once configured, you’ll be able to enhance your development workflow with AI-powered automation and seamless project interaction.
📌 Step-by-Step Setup
1️⃣ Install Claude Desktop
Download and install Claude Desktop on your system from the official source.
Ensure the installation completes successfully before proceeding.
2️⃣ Launch Claude Desktop
Open the application and allow it to initialize fully.
3️⃣ Access Settings
In the top menu:
Go to Settings
4️⃣ Open Developer Settings
Click on Developer from the settings panel
This section allows advanced configuration and integrations.
5️⃣ Edit Configuration File
Select Edit Config
Open the file in a code editor such as VS Code for easier editing
6️⃣ Add MCP Server Configuration
Insert the following configuration into the file:
{
"mcpServers": {
"flutterflow": {
"command": "npx",
"args": ["-y", "community-ff-mcp"],
"env": {
"FLUTTERFLOW_API_TOKEN": "Your API Token"
}
}
}
}7️⃣ Configure API Token
Replace:
"Your API Token"→ with your actual FlutterFlow API Token
Ensure the token is correct to avoid connection issues.
8️⃣ Save Configuration
Save the updated file and close the editor.
9️⃣ Restart Claude Desktop
Restart the application to apply the new MCP configuration.
🔟 Connect Your FlutterFlow Project
After restart:
Provide your FlutterFlow Project ID to Claude Desktop
The integration will automatically establish the connection
🎉 Setup Complete
Your FlutterFlow project is now successfully integrated with Claude via MCP Server.
You can now:
Automate development workflows
Interact with your FlutterFlow project using AI
Improve productivity with intelligent assistance
💬 Need Assistance?
If you encounter any issues during setup or require help with FlutterFlow, API configuration, or MCP integration, feel free to reach out anytime.