How to Design a Virtual Assistant Feature in FlutterFlow

Create an assistant_sessions collection with fields: userId (String), messages (Array of Maps: {role: 'user'|'assistant', content: String, timestamp: Timestamp, action: Map nullable}), createdAt (Timestamp), lastMessageAt (Timestamp). The messages array stores the full conversation history. The action field on assistant messages is optional and contains structured data like {type: 'navigate', page: 'orders'} when the assistant triggers an app action. Also document the context you will pass: user displayName, subscription tier, last 5 orders or key records, and available app features list.

Create a Cloud Function named assistantChat that receives userId and userMessage. It fetches the user's profile from Firestore (name, tier, recent activity). Constructs a system prompt including: the app's feature list with descriptions, the user's name and subscription tier, recent orders or records (summarized), and instructions to respond as a helpful assistant that can suggest actions formatted as JSON. Sends the conversation history plus new message to OpenAI or Claude API. Parses the response: if it contains an action JSON block, extract it separately. Returns the text response and optional action to the client.

1// Cloud Function: assistantChat
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const OpenAI = require('openai');
5
6const openai = new OpenAI({
7  apiKey: process.env.OPENAI_API_KEY
8});
9
10exports.assistantChat = functions.https
11  .onCall(async (data, context) => {
12    const { userId, userMessage, sessionId } = data;
13    const db = admin.firestore();
14    // Fetch user context
15    const user = (await db.doc(`users/${userId}`)
16      .get()).data();
17    const orders = await db.collection('orders')
18      .where('userId', '==', userId)
19      .orderBy('createdAt', 'desc').limit(5).get();
20    const orderSummary = orders.docs.map(d => {
21      const o = d.data();
22      return `${o.productName} on ${o.createdAt
23        .toDate().toLocaleDateString()}`;
24    }).join(', ');
25    // Fetch conversation history
26    const session = sessionId
27      ? (await db.doc(
28          `assistant_sessions/${sessionId}`
29        ).get()).data()
30      : { messages: [] };
31    const history = (session.messages || [])
32      .map(m => ({ role: m.role, content: m.content }));
33    const systemPrompt = `You are a helpful assistant
34 for our app. User: ${user.displayName},
35 tier: ${user.subscriptionTier}.
36 Recent orders: ${orderSummary}.
37 App features: Orders, Settings, Profile,
38 Notifications, Support.
39 If the user wants to navigate, include:
40 {"action":{"type":"navigate","page":"pageName"}}
41 at the end of your response.`;
42    const completion = await openai.chat
43      .completions.create({
44        model: 'gpt-4o',
45        messages: [
46          { role: 'system', content: systemPrompt },
47          ...history,
48          { role: 'user', content: userMessage }
49        ],
50        max_tokens: 500
51      });
52    const reply = completion.choices[0]
53      .message.content;
54    // Parse action if present
55    let action = null;
56    const actionMatch = reply
57      .match(/\{"action":\{.*?\}\}/s);
58    if (actionMatch) {
59      action = JSON.parse(actionMatch[0]).action;
60    }
61    const textReply = reply
62      .replace(/\{"action":\{.*?\}\}/s, '').trim();
63    // Save to session
64    const msgs = [
65      ...session.messages || [],
66      { role: 'user', content: userMessage,
67        timestamp: new Date() },
68      { role: 'assistant', content: textReply,
69        timestamp: new Date(), action }
70    ];
71    const ref = sessionId
72      ? db.doc(`assistant_sessions/${sessionId}`)
73      : db.collection('assistant_sessions').doc();
74    await ref.set({
75      userId, messages: msgs,
76      lastMessageAt: admin.firestore
77        .FieldValue.serverTimestamp()
78    }, { merge: true });
79    return { reply: textReply, action,
80      sessionId: ref.id };
81  });

Create an AssistantPage or an assistant BottomSheet accessible via a floating action button on any page. The layout mirrors a chat: a ListView displaying conversation messages with different styling for user (right-aligned, primary color) and assistant (left-aligned, grey background with an assistant avatar icon). At the bottom, a TextField with a send IconButton. On send, call the assistantChat Cloud Function with the user's message and current sessionId (stored in Page State). Display a typing indicator (three animated dots) while waiting for the response. When the response arrives, add both messages to the display list.

When the Cloud Function returns an action object (e.g., {type: 'navigate', page: 'orders'}), parse it in the Action Flow after receiving the response. Use a conditional chain: if action.type equals 'navigate', execute a Navigate To action targeting the specified page. If action.type equals 'create', create a document in the specified collection. If action.type equals 'open_support', navigate to the support page. Display suggested action buttons below the assistant's message as tappable Containers (e.g., 'Go to Orders' button). This makes the assistant functional rather than just conversational.

Create a Cloud Function that analyzes user activity patterns daily. Check for specific conditions: user has not set up notifications (show tip about notifications), user has items in cart for over 24 hours (remind them), user has not used a feature they might benefit from. Store proactive tips in a user_tips subcollection: tip (String), ctaText (String), ctaAction (Map), dismissed (Boolean). On the app home page or in the assistant interface, display undismissed tips as a card above the chat input. Each tip has a text message, a call-to-action button, and a dismiss button. When the user acts on a tip, mark it as dismissed.