Lovable.dev Integration

Integrate Keplars with your Lovable.dev applications using Supabase Edge Functions - no backend coding required.

Overview

Lovable.dev is an AI-powered full-stack web app builder that generates production-ready code. This integration provides pre-built components, hooks, and AI prompts to add email functionality to your Lovable projects.

GitHub Repository: github.com/KeplarsHQ/lovable-keplars-example

Features

Pre-built React components styled with Tailwind CSS
Custom React hooks with loading states
Copy-paste AI prompts for Lovable
Template-based and raw HTML/text emails
Instant delivery (0-5 seconds) or scheduled emails
Complete TypeScript support
Production-ready from day one

Prerequisites

Before starting, you'll need:

A Lovable.dev account
A Supabase project connected to Lovable
A Keplars account with an API key

Quick Start

1. Get Your Keplars API Key

Sign up at dash.keplars.com
Connect your email provider (Gmail or Outlook)
Generate an API key (starts with kms_)

2. Deploy the Supabase Function

Option A: Using Lovable AI (Easiest)

Copy this prompt into Lovable:

I want to add email functionality using Keplars. Please:

1. Create a new Supabase Edge Function called "send-email"
2. Copy the code from: https://raw.githubusercontent.com/KeplarsHQ/lovable-keplars-example/main/supabase/functions/send-email/index.ts
3. Add an environment variable KEPLARS_API_KEY in my Supabase project settings
4. Deploy the function to Supabase

Option B: Manual Deployment

# Clone the example repository
git clone https://github.com/KeplarsHQ/lovable-keplars-example.git
cd lovable-keplars-example

# Link to your Supabase project
supabase link --project-ref your-project-ref

# Set your Keplars API key
supabase secrets set KEPLARS_API_KEY=kms_your_api_key_here

# Deploy the function
supabase functions deploy send-email

3. Use in Your Lovable App

Method 1: Use Pre-Built Components

Copy the component files to your Lovable project:

src/components/ContactForm.tsx
src/components/NewsletterSignup.tsx
src/hooks/useKeplarsEmail.ts
src/lib/email-client.ts
src/types/email.ts

Then use them:

import { ContactForm } from '@/components/ContactForm'

function ContactPage() {
  return (
    <ContactForm
      recipientEmail="[email protected]"
      title="Get in Touch"
    />
  )
}

Method 2: Use Lovable AI Prompts

Tell Lovable what you want:

Create a contact form that:
- Has name, email, and message fields
- Uses Tailwind CSS with a modern card design
- Calls the "send-email" Supabase function when submitted
- Shows success/error toasts
- Sends to [email protected] with instant delivery

Method 3: Direct Integration

import { supabase } from '@/integrations/supabase/client'

async function sendEmail(data) {
  const { data: result, error } = await supabase.functions.invoke('send-email', {
    body: {
      to: ['[email protected]'],
      subject: 'Welcome!',
      body: 'Thanks for signing up!',
    },
  })

  if (error) throw error
  return result
}

Email Examples

Plain Text Email

{
  to: ['[email protected]'],
  subject: 'Welcome!',
  body: 'Thanks for signing up!'
}

HTML Email

{
  to: ['[email protected]'],
  subject: 'Welcome!',
  html: '<h1>Welcome!</h1><p>Thanks for signing up!</p>',
  is_html: true
}

Template-Based Email

{
  to: ['[email protected]'],
  template_id: 'welcome_email',
  params: {
    user_name: 'John Doe',
    app_name: 'My App'
  }
}

Scheduled Email

{
  to: ['[email protected]'],
  subject: 'Weekly Newsletter',
  body: 'Here are this week\'s updates...',
  scheduled_at: '2026-01-25T10:00:00',
  timezone: 'America/New_York'
}

Pre-Built Components

ContactForm

A ready-to-use contact form with instant email notifications.

Props:

recipientEmail: string - Where to send submissions
title?: string - Form title
description?: string - Form description

Example:

<ContactForm
  recipientEmail="[email protected]"
  title="Contact Us"
  description="We'll respond within 24 hours"
/>

NewsletterSignup

Newsletter subscription form with confirmation emails.

Props:

