How to Integrate Retool with Adobe Creative Cloud

Before configuring Retool, you need to create an application in Adobe's developer portal to obtain OAuth credentials. Navigate to console.adobe.io and sign in with your Adobe account. Click 'Create new project' or select an existing project. In your project, click 'Add API' to add the Adobe APIs you need. For asset management, select 'Creative Cloud Libraries API' or 'Creative SDK'. For image automation, select 'Photoshop API' and 'Lightroom API'. For AI image generation, select 'Firefly Services'. Each API may require accepting terms of service and potentially requesting access (some Adobe APIs are in limited beta). Once approved, navigate to your project's credentials section. Under OAuth Server-to-Server credentials (preferred for service accounts) or OAuth Web App credentials (for user-delegated access), note your Client ID and Client Secret. For the Retool integration, OAuth Server-to-Server (also called OAuth Client Credentials) is recommended if you are building an internal tool that operates on your organization's Creative Cloud resources, as it does not require individual user authentication. Copy the Client ID and Client Secret, then go to Retool Settings → Configuration Variables and create ADOBE_CLIENT_ID and ADOBE_CLIENT_SECRET as secret variables before proceeding to resource configuration.

Adobe's API requires Bearer tokens for authentication. These tokens are obtained by exchanging your Client ID and Client Secret for a short-lived access token via Adobe's IMS OAuth endpoint. In Retool, you can handle this token exchange with a JavaScript query that runs on page load and stores the token in a state variable for subsequent API queries to reference. In your Retool app, create a JavaScript query named getAdobeToken. This query calls the Adobe IMS token endpoint. Adobe's OAuth server-to-server token URL is: https://ims-na1.adobelogin.com/ims/token/v3 (for IMS Stage) or the production equivalent. The token request uses a POST with form-encoded body: grant_type=client_credentials, client_id (your app's Client ID), client_secret (your Client Secret), and scope (the API scopes your application is authorized for, such as openid,AdobeID,creative_sdk,creative_cloud or the specific scopes listed in your Developer Console credentials). Store the returned access token in a Retool state variable named adobeAccessToken. Set the query's Run on page load to true and add a timer-based refresh since Adobe tokens expire after a configurable duration (typically 24 hours for server-to-server credentials). For subsequent API queries, add the Authorization header dynamically: Bearer {{ adobeAccessToken.value }}. This pattern keeps the OAuth flow managed within Retool without requiring any external token management infrastructure.

1// JavaScript query: obtain Adobe OAuth access token
2// Run on page load; store result in adobeAccessToken state variable
3const clientId = retoolContext.configVars.ADOBE_CLIENT_ID;
4const clientSecret = retoolContext.configVars.ADOBE_CLIENT_SECRET;
5
6const tokenUrl = 'https://ims-na1.adobelogin.com/ims/token/v3';
7
8// Adobe IMS requires form-encoded body, not JSON
9const body = new URLSearchParams({
10  grant_type: 'client_credentials',
11  client_id: clientId,
12  client_secret: clientSecret,
13  scope: 'openid,AdobeID,creative_sdk'
14}).toString();
15
16const response = await fetch(tokenUrl, {
17  method: 'POST',
18  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
19  body: body
20});
21
22const tokenData = await response.json();
23
24if (tokenData.access_token) {
25  await adobeAccessToken.setValue(tokenData.access_token);
26  return { success: true, expires_in: tokenData.expires_in };
27} else {
28  throw new Error('Token exchange failed: ' + JSON.stringify(tokenData));
29}

Create the REST API Resource for Adobe's Creative Cloud Content API. Navigate to Resources tab → Add Resource → REST API. Fill in: - Name: Adobe CC Content API - Base URL: https://cc-api-storage.adobe.io (for the Creative Cloud Storage API) In the Headers section, add default headers: - Authorization: Bearer {{ adobeAccessToken.value }} - x-api-key: {{ retoolContext.configVars.ADOBE_CLIENT_ID }} Click Save. Now create a query using this resource. Set the method to GET and path to /files (or /files?limit=50 for the root folder listing). This returns the list of files and folders in the authenticated user's Creative Cloud storage root. Add a JavaScript transformer to extract the relevant fields from the CCAPI response format, which uses a 'children' array with 'path', 'name', 'type', 'size', and 'modified' fields. Drag a Table component onto the canvas and bind it to {{ ccAssetsQuery.data }}. Configure columns for: filename, type (file/directory), size (formatted in KB/MB), and last modified date. Add a TextInput search component that filters the table client-side using Retool's Table filter expression: {{ ccAssetsQuery.data.filter(f => f.name.toLowerCase().includes(search.value.toLowerCase())) }}. For navigating into folders, add an On Row Click event handler that triggers a new query with the selected folder path appended to the API path, creating a folder drill-down navigation pattern.

1// JavaScript transformer for Creative Cloud Content API file listing
2const response = data;
3const children = response.children || response.files || [];
4
5return children.map(item => ({
6  name: item.name,
7  path: item.path,
8  type: item.type === 'directory' ? 'Folder' : (item.name.split('.').pop() || '').toUpperCase(),
9  size_kb: item.size ? Math.round(item.size / 1024) + ' KB' : '—',
10  modified: item.modified ? new Date(item.modified).toLocaleDateString() : '—',
11  is_folder: item.type === 'directory'
12}));

