How to build an AI app with to write better outreach emails

Andrew Tate
Andrew Tate
Technical writer

Oct 31, 2024

Outreach is tough. You want every email you send to resonate with the person on the other end. You want to spend time crafting the exact message, finding the exact social proof, and choosing the right emojis to lead to an engaged reply or a meeting booked.

Outreach is also a numbers game, and getting the right personalization with the right volume is a tough needle to thread. But you know what is great at threading needles (metaphorically)? AI. According to our 2024 State of AI report, More than one-quarter of people (28%) are already using generative AI to create content. With AI, you can craft a few great example emails, then give the AI all your background research and let it actually build out the emails.

Here, we want to show you how you can do this easily in Retool, building out a custom app to write these emails so you can spend more time on the research. We built a sales outreach email app for the purposes of this tutorial, but you can build similar apps for any kind of outreach.

Building out the user interface

Let’s start by setting up some of the basics. We need a couple of text components so users know where they are:

The rest of the UI is mainly dedicated to fields that provide information to the AI so that it can do its job. These will be passed as parameters to our AI prompt to generate our email. We’ll split these into two buckets: one for customer information and one for user information. We can easily split them by using a tabbed container:

We could hardcode the “Your info” parameters, but doing it this way opens up the possibility of using the application more dynamically.

What is going to go in the Customer info tab?

In this case, we want the customer’s name, title, email, company, and any other information about the customer that would help write the outreach email. We create input text fields for each of these, which will act as the values for the parameters in our prompt.

We then do the same for the “Your info” tab:

We also want to include a CTA in the email, so for that we’ll add a select input with “Schedule a call” and “Book a demo” options. At this point, we’ll also add a button to generate our draft. We’ll turn off this button if the fields aren’t filled out:

Next, we’ll add a component where our email draft will be rendered. We’ll add to, from, subject, and email body inputs:

Excellent, now we have a fully-built UI that… does precisely nothing. The next step is to start using these fields to populate a) the email draft and b) our Retool AI prompt.

Automatically populating our email draft

Some fields don’t need to be added to the AI prompt. Instead, they can be copied over directly into our email drafts, such as the customer’s and user’s email addresses. To do that, we can use Retool event handlers.

Within the event handler for the customer’s email field, we want to:

  • Set the Event as “Change,” as we want this to fire whenever the value of this field is changed
  • Set the Action as “Control component,” as we want to control another component
  • Set the Component as “emailTo,” as we want that component to update
  • Set the Method as “Set Value”
  • Set the Value as the value of the customer’s email address field, in this case using {{ prospectEmail.value }}

Then, when we add the customer’s email, it populates the To field in the email draft:

We can do the same for the user’s email address by populating the From field.

With that all set, we can move on to the AI.

Creating the AI action and prompt

Let’s create an AI Action resource. If you go to Code, then hit the + icon and choose “AI Action.” “Retool AI” should already be selected. We then need to add a prompt into the Input field:

In this case, this is the prompt we’re going to use In this case, this is the prompt we’re going to use (you can find the full version on GitHub Gist). You’ll notice it is pretty extensive. We want to give the AI as much information and context as possible to generate great emails. Importantly, the prompt has places for the values of our form, such as in this part:

1<prospect_info>
2
3{{ prospectName }}: The full name of the prospect
4{{ prospectCompany}}: The name of the prospect's company
5{{ prospectTitle}}: The prospect's job title
6
7{{ prospectInfo }}: Known challenges or needs of the prospect or their company, any recent news or developments related to the prospect or their company (if available)
8</prospect_info>
9

Here, we are passing the prospect information to the AI as context. Basically, this prompt has:

  • A prompt to tell the AI how to act. You are an expert sales copywriter tasked with creating a personalized, engaging first-draft email for a specific prospect.
  • Then, the input variables, which are our prospect information, user information, and goal, are given.
  • Then it is given instructions on what it has to do, such as Begin with a personalized greeting using the prospect's name. Open with a brief, relevant hook that ties into the prospect's industry, recent news, or known pain points. Introduce yourself and your company succinctly.
  • Then, we feed it a few examples of good outreach emails so it understands the structure and information in such emails.

We also give it the output structure we want:

1Output Format:
2Please provide the email in the following format:
3<subject>[Generate an attention-grabbing subject line</subject>
4[Email Body]
5[Professional Sign-off]
6[Your Full Name]
7[Your Title]
8[Company Name]
9[Contact Information]

Over time, we can adjust this prompt to ensure we get the exact emails we want.

You’ll notice in the screenshot above we’ve also checked the box to use Retool vectors and add the vectors for the Retool AI docs. Vectors are stored mathematical representations of documents that the AI can then pull into its model to give a more specific output. In this case, the emails will talk more specifically about Retool AI, which will be great for targeted outreach emails.

Now we need to get that generated text into the email form. First, let’s attach our button to the generateEmail AI query. We just have to choose Event handler from the button, then add the query.

We also want to make sure the text is copied into our fields. For that, we want to add two scripts to our generateEmail query under Event handlers > success:

The first script will take the subject line from the text and add it to the subject field:

1const regex = /<subject>(.*?)<\/subject>/;
2const match = generateEmail.data.match(regex);
3let draftEmailSubject = match[1];
4
5emailSubject.setValue(draftEmailSubject);
6
7return '';
8
9

The second will take the entire text and add it to the email body field:

1emailBody.setValue(generateEmail.data);
2
3return '';
4

Now, make sure you save the query, fill in the form, and hit that button. The AI will think for a while, but you should end up with your new email generated after a few seconds:

Now, all you have to do is enter different information for each recipient and generate a new outreach email each time. With this app, you can change up the prompt over time, feeding it the successful outreach emails to get a better and better response rate.

You can clone this app from the Retool utility page and sign up for Retool to keep experimenting.

Reader

Andrew Tate
Andrew Tate
Technical writer
Andrew is an ex-neuroengineer-turned-developer and technical content marketer.
Oct 31, 2024
Copied