Connecting frame to lovable via API

Help
1

Have been trying to connect Lovable via the Frame.io API. The tokens don’t seem to work, and v4 through Adobe seems to be a nightmare. Am I missing something

2

hi @BenGarton I’m more than happy to help you navigate our APIs but first I need a lot more info from you to better understand where you are at and what you’re intending to accomplish.

Can you explain more about what it is you are trying to build with the V4 APIs with lovable (I assume it’s lovable.dev?)? Can you also list out the steps you’ve taken thus far and where you are getting stuck?

Have you searched this forum for other answers from other devs here? Have you taken a look at our developer docs & guides and used our “Ask AI” feature on the docs at all?

More information would be helpful so we can best address the issues and problems you are running into!

image
image1582×1102 211 KB

3

COMPLETE STEP-BY-STEP BREAKDOWN OF OUR WORK

STAGE 1: Initial Problem Diagnosis

  1. Attempted to display frame projects in a Lovable dashboard application

  2. Created a developer token from frame with full API scopes selected

  3. Configured the Lovable app’s FRAMEIO_ACCESS_TOKEN secret with the token

  4. Result: Dashboard showed “0 Projects” - “No projects found” message

  5. Checked backend logs and discovered /me/projects endpoint was returning 404 errors

STAGE 2: Investigated V2 API Limitations

  1. Reviewed the loadProjects() function in Projects.tsx which was trying three methods:

    • Method 1: /me/projects endpoint (failed - 404)

    • Method 2: /projects/shared endpoint (failed - empty array)

    • Method 3: /teams/{id}/projects endpoint (failed - 404)

  2. Searched frame Developer Forum for similar issues

  3. Discovery: Found that V2 API has fundamental limitations with project listing for certain token/account configurations

  4. Determined that V2 API approach was fundamentally broken for this use case

STAGE 3: Attempted V4 API Setup

  1. Navigated to Adobe Developer Console

  2. Found existing project (Project 1) created for frame integration

  3. Clicked “+ Add to Project” → Selected “API”

  4. Found frame V4 API in the available services list

  5. Selected frame API and clicked to configure

  6. Entered OAuth configuration:

    • Default redirect URI: https://lovable.dev/projects/[project-id]

    • Redirect URI pattern: https://lovable\\.dev/.*

  7. Clicked “Next” to proceed to scopes configuration

  8. Reviewed available OAuth scopes (all available by default)

  9. Clicked “Save configured API” to finalize setup

  10. FAILURE: Received error message “API configuration failed. Please try again.”

  11. Checked browser console and found 504 upstream timeout errors from Adobe’s backend

  12. Discovered GraphQL mutation error: workspaceId variable was null

  13. Conclusion: Adobe Developer Console infrastructure was experiencing issues - this was not a configuration problem but a backend service failure

STAGE 4: Pragmatic Workaround Implementation

  1. Returned to frame directly and logged into the account with the projects

  2. Navigated through the project list and manually collected all 3 project IDs:

    • Calvin Klein: a49c3e37-1c2d-495c-a71e-34a3e3126426

    • G-Star: dbcc3350-acd5-4850-a7c8-e62342512c88

    • Tommy Hilfiger: e1a39d2d-86c6-4dde-aa1b-7febaaf0c98c

  3. Asked Lovable AI to modify the loadProjects() function

  4. Lovable made code changes to:

    • Add getProjectById() method to the frame integration hook

    • Update the edge function to handle fetching projects by ID

    • Modified Projects.tsx to call individual project endpoints with hardcoded IDs

  5. Lovable deployed the changes to the live application

  6. Verified: Dashboard now displayed all 3 projects with names and metadata

However there is no data within this projects and still unable to access the information i require :slight_smile:

4

hi @BenGarton this appears to try to use our V2 API which is deprecated in favor of the V4 API. Developer tokens are not supported at this time.

Please see our Getting Started guide and API reference for more info on the V4 APIs.

Also you can copy any of the API reference as markdown to paste into any LLM:

image
image1582×1102 237 KB

You can also visit our llms.txt to feed to any LLM: https://next.developer.frame.io/llms.txt

You will need to set up a project in the Adobe Developer Console and add the V4 API there which will give you the credentials you need to get started.

5

Thanks for the help so far- getting somewhere

However, there’s a critical architectural consideration: The current Lovable app appears to be a frontend application. Should I:

Option A: Implement a full OAuth login flow where users authenticate with Frame.io to get an access token, then use that token for all API calls?

Option B: Look at the Frame.io V4 API Getting Started guide to see if Charlie’s approach involves something different (like a specific library or SDK)?

6

You will need to create an OAuth login flow (either single page or web app) via the Adobe Developer Console by adding the Frame.io API to it in order to get an auth token and then exchange that for an access token.

You can start that process here: Loading... | Adobe Developer Console

We have a typescript sdk that is available on npm: https://www.npmjs.com/package/frameio

8

Hi Charlie - thanks for the help so far!

