Lovable

Build an astrology, tarot, numerology, dream, or full spiritual app on Lovable and connect it to RoxyAPI in five minutes. Lovable is an AI-powered app builder with a built-in cloud backend (Lovable Cloud, powered by Supabase) that gives you Edge Functions, a database, auth, storage, and a Secrets panel out of the box. You describe what you want, Lovable generates the frontend and backend together. This page covers exactly how to wire RoxyAPI into a Lovable app without ever exposing your key.

The Lovable pattern is cleaner than most vibe coder tools because Lovable Cloud has a dedicated Secrets panel for environment variables and Edge Functions for server-side code. Use both, and the AI cannot accidentally leak your API key — even if you ask it to.

Before you start

• A RoxyAPI account and an API key. Grab one from the pricing page, or test endpoints first with the pre-filled key on the interactive API reference.
• A Lovable account. Sign up free at lovable.dev. Every workspace starts with $25 of Lovable Cloud credits per month.
• Five minutes.

The right architecture: Secrets + Edge Function + frontend fetch

Lovable's safe pattern has three pieces:

1. Secrets panel — your RoxyAPI key lives here, encrypted, never seen by the AI or the frontend
2. Edge Function — a serverless backend function that reads the secret, calls RoxyAPI, and returns the result
3. Frontend fetch — your React component calls your own Edge Function URL (not roxyapi.com), receives clean JSON

The browser only ever talks to your Edge Function. Your Edge Function is the only thing that talks to RoxyAPI. The key never leaves the server. This is the same architecture as a Next.js Route Handler, just on Lovable Cloud instead of Vercel.

Step 1: store your API key in the Secrets panel

1. Open your Lovable project
2. Click the + button next to Preview at the top — this opens the Cloud tab
3. In the Cloud tab sidebar, click Secrets
4. Click Add Secret (or New Secret)
5. Set the name to ROXY_API_KEY exactly (uppercase, underscore, no spaces)
6. Paste your RoxyAPI key from your account page as the value
7. Click Save

Lovable encrypts the value and stores it in your Cloud project. From this point on, any Edge Function in your project can read ROXY_API_KEY from environment variables. The frontend never sees it. The AI never sees it. It is not exported when you share or fork your project.

Step 2: prompt Lovable to use the right pattern

The single most important thing you can do for a Lovable + RoxyAPI integration is to tell Lovable, in the very first prompt, to use an Edge Function with the Secrets panel. Lead every Lovable prompt with this block:

Use the RoxyAPI for spiritual data (astrology, tarot, numerology, etc.).
Base URL: https://roxyapi.com/api/v2
Auth: X-API-Key header.
Reference: read https://roxyapi.com/llms.txt for the full endpoint list.

CRITICAL ARCHITECTURE:
- Create an Edge Function that calls RoxyAPI server-side.
- The Edge Function reads ROXY_API_KEY from environment variables (it is already in the Secrets panel).
- The frontend calls the Edge Function URL, never roxyapi.com directly.
- Never expose ROXY_API_KEY in any frontend file or React component.

Then add the actual feature description after that block:

Build a daily horoscope page. The user picks a zodiac sign from 12 buttons. The page calls an Edge Function that fetches GET /astrology/horoscope/{sign}/daily and displays the overview, love, career, lucky number, and lucky color.

Lovable now knows exactly what to build: a frontend page, an Edge Function, the right endpoint, and the security pattern.

Step 3: verify the generated Edge Function

When Lovable finishes, click the Cloud tab → Edge Functions entry in the sidebar. You should see your new function listed. Click into it to see the code. It should look something like this:

// supabase/functions/get-horoscope/index.ts
const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
};

Deno.serve(async (req) => {
  if (req.method === "OPTIONS") {
    return new Response("ok", { headers: corsHeaders });
  }

  try {
    const { sign } = await req.json();
    const apiKey = Deno.env.get("ROXY_API_KEY");

    const response = await fetch(
      `https://roxyapi.com/api/v2/astrology/horoscope/${sign}/daily`,
      { headers: { "X-API-Key": apiKey! } }
    );

    if (!response.ok) {
      return new Response(JSON.stringify({ error: "RoxyAPI error" }), {
        status: response.status,
        headers: { ...corsHeaders, "Content-Type": "application/json" },
      });
    }

    const data = await response.json();
    return new Response(JSON.stringify(data), {
      headers: { ...corsHeaders, "Content-Type": "application/json" },
    });
  } catch (error) {
    return new Response(JSON.stringify({ error: (error as Error).message }), {
      status: 500,
      headers: { ...corsHeaders, "Content-Type": "application/json" },
    });
  }
});

