FlutterFlow MCP Tutorial | New Feature — Transcript

Full transcript

1. 0:00The FlutterFlow MCP allows [music] you
2. 0:01to use any agent like Claude code,
3. 0:04Codex, Gemini CLI, or Cursor to have
4. 0:06full control over building your
5. 0:08FlutterFlow apps. And you can [music]
6. 0:09use it to edit projects you've already
7. 0:11created in FlutterFlow, or start whole
8. 0:13new apps [music] straight from your
9. 0:15agent, and we'll look at both of those
10. 0:17flows. Along the way, we'll look at some
11. 0:19helpful tips and hidden tricks so that
12. 0:21you can get the most out of this. Okay,
13. 0:23so let's start by setting this up. So
14. 0:25first, we're going to need to download
15. 0:26this FlutterFlow CLI at this URL here.
16. 0:29And let's grab this command right here,
17. 0:31paste this in, and run it in your
18. 0:33terminal. This will download the
19. 0:35FlutterFlow CLI package from pub.dev,
20. 0:37installs its FlutterFlow executable
21. 0:39globally on your machine, so you can run
22. 0:41FlutterFlow AI from any directory. Think
23. 0:43of it like npm install -g for Dart. And
24. 0:46you only need to do this once. After
25. 0:48this, when you run your next command,
26. 0:50FlutterFlow AI, that will always
27. 0:53download the latest version of the
28. 0:54package.
29. 0:57>> [music]
30. 0:57>> Okay, so let's do this. So FlutterFlow
31. 1:00AI init, and then whatever you want your
32. 1:02folder name to be. So we're going to
33. 1:03make a basketball shoes e-commerce app,
34. 1:06so we're just going to call it bball.
35. 1:08And enter. Next, we need to grab our
36. 1:09FlutterFlow API key. And you can grab
37. 1:11that in the FlutterFlow dashboard. If
38. 1:13you go down to your account and your API
39. 1:15token right here. Paste that in and hit
40. 1:17enter. Now if you want to edit an
41. 1:19already existing FlutterFlow project,
42. 1:21you could put that project ID here.
43. 1:22We'll do that later. Right now, we're
44. 1:24creating a whole new app, so we can just
45. 1:25hit enter. This is going to give a
46. 1:26summary of your workspace, and just
47. 1:28press Y to accept that. Okay, great.
48. 1:30This project is set up. Now we can just
49. 1:32CD into it. So change directory, bball.
50. 1:35Great. Now we're in there. And that's
51. 1:37it. That's everything you need to do for
52. 1:38your setup. So now, we have this
53. 1:40workspace, this folder ready, and you
54. 1:42can open this folder in whatever agent
55. 1:44you want. So if we just list this
56. 1:46directory right here, you can see the
57. 1:48resources you'll have available to your
58. 1:49agent. You don't have to worry about any
59. 1:51of these. Your agent will read it and
60. 1:53understand how to work with FlutterFlow.
61. 1:55All you need to do is start your agent.
62. 1:57So I'm going to use Claude, so just open
63. 1:58up Claude, and we're ready to go. So I
64. 2:01want Claude to create an e-commerce app
65. 2:04for basketball shoes. I also want to add
66. 2:07a design system, and I like this Swiss
67. 2:10grid one here that I got from design.md
68. 2:13directory. So I'm just going to scroll
69. 2:15down, and here's the file. I'm just
70. 2:16going to copy that, and tell Claude use
71. 2:19this design system. Great. Now Claude
72. 2:22will get to work. Okay, beautiful. This
73. 2:24is done. We've got five pages. We got
74. 2:26components. We've got our design system.
75. 2:28Let's go take a look. All right, this is
76. 2:30looking great right here. We've got all
77. 2:32of our different pages. Let's give it a
78. 2:34test. Okay, yeah, this is looking cool.
79. 2:36Awesome. Now, let's say I was making
80. 2:38some changes visually in here, cuz
81. 2:41that's the idea of having agent access
82. 2:43as well as visual development. These are
83. 2:45different tools that have different
84. 2:46strengths and weaknesses. Sometimes you
85. 2:48want to just go in and make quick visual
86. 2:50tweaks that would take an agent much
87. 2:52longer and be much more token intensive.
88. 2:55How do you do that and keep them in
89. 2:56sync? Well, let me show you. So let's
90. 2:57take this button right here, and I just
91. 2:59want to get rid of some of this padding
92. 3:01right here, and make it a little bit
93. 3:03bigger here. So let's say 40. Okay,
94. 3:06yeah, I like that. So now let's pull
95. 3:08down the latest changes. And you can
96. 3:10just prompt the agent for that. Say,
97. 3:11"Pull the latest changes from
98. 3:15FlutterFlow." Awesome, there it is.
99. 3:17Changes are synced. Okay, now let's see
100. 3:19how to edit a project that we've already
101. 3:20created [music] in FlutterFlow.
102. 3:23All right, so I've exited Claude, and
103. 3:24I'm going to get out of this folder
104. 3:26right here, because I want a clean
105. 3:28workspace and folder for this new
106. 3:30project. Let me show you the app I'm
107. 3:31going to edit. So I've got this
108. 3:33Netflix-style science documentary app
109. 3:36right here with a couple of pages where
110. 3:38you can search through documentaries.
111. 3:40Okay, in order to connect this up, all
112. 3:42we need is the project ID. And you can
113. 3:44either get that from the URL, which is
114. 3:46right here, this part that is after the
115. 3:49project {slash} and before any other
116. 3:52parameters here. Or an even easier way
117. 3:54is to just click up here and grab this
118. 3:56project ID by clicking that. Okay, so
119. 3:59now we're going to run that same
120. 4:00command, FlutterFlow AI init, give it a
121. 4:04folder workspace name. We're just going
122. 4:06to call it sci. And we're just going to
123. 4:08pass a flag here with {dash} {dash}
124. 4:11project, and paste in that project ID.
125. 4:14Paste in that FlutterFlow key again.
126. 4:16That all looks good, and accept. Okay,
127. 4:18great. It's cloned down the project, and
128. 4:20so now same thing as before, let's just
129. 4:22change directories into that folder.
130. 4:25We're in there now, and if we look at
131. 4:27it, everything is the same except for
132. 4:29we've got this generated code, which is
133. 4:31that FlutterFlow project. Beautiful. Now
134. 4:34same thing as before, just open up your
135. 4:35preferred agent. I'm going to use
136. 4:37Claude, and now we prompt just like
137. 4:39normal. So let's say we want to add
138. 4:42navigation. Claude is asking a follow-up
139. 4:44question about what precisely I want the
140. 4:46navigation to do. I just want a simple
141. 4:48navigation right now, so I'm going to
142. 4:50say, "Implement A." Okay, this is all
143. 4:53done. We've got some navigation added to
144. 4:55the onboarding page with the start
145. 4:57exploring. Let's go take a look. So
146. 4:59we're on the onboarding page. We've got
147. 5:01the start exploring button, and
148. 5:03beautiful. There's our navigation. The
149. 5:05other thing that you can do with agents
150. 5:06is you can add integrations. But to do
151. 5:08that, we need to create the project
152. 5:10first, then we can let Claude do all the
153. 5:12other work. So I'm just going to go over
154. 5:13here, create a project. All right, and
155. 5:15generate config files. Beautiful. Now
156. 5:17Claude's ready to work. Add Firebase
157. 5:20collections and document structures
158. 5:23based on the app. All right, that's all
159. 5:26done. Let's go take a look. Beautiful. A
160. 5:29few other tips. First, if you want to
161. 5:30work in a highly targeted manner, we
162. 5:32have a helper feature. So if I wanted to
163. 5:34work on this button right here, and in
164. 5:35the widget tree, I can right-click and
165. 5:37copy FlutterFlow AI selector. This way,
166. 5:40when you pass that to the agent, you can
167. 5:42ask for some update. Update the color of
168. 5:45this button, and then paste it in. Next
169. 5:48tip, you can ask the agent to implement
170. 5:50any custom code, custom widget, or
171. 5:52custom actions. So for instance, if
172. 5:54you've got a pub.dev package you want to
173. 5:55use, I want to use this panorama viewer
174. 5:58here, just pass it as a reference. Add a
175. 6:00custom panorama
176. 6:03viewer widget using this package. Claude
177. 6:07will go understand the package and
178. 6:09implement it in FlutterFlow. Next, if
179. 6:11you have errors in FlutterFlow like
180. 6:13this, just select it, right-click, copy
181. 6:16the FlutterFlow selector, and give that
182. 6:18context to Claude.
183. 6:19There's a possible layout crash error.
184. 6:24Please fix. And paste in that selector.
185. 6:27All right, the panorama view is done,
186. 6:29and it's fixed those errors. Let's take
187. 6:31a look. Let's go into our custom widget.
188. 6:34There it is, and we're using that
189. 6:36panorama viewer package. Beautiful.
190. 6:38Another tip, the FlutterFlow AI
191. 6:39integration becomes even more powerful
192. 6:41when agents have access to other
193. 6:43services. For instance, I've connected
194. 6:44the Superbase MCP here, and I've got
195. 6:47this rental property app. But I haven't
196. 6:49set up my back end yet. So I can say,
197. 6:51"Based on this project, generate the
198. 6:54database schema including tables,
199. 6:58relationships, and RLS policies." And
200. 7:02Claude will look at your project,
201. 7:03understand it, and then use that
202. 7:05Superbase MCP to create the schema.
203. 7:07Okay, schema is live. Let's jump over to
204. 7:10FlutterFlow and take a look. Let's go
205. 7:12over to our settings, and search for
206. 7:14Superbase, and get our schema.
207. 7:16Beautiful. One last tip, if you want to
208. 7:19work on different branches, let me show
209. 7:20you how to do that. So let's make a
210. 7:22feature branch here. Let's create a new
211. 7:24branch, and this will be for a search
212. 7:27filter feature. Let's create that
213. 7:28branch. And now from the URL, just grab
214. 7:31this ID right here. Then we'll
215. 7:33FlutterFlow AI init sci filter, pass the
216. 7:37project ID, API key, CD into that
217. 7:40folder, and now we're working on just
218. 7:43that branch. [music] These are just some
219. 7:45of the things that you can do with a
220. 7:46FlutterFlow MCP. Let us know if you have
221. 7:49any questions, and we'll see you in the
222. 7:50next video.