CORE ISSUE

The Frame OAuth login is not working. When attempting to authenticate via the “Open OAuth login in popup” button, Adobe IMS immediately rejects the request with an error=invalid_scope response instead of showing the login screen. This means the app can’t get an access token and users can’t connect their Frame accounts.

CORE PROBLEM (What we know)

  1. OAuth configuration mismatch - The code is sending OAuth parameters that don’t match what’s registered in the Adobe Developer Console

  2. Multiple redirect URL versions exist but only one is configured in Adobe:

    • Preview: https://i932c502-674d-4a6f-a6f5-2c8acfaf45c.lovableproject.com/oauth/callback

    • Published: https://frame-loom.lovable.app/oauth/callback

    • Adobe configured: https://lovable.dev/projects/1032c502-674d-4a6f-a6f5-2c8acfa0f45c

  3. Scopes might be mismatched - Adobe Console shows: offline_access, additional_info:roles, profile, openid, email but the code might be requesting different ones

  4. No OAuth requests are being made at all - The network tab shows zero calls to Adobe IMS, meaning the redirect URL mismatch is likely preventing the request from even being built

CORE QUESTION WE NEED ANSWERED

What is the correct redirect URI that should be used, and what are the exact scopes that Frame OAuth requires?

Specifically:

  1. Should the code use https://lovable.dev/projects/1032c502-674d-4a6f-a6f5-2c8acfa0f45c (currently in Adobe Console)?

  2. Or should Adobe Console be updated to include the preview and published URLs?

  3. What scopes does Frame actually require for OAuth? (The Adobe config shows 5 scopes but we don’t know if they’re correct)

  4. Is your guidance about which exact redirect URI and scopes to use available on the forum?

9

hi @BenGarton all of the scopes listed in the dev console are what is needed to connect to IMS for auth. error=invalid_scope means you are not including the scopes in the request in the correct format. Please see the Adobe Authentication guide for more information. There are sample apps available to help with the exact code.

You can add additional redirects in the adobe developer console by adding a comma at the end of the redirect url pattern and adding your additional url there:

image
image668×292 9.04 KB

image
image392×234 6.01 KB

11

Hi Charlie,

Thanks for your guidance — really appreciate it.

We’ve now corrected our redirect configuration in the Adobe Developer Console so it exactly matches our Lovable callback (default redirect + escaped redirect URI pattern). We’re no longer seeing invalid_scope, and the OAuth flow completes successfully.

At the moment, the remaining issue is that Frame’s /v4/me endpoint returns a 401 (“Invalid or missing authorization token”). Our current authorize request is sending a minimal identity scope set (openid profile offline_access, space-separated and encoded via URLSearchParams).

Based on your advice, our next step is to update the authorize request to use exactly the scopes listed in the Adobe Developer Console for the frame API OAuth Web App credential (rather than the minimal identity set), then reconnect and re-test.

Before we do that final redeploy, we just wanted to sanity-check one thing with you:

  • Is there a recommended or “known-good” scope string for frame via IMS (i.e. exactly as shown in the Console)?

  • When everything is configured correctly, should we expect the issued access token to include a Frame.io-specific audience or claim that /v4/me relies on?

Thanks again for the help

12

@BenGarton you need to include all scopes when authenticating, as the access token inherits those scopes when you make the call to the V4 API. So if you omit them initially, you will get 401 errors as you will not have the correct permissions. Add all of the scopes that are present in the dev console project when authenticating and you should be good.

1 Like
13

success! Thanks for bearing with Charlie - not a developer so apologies for that

1 Like
14

All good! Happy to help!

15

Have another question in the pursuit of an API connection for analytics purposes:

We have successfully connected to projects, folders, and assets. However, we’ve hit a blocker with comments.

Current situation:

  • Adobe IMS OAuth flow works correctly (token length ~1243, valid JWT)

  • V4 endpoints (/v4/accounts, /v4/me, folder children) return 200 OK

  • V2 comments endpoint (/v2/assets/{asset_id}/comments) returns 401 Unauthorized

Questions:

  1. Can Adobe IMS tokens access V2 API endpoints? Specifically the comments endpoint at GET /v2/assets/{id}/comments?

  2. Is there a V4 comments endpoint available or planned? We couldn’t find one in the current V4 API reference.

  3. If comments require V2 OAuth, is there a recommended approach for apps that need both V4 (Adobe IMS) and V2 (legacy frame OAuth) access?

Our use case requires fetching all comments on assets for analytics (reviewer patterns, feedback timing, etc.).

Thanks for any guidance!

16

Hi @BenGarton you cannot mix V2 and V4 API calls, they are separate platforms. You can tell lovable to ignore any reference to /v2/ as it will not work for V4 as it will confuse the LLM.

See our API reference on our dev guides for all of our comment endpoints: Show comment | Frame.io API Documentation

Also please point lovable to this url, it should give it all the context it needs: https://next.developer.frame.io/llms.txt