SALES INNOVATION THROUGH AI

Building AI-Driven Sales Emails with Next.js and OpenAI

Harnessing the power of artificial intelligence (AI) and large language model (LLM) ChatGPT, architect Dylan Fontaine outlines how we developed a prototype for generating personalized sales emails using Next.js, Vercel's AI SDK, and OpenAI. This innovative tool simplifies the email creation process for sales reps, making customer communication more efficient and tailored. 

---

With all the buzz around AI, it's no surprise that we've had clients reach out to see how they can use it to improve their businesses. Recently, one of our clients tasked us with prototyping a tool using AI to generate personalized sales emails.

Simplifying Sales Email Generation with AI

The goal of the tool was simple: a sales rep should be able to enter some information about their customer (e.g., "Susan has 10 employees in her business. She is looking to purchase right away."), select what products the customer is interested in, and generate an email with that information. 

After generating the email, we wanted users to be able to refine it by providing additional prompts in a chat-like interface.

To build this tool, we leveraged Next.js' App Router, Vercel's AI SDK, and OpenAI. These tools, along with our client's design system, allowed us to quickly scaffold a branded application.

Refining the Directives for a Better Experience

Using the new routing model in Next with our client's component library exposed some rough edges. The component library, like many others, leans heavily on context providers and CSS-in-JS. Because of this, we had to add the use client directives to most components. That being said, nested layouts and the new data fetching patterns feel a lot better than working with the page router.

e.g.

vs.

Pretty Fly for a Prototype

The majority of people who tried the tool thought the most impressive feature was the streaming user interface (UI). 

Upon submitting the form or adding refinements, instead of waiting for the entire response to come back from OpenAI before displaying anything, the text is displayed as parts of the response become available. 

This makes the user experience much more fluid and really gives it that wow factor.

Using the AI SDK made this straightforward to implement:

Once the user submits the form, we send the data along with a system prompt to generate a response. The system prompt is used to give GPT additional context (e.g., generate a sales email, only use product information provided, etc.). An administrator can edit this, allowing them to experiment with different prompts to find the best results.

Because of the narrow scope and timeline, we ended up using a simple key-value database to store the system prompt and product information. If we were to iterate on this and build out a full-fledged app, we'd look at using text embeddings stored in a vector database to keep token counts under control.

Using readily available tools, we are able to build a prototype that demonstrates the power of AI within a few days.

Is your company interested in leveraging AI?

Fill in the form below, and one of our subject matter experts will reach out.