# Use RoxyAPI with Lovable

> Build an astrology, tarot, numerology, or Vedic kundli feature into a [Lovable](https://lovable.dev) 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](/pricing).
2. A Lovable account. Sign up free at [lovable.dev](https://lovable.dev). Every new workspace comes with Lovable Cloud credits.
3. Five minutes.

**Tip: Lovable Cloud is on by default. If it is disabled, turn it back on under **Settings, Connectors, Shared connectors, Lovable Cloud, Manage permissions**. Without Cloud you do not have Edge Functions or a Secrets panel, and there is no safe place for the Roxy key.**

## 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](/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

Test the key outside Lovable first:

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

### Edge Function (Deno)

```typescript
// 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' },
  });
});
```

### Edge Function with the SDK

Lovable Edge Functions support the Deno `npm:` specifier. Our TypeScript SDK works there.

```typescript
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](/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](/docs/guides/astrology), [Vedic Astrology](/docs/guides/vedic-astrology), [Tarot](/docs/guides/tarot), [Numerology](/docs/guides/numerology), [I Ching](/docs/guides/iching), [Dreams](/docs/guides/dreams)
- **[AI prompt recipes](/docs/prompts)** 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](/docs/integrations/nextjs) has the same patterns when you outgrow Lovable Cloud and want to move to Vercel.
- The [AI chatbot tutorial](/docs/tutorials/ai-chatbot) wires multiple Roxy domains into a conversational Lovable app.
- The [SDK guide](/docs/sdk) covers every typed method usable from Deno Edge Functions.
- Browse the [API reference](/api-reference) for every endpoint across 12 domains.