How to Integrate Lovable with Airtable

Airtable uses Personal Access Tokens (PATs) rather than API keys for all API access as of 2023. To create one, go to airtable.com/create/tokens and click 'Create token'. Give it a descriptive name like 'Lovable App - Production'. On the scopes page, select only what your Lovable app needs: data.records:read to fetch records, data.records:write if your app creates or updates records, schema.bases:read to list tables and field names programmatically. Avoid granting broader scopes like schema.bases:write or automations:write unless your app specifically needs them. Next, add base access. Click 'Add a base' and select the specific Airtable base your Lovable app will connect to. You can grant access to multiple bases or all bases in a workspace — for security, grant access only to the specific base you need. After creating the token, Airtable shows it once. Copy it immediately and keep it somewhere safe — you cannot see it again. You will paste it into Lovable's Cloud Secrets in the next step. Also note your base ID from the Airtable API documentation page (airtable.com/account/api) — it starts with 'app' followed by 14 characters.

In Lovable, click the '+' button next to the Preview panel to open the Cloud tab, then navigate to Secrets. Add these secrets: - AIRTABLE_ACCESS_TOKEN: your Personal Access Token (starts with 'pat') - AIRTABLE_BASE_ID: your base ID (starts with 'app') You can also add table names as secrets if they may change between environments, but table names are typically stable and can be passed as parameters from the frontend instead. The Airtable API base URL is: https://api.airtable.com/v0/{BASE_ID}/{TABLE_NAME}. Records are returned in pages of up to 100 by default, with an offset token for fetching subsequent pages. The Bearer token goes in the Authorization header: 'Authorization: Bearer pat...'. Keep in mind that Airtable field names in the API match exactly what you see in the Airtable grid — spaces, capitalization, and special characters included. 'Customer Email' (with capital letters and a space) is a different field name from 'customer_email'. When prompting Lovable, use the exact field names from your Airtable table.

Create the Edge Function that proxies Airtable REST API calls. The Airtable API is REST-based with a clean, well-documented structure. A generic proxy function handles list, get, create, update, and delete operations across any table in your base. The Airtable API returns records with a specific structure: each record has an id (the unique Airtable record ID, like 'recXXXXXXXXXXXXXX'), a createdTime timestamp, and a fields object containing all the field values. When building Lovable components, remember to extract the fields object: record.fields.Status rather than record.Status. For list operations, Airtable supports filterByFormula for filtering (using Airtable formula syntax like "AND({Status}='Active', {Category}='Engineering')"), sort for ordering, and pageSize and offset for pagination. The response includes an offset value when more records exist — pass it as a parameter on the next request to get the next page. For creating and updating records, the body is: { records: [{ fields: { 'Field Name': value } }] }. Multiple records can be created or updated in a single request (up to 10 at a time).

1// supabase/functions/airtable-proxy/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const corsHeaders = {
5  "Access-Control-Allow-Origin": "*",
6  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
7  "Access-Control-Allow-Methods": "POST, OPTIONS",
8};
9
10serve(async (req: Request) => {
11  if (req.method === "OPTIONS") {
12    return new Response("ok", { headers: corsHeaders });
13  }
14
15  try {
16    const token = Deno.env.get("AIRTABLE_ACCESS_TOKEN");
17    const baseId = Deno.env.get("AIRTABLE_BASE_ID");
18
19    const { operation, tableName, recordId, fields, filterFormula, sortField, sortDirection, pageSize = 50, offset } = await req.json();
20
21    const tableUrl = `https://api.airtable.com/v0/${baseId}/${encodeURIComponent(tableName)}`;
22    const headers = { "Authorization": `Bearer ${token}`, "Content-Type": "application/json" };
23
24    let response;
25
26    if (operation === "list") {
27      const params = new URLSearchParams();
28      if (filterFormula) params.append("filterByFormula", filterFormula);
29      if (sortField) { params.append("sort[0][field]", sortField); params.append("sort[0][direction]", sortDirection || "asc"); }
30      if (pageSize) params.append("pageSize", String(pageSize));
31      if (offset) params.append("offset", offset);
32      response = await fetch(`${tableUrl}?${params}`, { headers });
33    } else if (operation === "get") {
34      response = await fetch(`${tableUrl}/${recordId}`, { headers });
35    } else if (operation === "create") {
36      response = await fetch(tableUrl, {
37        method: "POST",
38        headers,
39        body: JSON.stringify({ records: [{ fields }] }),
40      });
41    } else if (operation === "update") {
42      response = await fetch(`${tableUrl}/${recordId}`, {
43        method: "PATCH",
44        headers,
45        body: JSON.stringify({ fields }),
46      });
47    } else if (operation === "delete") {
48      response = await fetch(`${tableUrl}/${recordId}`, { method: "DELETE", headers });
49    } else {
50      return new Response(JSON.stringify({ error: `Unknown operation: ${operation}` }), { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } });
51    }
52
53    const data = await response.json();
54    return new Response(JSON.stringify(data), {
55      status: response.status,
56      headers: { ...corsHeaders, "Content-Type": "application/json" },
57    });
58  } catch (error) {
59    return new Response(JSON.stringify({ error: error.message }), {
60      status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" },
61    });
62  }
63});

With the Edge Function deployed, open the Lovable chat and describe the UI components you want. Provide your Airtable table name and field names exactly as they appear in Airtable — Lovable needs these to generate correct field references in the React components. A good prompt format specifies: the table name (exact spelling), each relevant field name (exact spelling including spaces and capitalization), the field type (text, number, select, date, checkbox, etc.), and how you want each field displayed. Airtable's field types map to React components: single selects become badges or dropdowns, dates become formatted strings, checkboxes become boolean indicators, URLs become links, and attachments become file lists or image galleries. Lovable generates components that call the airtable-proxy Edge Function, extract fields from each record, and render them using shadcn/ui components. The Airtable record ID (record.id) is important to pass through for update and delete operations — Lovable includes it in data tables as a hidden or key value. For large Airtable bases with many records, implement pagination using Airtable's offset cursor. Lovable can add a 'Load more' button that passes the offset from the previous response to fetch the next page.

If your Lovable app needs to write data back to Airtable — intake forms, status updates, data entry — add create and update operations using the same airtable-proxy Edge Function. The key difference from reads is validating and formatting input on the frontend before sending to Airtable. Airtable has strict field type requirements: dates must be formatted as YYYY-MM-DD strings, linked records must be passed as arrays of record IDs like ['recXXXXX'], multiple selects must be arrays of string values, and phone numbers must follow a specific format. Building Lovable forms that handle these transformations makes the data entry experience reliable. For update operations, the Edge Function sends a PATCH request to the Airtable record endpoint with only the changed fields — Airtable merges the update with existing field values, preserving fields you don't include. This is safer than PUT, which would overwrite all fields. Ask Lovable to generate update forms that pre-fill with current record values and only send changed fields to minimize data loss risks.