IBM Watson

Log in to cloud.ibm.com and navigate to your resource list. Find the Watson service instance you want to use (for example, Natural Language Understanding). Click on the service name to open its management page. Click Manage in the left navigation, then select Service Credentials. If no credentials exist, click New Credential to generate them. Expand the credential entry — you will see two critical pieces of information: • apikey: a long string beginning with a mix of letters, numbers, and dashes — this is your IBM Cloud API key. Treat it like a root password: it grants access to your entire IBM Cloud account, not just this service. • url: the instance-specific URL for this Watson service, for example https://api.us-south.natural-language-understanding.watson.cloud.ibm.com/instances/abc123-def456-... — the region (us-south, eu-de, au-syd, etc.) and instance ID are unique to your deployment. Copy both values and store them securely. You will need the url to build the endpoint in your Cloud Function, and the apikey to exchange for an IAM access token. You will also need the correct version date string for your service (for NLU it looks like 2022-04-07 — check the current version at cloud.ibm.com/apidocs/natural-language-understanding). Each Watson service has its own version date format and supported values — never omit the ?version= parameter or the service returns a 400 error.

The IBM Cloud IAM authentication flow has two network calls: first, exchange the API key for an access token; second, use that access token as a Bearer header against the Watson service URL. Both steps happen in a Cloud Function — FlutterFlow only sees the Cloud Function URL. Create a Node.js 18 Firebase Cloud Function named watsonProxy. The function should: 1. Read the IBM_CLOUD_API_KEY and WATSON_SERVICE_URL environment variables set via Firebase Functions Config or Google Cloud Secret Manager. 2. POST to https://iam.cloud.ibm.com/identity/token with the body grant_type=urn:ibm:params:oauth:grant-type:apikey&apikey={IBM_CLOUD_API_KEY} and Content-Type: application/x-www-form-urlencoded. Parse the access_token from the response. 3. Make the actual Watson service call using the access token as Authorization: Bearer {access_token}, appending ?version=YYYY-MM-DD to the service URL, and forwarding the JSON request body from FlutterFlow. 4. Return the Watson JSON response to FlutterFlow with CORS headers. IAM tokens are valid for approximately 3600 seconds (1 hour). For higher-volume integrations, cache the token in Cloud Function memory or in Firestore with an expiry timestamp rather than minting a fresh token on every request. For a low-traffic app, minting fresh per request is simpler to start with. Deploy with firebase deploy --only functions and note the HTTPS trigger URL.

