How to Integrate Lovable with ClickUp

Log in to ClickUp at app.clickup.com. Click your user avatar in the bottom-left corner, then select 'Settings'. Scroll to the bottom of the settings page to find the 'Apps' section. Click it and you'll see the 'API Token' section with a 'Generate' button. Click 'Generate' and copy the token — it starts with 'pk_' and is a long alphanumeric string. ClickUp's REST API uses this token in an Authorization header. All API requests to https://api.clickup.com/api/v2/ include the header 'Authorization: {token}'. Unlike some other APIs, ClickUp does not use 'Bearer' prefix or Basic auth — just the raw token string. Next, identify the IDs you'll need for your integration. Your Team ID (workspace ID) is visible in your ClickUp URL: app.clickup.com/{teamId}/home. To find Space IDs, go to the Space in ClickUp's sidebar and look at the URL: app.clickup.com/{teamId}/v/o/s/{spaceId}. To find List IDs, click into a list and note the URL: app.clickup.com/{teamId}/v/li/{listId}. Having these IDs ready lets you skip the hierarchy traversal in your Edge Function for operations on specific known lists. ClickUp also has a full hierarchy discovery path starting from GET /api/v2/team → spaces → folders → lists if you don't know the IDs in advance. The get-spaces and get-lists convenience actions in the Edge Function (Step 3) cover this discovery path.

Open your Lovable project, click '+' in the top-right area, select 'Cloud', and expand the Secrets section. Add CLICKUP_API_TOKEN with your ClickUp API token value (the pk_... string). Add CLICKUP_TEAM_ID with your workspace's Team ID (the numeric string from the URL). Optionally add CLICKUP_DEFAULT_LIST_ID with the list ID you most commonly work with — this lets your Edge Function default to a specific list without requiring the caller to always specify one. ClickUp's API token provides access to everything your ClickUp user can see in the workspace. It acts as your personal account — tasks created via the API appear as if you created them, and you can access any space, folder, or list your account has permission to view. If you want more granular access control, create a dedicated ClickUp account with limited workspace permissions and generate the API token from that account. The ClickUp API has no sandbox or test environment — all API calls affect your real ClickUp workspace. Be careful when testing task creation and deletion. Use a dedicated test space or list in ClickUp for development to avoid cluttering production data. You can create a space called 'API Testing' and use its IDs during development. Lovable's security infrastructure blocks approximately 1,200 hardcoded API keys daily — storing your ClickUp token in Cloud Secrets rather than in code ensures it stays server-side and protected.

Build the Edge Function that proxies ClickUp API calls. ClickUp uses a standard REST architecture — GET requests for fetching, POST for creating, PUT for updating, and DELETE for removing. This is simpler to work with than Monday.com's GraphQL, as you construct URL paths rather than query strings. The most important endpoints for a task management integration are: GET /api/v2/list/{listId}/task (all tasks in a list, with filtering and pagination), POST /api/v2/list/{listId}/task (create a task), PUT /api/v2/task/{taskId} (update a task: name, description, status, priority, due date), POST /api/v2/task/{taskId}/comment (add a comment), GET /api/v2/team/{teamId}/space (list spaces in workspace), and GET /api/v2/space/{spaceId}/list (lists in a space). ClickUp tasks have a rich data model. The status field contains a status name and color (statuses are customizable per list). The priority field is a numeric code: 1=Urgent, 2=High, 3=Normal, 4=Low. The assignees field is an array of user objects with id and username. Custom fields are in the custom_fields array with type, id, name, and value properties. For task filtering, the GET /api/v2/list/{listId}/task endpoint supports query parameters: status (filter by status name), assignees (filter by user ID array), due_date_lt and due_date_gt (timestamp range), include_closed (default false), and page (0-indexed pagination, 100 tasks per page).

