Use RoxyAPI with Lovable

Build an astrology, tarot, numerology, or Vedic kundli feature into a Lovable app in under 20 minutes without ever exposing your API key to the browser.

Lovable is an AI app builder with a built-in cloud backend (Lovable Cloud, powered by Supabase). You get Edge Functions, a Postgres database, auth, storage, and a Secrets panel on every project. That is exactly the layout you need to keep a Roxy key on the server and the frontend clean.

What you can build on Lovable

• Daily horoscope page with 12 zodiac buttons and an Edge Function proxy
• Birth chart generator that stores every kundli in the Cloud database keyed by user
• Tarot card of the day with image and meaning pulled straight from the response
• Life Path calculator behind a name-and-date form
• Zodiac compatibility checker with two sign dropdowns
• Dream symbol search page backed by the Roxy dictionary
• Vedic kundli page gated by Lovable auth so each user only sees their own charts

What you need, 30 seconds

1. A Roxy API key. Get one on the pricing page.
2. A Lovable account. Sign up free at lovable.dev. Every new workspace comes with Lovable Cloud credits.
3. Five minutes.

Step 1, connect your first endpoint

The right architecture has three pieces:

1. Secrets panel holds the Roxy key, encrypted, invisible to the AI and the frontend.
2. Edge Function reads the secret, calls Roxy, returns clean JSON.
3. Frontend fetch calls your Edge Function URL (not roxyapi.com).

The browser only talks to your Edge Function. Your Edge Function is the only thing talking to Roxy.

Store the key first:

1. Open your Lovable project.
2. Click + next to Preview at the top. The Cloud tab opens.
3. Sidebar, click Secrets, then Add Secret.
4. Name ROXY_API_KEY (uppercase, underscore, no spaces).
5. Paste your key from your account as the value. Save.

Lead every Lovable prompt with this block so the generator never puts the key in the frontend:

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

CRITICAL ARCHITECTURE:
- Create an Edge Function that calls RoxyAPI server-side.
- The Edge Function reads ROXY_API_KEY from Deno.env.get('ROXY_API_KEY').
- The frontend calls the Edge Function URL, never roxyapi.com directly.
- Never expose ROXY_API_KEY in any React component or frontend file.

Then append the feature description:

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.

Step 2, ship a useful feature

Here is the full flow for a daily horoscope Edge Function generated from the prompt above. Verify two things after Lovable finishes: the key is read from Deno.env.get, and the header is X-API-Key.

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

// 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 });
  }
  const { sign } = await req.json();
  const res = await fetch(
    `https://roxyapi.com/api/v2/astrology/horoscope/${sign}/daily`,
    { headers: { 'X-API-Key': Deno.env.get('ROXY_API_KEY')! } },
  );
  if (!res.ok) {
    return new Response(JSON.stringify({ error: 'RoxyAPI error' }), {
      status: res.status,
      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
    });
  }
  const data = await res.json();
  return new Response(JSON.stringify(data), {
    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
  });
});

import { createRoxy } from 'npm:@roxyapi/sdk';

const roxy = createRoxy(Deno.env.get('ROXY_API_KEY')!);

Deno.serve(async (req) => {
  const { sign } = await req.json();
  const { data, error } = await roxy.astrology.getDailyHoroscope({ path: { sign } });
  if (error) return new Response(JSON.stringify(error), { status: 400 });
  return new Response(JSON.stringify(data));
});

The frontend React component calls the Edge Function URL, not roxyapi.com. The browser never sees the key.

Step 3, scale to the full surface

You have one Edge Function calling one endpoint. Adding the next 130 is the same pattern: tell Lovable to add another Edge Function, point it at a new Roxy URL, the Secrets value is already there. Three places to pick the next one:

• API reference has a pre-filled test key. Try a call in the browser, copy the curl, paste into Lovable with "add an Edge Function that does this".
• Domain guides for which endpoints to call in what order:
  • Western Astrology, Vedic Astrology, Tarot, Numerology, I Ching, Dreams
• AI prompt recipes are tested system prompts that produce working Lovable apps on the first try.

Caching in Lovable Cloud

Lovable Cloud includes Postgres (via Supabase). For daily content like horoscopes and tarot cards, save the response to a daily_cache table keyed by date and sign. Have the Edge Function check the cache first and only call Roxy if the cached response is older than 24 hours. Tell Lovable:

Add a daily_cache table with columns sign, date, response, fetched_at. The Edge Function checks the cache first and only calls RoxyAPI when the cached row is older than 24 hours.

The 5 AI mistakes Lovable makes

Watch for these and fix them in chat.

Mistake 1: fetch straight from React

Fix: "Move the RoxyAPI fetch out of the React component. Create an Edge Function that reads ROXY_API_KEY from Deno.env.get and calls RoxyAPI server-side. Update the component to call the Edge Function URL."

Mistake 2: hardcoded key in the function

Fix: "Search the 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."

Mistake 3: Authorization Bearer instead of X-API-Key

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

Mistake 4: no error handling

Fix: "Add error handling to the Edge Function. If the Roxy response status is not 200, return the status and a clear message. Distinguish 401 (key issue), 429 (quota), 404 (wrong endpoint)."

Mistake 5: missing CORS headers

Fix: *"Add CORS headers to every response: Access-Control-Allow-Origin: , Access-Control-Allow-Headers: authorization, x-client-info, apikey, content-type. Handle the OPTIONS preflight with a 200."

Gotchas

• Backend-only key. Never reference ROXY_API_KEY from a React component or any frontend file. The Secrets panel values are only readable from Edge Functions.
• Never paste the key in chat. The AI does not need the actual value to write the integration code, only the secret name. Chat history may be retained.
• Timezone. Prefer IANA strings ("America/New_York", "Asia/Kolkata") over decimal offsets. IANA resolves to the DST-correct offset for the request date automatically.
• Rate limits. Cache daily content in Postgres rather than hitting Roxy on every page load.
• Redeploy after secret changes. Lovable Cloud injects secrets at runtime, but changes sometimes require a rebuild. If the function returns 401 right after you update the secret, trigger a new deploy.
• Exports. Secrets panel values are stored separately from project code. Forks and exports include only the secret name, not the value.

What to build next

• The Next.js integration has the same patterns when you outgrow Lovable Cloud and want to move to Vercel.
• The AI chatbot tutorial wires multiple Roxy domains into a conversational Lovable app.
• The SDK guide covers every typed method usable from Deno Edge Functions.
• Browse the API reference for every endpoint across 12 domains.