How to Integrate Lovable with Trello

Trello uses a two-part authentication system: an API key that identifies your application, and a user token that authorizes access to a specific Trello account's data. The API key is a fixed application credential, while the token is generated per-user and grants the level of access (read-only or read-write) that you specify during the token generation flow. To get your API key, go to trello.com/power-ups/admin in your browser. Click 'New' to create a developer app, give it a name like 'Lovable Integration', select your workspace, and submit. Your API key appears on the app detail page — copy it. To generate the user token, construct a URL in this format: https://trello.com/1/authorize?key=YOUR_API_KEY&name=Lovable+Integration&expiration=never&response_type=token&scope=read,write — replace YOUR_API_KEY with your actual key, then open that URL in your browser. Trello will ask you to authorize the app and then display a 64-character token — copy it immediately. In your Lovable project, open the Cloud tab and navigate to Secrets. Add TRELLO_API_KEY with your API key value and TRELLO_TOKEN with your user token. Both are needed for every API request — Trello appends them as query parameters (key=...&token=...) to all request URLs rather than using Authorization headers.

The Trello API v1 appends authentication as query parameters rather than headers, which means every URL your Edge Function constructs must include key and token. The function reads both secrets and builds a URL utility that appends these parameters automatically. The Trello API is notably permissive about the data you can request in a single call — the boards endpoint can return nested lists and cards in one request using the 'cards=all&lists=all' parameters, reducing the number of API round-trips needed. The Edge Function below handles the most common Trello operations through an action-based router. Card creation accepts all standard Trello card fields — name, description, list ID, due date, member IDs, and label IDs. Card movement updates the idList field. The webhook action creates a Trello webhook subscription pointed at a callback URL (your deployed Edge Function) to receive real-time card movement events.

1// supabase/functions/trello-proxy/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const BASE = "https://api.trello.com";
5const corsHeaders = {
6  "Access-Control-Allow-Origin": "*",
7  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
8};
9
10serve(async (req) => {
11  if (req.method === "OPTIONS") {
12    return new Response("ok", { headers: corsHeaders });
13  }
14  const key = Deno.env.get("TRELLO_API_KEY");
15  const token = Deno.env.get("TRELLO_TOKEN");
16  if (!key || !token) {
17    return new Response(JSON.stringify({ error: "Trello credentials not configured" }), {
18      status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" },
19    });
20  }
21
22  const auth = `key=${key}&token=${token}`;
23  const { action, params = {} } = await req.json();
24  let resp;
25
26  switch (action) {
27    case "get_boards":
28      resp = await fetch(`${BASE}/1/members/me/boards?fields=name,id,closed&filter=open&${auth}`);
29      break;
30    case "get_board":
31      resp = await fetch(`${BASE}/1/boards/${params.boardId}?cards=all&lists=all&members=all&${auth}`);
32      break;
33    case "get_lists":
34      resp = await fetch(`${BASE}/1/boards/${params.boardId}/lists?${auth}`);
35      break;
36    case "get_cards":
37      resp = await fetch(`${BASE}/1/lists/${params.listId}/cards?members=true&labels=true&checklists=all&${auth}`);
38      break;
39    case "create_card": {
40      const body = new URLSearchParams({
41        idList: params.idList, name: params.name, desc: params.desc || "",
42        ...(params.due && { due: params.due }),
43        ...(params.idMembers && { idMembers: params.idMembers.join(",") }),
44        ...(params.idLabels && { idLabels: params.idLabels.join(",") }),
45      });
46      resp = await fetch(`${BASE}/1/cards?${auth}`, { method: "POST", body, headers: { "Content-Type": "application/x-www-form-urlencoded" } });
47      break;
48    }
49    case "update_card": {
50      const body = new URLSearchParams(params.updates);
51      resp = await fetch(`${BASE}/1/cards/${params.cardId}?${auth}`, { method: "PUT", body, headers: { "Content-Type": "application/x-www-form-urlencoded" } });
52      break;
53    }
54    case "move_card":
55      resp = await fetch(`${BASE}/1/cards/${params.cardId}?${auth}`, {
56        method: "PUT",
57        body: new URLSearchParams({ idList: params.idList }),
58        headers: { "Content-Type": "application/x-www-form-urlencoded" },
59      });
60      break;
61    case "delete_card":
62      resp = await fetch(`${BASE}/1/cards/${params.cardId}?${auth}`, { method: "DELETE" });
63      break;
64    case "create_webhook":
65      resp = await fetch(`${BASE}/1/webhooks?${auth}`, {
66        method: "POST",
67        body: new URLSearchParams({ idModel: params.idModel, callbackURL: params.callbackURL, description: params.description || "Lovable Integration" }),
68        headers: { "Content-Type": "application/x-www-form-urlencoded" },
69      });
70      break;
71    default:
72      return new Response(JSON.stringify({ error: `Unknown action: ${action}` }), {
73        status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" },
74      });
75  }
76
77  const text = await resp.text();
78  let data;
79  try { data = JSON.parse(text); } catch { data = { raw: text }; }
80  return new Response(JSON.stringify(data), {
81    status: resp.status, headers: { ...corsHeaders, "Content-Type": "application/json" },
82  });
83});

With the Edge Function ready, you can build a custom kanban board that displays Trello data with a layout tailored to your app's design. A kanban board is fundamentally a set of columns (Trello lists) containing cards, and the Lovable React frontend can render this with full drag-and-drop card movement using libraries like @dnd-kit/core or react-beautiful-dnd. The following prompt generates a complete kanban view component that fetches board data on mount, renders lists as columns, and uses optimistic UI updates when cards are dragged to new columns — the drag triggers immediately in the UI while the API call happens in the background, then reverts if the API call fails. This pattern gives users a snappy experience even with API latency.

Trello webhooks send real-time events to a callback URL when actions occur on a board or card — card created, card moved, card updated, checklist item completed, and many more. Setting up a webhook requires calling POST /1/webhooks with the board ID or card ID to watch (idModel), and your deployed Edge Function URL as the callbackURL. Trello's webhook verification uses a different approach from most platforms: when you create a webhook, Trello sends a HEAD request to your callback URL to verify it's reachable. Your Edge Function must return a 200 response to HEAD requests to complete webhook registration. After registration, Trello sends POST requests for each event, including an action object with type, date, and data describing what changed. Common events to handle include 'updateCard' (card moved or modified), 'createCard', 'archiveCard', and 'updateCheckItemStateOnCard'.