How to Integrate Lovable with IBM Watson

IBM Watson services are provisioned individually through IBM Cloud. Each service (NLU, Assistant, Speech to Text, Visual Recognition) is a separate service instance with its own credentials. You only need to create the specific Watson service you plan to use. To create a Watson NLU instance: Log in to cloud.ibm.com. In the navigation, go to Catalog → AI / Machine Learning. Click 'Natural Language Understanding'. Select a pricing plan (Lite plan is free with monthly limits: 30,000 NLU items/month). Choose a region closest to your users. Click 'Create'. Once created, navigate to the service from IBM Cloud → Resource list → AI / Machine Learning → your NLU instance. Click 'Credentials' in the left menu. If no credentials exist, click 'New credential'. Click the arrow to expand the credential details and copy: 1. The 'apikey' value — this is your WATSON_API_KEY 2. The 'url' value — this is your service URL, format: https://api.{region}.natural-language-understanding.watson.cloud.ibm.com/instances/{instance-id} Repeat this for any other Watson services you need. Each service has its own separate credentials and URL. In Lovable, click the '+' icon next to Preview to open the Cloud panel, then click 'Secrets'. Add: - WATSON_API_KEY — your IAM API key - WATSON_NLU_URL — your NLU service URL (or WATSON_ASSISTANT_URL / WATSON_STT_URL for other services) Watson IAM API keys are long-lived and do not expire unless you explicitly rotate them. Lovable's security system blocks approximately 1,200 hardcoded API keys daily — always use the Secrets panel, never paste keys in chat.

Watson NLU authentication uses HTTP Basic Auth with the literal username 'apikey' and your IAM API key as the password. This is different from the Bearer token pattern used by most other APIs. The Edge Function adds an Authorization: Basic header containing the base64-encoded string 'apikey:{your_api_key}'. The Watson NLU request specifies which 'features' you want extracted from the text. Available features include: entities (named entities with type and relevance score), sentiment (document-level sentiment or targeted sentiment per entity), emotion (five emotion dimensions: joy, anger, fear, disgust, sadness), keywords (important phrases with relevance), categories (classification into IAB taxonomy categories), concepts (high-level concepts related to the text), and relations (relationships between entities). The response structure varies per feature. For entities, you get an array of { type: 'Person', text: 'Tim Cook', relevance: 0.97, sentiment: { score: 0.8 }, count: 2 } objects. For document sentiment, you get { score: 0.72, label: 'positive' }. This Edge Function covers Watson NLU. Use the Lovable prompt to scaffold it for your use case, then describe the specific Watson service you need in the next step if you also need Watson Assistant or Speech to Text.

1// supabase/functions/watson-nlu/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
9
10  try {
11    const { text } = await req.json() as { text: string };
12
13    if (!text?.trim()) {
14      return new Response(JSON.stringify({ error: 'text is required' }), {
15        status: 400,
16        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
17      });
18    }
19
20    const watsonUrl = Deno.env.get('WATSON_NLU_URL')!;
21    const apiKey = Deno.env.get('WATSON_API_KEY')!;
22
23    // Watson uses HTTP Basic Auth with literal username 'apikey'
24    const authHeader = 'Basic ' + btoa(`apikey:${apiKey}`);
25
26    const nluResponse = await fetch(`${watsonUrl}/v1/analyze?version=2022-04-07`, {
27      method: 'POST',
28      headers: {
29        'Authorization': authHeader,
30        'Content-Type': 'application/json',
31      },
32      body: JSON.stringify({
33        text,
34        features: {
35          entities: { limit: 10, sentiment: true, emotion: true },
36          sentiment: {},
37          emotion: {},
38          keywords: { limit: 20, sentiment: true, emotion: true },
39        },
40        language: 'en',
41      }),
42    });
43
44    if (!nluResponse.ok) {
45      const errText = await nluResponse.text();
46      console.error(`Watson NLU error ${nluResponse.status}:`, errText);
47      return new Response(JSON.stringify({ error: `Watson NLU returned ${nluResponse.status}` }), {
48        status: nluResponse.status,
49        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
50      });
51    }
52
53    const result = await nluResponse.json();
54    return new Response(JSON.stringify(result), {
55      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
56    });
57  } catch (error) {
58    console.error('watson-nlu error:', error);
59    return new Response(JSON.stringify({ error: String(error) }), {
60      status: 500,
61      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
62    });
63  }
64});

Watson Assistant uses a stateful session model: you first create a session (which persists the conversation context), then send messages referencing the session ID. Sessions expire after a configurable idle timeout (default 5 minutes, configurable up to 60 minutes on paid plans). The Edge Function manages session lifecycle: on the first message (no session_id provided), it calls the Watson Assistant Sessions API to create a new session and stores the session_id. For subsequent messages, it reuses the session_id passed from the frontend. Watson's response includes the assistant's reply text, intents recognized, entities extracted, and any output actions the dialog flow has configured (links, buttons, suggestion chips). For the frontend, store the session_id in React state (or localStorage if you want sessions to persist across page reloads). Pass it with every subsequent message. When Watson returns a 404 for a session_id (session expired), create a new session automatically. Describe your Watson Assistant skill to Lovable and it will generate the chat component with session management. For complex Watson Assistant implementations with rich responses, custom extensions, and backend webhook calls, RapidDev's team can help design the full conversation architecture.

With the Watson Edge Functions deployed, build the React components that display the AI analysis results in a useful format. Watson NLU results are rich and multi-dimensional — a raw JSON dump is not user-friendly. Design visualizations that match your use case. For sentiment analysis: display the overall document sentiment as a horizontal scale from -1 (very negative) to +1 (very positive) with a color gradient from red through grey to green. Below it, list any entities with negative targeted sentiment highlighted in red. For entity extraction: display a tag cloud or badge list of extracted entities grouped by type (Person, Organization, Location, Product). Clicking an entity shows more details including its relevance score and sentiment. For emotion analysis: a radar chart or horizontal bar chart showing the five emotion scores (joy, anger, fear, disgust, sadness) provides a clear overview of emotional tone. Ask Lovable to build these display components by describing the Watson NLU response structure and the visual design you want. For example: 'Build a text analysis panel. At the top, show the sentiment score as a colored badge: positive (green, score > 0.2), negative (red, score < -0.2), or neutral (grey). Below, show extracted entities as colored chips — blue for Person, green for Organization, orange for Location. Below that, show the top 5 keywords as a list with their relevance percentages.'