How to Implement a Virtual Assistant with AI in FlutterFlow

In FlutterFlow, create a `conversations` collection with fields: `userId` (String), `title` (String), `createdAt` (Timestamp), `lastMessageAt` (Timestamp), `messageCount` (Integer). Create a `messages` subcollection (under each conversation document) with fields: `role` (String — `user`, `assistant`, or `tool`), `content` (String), `toolName` (String, nullable), `toolResult` (String, nullable), `createdAt` (Timestamp). Store messages as a subcollection of conversations so you can query a single conversation's messages with a simple `collectionGroup` query. This structure scales to many conversations per user without performance degradation.

Create a page called `AssistantChat`. Add a Column that fills the screen. At the top, add a Text widget showing the conversation title. In the middle, add a ListView that queries the `messages` subcollection for the current conversation, ordered by `createdAt` ascending, with live updates enabled. Each message tile should show a chat bubble — align right and use a primary color background for `role == user` messages, left-align with a grey background for `role == assistant`. At the bottom, add a Row with a TextField (multi-line, sends on Return key), a Send icon button, and a typing indicator row above the input that is conditionally visible. Add Page State variables: `isTyping` (Boolean, default false) and `conversationId` (String).

Create a Firebase Cloud Function named `chatWithAssistant`. It accepts `conversationId`, `userMessage`, and `userId`. The function: fetches the last 10 messages from the `messages` subcollection ordered by `createdAt` descending, reverses the array to get chronological order, prepends a system prompt message, appends the new user message, calls the OpenAI or Anthropic API with the message array, saves the assistant's response to Firestore as a new `messages` document, updates `lastMessageAt` on the conversation, and returns the assistant's text. The key design is fetching only 10 messages — not the full conversation — to stay within token limits.

1const { onCall, HttpsError } = require('firebase-functions/v2/https');
2const { defineSecret } = require('firebase-functions/params');
3const { getFirestore } = require('firebase-admin/firestore');
4const { initializeApp } = require('firebase-admin/app');
5
6initializeApp();
7const openaiKey = defineSecret('OPENAI_API_KEY');
8
9const SYSTEM_PROMPT = `You are a helpful assistant for our app.
10You can help users check order status, find products, and get support.
11Always be concise and friendly. If you cannot answer, say so.`;
12
13const CONTEXT_WINDOW = 10;
14
15exports.chatWithAssistant = onCall(
16  { secrets: [openaiKey] },
17  async (request) => {
18    const { conversationId, userMessage } = request.data;
19    const uid = request.auth?.uid;
20    if (!uid) throw new HttpsError('unauthenticated', 'Sign in required');
21
22    const db = getFirestore();
23    const messagesRef = db
24      .collection('conversations').doc(conversationId)
25      .collection('messages');
26
27    // Fetch last N messages for context window
28    const recent = await messagesRef
29      .orderBy('createdAt', 'desc')
30      .limit(CONTEXT_WINDOW)
31      .get();
32
33    const history = recent.docs
34      .reverse()
35      .map((d) => ({ role: d.data().role, content: d.data().content }));
36
37    const messages = [
38      { role: 'system', content: SYSTEM_PROMPT },
39      ...history,
40      { role: 'user', content: userMessage },
41    ];
42
43    // Save user message
44    await messagesRef.add({
45      role: 'user', content: userMessage,
46      createdAt: new Date(),
47    });
48
49    // Call OpenAI
50    const response = await fetch('https://api.openai.com/v1/chat/completions', {
51      method: 'POST',
52      headers: {
53        Authorization: `Bearer ${openaiKey.value()}`,
54        'Content-Type': 'application/json',
55      },
56      body: JSON.stringify({ model: 'gpt-4o-mini', messages }),
57    });
58    const data = await response.json();
59    const assistantText = data.choices[0].message.content;
60
61    // Save assistant response
62    await messagesRef.add({
63      role: 'assistant', content: assistantText,
64      createdAt: new Date(),
65    });
66
67    await db.collection('conversations').doc(conversationId)
68      .update({ lastMessageAt: new Date() });
69
70    return { response: assistantText };
71  }
72);

In FlutterFlow, select the Send button. Add an Action chain: first, set page state `isTyping` to true (this shows the typing indicator). Second, run the Call Cloud Function action pointing to `chatWithAssistant`, passing `conversationId` from page state and the TextField content as `userMessage`. Third, clear the TextField content. Fourth, set page state `isTyping` to false. The typing indicator (an AnimatedWidget or a Row of three dots) is conditionally visible when `isTyping == true`. Because Firestore messages use live queries, the assistant's reply appears in the list automatically when the Cloud Function writes it — you do not need to manually refresh the list.

Above the input bar, add a horizontal ScrollView containing a Row of Chip widgets. Each chip shows a suggested prompt like `Check my last order`, `How do I reset my password?`, or `What are your support hours?`. Tapping a chip sets the TextField content to the chip's prompt text using a Set Form Field Value action. Optionally, immediately trigger the send flow on tap (chain the Cloud Function call after setting the field). Define the suggested prompts as a constant list in a Custom Function so they can be easily updated without modifying the UI. Show the suggestion chips only when the message list is empty — use Conditional Visibility on the chip row.

Tool use lets the assistant answer questions like 'What is the status of my order?' by fetching real data from Firestore. In the Cloud Function, define a `tools` array with schemas for functions like `getOrderStatus` (parameter: `orderId`) and `getUserAccount` (no parameters). Pass `tools` to the OpenAI API call. After the model responds, check if `response.choices[0].finish_reason == 'tool_calls'`. If so, extract the tool name and parameters, execute the corresponding Firestore query in the Cloud Function, append the tool result as a `tool` role message, make a second API call with the result included, and return the final response. This keeps all data access server-side so the AI cannot expose data to the wrong user.