Two things to verify:

1. Deno.env.get("ROXY_API_KEY") — the key is read from environment variables (which the Secrets panel populates). Not a string literal, not from a config file
2. X-API-Key header — the header name is exactly X-API-Key with hyphens

If either is wrong, ask Lovable to fix it in chat: "In the Edge Function, read the API key from Deno.env.get('ROXY_API_KEY') and send it in the X-API-Key header (with hyphens). Do not hardcode the key."

The 5 AI mistakes Lovable makes (and how to fix them in chat)

Lovable's AI is good but it makes a handful of common mistakes when generating RoxyAPI integrations. Watch for these and tell Lovable to fix them in plain English.

Mistake 1: calling RoxyAPI directly from the React frontend

Lovable sometimes skips the Edge Function and puts a fetch("https://roxyapi.com/...") call directly in a React component. This sends the call from the user's browser, leaks the API key (if it is exposed), and hits CORS issues.

Fix in chat:

Move the RoxyAPI fetch out of the React component. Create an Edge Function that calls RoxyAPI server-side and reads ROXY_API_KEY from Deno.env.get('ROXY_API_KEY'). Update the React component to call the Edge Function URL instead of roxyapi.com.

Mistake 2: hardcoding the API key in the Edge Function

Sometimes Lovable copies your key from the chat into the function as a string literal. This commits your key to the project history.

Fix in chat:

Search the entire project for the literal API key string and replace it with Deno.env.get('ROXY_API_KEY'). The key must only live in the Secrets panel, never in source code.

Mistake 3: using the wrong header name

Lovable's AI sometimes defaults to Authorization: Bearer instead of X-API-Key. RoxyAPI does not accept Bearer tokens.

Fix in chat:

RoxyAPI uses the X-API-Key header, not Authorization: Bearer. Update every fetch in the Edge Function to use headers: { 'X-API-Key': Deno.env.get('ROXY_API_KEY')! }.

Mistake 4: not handling 401 / 429 / 404 errors

The generated function usually has a happy-path fetch with no error handling. When the key is wrong or the quota is hit, the page just shows a broken state.

Fix in chat:

Add error handling to the Edge Function. If the RoxyAPI response status is not 200, return the status code and a clear error message. Show 401 (key issue), 429 (quota), and 404 (wrong endpoint) as distinct error messages so I can debug them.

Mistake 5: forgetting CORS headers on the Edge Function

If you call the Edge Function from the frontend without proper CORS headers, the browser blocks the response. Lovable usually adds CORS but sometimes forgets when you ask it to "make the function simpler".

Fix in chat:

Add CORS headers to every response from the Edge Function: Access-Control-Allow-Origin: *, Access-Control-Allow-Headers: authorization, x-client-info, apikey, content-type. Also handle the OPTIONS preflight request with a 200 response.

Test your API key outside Lovable first

Before you trust Lovable's generated function, confirm your key works on its own. Open a terminal and run:

curl "https://roxyapi.com/api/v2/astrology/horoscope/aries/daily" \
  -H "X-API-Key: YOUR_KEY"

If that prints JSON, the key is good and any error you see in Lovable is a function code issue, not a RoxyAPI issue. If it returns 401, the key is wrong. Check at your account page.

Deploy

Lovable Cloud projects deploy automatically when you publish your project. Your Edge Functions are deployed alongside your frontend, and the Secrets panel values are injected at runtime. You do not need a separate deploy step for environment variables — once they are in the Secrets panel, they are live.

After deploying:

1. Open your published app in a new tab
2. Test the feature that calls RoxyAPI
3. If it works locally but fails in production, check the Edge Function logs from the Cloud tab → Logs section. The most common production issue is a missing or mistyped secret name

Extend your integration

You have one Edge Function calling one endpoint. Adding the next 130 endpoints is the same pattern: tell Lovable to add another Edge Function, point it at a new RoxyAPI URL, the Secrets panel value is automatically available. Three places to find the next endpoint to wire up:

• Interactive API reference — Scalar-powered live docs for every endpoint across all 10 domains. Try a call in the browser, copy the curl example, paste it into Lovable with "add an Edge Function that does this" and Lovable builds it.
• Domain guides — short walkthroughs of which endpoints to call in what order:
  • Western Astrology guide — natal charts, horoscopes, synastry, transits
  • Vedic Astrology guide — kundli, Gun Milan, Vimshottari Dasha, panchang, KP
  • Tarot guide — daily card, three-card, Celtic Cross, custom spreads
  • Numerology guide — Life Path, Expression, Soul Urge, personal year
