Ubersuggest

Log in to your Ubersuggest account at app.neilpatel.com and navigate to your account settings or profile section. Look for an API section or developer credentials area — the exact location may vary depending on your plan. If you do not see an API key option, your current plan may not include API access. In that case, review Ubersuggest's current pricing page (neilpatel.com/ubersuggest/pricing) to determine which plan tier includes the API and consider upgrading before proceeding. Once you locate the API key, copy it immediately. This key authenticates every request you send to the Ubersuggest API at `https://app.neilpatel.com/api`. Do not paste it anywhere in FlutterFlow — not in an API Call header, not in App Values, and not in the code of a Custom Action. It belongs only in your Firebase Cloud Function's environment configuration or in Firebase Secret Manager. While you are in the Ubersuggest dashboard, spend a few minutes exploring the tool manually and noting the specific endpoints and data fields you want to surface in your FlutterFlow app. Ubersuggest's public API documentation is not as exhaustive as some other tools — the field names and endpoint paths you see in the API documentation may differ by plan tier. Write down the exact field names (for example, `search_volume`, `seo_difficulty`, `cpc`) as they appear in a live API response, because you will need these exact names when configuring JSON Paths in FlutterFlow.

Your Firebase Cloud Function will receive keyword or domain queries from FlutterFlow and forward them to the Ubersuggest API with the Authorization header injected server-side. Navigate to the Firebase console, confirm your project is on the Blaze plan (Functions require Blaze for outbound HTTP), and either write the function inline in the console or deploy it via the Firebase CLI. The function accepts two query parameters: `keyword` (the search term) and `country` (typically 'us'). It reads the `UBERSUGGEST_API_KEY` from Firebase Secret Manager or environment config, constructs the request to the Ubersuggest endpoint, adds the Authorization header, and returns the JSON response directly to the FlutterFlow caller. No Ubersuggest credential ever leaves the Cloud Function's server environment. The Ubersuggest API's exact endpoint paths and parameter names should be verified against the documentation provided with your account since the API is lightly documented publicly. A common pattern is a keyword suggestions endpoint accepting a keyword and locale — but confirm the exact path from your account's developer documentation. Once deployed, the Cloud Function's HTTPS trigger URL is what you will use as the Base URL in the FlutterFlow API Call group. The URL itself is not a secret; the value of the proxy is that it prevents the API key from shipping in the app.

1const functions = require('firebase-functions');
2const { defineSecret } = require('firebase-functions/params');
3
4// Set this secret with: firebase functions:secrets:set UBERSUGGEST_API_KEY
5exports.ubersuggestProxy = functions
6  .runWith({ secrets: ['UBERSUGGEST_API_KEY'] })
7  .https.onRequest(async (req, res) => {
8    // CORS headers for FlutterFlow web builds
9    res.set('Access-Control-Allow-Origin', '*');
10    if (req.method === 'OPTIONS') {
11      res.set('Access-Control-Allow-Methods', 'GET');
12      res.set('Access-Control-Allow-Headers', 'Content-Type');
13      return res.status(204).send('');
14    }
15
16    const apiKey = process.env.UBERSUGGEST_API_KEY;
17    if (!apiKey) {
18      return res.status(500).json({ error: 'API key not configured' });
19    }
20
21    // Determine the type of query
22    const keyword = req.query.keyword;
23    const domain = req.query.domain;
24    const country = req.query.country || 'us';
25    const lang = req.query.lang || 'en';
26
27    if (!keyword && !domain) {
28      return res.status(400).json({ error: 'keyword or domain is required' });
29    }
30
31    // Verify these endpoint paths against your Ubersuggest account's API docs
32    let ubersuggestUrl;
33    if (keyword) {
34      ubersuggestUrl =
35        `https://app.neilpatel.com/api/keyword_ideas?keyword=${encodeURIComponent(keyword)}&country=${country}&lang=${lang}`;
36    } else {
37      ubersuggestUrl =
38        `https://app.neilpatel.com/api/domain_metrics?domain=${encodeURIComponent(domain)}&country=${country}`;
39    }
40
41    try {
42      const response = await fetch(ubersuggestUrl, {
43        headers: {
44          Authorization: `Bearer ${apiKey}`,
45          'Content-Type': 'application/json',
46        },
47      });
48
49      const data = await response.json();
50      return res.status(response.ok ? 200 : response.status).json(data);
51    } catch (err) {
52      console.error('Ubersuggest proxy error:', err);
53      return res.status(500).json({ error: 'Failed to fetch from Ubersuggest' });
54    }
55  });

