How to Integrate Retool with ClickUp

Before configuring Retool, you need a ClickUp personal API token. Log in to ClickUp and click your avatar in the bottom-left corner to open User Settings. In the Settings page, navigate to the Apps section in the left sidebar. Under the API Token section, click Generate to create a new token. Copy the token immediately — it is only shown once. If you already have a token, you can use the existing one or regenerate it (note that regenerating invalidates the old token). For team-wide Retool tools where multiple users will share the same ClickUp connection, you may want to generate the token under a dedicated service account (a ClickUp user created specifically for integrations) rather than a personal account. This way the token remains valid even if an individual user leaves the organization. Store the token securely — you will add it to Retool's Configuration Variables in the next steps. Note: Personal API tokens provide access scoped to the user who generated them. If you need access limited to specific workspaces or scopes, consider ClickUp's OAuth 2.0 flow instead, which allows specifying permission scopes. For most internal Retool tools, the personal token is sufficient.

In your Retool dashboard, click the Resources tab in the left navigation. Click the Add Resource button (top-right), then search for or select REST API from the resource type list. This opens the REST API resource configuration form. In the Name field, enter something descriptive like ClickUp API. In the Base URL field, enter: https://api.clickup.com/api/v2 This is ClickUp's API v2 base URL — all query paths you write later will be relative to this base. Now configure authentication: scroll down to the Headers section and click Add Header. In the key field, enter Authorization. In the value field, enter your personal API token directly (e.g., pk_12345678_ABCDEFGHIJKLMNOPQRSTUVWXYZ). ClickUp's v2 API uses the token directly as a Bearer value without a prefix. If you prefer to store the token as a configuration variable (recommended for security), first go to Settings → Configuration Variables, create a variable named CLICKUP_API_TOKEN with your token as the value, and mark it as a secret. Then in the header value field, use the expression {{ retoolContext.configVars.CLICKUP_API_TOKEN }}. Leave all other settings at their defaults. Click Create Resource to save. Retool will test the connection and confirm the resource was created successfully.

Before querying tasks, you need to navigate ClickUp's hierarchy to get the IDs of the spaces and lists you want to work with. In your Retool app, open the query editor (Code panel) and create a new query named getSpaces. Select the ClickUp API resource. Set the method to GET and the path to /team/YOUR_TEAM_ID/space. Replace YOUR_TEAM_ID with your actual ClickUp team ID, or make it dynamic: /team/{{ textInput_teamId.value }}/space. Add a query parameter archived=false to exclude archived spaces. Run the query — you should see a JSON response with an array of spaces, each containing an id, name, and statuses array. Note the space IDs for the ones you want to include in your dashboard. Next, create a second query named getLists. Set the path to /space/{{ select_space.value }}/list?archived=false. This fetches all lists directly under a space (not nested in folders). If you also need lists inside folders, create a third query for /space/{{ select_space.value }}/folder?archived=false to get folders, then /folder/{{ select_folder.value }}/list for folder-based lists. Bind the getSpaces query to a Select component (select_space) by setting its data to {{ getSpaces.data.spaces }} and its mapped value/label to id and name respectively. When the user picks a space, getLists automatically re-runs because it references {{ select_space.value }}.

1// Transformer to flatten spaces for a Select component
2const spaces = data.spaces || [];
3return spaces.map(space => ({
4  label: space.name,
5  value: space.id,
6  color: space.color || '#cccccc',
7  memberCount: space.members ? space.members.length : 0
8}));

With your list ID available from the previous step, create the main task query. Name it getTasks. Select the ClickUp API resource, set method to GET, and path to /list/{{ select_list.value }}/task. ClickUp's task list endpoint supports rich filtering via query parameters. Add the following query params to your Retool query: - page: {{ pagination.offset / pagination.pageSize }} (for pagination, ClickUp returns 100 tasks per page) - order_by: due_date - reverse: true (newest due dates first) - include_closed: {{ toggle_showClosed.value }} - assignees[]: {{ multiselect_assignees.value?.join(',') }} (filter by assignee) - statuses[]: {{ multiselect_status.value?.join(',') }} (filter by status) - due_date_gt: {{ dateRange.start ? new Date(dateRange.start).getTime() : '' }} - due_date_lt: {{ dateRange.end ? new Date(dateRange.end).getTime() : '' }} Note that ClickUp timestamps are in milliseconds since epoch. The date range picker returns ISO strings, so the transformer above converts them. Once the query runs, add a transformer to flatten the nested task data for Retool's Table component. The raw response has a tasks array, each task containing nested assignees (as an array of user objects), status (as an object with status and color), and custom fields (as an array). The transformer below reshapes this into flat rows.

