How to Enable Dynamic Content Generation Based on User Input in FlutterFlow

Open the Firebase console and create a prompt_templates collection. Each document's ID is the output type slug (e.g., blog_post, product_description, support_email). Each document contains: display_name (String — shown in the UI dropdown), system_prompt (String — the full system prompt sent to the AI), max_tokens (Integer — caps response length), temperature (Number — 0.0 to 1.0). Example system prompt for blog_post: 'You are an expert content writer. Write a well-structured blog post with an engaging introduction, three supporting sections, and a conclusion. Use active voice and conversational tone. Output only the blog post text without any preamble.' Storing templates in Firestore means you can update AI behaviour for all users instantly without redeploying code.

In FlutterFlow, create a new page named GenerateContentPage. Add a TextField widget named promptInput with placeholder text 'Describe what you want to generate...' and set maxLines to 5. Below it add a DropdownButton widget bound to the prompt_templates Firestore collection — display display_name and store the document ID as the selected value in a page state variable selectedTemplateId. Add a Generate button and a separate output area: a multiline TextField named outputField that starts disabled, a CircularProgressIndicator shown while generation is in progress (controlled by a page state boolean isLoading), and a Save button that appears only when outputField has content. Use conditional visibility on all three output-area widgets tied to appropriate page state variables.

Create a Cloud Function named generateContent that accepts a POST request with body { templateId: string, userPrompt: string, userId: string }. The function reads the template document from Firestore, calls the OpenAI chat completions endpoint with the template's system_prompt and the user's userPrompt as the user message, and returns { content: string, tokens_used: number }. Set the OpenAI API key using firebase functions:config:set openai.key='sk-...' and read it inside the function with functions.config().openai.key. Deploy with firebase deploy --only functions. In FlutterFlow, add this function's URL as a Custom API Call under API Calls, using POST method, JSON body with templateId, userPrompt, and userId fields, and a $response.content output variable.

1// functions/src/generateContent.ts
2import * as functions from 'firebase-functions';
3import * as admin from 'firebase-admin';
4import OpenAI from 'openai';
5
6admin.initializeApp();
7const db = admin.firestore();
8
9export const generateContent = functions.https.onRequest(async (req, res) => {
10  res.set('Access-Control-Allow-Origin', '*');
11  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
12
13  const { templateId, userPrompt, userId } = req.body;
14  if (!templateId || !userPrompt || !userId) {
15    res.status(400).json({ error: 'Missing required fields' });
16    return;
17  }
18
19  const templateSnap = await db.collection('prompt_templates').doc(templateId).get();
20  if (!templateSnap.exists) {
21    res.status(404).json({ error: 'Template not found' });
22    return;
23  }
24  const template = templateSnap.data()!;
25
26  const openai = new OpenAI({ apiKey: functions.config().openai.key });
27  const completion = await openai.chat.completions.create({
28    model: 'gpt-4o-mini',
29    messages: [
30      { role: 'system', content: template.system_prompt },
31      { role: 'user', content: userPrompt },
32    ],
33    max_tokens: template.max_tokens ?? 800,
34    temperature: template.temperature ?? 0.7,
35  });
36
37  const content = completion.choices[0].message.content ?? '';
38  const tokens_used = completion.usage?.total_tokens ?? 0;
39
40  // Log usage to Firestore for cost tracking
41  await db.collection('generation_logs').add({
42    user_id: userId,
43    template_id: templateId,
44    tokens_used,
45    created_at: admin.firestore.FieldValue.serverTimestamp(),
46  });
47
48  res.json({ content, tokens_used });
49});
50

In FlutterFlow, select the Generate button and open its Action Flow. Add these actions in sequence: (1) Update page state isLoading to true. (2) Call the generateContent API Call, passing promptInput.text as userPrompt, selectedTemplateId as templateId, and Current User UID as userId. (3) If the API response code is 200, set outputField's initial value to response.content and set outputField enabled to true. (4) If the response code is not 200, show a SnackBar with the error message. (5) Update page state isLoading to false. The CircularProgressIndicator shown when isLoading is true gives the user feedback during the typically 2-5 second AI response time.

Select the Save button and add an Action Flow: create a new document in a generated_content Firestore collection with fields user_id (Current User UID), template_id (selectedTemplateId), prompt (promptInput.text), content (outputField.text), created_at (server timestamp). After the create action, show a SnackBar confirming save success. Add a secondary IconButton with a copy icon next to the output field — its action calls the Clipboard Copy action on outputField.text. Finally, add a Saved Content page with a ListView bound to the generated_content collection filtered by user_id equals Current User UID, showing each item's template type and a truncated preview of the content.