Skip to main content

Overview

Lovable is an AI app builder that generates full-stack React applications. You can integrate ChatAds by giving Lovable a prompt — it will create a server-side function to proxy API calls and wire up the frontend automatically.
No SDK install needed. Lovable handles the backend and frontend code generation from the prompt below.

Setup

Step 1: Get Your API Key

  1. Go to app.getchatads.com/api/keys
  2. Create an API key (starts with cak_)

Step 2: Prompt Lovable

Copy and paste the prompt below into Lovable’s chat. Replace cak_your_api_key with your actual API key.

Lovable Prompt

Copy this entire prompt and paste it into Lovable:
Add ChatAds affiliate link monetization to this app.

**What ChatAds does:** I send it a text message (like a chat response or article
paragraph) and it returns affiliate links for any products mentioned in that text.

**What I need:**

1. A server-side function called `chatads-proxy` that:
   - Accepts POST requests with `{ "message": string }` in the body
   - Calls `POST https://api.getchatads.com/v1/chatads/messages` with the message,
     passing `x-api-key: cak_your_api_key` in the headers
   - Returns the API response to the client
   - Handles CORS for the frontend origin

2. On the frontend, after generating or displaying text content:
   - Call the `chatads-proxy` function with the text as the `message`
   - The response looks like this:
     ```json
     {
       "data": {
         "returned": 1,
         "offers": [{
           "link_text": "standing desk",
           "url": "https://amazon.com/...",
           "product": {
             "title": "Standing Desk, Adjustable Height...",
             "stars": 4.5,
             "reviews": 2340
           }
         }]
       }
     }
     ```
   - If `data.returned > 0`, find the first `link_text` in the displayed text and
     replace it with a hyperlink using the `url`. Open links in a new tab.
   - If `data.returned === 0` or there's an error, show the original text unchanged.

Don't show loading states for the ChatAds call. Display the text immediately and
update with affiliate links when the response arrives.

How It Works

The prompt creates a two-part integration:
  1. Server-side function (chatads-proxy) — Calls the ChatAds API with your key. Your key stays on the server and never reaches the browser.
  2. Frontend — Calls the proxy after content renders, then replaces matching product mentions with affiliate links.

Troubleshooting

401 Unauthorized errors

The API key isn’t reaching the ChatAds API. Ask Lovable:
Show me the chatads-proxy function code so I can verify the API key
is being sent correctly in the x-api-key header.

CORS errors

If the frontend can’t call the function, ask Lovable:
The chatads-proxy function is returning CORS errors. Make sure it
handles OPTIONS preflight requests and returns the correct CORS headers
for my frontend origin.
  1. Test your message in the API Explorer first to confirm it returns offers
  2. Check the browser console for errors from the function call
  3. Verify the frontend is checking data.returned > 0 before replacing text

Response Reference

FieldTypeDescription
data.statusstring"filled" if offers found, "empty" otherwise
data.returnednumberNumber of offers returned
data.offers[].link_textstringText to match in the original message
data.offers[].urlstringAffiliate link URL
data.offers[].product.titlestringProduct name
data.offers[].product.starsnumberProduct rating (0-5)
data.offers[].product.reviewsnumberReview count
See the full API Reference for all available parameters and response fields.

Best Practices

Keep keys server-side

The server-side function keeps your API key off the browser. Never put it directly in frontend code.

Don't block rendering

Show content immediately and update with affiliate links when the API responds. Users shouldn’t wait for ChatAds.

Handle empty gracefully

Not every message will have affiliate matches. Always check data.returned > 0 before modifying text.

Test in API Explorer

Verify your messages return offers in the API Explorer before debugging Lovable code.