• AI prompt recipes — full ready-to-paste prompts for tarot, numerology, Vedic astrology, dreams, and more. Each is a tested system prompt that produces a working app on the first try in Lovable.

The pattern is the same every time: horoscope today, compatibility tomorrow, kundli next week. One Secrets entry, every endpoint unlocked.

What to build first

• Daily horoscope page. Edge Function calling GET /astrology/horoscope/{sign}/daily. Frontend has 12 zodiac buttons.
• Tarot card of the day. Edge Function calling POST /tarot/daily. Display the card name, image (use the URL from the response), and meaning.
• Life Path calculator. Frontend form (name + birth date) → Edge Function calling POST /numerology/life-path → display the number and its meaning.
• Zodiac compatibility checker. Two zodiac sign dropdowns → Edge Function calling POST /astrology/compatibility-score → display the score with category breakdowns.
• Birth chart generator with database storage. Frontend form → Edge Function calling POST /astrology/natal-chart → save the result to the Lovable Cloud database → results page reads from the database. The Cloud database is built in, no separate setup.
• Dream symbol search. Search input → Edge Function calling GET /dreams/symbols → display matching symbols.
• Vedic kundli with auth-gated access. Frontend form → Edge Function calling POST /vedic-astrology/birth-chart → save the kundli to the database keyed by user ID. Use Lovable's built-in auth so each user only sees their own charts.

FAQ

How do I connect Lovable to RoxyAPI?

Add ROXY_API_KEY to the Cloud tab → Secrets panel, prompt Lovable to create an Edge Function that calls RoxyAPI with the X-API-Key header reading Deno.env.get('ROXY_API_KEY'), and have your frontend call the Edge Function URL (not roxyapi.com directly). The full prompt template is in Step 2 above.

Why an Edge Function instead of calling RoxyAPI from the frontend?

Because the frontend runs in the user's browser. Anything the frontend can read, the user can also read with browser DevTools. If your API key is in the frontend, the user can copy it and burn through your quota. The Edge Function is server-side code that holds the key safely, makes the upstream call, and returns clean JSON to the browser.

Where is Lovable's Secrets panel?

Click the + button next to Preview at the top of any Lovable project. That opens the Cloud tab. In the Cloud tab sidebar, you will see Secrets. Add your RoxyAPI key there as ROXY_API_KEY.

Does Lovable support self-hosting?

No. Lovable is cloud-only. Lovable Cloud is built on top of Supabase but you do not interact with Supabase directly. Everything runs through the Lovable Cloud UI.

Can I use the TypeScript SDK in Lovable's Edge Functions?

Yes. Lovable Edge Functions run on Deno (Supabase Edge Functions), which now supports Deno's npm: specifier for importing npm packages. Our @roxyapi/sdk is published to npm. Tell Lovable: "Import @roxyapi/sdk using the Deno npm specifier: import { createRoxy } from 'npm:@roxyapi/sdk'. Use the SDK instead of raw fetch in the Edge Function." This is Supabase's currently recommended way to use npm packages in Edge Functions.

How accurate are the astrology calculations under a Lovable app?

Every position comes from Roxy Ephemeris, verified against NASA JPL Horizons. See the methodology page for accuracy details. Same engine for every endpoint, regardless of which integration calls it.

How do I cache RoxyAPI responses to save quota?

Lovable Cloud includes a Postgres database (via Supabase). For daily content like horoscopes and tarot cards, save the response to a daily_cache table keyed by date and sign, and have the Edge Function check the cache before calling RoxyAPI. Tell Lovable: "Add a daily_cache table with columns sign, date, response, fetched_at. The Edge Function should check the cache first and only call RoxyAPI if the cached response is older than 24 hours."

Will my API key end up in exported project JSON?

No. Secrets panel values are stored separately from project code. When you share or fork your project, only the secret name (reference) is included, not the value. The new owner has to add their own value to their own Secrets panel.

Where do I get a RoxyAPI key?

Visit the pricing page for paid plans, or try the interactive API reference with a pre-filled test key first. Plans start at 5,000 requests per month.

Is there a Lovable template for RoxyAPI?

Not yet. If you build a public Lovable template for astrology, tarot, or numerology on RoxyAPI and want it featured on our starters page, reply to your onboarding email with the template URL. The first community Lovable template gets a free month on us.