In FlutterFlow, click API Calls in the left navigation panel and click + Add → Create API Group. Name it UbersuggestProxy. In the Base URL field paste your Cloud Function's HTTPS trigger URL (found in the Firebase console under Functions → your function name → Trigger). Do not add an Authorization header here — no secret should appear anywhere in the FlutterFlow project. Click + Add inside the group to create your first API Call. Name it GetKeywordIdeas and set the method to GET. Leave the endpoint path empty (the Cloud Function URL is the complete endpoint). In the Variables tab, add a variable named `keyword` (String, required) and optionally `country` (String, default 'us'). In the URL Parameters section, map `keyword` to `{{keyword}}` and `country` to `{{country}}` — these will become query parameters appended to the Cloud Function URL. Click Response & Test. Enter a real keyword (for example, 'flutterflow tutorial') and your country code, then click Test API Call. When the response loads, you will see the Ubersuggest JSON structure. Click Generate JSON Paths and select the numeric fields you want to use: typically `$.keywords[0].search_volume`, `$.keywords[0].seo_difficulty`, `$.keywords[0].cpc`, and `$.keywords` (the full array for a ListView). Select all relevant paths and save. If you also want domain-level metrics, create a second API Call in the same group named GetDomainMetrics, following the same pattern but with a `domain` variable instead of `keyword`. The same Cloud Function handles both query types based on which parameter is present.

1{
2  "api_group": "UbersuggestProxy",
3  "base_url": "https://us-central1-YOUR_PROJECT.cloudfunctions.net/ubersuggestProxy",
4  "calls": [
5    {
6      "name": "GetKeywordIdeas",
7      "method": "GET",
8      "variables": [
9        { "name": "keyword", "type": "String", "required": true },
10        { "name": "country", "type": "String", "default": "us" }
11      ],
12      "url_params": {
13        "keyword": "{{keyword}}",
14        "country": "{{country}}"
15      },
16      "json_paths": [
17        { "name": "keywordsList", "path": "$.keywords" },
18        { "name": "firstVolume", "path": "$.keywords[0].search_volume" },
19        { "name": "firstDifficulty", "path": "$.keywords[0].seo_difficulty" },
20        { "name": "firstCpc", "path": "$.keywords[0].cpc" }
21      ]
22    }
23  ]
24}

With the API Call configured, build the search results screen in FlutterFlow. Add a Text Field widget at the top of the page for the keyword input, and a Button widget labelled 'Search' or 'Analyse'. Add the UbersuggestProxy → GetKeywordIdeas action to the button: click the button → Actions → + Add Action → Backend/Database → API Request → select GetKeywordIdeas. Bind the `keyword` variable to the Text Field's value. For displaying results, use FlutterFlow's DataTable widget if you want a traditional spreadsheet-style view of multiple keywords. Alternatively, use a ListView with a custom Row template for each keyword result. In either case, set the data source to the API Call response (select Dynamic from API Response → your call → `keywordsList` JSON path which returns the full array). Map each column or row field to the corresponding JSON path variable (search_volume, seo_difficulty, cpc). For visualising search volume across multiple keyword results, add a Bar Chart widget below the table. Set its data source to the same `keywordsList` array, map the X-axis to the keyword name string and the Y-axis to the `search_volume` numeric field. FlutterFlow's chart widget handles array data bindings natively when the data source is a JSON array from an API response. Store a Page State Boolean variable named `isLoading` and set it to true when the search action starts and false when it completes. Bind the Button's loading state and any loading spinners to this variable so the UI reflects the network call in progress. Ubersuggest API response times can vary by endpoint and plan, so a loading indicator significantly improves the user experience.

Three realities about the Ubersuggest API need to be handled in your FlutterFlow app to avoid confusing your users: the paid-only access gate, the lightly documented API (which means endpoint errors can be unexpected), and plan-dependent rate limits. For the paid-only gate: if a user tries to use the app before the API key is configured in your Cloud Function, they will see a generic error. Build a clear error state in the FlutterFlow search screen — check the API response status code and, if the result is a 401 or 403, show a friendly message explaining that the feature requires an active Ubersuggest paid account. This prevents the common frustration of founders who build the entire UI and only discover the paywall when testing. For unexpected API errors: add a conditional check after the GetKeywordIdeas action in the Action Flow Editor. If the API Call status is not 200, store the error message in a Page State variable and display it in a visible Text widget on the screen. Log the error details to a Firestore collection so you can debug production issues without needing users to describe what they saw. For rate limits: Ubersuggest's API rate limits are plan-dependent and not comprehensively documented in public resources — check the documentation available with your paid account. A safe default is to disable the Search button for 2-3 seconds after each call completes (use a timer-based Page State boolean) to prevent rapid-fire requests. Display a friendly 'Rate limit reached' message if the Cloud Function returns a 429 status from Ubersuggest.