1// Transformer to flatten ClickUp task data for a Retool Table
2const tasks = data.tasks || [];
3return tasks.map(task => ({
4  id: task.id,
5  name: task.name,
6  status: task.status?.status || 'unknown',
7  status_color: task.status?.color || '#cccccc',
8  priority: task.priority?.priority || 'none',
9  assignees: task.assignees?.map(a => a.username).join(', ') || 'Unassigned',
10  due_date: task.due_date ? new Date(parseInt(task.due_date)).toLocaleDateString() : 'No due date',
11  date_created: new Date(parseInt(task.date_created)).toLocaleDateString(),
12  url: task.url,
13  list_name: task.list?.name || '',
14  space_name: task.space?.name || '',
15  time_estimate: task.time_estimate ? `${Math.round(task.time_estimate / 3600000)}h` : ''
16}));

Now build the Retool app UI to display and interact with tasks. Drag a Table component onto the canvas and set its data source to {{ getTasks.data }}. The columns will auto-populate from the transformer output. Configure the Table to show: task name, status (with a color indicator), priority, assignees, due date, and a link to the ClickUp task URL. For task updates, add a second panel (use a Container component) to the right of the Table. Inside it, place: a TextInput for task name, a Select for status (options sourced from the list's available statuses), a Select for priority (Urgent/High/Normal/Low), a DatePicker for due date, and a MultiSelect for assignees. Pre-populate these fields with {{ table1.selectedRow.data }} so they show the currently selected task's values. Create an updateTask query: method PUT, path /task/{{ table1.selectedRow.data.id }}, body type JSON. The JSON body should be: { "name": "{{ textInput_name.value }}", "status": "{{ select_status.value }}", "priority": {{ select_priority.value }}, "due_date": "{{ datePicker_due.value ? new Date(datePicker_due.value).getTime() : null }}" } Set updateTask's On Success event handler to trigger getTasks (refresh the table). Add a Save button that triggers updateTask. For reassigning tasks, use the assignees endpoint: PUT /task/{taskId}/member with the new user ID. For team-wide Retool tools, RapidDev's team can help architect multi-resource apps that combine ClickUp data with your internal database for full project tracking.

1{
2  "name": "{{ textInput_name.value }}",
3  "status": "{{ select_status.value }}",
4  "priority": {{ [null, 'urgent', 'high', 'normal', 'low'].indexOf(select_priority.value) }},
5  "due_date": "{{ datePicker_due.value ? new Date(datePicker_due.value).getTime().toString() : null }}",
6  "assignees": {
7    "add": {{ JSON.stringify(multiselect_assignees.value || []) }},
8    "rem": []
9  }
10}

ClickUp's task list endpoint returns a maximum of 100 tasks per page. For lists with many tasks, implement pagination. In the getTasks query, set the page parameter to {{ Math.floor(table1.pagination.offset / 100) }}. In the Table component settings, enable server-side pagination, set the page size to 100, and configure the pagination to use table1.pagination. For task creation, add a Modal component triggered by a New Task button. Inside the modal, place: a TextInput for task name (required), a TextArea for description, a Select for status, a DatePicker for due date, a MultiSelect for assignees (data: list of team members from a getTeamMembers query), and a Number Input for estimated time in hours. Create a createTask query: method POST, path /list/{{ select_list.value }}/task, body type JSON with the task fields. The description field accepts markdown. On success, close the modal (use a Close Modal event handler action), trigger getTasks to refresh, and show a success notification. For time estimates, ClickUp expects milliseconds: multiply hours × 3600000. For custom fields, the body should include a custom_fields array with id/value pairs — you can fetch custom field definitions via GET /list/{listId}/field.

1// createTask query body
2{
3  "name": "{{ textInput_newName.value }}",
4  "description": "{{ textArea_desc.value }}",
5  "status": "{{ select_newStatus.value || 'Open' }}",
6  "priority": {{ select_newPriority.value || 3 }},
7  "due_date": {{ datePicker_newDue.value ? new Date(datePicker_newDue.value).getTime() : 'null' }},
8  "time_estimate": {{ numberInput_hours.value ? numberInput_hours.value * 3600000 : 'null' }},
9  "assignees": {{ JSON.stringify(multiselect_newAssignees.value || []) }}
10}