HomeProjectsWavefinder

Wavefinder

Published Apr 21, 2024
Updated Nov 20, 2024
1 minutes read

Overview

Wavefinder is an app for creating and testing ad messages at scale with AI. I was the lead full-stack engineer on this project at Ampry.

It's used as an internal tool for now at Ampry. Hundreds of campaigns have been created through it along with tens of thousands of dollars of ad spend. It continues to manage and optimize many campaigns.

Tech Stack

  • Next.js
  • TypeScript
  • React & RSC
  • Zustand
  • WebAssembly
  • Next Safe Action
  • Postgres
  • Vercel
  • shadcn/ui
  • Upstash QStash
  • Facebook Business API

Image editor

One of the key features of Wavefinder is an image editor. This allows users to create image templates that can be used to generate images via an API. The images are predominantly static, but dynamic text / ad copy can be passed in via URL parameters in the API request.

The image editor is built using shadcn/ui components and Zustand. Using Zustand significantly reduced the complexity of managing state in the editor compared to native React state.

Wavefinder Editor

The images are rendered using Vercel OpenGraph image routes. The API uses resvg-wasm with WebAssembly (WASM) to convert the images from an SVG to a PNG.

Wavefinder Image API

Chat interface

The core AI component of the app is a chat interface that allows users to interact and create ad headlines that they can then easily add to a campaign. To create a campaign, the user creates ad headlines within the chat interface, adds them to the campaign form, and then selects which image template to use for the ads. The ad copy is then dyanmically swapped for the dynamic text on the image template and the ads are generated instantly, each using their unique API route.

Wavefinder Chat

Facebook Integration

A core component of the application is integrating to Facebook (Meta) ads platform to instantly create and publish ads via Wavefinder. This is all configurable by the user and allows them to manage campaigns directly from Wavefinder rather than going through Facebook.

Background jobs

Another key aspect of Wavefinder is a rule-based engine for taking actions on campaigns created through Wavefinder. To do this, we implemented background jobs running on Upstash that run frequently to check ad performance. Based on pre-set filters and rules, actions are automatically taken to further optimize the ad campaign.