Send AI email Postcards!
This app uses the Next.js 13 App Router (hosted on Vercel), Upstash QStash for task scheduling, Upstash Redis for cache, Replicate AI for SDXL image generation, and Resend for HTTP email sending.
- A user fills out a form with an email address for the recipient, a body message for the email, a prompt for the image, and sets a date and a time of day to send the postcard.
- We handle the form submission on an API route and publish a message to QStash.
- When the specified time approaches, QStash sends the message to another API route in our app. This API route catches the message from QStash, sends a request to Replicate to generate the image, and caches the ID of the Replicate generation in Redis with our email information.
- Once the image is finished generating, Replicate sends a webhook to another API route in our app. This route catches the webhook and retrieves the cached information from Redis by the Replicate generation ID. This key value pair includes all necessary info for the email. We then send an email using Resend to the postcard recipient with the image attached.
Clone this repository and install all dependencies:
git clone https://github.com/alpinecodex/postcard.git
cd postcard
npm install
Deploy the project to Vercel!
Clone .env.example file in the root of the project and rename it .env. Go ahead and add the following variables:
REPLICATE_API_TOKEN=
UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=
QSTASH_URL=
QSTASH_TOKEN=
RESEND_API_KEY=
# Your app domain on Vercel
APP_DOMAIN=
Resend API key Replicate API key Upstash Redis Token & URL Upstash QStash Token & URL