DeepAI

The most important step comes first: before you touch FlutterFlow, you need a server that securely holds your DeepAI api-key and forwards requests. FlutterFlow compiles to a client app (iOS, Android, or web), which means any key you place in an API Call header ends up inside the app binary where it can be extracted. A Firebase Cloud Function runs on Google's servers, never on the device, so your api-key stays safe. In your Firebase project, navigate to the Cloud Functions section and create a new function (or use an existing one). The function accepts a POST request from FlutterFlow, reads the endpoint name and form data from the request body, adds the DeepAI api-key header server-side, and forwards the request to api.deepai.org. It then returns the DeepAI JSON response to FlutterFlow. Important notes: Firebase Cloud Functions require the Blaze (pay-as-you-go) plan before they can make outbound HTTP calls to external APIs. Set your api-key as an environment variable in Cloud Functions (using firebase functions:config:set or the Secret Manager) rather than hardcoding it in the function source. Deploy the function and copy the HTTPS trigger URL — you will use it as the base URL in FlutterFlow.

1// functions/index.js
2const functions = require('firebase-functions');
3const axios = require('axios');
4const FormData = require('form-data');
5
6exports.deepaiProxy = functions.https.onRequest(async (req, res) => {
7  // Allow CORS for web builds
8  res.set('Access-Control-Allow-Origin', '*');
9  res.set('Access-Control-Allow-Methods', 'POST, OPTIONS');
10  res.set('Access-Control-Allow-Headers', 'Content-Type');
11  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
12
13  const endpoint = req.body.endpoint || 'text2img';
14  const inputText = req.body.text || '';
15
16  const apiKey = functions.config().deepai.key; // set via firebase functions:config:set deepai.key="YOUR_KEY"
17
18  const form = new FormData();
19  form.append('text', inputText);
20
21  try {
22    const response = await axios.post(
23      `https://api.deepai.org/api/${endpoint}`,
24      form,
25      {
26        headers: {
27          ...form.getHeaders(),
28          'api-key': apiKey,
29        },
30      }
31    );
32    res.json(response.data);
33  } catch (err) {
34    res.status(500).json({ error: err.message });
35  }
36});

Now open FlutterFlow and click API Calls in the left navigation panel. Click the + Add button at the top of the panel and choose Create API Group. Give the group a name like DeepAI Proxy and set the Base URL to your Cloud Function's HTTPS trigger URL from the previous step — for example https://us-central1-YOUR-PROJECT.cloudfunctions.net/deepaiProxy. You do not need to add any authentication headers to this API Group because the api-key is handled server-side in your Cloud Function. The FlutterFlow client just calls your proxy endpoint; the proxy takes care of credentialing with DeepAI. Once the group is created, click + Add inside the group to create an API Call. Name it something like GenerateImage or AnalyzeSentiment depending on your first use case. Set the method to POST. For the endpoint path, you can leave it empty (the Cloud Function URL is the full endpoint) or set it to a path segment if you have a routing scheme in your function. Navigate to the Body tab of the API Call and set the body type to JSON (not form-data — you are sending JSON to your Cloud Function, which internally builds the multipart form for DeepAI). In the body, add a JSON template: { "endpoint": "text2img", "text": "{{ promptText }}" } Then click the Variables tab and add a variable called promptText (type String). FlutterFlow will replace {{ promptText }} at runtime with whatever text the user provides.

1// API Call Body (JSON template in FlutterFlow Body tab)
2{
3  "endpoint": "text2img",
4  "text": "{{ promptText }}"
5}

With the API Call configured, click the Response & Test tab inside the call. You will see a test panel where you can fill in the variable values and fire a test request. Enter a sample prompt text — for example a red sports car on a mountain road — and click Send Test Request. If your Cloud Function is deployed and your api-key is correctly configured, you should receive a JSON response from DeepAI within a few seconds. For the text2img endpoint, the response looks like: { "id": "abc123...", "output_url": "https://api.deepai.org/job-view-file/abc123.../outputs/output.jpg" } Click Generate JSON Paths from Response in FlutterFlow. It will analyze the response structure and automatically create JSON path entries. Find or create the JSON path for output_url: the path is $.output_url. Give it a name like imageUrl and set the type to String. For text-based endpoints like summarization, the result field is typically at $.output. Name that path resultText and type it as String. If your test returns a 401 error, the api-key is missing or wrong in your Cloud Function configuration. Double-check your firebase functions:config:set command and redeploy. If you see a 5xx error, check your Cloud Function logs in the Firebase Console for the specific error message — the most common cause is a missing npm package (form-data or axios not installed in functions/).