1// supabase/functions/clickup/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const API_TOKEN = Deno.env.get("CLICKUP_API_TOKEN") ?? "";
5const TEAM_ID = Deno.env.get("CLICKUP_TEAM_ID") ?? "";
6const BASE = "https://api.clickup.com/api/v2";
7const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization" };
8const headers = { Authorization: API_TOKEN, "Content-Type": "application/json" };
9
10serve(async (req) => {
11  if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
12  try {
13    const { action, listId, spaceId, taskId, filters, task } = await req.json();
14
15    if (action === "get-tasks") {
16      const params = new URLSearchParams({ include_closed: String(filters?.include_closed ?? false), page: String(filters?.page ?? 0) });
17      if (filters?.status) params.append("statuses[]", filters.status);
18      const res = await fetch(`${BASE}/list/${listId}/task?${params}`, { headers });
19      const data = await res.json();
20      return new Response(JSON.stringify({ tasks: data.tasks ?? [] }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
21    }
22
23    if (action === "create-task") {
24      const body: Record<string, unknown> = { name: task.name };
25      if (task.description) body.description = task.description;
26      if (task.priority) body.priority = task.priority;
27      if (task.due_date) body.due_date = task.due_date;
28      if (task.assignees) body.assignees = task.assignees;
29      const res = await fetch(`${BASE}/list/${listId}/task`, { method: "POST", headers, body: JSON.stringify(body) });
30      const data = await res.json();
31      return new Response(JSON.stringify({ task: data }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
32    }
33
34    if (action === "update-task") {
35      const updateBody: Record<string, unknown> = {};
36      if (task.status) updateBody.status = task.status;
37      if (task.priority !== undefined) updateBody.priority = task.priority;
38      if (task.name) updateBody.name = task.name;
39      if (task.due_date !== undefined) updateBody.due_date = task.due_date;
40      const res = await fetch(`${BASE}/task/${taskId}`, { method: "PUT", headers, body: JSON.stringify(updateBody) });
41      const data = await res.json();
42      return new Response(JSON.stringify({ task: data }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
43    }
44
45    if (action === "get-spaces") {
46      const res = await fetch(`${BASE}/team/${TEAM_ID}/space?archived=false`, { headers });
47      const data = await res.json();
48      return new Response(JSON.stringify({ spaces: data.spaces ?? [] }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
49    }
50
51    if (action === "get-lists") {
52      const folderless = await fetch(`${BASE}/space/${spaceId}/list?archived=false`, { headers });
53      const flData = await folderless.json();
54      return new Response(JSON.stringify({ lists: flData.lists ?? [] }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
55    }
56
57    return new Response(JSON.stringify({ error: "Unknown action" }), { status: 400, headers: corsHeaders });
58  } catch (err) {
59    return new Response(JSON.stringify({ error: err.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
60  }
61});

ClickUp's power comes from its custom fields — each list can have custom fields for text, numbers, dropdowns, dates, ratings, currencies, and more. When you fetch tasks from ClickUp, the response includes a custom_fields array where each item has an id, name, type, and value. When creating or updating tasks, custom field values are passed as an array of objects with field_id and value. To use custom fields in your Lovable app, first fetch the custom field definitions for a list by calling GET /api/v2/list/{listId}/field. This returns all custom fields configured for that list with their IDs, types, and (for dropdown fields) available options. Cache this list definition in Supabase to avoid fetching it on every task load. When creating tasks with custom field values, include the custom_fields array in the POST body. Each entry needs: id (the custom field ID), value (formatted based on field type). For text fields, value is a string. For number fields, value is a number. For dropdown fields, value is the option ID (an integer, not the label string). For date fields, value is a Unix timestamp in milliseconds. For a Lovable UI that displays custom fields, map each custom field type to an appropriate React component: text → input, dropdown → select, number → number input, date → date picker, checkbox → toggle. The field definition from the list endpoint tells you which component to use.

With the Edge Function handling all ClickUp operations, build a polished task management interface in Lovable. Ask Lovable to create a task list with filtering, sorting, and inline editing capabilities that match your team's workflow rather than ClickUp's default interface. For a focused task view, fetch all tasks in a specific list and display them with the most relevant fields for your use case. A client portal might show just task name, status, and due date. An internal engineering view might show priority, assignee, story points, and sprint labels. A sales pipeline view might show the contact name, deal stage, and expected close date from custom fields. For inline status updates (clicking a status badge to change it), your frontend calls the clickup Edge Function with action='update-task' when the user clicks. This provides a more fluid experience than Lovable's default form-based update pattern. Optimistic UI updates — showing the change immediately before the API confirms it — make the interface feel responsive even though the API call takes a moment. For task filtering, pass filter parameters from the frontend to the Edge Function. Build a filter toolbar with status dropdowns, assignee selectors, and date range pickers. Each filter change triggers a new get-tasks call with the updated parameters, returning only the matching tasks.