Docs

Ranla + Lovable

Lovable’s install surface is Secrets + a chat prompt: store your rnl_ key, paste the prompt, and let Lovable wire server-side sends (often via Supabase Auth).

There is no separate Lovable “connector package.” The agent writes the Edge Function / hook against POST /emails (or SMTP if you prefer Supabase’s custom SMTP UI).

When to use Ranla

  • Password reset, verification, receipts, and other transactional mail
  • Branded from on your own domain after DNS verify
  • Supabase Auth via a Send Email hook / Edge Function, or custom SMTP with a Ranla credential

Lovable projects often use Supabase — see Supabase Auth email for the hook path and the SMTP alternative.

1. Add your API key (Secrets)

  1. Open app.ranla.ai → API Keys → create a key (rnl_…).
  2. In Lovable, open your project Settings → Secrets (or the env/secrets panel Lovable exposes for backend code).
  3. Add:
RANLA_API_KEY=rnl_your_key_here

Use the secret name exactly — server routes and Edge Functions should read process.env.RANLA_API_KEY. Never put the key in client-side React components.

2. Paste this prompt in Lovable chat

Integrate Ranla transactional email into this app.

Docs (read first):
- https://docs.ranla.ai/guides/supabase
- https://docs.ranla.ai/ai/agent-skill
- https://docs.ranla.ai/openapi.yaml
- https://docs.ranla.ai/builders/lovable
- https://docs.ranla.ai/smtp

Rules:
1. Store the API key in RANLA_API_KEY (already in Lovable Secrets). Never expose rnl_ keys in the browser.
2. Prefer POST https://api.ranla.ai/emails with Authorization: Bearer $RANLA_API_KEY (Supabase Edge Function or server route).
3. Alternative: configure Supabase custom SMTP with Ranla (host smtp.supersendtx.com, username supersendtx, password from dashboard SMTP credentials).
4. Until domain verification and Free production unlock (both required: verified domain + payment method on file), sandbox sends must use from "[email protected]" and to only our account email.
5. Add a server-side send path for password-reset / verification email.
6. Use canonical fields: html, text, reply_to. Prefer npm package supersendtx if the backend is Node.

After domain verify + payment method on file (Free production, no charge until upgrade), switch from to [email protected].

Replace “our account email” with the email on your Ranla account if the agent asks.

3. Minimal server send (Node / Edge)

const res = await fetch('https://api.ranla.ai/emails', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${process.env.RANLA_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    from: '[email protected]',
    to: '[email protected]',
    subject: 'Verify your email',
    html: '<p>Click the link to verify.</p>',
  }),
})

Or install supersendtx and use the SDK — see Next.js.

Sandbox self-test

Send to your Ranla account email only, with from: "[email protected]", until your domain is verified and Free production is unlocked (payment method on file):

{
  "from": "[email protected]",
  "to": "YOUR_ACCOUNT_EMAIL",
  "subject": "Ranla sandbox check",
  "html": "<p>It works.</p>"
}

Production

  1. Add your domain in the Ranla dashboard.
  2. Apply DNS (Cloudflare integration or registrar credentials).
  3. Verify, add a payment method to unlock Free production (no charge until you upgrade), then update from to an address on that domain.

Optional: MCP while you build

If you use Cursor (or another MCP client) alongside Lovable, connect hosted MCP at https://mcp.ranla.ai/mcp with OAuth — see MCP server. That helps the coding agent; your Lovable app still needs Secrets (or SMTP) for runtime sends.