With a working, tested API Call, you can now wire it into your FlutterFlow UI. For an image generation use case, add a Column to your page containing a TextField (for the prompt), a Button labeled Generate, and an Image widget below. Create an App State variable called generatedImageUrl (type String, default empty string) and another called isLoading (type Boolean, default false). On the Image widget, set its Image Path to the App State variable generatedImageUrl. Add a conditional visibility so the Image widget only shows when generatedImageUrl is not empty. Now set up the button's Action Flow. Open the Actions panel for the Generate button and click + Add Action. Search for Update App State and set isLoading to true. Add a second action of type Backend/API Call, select your DeepAI Proxy API Group and the GenerateImage call, and map the promptText variable to the TextField's value. In the On Success branch, add Update App State actions to set generatedImageUrl to the imageUrl JSON path result from the API response, then set isLoading back to false. In the On Error branch, show a Snack Bar with an error message and reset isLoading. If you want a loading indicator, add a CircularProgressIndicator widget to the page and make it visible only when isLoading is true, hidden otherwise. This gives users visual feedback while the DeepAI generation runs (typically 2-8 seconds for image endpoints). For sentiment analysis, the UI pattern is similar but simpler: instead of an Image widget, add a Text widget bound to a resultText App State variable and color it conditionally (green for positive sentiment score, red for negative).

Before publishing your app, test specifically on the target platforms. Mobile builds (iOS and Android) will not encounter CORS issues because the native HTTP client bypasses the browser's cross-origin restrictions. However, if you publish to web (FlutterFlow's web build or a Vercel/Firebase Hosting deployment), browsers enforce CORS: a direct call to api.deepai.org would fail with a No 'Access-Control-Allow-Origin' header error. Your Cloud Function proxy solves this because you control the CORS headers on your own Firebase endpoint. The index.js snippet in Step 1 already includes the CORS headers (Access-Control-Allow-Origin: *). Verify they are present in your deployed function by opening your browser's developer tools, going to the Network tab, and running a test request. You should see the CORS headers in the response. If you see the XMLHttpRequest error in FlutterFlow's web Test Mode, it almost always means you are calling DeepAI directly rather than through the proxy — double-check the Base URL in your API Group. On the error handling side, add logic in your Action Flow for these common scenarios: a 429 response means you have hit DeepAI's rate limit for your plan — show a friendly Please try again in a moment message and do not retry automatically. A 401 means the api-key is missing or invalid in your Cloud Function configuration. A 500 from your proxy means an unexpected error occurred server-side — log it in the Firebase Console and check your Cloud Function logs for details. Adding these error branches to your Action Flow gives your app a production-quality feel.

With the core integration working, there are a few final hardening steps before you publish. First, confirm that your api-key is stored as an environment variable in Cloud Functions (via firebase functions:config:set or the Google Cloud Secret Manager) and not hardcoded in the function source code. If you hardcode it and accidentally push to a public GitHub repository, the key will be exposed. Second, consider adding authentication to your Cloud Function proxy so that only your app's authenticated users can call it. If you are using Firebase Auth in your FlutterFlow app, you can pass the Firebase ID token as a header from FlutterFlow and verify it in the Cloud Function using the Firebase Admin SDK — this prevents random internet users from discovering your proxy URL and abusing your DeepAI credits. Third, think about rate limiting at the proxy level. DeepAI charges per API call (check current pricing at deepai.org/pricing). If your app goes viral or a user accidentally hammers the generate button, you want a server-side guard. A simple counter in Firestore keyed by user ID can prevent per-user abuse without extra infrastructure. Finally, if you want the RapidDev team to handle the Cloud Function setup, CORS configuration, and FlutterFlow wiring for you — particularly for streaming or more complex multi-endpoint patterns — RapidDev builds FlutterFlow integrations like this every week. Book a free scoping call at rapidevelopers.com/contact.