1// functions/index.js (Firebase Cloud Functions, Node.js 18)
2const functions = require('firebase-functions');
3const axios = require('axios');
4const qs = require('querystring');
5
6exports.watsonProxy = functions.https.onRequest(async (req, res) => {
7  res.set('Access-Control-Allow-Origin', '*');
8  res.set('Access-Control-Allow-Methods', 'POST, OPTIONS');
9  res.set('Access-Control-Allow-Headers', 'Content-Type');
10  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
11
12  const ibmApiKey = functions.config().ibm.apikey;
13  const watsonUrl = functions.config().ibm.serviceurl; // e.g. https://api.us-south.natural-language-understanding...
14  const version = functions.config().ibm.version;     // e.g. 2022-04-07
15
16  // Step 1: mint IAM access token
17  let accessToken;
18  try {
19    const iamRes = await axios.post(
20      'https://iam.cloud.ibm.com/identity/token',
21      qs.stringify({
22        grant_type: 'urn:ibm:params:oauth:grant-type:apikey',
23        apikey: ibmApiKey,
24      }),
25      { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
26    );
27    accessToken = iamRes.data.access_token;
28  } catch (err) {
29    res.status(500).json({ error: 'IAM token exchange failed', detail: err.message });
30    return;
31  }
32
33  // Step 2: call Watson service
34  const endpoint = req.body.endpoint || 'analyze';
35  try {
36    const watsonRes = await axios.post(
37      `${watsonUrl}/${endpoint}?version=${version}`,
38      req.body.payload || {},
39      { headers: { 'Authorization': `Bearer ${accessToken}`, 'Content-Type': 'application/json' } }
40    );
41    res.json(watsonRes.data);
42  } catch (err) {
43    res.status(err.response?.status || 500).json({ error: err.message });
44  }
45});

In FlutterFlow, click API Calls in the left navigation panel. Click + Add and choose Create API Group. Name it WatsonNLU (or WatsonAssistant, WatsonDiscovery — whatever service you are integrating) and set the Base URL to your Cloud Function HTTPS trigger URL. This is not the Watson instance URL — the Cloud Function URL is the entry point FlutterFlow talks to. Inside the group, click + Add to create an API Call. Name it AnalyzeText for an NLU integration. Set the method to POST and leave the path empty (the Cloud Function handles routing). For the body, set the type to JSON and add a template that describes what Watson NLU should analyze. For NLU text analysis the body your Cloud Function expects looks like: { "endpoint": "analyze", "payload": { "text": "{{ inputText }}", "features": { "sentiment": {}, "keywords": { "limit": 5 }, "entities": { "limit": 5 } } } } Click the Variables tab and add a variable called inputText (type String). FlutterFlow will substitute {{ inputText }} at runtime with the text from your UI. You do not need to add any authentication headers to this API Group — the IAM token exchange happens inside the Cloud Function, invisible to FlutterFlow.

1// API Call body template (JSON sent from FlutterFlow to the proxy)
2{
3  "endpoint": "analyze",
4  "payload": {
5    "text": "{{ inputText }}",
6    "features": {
7      "sentiment": {},
8      "keywords": { "limit": 5 },
9      "entities": { "limit": 5 }
10    }
11  }
12}

Click the Response & Test tab inside the AnalyzeText API Call. Enter a test sentence in the inputText variable field — for example: 'The new product launch exceeded all expectations and customers are thrilled.' Click Send Test Request. If the proxy and IAM exchange are working correctly, you will receive a Watson NLU response JSON. For a sentiment + keywords + entities request, it looks like: { "usage": { "text_units": 1, "text_characters": 75, "features": 3 }, "sentiment": { "document": { "score": 0.92, "label": "positive" } }, "keywords": [ { "text": "product launch", "relevance": 0.88, "count": 1 }, { "text": "customers", "relevance": 0.76, "count": 1 } ], "entities": [], "language": "en" } Click Generate JSON Paths from Response. Select the paths you need: • $.sentiment.document.label — name it sentimentLabel, type String • $.sentiment.document.score — name it sentimentScore, type Double • $.keywords — name it keywordsList, type List (for the full keywords array) • $.keywords[0].text — name it topKeyword, type String (for the most relevant keyword) If the test returns a 500 with an error about IAM token exchange failed, check your Cloud Function logs — the most common causes are a mistyped API key in the config or a missing querystring npm package. If you see a Watson 400 error, the version date parameter is wrong or missing from the service URL.

With the API Call tested and JSON paths generated, connect everything to your FlutterFlow UI. For a sentiment analysis screen, start with a Column containing: • A TextField widget for user input text, bound to a Page State variable called inputText. • An Analyze button. • A Row with a Text widget labeled Sentiment: and a second Text widget showing the sentiment label (positive/negative/neutral). • A Chip Row or Wrap widget showing the extracted keywords. • A loading indicator (CircularProgressIndicator) shown only when isLoading is true. Create Page State variables: sentimentLabel (String), sentimentScore (Double), topKeywords (List of String), isLoading (Boolean). For the Analyze button's Action Flow: 1. Update Page State: set isLoading to true, clear sentimentLabel. 2. Backend/API Call: select WatsonNLU → AnalyzeText; set inputText to the Page State inputText variable. 3. On Success: Update Page State to set sentimentLabel from the sentimentLabel JSON path, sentimentScore from sentimentScore, topKeywords from keywordsList; then set isLoading to false. 4. On Error: show a Snack Bar with the error message and reset isLoading to false. For the sentiment label Text widget, add a conditional text color: green if sentimentLabel equals 'positive', red if 'negative', grey if 'neutral'. For the keywords, use a Dynamic Children widget on a Wrap layout to render each keyword as a Chip. The same pattern scales to Watson Assistant: instead of a static text input, build a chat ListView where user messages trigger the AnalyzeText call (or a separate Assistant session call) and the returned response text is appended as a bot message bubble.

IBM Cloud IAM access tokens expire after approximately 3600 seconds (1 hour). In the simple proxy pattern above, a fresh token is minted for every request — this works for low-traffic apps but adds ~200–300ms per call for the IAM exchange round-trip. For higher-volume apps, add token caching to your Cloud Function: store the access_token and its expiry timestamp in a module-level variable (persisted in the Cloud Function instance memory between requests). Before minting a new token, check if the cached one has at least 5 minutes of life remaining. For error handling in FlutterFlow's Action Flow, add branches for: • 401 from the proxy: the IAM exchange failed — the API key may be revoked. Check IBM Cloud for key status. • 400 from Watson: the version date parameter is wrong, or the NLU features object is malformed — verify the version date with the Watson API docs. • 429: Watson per-plan rate limit exceeded — show a try again later message. • 500 from the proxy: check Cloud Function logs for the specific error. For web builds, the Cloud Function's CORS headers (Access-Control-Allow-Origin: *) allow browser requests. Direct calls to Watson's regional URLs from a browser would fail with an XMLHttpRequest error due to CORS — the proxy is the only path that works for web. Test your published web build specifically (not just FlutterFlow Test Mode) to confirm CORS is working as expected. If setting up the IAM proxy feels complex, RapidDev's team builds FlutterFlow integrations with enterprise AI APIs like Watson every week — a free scoping call is available at rapidevelopers.com/contact.

1// Token caching in Cloud Function module scope (add to functions/index.js)
2let cachedToken = null;
3let tokenExpiry = 0;
4
5async function getIamToken(apiKey) {
6  const now = Date.now() / 1000;
7  if (cachedToken && tokenExpiry - now > 300) {
8    return cachedToken; // use cached token if more than 5 min remaining
9  }
10  const iamRes = await axios.post(
11    'https://iam.cloud.ibm.com/identity/token',
12    qs.stringify({ grant_type: 'urn:ibm:params:oauth:grant-type:apikey', apikey: apiKey }),
13    { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
14  );
15  cachedToken = iamRes.data.access_token;
16  tokenExpiry = now + iamRes.data.expires_in;
17  return cachedToken;
18}