Adobe's Photoshop API lets you automate image processing operations like resizing, applying Photoshop actions, removing backgrounds, and format conversion — all triggered via REST API calls from Retool without any user needing to open Photoshop. The Photoshop API has a different base URL from the Content API. Create a second REST API Resource: Name 'Adobe Photoshop API', Base URL https://image.adobe.io. Add the same Authorization and x-api-key headers as the Content API resource. Photoshop API operations work asynchronously: you submit a job (POST request) and receive a job ID, then poll the status endpoint until the job completes. Create a POST query targeting /pie/psdService/renditionCreate (the rendition/resize endpoint). The request body specifies the input file (from Creative Cloud storage or a direct URL), the operations to apply, and the output destination (Creative Cloud path or pre-signed S3 URL). Create a JavaScript query that handles the async job pattern: submit the POST, get the job ID from the response, then poll GET /pie/psdService/status/{{ jobId }} every 3 seconds until status equals 'succeeded' or 'failed'. Use a while loop with await setTimeout() to implement polling. Drag a form onto the canvas with inputs for: source file path (pre-filled from the selected table row if using the asset browser), output width, output height, output format (PNG, JPG, WebP), and output file path. A 'Process Image' button triggers the submission query. A separate Text component shows the job status as it transitions from 'pending' to 'running' to 'succeeded'.

1// JavaScript query: submit and poll a Photoshop API resize job
2const inputPath = ccAssetsTable.selectedRow.path;
3const outputWidth = parseInt(widthInput.value);
4const outputHeight = parseInt(heightInput.value);
5const outputFormat = formatSelect.value || 'image/jpeg';
6
7// Submit the resize job
8const submitResponse = await photoshopApiResource.trigger({
9  method: 'POST',
10  path: '/pie/psdService/renditionCreate',
11  body: {
12    inputs: [{ href: inputPath, storage: 'adobe' }],
13    outputs: [{
14      href: `/output/${inputPath.split('/').pop().replace(/\.[^.]+$/, '')}_resized.jpg`,
15      storage: 'adobe',
16      type: outputFormat,
17      overwrite: true,
18      width: outputWidth,
19      height: outputHeight
20    }]
21  }
22});
23
24const jobId = submitResponse._links?.self?.href?.split('/').pop();
25if (!jobId) throw new Error('No job ID in response');
26
27// Poll for completion
28let status = 'pending';
29let attempts = 0;
30while (status !== 'succeeded' && status !== 'failed' && attempts < 30) {
31  await new Promise(r => setTimeout(r, 3000));
32  const statusResponse = await photoshopStatusQuery.trigger({ additionalScope: { jobId } });
33  status = statusResponse.outputs?.[0]?.status || 'pending';
34  attempts++;
35  await processingStatus.setValue(`Status: ${status} (attempt ${attempts})`);
36}
37
38return { jobId, status, attempts };

Connect Creative Cloud data with your internal records to build a comprehensive asset delivery tracker for marketing campaigns. This dashboard shows which campaign deliverables are in Creative Cloud, their approval status in your internal system, and which have been delivered to clients. Create a PostgreSQL (or other database) query that fetches your internal campaign assets table — this table should have columns for: campaign_id, asset_name, cc_path (the Creative Cloud file path), status (pending, in_review, approved, delivered), and assigned_designer. Create a Creative Cloud query that checks whether each file in the assets table actually exists in Creative Cloud. You can do this with a JavaScript query that iterates through your database records and calls GET /files/{{ item.cc_path }} for each one, returning a combined dataset with both internal metadata and CC file metadata (size, last modified date). Drag a Table component onto the canvas. Bind it to the combined dataset and configure columns for: campaign name, asset name, designer, internal status, file size (from CC), last modified (from CC), and a 'Delivered' checkbox. Add action buttons for the status workflow: 'Mark as Reviewed' and 'Mark as Approved' trigger PUT queries to your internal PostgreSQL table. 'Mark as Delivered' updates the status AND sends a Slack notification to the account manager. For complex multi-step approval workflows across Creative Cloud, internal databases, and client communication systems, RapidDev's team can help architect and build the complete Retool solution.

1// JavaScript transformer: combine CC file data with internal records
2// Assumes internalAssetsQuery.data and ccFilesQuery.data are both available
3const internalAssets = internalAssetsQuery.data || [];
4const ccFiles = ccFilesQuery.data || [];
5
6// Build a lookup map from cc_path to CC file metadata
7const ccFileMap = {};
8ccFiles.forEach(f => { ccFileMap[f.path] = f; });
9
10return internalAssets.map(asset => ({
11  campaign: asset.campaign_name,
12  asset_name: asset.asset_name,
13  designer: asset.assigned_designer,
14  status: asset.status,
15  cc_path: asset.cc_path,
16  in_cc: !!ccFileMap[asset.cc_path],
17  cc_size: ccFileMap[asset.cc_path]?.size_kb || '—',
18  cc_modified: ccFileMap[asset.cc_path]?.modified || '—'
19}));