How to Integrate Lovable with Monday.com

Monday.com uses personal API tokens for programmatic authentication. Log in to your Monday.com account and click your profile picture in the bottom-left corner. In the menu, click 'Developers' (or navigate to the API section). On the developer page, click 'My Access Tokens' and then 'Show' to reveal your API token. Copy this token — it's a long alphanumeric string. Monday.com also offers OAuth2 for apps that need other users to connect their accounts (the 'Monday Apps' OAuth flow). For a personal integration or an internal tool where you're the only Monday.com account involved, the personal API token is simpler and sufficient. For a SaaS app where each customer connects their own Monday.com workspace, you'll need to build the OAuth2 flow — but that's beyond the scope of this tutorial. Note your board IDs as well. When viewing a board in Monday.com, the URL shows the board ID: monday.com/boards/{boardId}/... Copy the numeric board IDs for the boards you want to integrate with. You can also discover board IDs programmatically by querying the Monday.com API — the Edge Function in Step 3 includes a get-boards action for this. Monday.com's API rate limits are 10,000 complexity points per minute. Each query costs complexity based on how many records and fields you fetch — a simple item list with 3 fields costs roughly 50 complexity points, meaning you can make about 200 such queries per minute. This is more than enough for most custom dashboard use cases.

Open your Lovable project, click '+' in the top-right area to access panels, select 'Cloud', and expand the Secrets section. Add MONDAY_API_TOKEN with your personal API token value. This is the only credential required — Monday.com's API is a single endpoint (https://api.monday.com/v2) that uses the token for both authentication and authorization. You can optionally add MONDAY_BOARD_IDS as a comma-separated list of board IDs you commonly access (e.g., '1234567,7654321,9876543'). This makes it easy to list available boards in your frontend without hardcoding IDs, though it's not required — board IDs can also be passed as parameters in each Edge Function call. The Monday.com API token provides access to all boards, workspaces, and items your Monday.com user account can see. Unlike Jira (where you have an email and token pair), Monday.com uses just the token in an Authorization header. All authenticated API calls to api.monday.com/v2 include the header 'Authorization: {token}' (no 'Bearer' prefix — Monday.com uses a non-standard authorization format). Monday.com's API endpoint is the same for all operations: POST https://api.monday.com/v2 with a JSON body containing the GraphQL query string and optional variables object. This single-endpoint design is typical of GraphQL APIs.

The core of the Monday.com integration is a single Edge Function that accepts a GraphQL query and variables and proxies them to Monday.com's API. Because all Monday.com operations — reading boards, fetching items, creating items, updating columns — go through the same POST endpoint, one Edge Function handles everything. GraphQL queries for Monday.com follow the platform's schema. The key entities are: boards (workspaces and their column definitions), items (individual rows on a board), column_values (the data in each cell), groups (sections within a board), and updates (comments/activity on items). For a custom dashboard, the most useful queries fetch: the board's columns structure (to know which column names map to which IDs), all items on a board with their column values, and filtered subsets using the limit and page parameters for pagination. For creating items, you use the create_item mutation with the board_id, group_id, item_name, and a column_values object mapping column IDs to their values. Column values in Monday.com use different formats depending on the column type: a Status column value is a JSON object like {label: 'Done'}, a Date column is {date: '2026-03-15'}, a People column is {personsAndTeams: [{id: 123, kind: 'person'}]}, and a Text column is just the string value. Your Edge Function should accept pre-formatted column values from the frontend rather than trying to format them internally.