title?: string - Component title
description?: string - Component description
collectName?: boolean - Collect subscriber's name
onSuccess?: (email, name?) => void - Success callback

Example:

<NewsletterSignup
  collectName={true}
  onSuccess={(email, name) => {
    console.log(`${name} subscribed with ${email}`)
  }}
/>

Custom Hook

useKeplarsEmail()

Send emails with loading states and toast notifications.

Returns:

sendingEmail: boolean - Loading state
sendEmailWithToast: (data) => Promise - Send function
lastResponse: EmailResponse | null - Last response
error: Error | null - Last error

Example:

const { sendingEmail, sendEmailWithToast } = useKeplarsEmail()

const handleSubmit = async () => {
  await sendEmailWithToast({
    to: ['[email protected]'],
    subject: 'Hello!',
    body: 'This is a test'
  })
}

Common Use Cases

import { sendWelcomeEmail } from '@/lib/email-client'

async function handleSignup(userData) {
  // Create user account
  const { data } = await supabase.auth.signUp({
    email: userData.email,
    password: userData.password,
  })

  // Send welcome email
  await sendWelcomeEmail({
    email: userData.email,
    name: userData.name,
    verificationUrl: `https://yourapp.com/verify?token=${data.user?.id}`,
  })
}

Contact Form Notification

import { sendContactFormEmail } from '@/lib/email-client'

async function handleContactForm(formData) {
  await sendContactFormEmail({
    name: formData.name,
    email: formData.email,
    message: formData.message,
    recipientEmail: '[email protected]',
  })
}

Password Reset Email

import { sendPasswordResetEmail } from '@/lib/email-client'

async function handlePasswordReset(email) {
  const resetToken = generateResetToken()

  await sendPasswordResetEmail({
    email: email,
    resetUrl: `https://yourapp.com/reset?token=${resetToken}`,
    expiresIn: '1 hour',
  })
}

AI Prompts for Lovable

The repository includes a complete LOVABLE_PROMPTS.md file with ready-to-use prompts for:

Setting up the integration
Creating contact forms
Building newsletter signups
Adding welcome email flows
Password reset functionality
Scheduled emails
Custom integrations

Simply copy-paste these prompts into Lovable and let AI build the features for you.

API Reference

Request Fields

Required:

to: string[] - Recipient email addresses

For template emails:

template_id: string - Keplars template ID
params?: Record<string, string | number> - Template variables

For raw emails:

subject: string - Email subject
body?: string - Plain text content
html?: string - HTML content
is_html?: boolean - Set true for HTML

Optional:

from?: string - Sender email
fromName?: string - Sender name
delivery_type?: 'instant' | 'queue' - Delivery speed
scheduled_at?: string - ISO 8601 timestamp
timezone?: string - IANA timezone identifier

Response Format

Success:

{
  "success": true,
  "data": {
    "id": "msg_...",
    "status": "queued",
    "to": ["[email protected]"],
    "created_at": "2026-01-23T...",
    "metadata": {
      "estimated_delivery": "0-5 seconds"
    }
  }
}

Error:

{
  "success": false,
  "error": "Error message",
  "code": "ERROR_CODE"
}

Troubleshooting

Email Not Sending?

Check Supabase function logs in your dashboard
Verify KEPLARS_API_KEY is set in Supabase secrets
Test the function directly with curl
Check email provider is connected in Keplars dashboard

Function Not Found?

Make sure you've deployed the function:

supabase functions deploy send-email

Email in Spam?

Use a professional "from" address
Avoid spam trigger words
Build sender reputation gradually
Verify email provider in Keplars

Best Practices

Use instant delivery for critical emails (welcome, password reset)
Use templates for frequently sent emails
Validate email addresses before sending
Handle errors gracefully (don't block user flows)
Test with multiple providers (Gmail, Outlook, etc.)
Monitor usage in Keplars dashboard
Keep emails mobile-friendly
Add unsubscribe links for marketing emails

Security

API keys stored securely in Supabase secrets
Edge Function runs server-side (never exposes keys)
Built-in rate limiting via Supabase
Email validation before sending
CORS configured properly

Resources

Support

Need help? Reach out:

Email: [email protected]
Discord: Join our community
GitHub Issues: Report a bug

Lovable.dev Integration

On this page