How to Use FlutterFlow's Built-In Artificial Intelligence Features

Open any FlutterFlow project and look for the AI icon in the left toolbar — it looks like a sparkle or star symbol. Clicking it opens the AI panel where you can type requests in natural language. FlutterFlow's AI can generate: Custom Actions (Dart code), Custom Widgets, Firestore query structures, page layouts, theme configurations, and App State management code. It reads your current project context to generate relevant code. It cannot: give your app users a chatbot, generate text or images for end users, analyze user-submitted photos, or provide any AI service that runs at user request time. The AI generates code for you; the code runs on the user's device but doesn't connect to any AI service unless you write that connection yourself.

Open the AI panel. Type a specific request: 'Write a Custom Action named callOpenAI that accepts a prompt string and sends it to the OpenAI chat completions API. Return the response text as a String. Use my OPENAI_API_KEY App Constant.' FlutterFlow's AI will generate Dart code for this Custom Action with the correct http package imports, JSON encoding, error handling, and return type. Copy the generated code into Custom Code → Custom Actions → Add Action. Review the generated code — AI occasionally makes minor errors with FlutterFlow-specific syntax. Fix any issues before saving.

Type in the AI panel: 'Create a chat page layout with a ListView of message bubbles at the top, a TextField at the bottom for user input, and a Send button. The ListView should show messages from an App State list variable named chatMessages, where each message has text and isUser fields.' FlutterFlow AI generates the widget tree structure and bindings. Click 'Apply to page' or copy the generated configuration. The AI-generated layout will appear in your widget tree. Adjust colors and padding using the properties panel to match your theme.

To give your app users an actual AI chatbot, you need an external API connection. Create a Supabase Edge Function or Firebase Cloud Function named 'chatWithAI'. The function accepts the user's message, calls OpenAI's chat completions API with your API key (stored as a server-side secret), and returns the AI's response. In FlutterFlow, use the API Manager or a Custom Action to call this function. Add the chat response to the chatMessages App State list. This is the full-stack pattern: FlutterFlow UI → your Cloud Function → OpenAI API.

1// Supabase Edge Function: chat-with-ai
2// Store OPENAI_API_KEY in Supabase Project Settings → Secrets
3import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
4
5serve(async (req) => {
6  const { message, conversationHistory } = await req.json();
7
8  const messages = [
9    { role: 'system', content: 'You are a helpful assistant.' },
10    ...(conversationHistory || []),
11    { role: 'user', content: message },
12  ];
13
14  const response = await fetch('https://api.openai.com/v1/chat/completions', {
15    method: 'POST',
16    headers: {
17      'Authorization': `Bearer ${Deno.env.get('OPENAI_API_KEY')}`,
18      'Content-Type': 'application/json',
19    },
20    body: JSON.stringify({
21      model: 'gpt-4o-mini',
22      messages,
23      max_tokens: 500,
24      temperature: 0.7,
25    }),
26  });
27
28  const data = await response.json();
29  const reply = data.choices?.[0]?.message?.content ?? 'Sorry, I could not respond.';
30
31  return new Response(JSON.stringify({ reply }), {
32    headers: { 'Content-Type': 'application/json' },
33  });
34});

Return to the FlutterFlow AI panel. Type: 'Write a Custom Action named sendChatMessage that accepts: message (String) and conversationHistory (JSON list). It should POST to my Supabase Edge Function URL with these values, then return the reply string from the JSON response.' FlutterFlow AI will generate the correct Dart code using the http package. It will use your project's Supabase URL from App Constants if you have it set. This demonstrates the correct workflow: use FlutterFlow AI to write the integration code, use your external API service to provide the actual AI capability.