1// supabase/functions/monday/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const MONDAY_TOKEN = Deno.env.get("MONDAY_API_TOKEN") ?? "";
5const MONDAY_URL = "https://api.monday.com/v2";
6const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization" };
7
8async function callMonday(query: string, variables?: Record<string, unknown>) {
9  const res = await fetch(MONDAY_URL, {
10    method: "POST",
11    headers: {
12      Authorization: MONDAY_TOKEN,
13      "Content-Type": "application/json",
14      "API-Version": "2024-01",
15    },
16    body: JSON.stringify({ query, variables }),
17  });
18  return res.json();
19}
20
21serve(async (req) => {
22  if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
23  try {
24    const body = await req.json();
25    const { action, query, variables, boardId, itemName, columnValues, groupId } = body;
26
27    let result;
28    if (action === "get-boards") {
29      result = await callMonday(`query { boards(limit: 50) { id name description state } }`);
30    } else if (action === "get-board-items") {
31      result = await callMonday(
32        `query ($boardId: ID!) {
33          boards(ids: [$boardId]) {
34            name
35            columns { id title type }
36            items_page(limit: 100) {
37              items {
38                id name
39                column_values { id text value }
40                group { title }
41              }
42            }
43          }
44        }`,
45        { boardId: String(boardId) }
46      );
47    } else if (action === "create-item") {
48      result = await callMonday(
49        `mutation ($boardId: ID!, $groupId: String!, $name: String!, $cols: JSON!) {
50          create_item(board_id: $boardId, group_id: $groupId, item_name: $name, column_values: $cols) {
51            id name
52          }
53        }`,
54        { boardId: String(boardId), groupId: groupId ?? "topics", name: itemName, cols: JSON.stringify(columnValues ?? {}) }
55      );
56    } else if (query) {
57      result = await callMonday(query, variables);
58    } else {
59      return new Response(JSON.stringify({ error: "Provide action or query" }), { status: 400, headers: corsHeaders });
60    }
61
62    return new Response(JSON.stringify(result), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
63  } catch (err) {
64    return new Response(JSON.stringify({ error: err.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
65  }
66});

With the Edge Function in place, build a custom board visualization. Ask Lovable to create a page that loads a Monday.com board, displays items in a column-grouped layout, and provides basic CRUD operations. The data structure returned by the get-board-items action contains the board's column definitions and all items with their column_values. Each column_value has an id (matching the board's column definitions), a text field (the human-readable value), and a value field (the raw JSON value used for creating/updating items). Use the text field for display and the id for targeting specific columns in mutations. For a Kanban view, group items by the Status column value. Fetch the column definitions first to find which column has type 'color' (Status columns are type 'color' in Monday.com) and use that column's text values as your Kanban columns. Items with a Status text of 'Done' go in the Done column, 'In Progress' in Working On It, and so on. For item creation from your Lovable form, you need the group_id within the board (groups are the colored sections like 'This Week', 'Next Week'). Fetch groups with the board query and display a dropdown to let users select which group to add to. The column_values object for creation uses column IDs as keys — map your form fields to the correct column IDs from the board's column definitions.

Monday.com webhooks notify your app when items are created, updated, or when column values change. This enables your Lovable app to stay in sync with Monday.com without polling the API on a timer. To set up webhooks, create a webhook receiver Edge Function in Lovable. Monday.com webhooks use a challenge-response verification: when you register the webhook, Monday.com sends a POST request with a challenge field, and your endpoint must respond with the same challenge value. After this verification handshake, Monday.com sends event payloads to your endpoint. Monday.com webhooks are created through the API (POST mutation to subscribe_webhook) or through the Monday.com UI under Automations. The webhook payload includes: event.type (create_item, change_column_value, etc.), event.boardId, event.itemId, and event.columnId for column change events. For a client project portal, listen for status column changes — when a task is marked Done in Monday.com by your team, the webhook triggers and updates the client's view in Supabase, removing the need for the client portal to poll the API continuously.

1// supabase/functions/monday-webhook/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
4
5serve(async (req) => {
6  try {
7    const body = await req.json();
8
9    // Handle Monday.com webhook verification challenge
10    if (body.challenge) {
11      return new Response(JSON.stringify({ challenge: body.challenge }), {
12        headers: { "Content-Type": "application/json" },
13      });
14    }
15
16    const supabase = createClient(
17      Deno.env.get("SUPABASE_URL") ?? "",
18      Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? ""
19    );
20
21    const event = body.event;
22    if (event?.type === "change_column_value" && event?.columnId?.includes("status")) {
23      await supabase.from("monday_items").upsert({
24        item_id: String(event.itemId),
25        board_id: String(event.boardId),
26        status: event.value?.label?.text ?? "",
27        updated_at: new Date().toISOString(),
28      }, { onConflict: "item_id" });
29    }
30
31    if (event?.type === "create_item") {
32      await supabase.from("monday_items").insert({
33        item_id: String(event.itemId),
34        board_id: String(event.boardId),
35        name: event.itemName ?? "",
36        status: "New",
37        updated_at: new Date().toISOString(),
38      });
39    }
40
41    return new Response("OK", { status: 200 });
42  } catch (err) {
43    return new Response(err.message, { status: 500 });
44  }
45});