Vercel Functions Integration

Deploy Keplars as a Vercel Serverless Function to send transactional and scheduled emails from your Vercel projects.

Overview

This integration provides a ready-to-use Vercel Serverless Function that connects to Keplars email service. Built with Node.js 18+ and TypeScript, it seamlessly integrates with your existing Vercel project.

GitHub Repository: github.com/KeplarsHQ/vercel-functions-example

Features

Template-based emails - Use pre-designed templates with dynamic variables
Raw HTML/Text emails - Send custom HTML or plain text without templates
Scheduled emails - Schedule emails with timezone support
Instant delivery - 0-5 second delivery for critical emails
TypeScript - Full type safety with Node.js 18+
Edge-ready - Deploy to Vercel's global edge network

Prerequisites

Before starting, you'll need:

A Vercel account (free tier works)
A Keplars account
Vercel CLI installed
Node.js 18 or higher
Your Keplars API key (from dashboard)

Quick Start

1. Clone the Example

git clone https://github.com/KeplarsHQ/vercel-functions-example.git
cd vercel-functions-example

2. Install Dependencies

npm install

3. Install Vercel CLI

If you haven't already:

npm install -g vercel

4. Configure API Key

Create a .env.local file in the root:

cp .env.local.example .env.local

Add your Keplars API key:

KEPLARS_API_KEY=kms_your_actual_api_key_here

5. Start Local Development

vercel dev

The function will be available at:

http://localhost:3000/api/keplars-email

6. Test the Function

Send a test email:

curl --request POST 'http://localhost:3000/api/keplars-email' \
  --header 'Content-Type: application/json' \
  --data @test-text-email.json

Deployment

Deploy to Vercel Cloud

Login to Vercel:

vercel login

Link to a new project (first time):

vercel

Follow the prompts to create a new project or link to an existing one.

Set your API key as an environment variable:

vercel env add KEPLARS_API_KEY
# Paste your key when prompted
# Select Production, Preview, and Development

Deploy to production:

vercel --prod

Your function will be live at:

https://your-project.vercel.app/api/keplars-email

Usage Examples

Template-Based Email

{
  "to": ["[email protected]"],
  "template_id": "your_template_id",
  "params": {
    "user_name": "John Doe",
    "verification_code": "123456"
  },
  "delivery_type": "instant"
}

Plain Text Email

{
  "to": ["[email protected]"],
  "subject": "Welcome!",
  "body": "Thanks for signing up. We're excited to have you.",
  "delivery_type": "instant"
}

HTML Email

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

Scheduled Email

{
  "to": ["[email protected]"],
  "subject": "Weekly Newsletter",
  "html": "<h1>This Week's Updates</h1>",
  "scheduled_at": "2026-01-25T10:00:00",
  "timezone": "America/New_York"
}

Client Integration

JavaScript/TypeScript

const response = await fetch(
  'https://your-project.vercel.app/api/keplars-email',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      to: ['[email protected]'],
      template_id: 'your_template_id',
      params: {
        user_name: 'John',
        verification_code: '123456'
      },
      delivery_type: 'instant'
    })
  }
);

const data = await response.json();
console.log('Email sent!', data);

React Example

function WelcomeEmail() {
  const sendWelcome = async (email: string, name: string) => {
    await fetch('/api/keplars-email', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        to: [email],
        template_id: 'your_welcome_template_id',
        params: {user_name: name}
      })
    });
  };

  return <button onClick={() => sendWelcome('[email protected]', 'Jane')}>
    Send Welcome Email
  </button>;
}

Next.js API Route (App Router)

// app/api/send-welcome/route.ts
import {NextRequest, NextResponse} from 'next/server';

export async function POST(request: NextRequest) {
  const {email, name} = await request.json();

  const response = await fetch(
    process.env.NEXT_PUBLIC_SITE_URL + '/api/keplars-email',
    {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        to: [email],
        template_id: process.env.KEPLARS_TEMPLATE_ID,
        params: {user_name: name}
      })
    }
  );

  const data = await response.json();
  return NextResponse.json({success: !data.error, data});
}

SvelteKit Example

// src/routes/api/send-email/+server.ts
import {json} from '@sveltejs/kit';
import type {RequestHandler} from './$types';

export const POST: RequestHandler = async ({request, fetch}) => {
  const {email, name} = await request.json();

  const response = await fetch('/api/keplars-email', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      to: [email],
      subject: 'Welcome!',
      body: `Hello ${name}, thanks for signing up!`
    })
  });

  const data = await response.json();
  return json({success: !data.error, data});
};

Security

Restrict CORS Origins

For production, update CORS in api/keplars-email.ts:

res.setHeader("Access-Control-Allow-Origin", "https://yourdomain.com");

Vercel Security Features

Enable Edge Config for sensitive data
Use Vercel's built-in rate limiting
Consider adding middleware for authentication

Environment Variables

Use vercel env to manage secrets
Never commit .env files
Use different keys for development and production
Monitor usage on both Vercel and Keplars dashboards

API Reference

Request Fields

Required:

to - Array of email addresses
For template emails: template_id
For raw emails: subject + either body or html

Optional:

params - Template variables (template emails only)
is_html - Set to true for HTML content
delivery_type - Either "instant" or "queue"
scheduled_at - ISO 8601 timestamp for scheduled emails
timezone - IANA timezone (e.g., "America/New_York")
from - Sender email
fromName - Sender name

Response Format

Success:

{
  "id": "msg_...",
  "object": "email",
  "status": "queued",
  "from": "[email protected]",
  "to": ["[email protected]"],
  "created_at": "2026-01-22T22:14:04.470Z",
  "metadata": {
    "priority": "instant",
    "estimated_delivery": "0-5 seconds",
    "recipients_count": 1
  }
}

Error:

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

Troubleshooting

Function not found

Make sure you've deployed the function:

vercel --prod

API key not configured

Ensure your API key is set:

# Local
echo "KEPLARS_API_KEY=kms_..." >> .env.local

# Production
vercel env add KEPLARS_API_KEY

Email not arriving

Check your spam folder
Verify template exists in Keplars dashboard
Ensure email provider is connected in Keplars
Check Vercel function logs: vercel logs

Function timeout

The default timeout is 10 seconds. If you need more, update vercel.json:

{
  "functions": {
    "api/keplars-email.ts": {
      "maxDuration": 30
    }
  }
}

Local dev not working

Ensure you have .env.local in the root directory
Restart vercel dev after changing environment variables
Check that port 3000 isn't already in use

Resources

Support

Need help? Reach out:

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

Vercel Functions Integration

On this page