In today's competitive market, businesses need to stay ahead of the curve when it comes to lead management and email marketing. The integration of AI technology is transforming the traditional approach to lead management and email marketing, making it faster, more efficient, and more effective. In this blog post, we will introduce you to an AI-powered lead management and email marketing application developed by OpenAI and Altogic. Our application is designed to help businesses streamline their marketing strategies and optimize their lead conversion rates. By leveraging the power of AI, businesses can create highly personalized and relevant email content that resonates with their target audience. Join us on this journey as we explore the benefits and actionable insights that come with using an AI-powered lead management and email marketing application.

An AI-powered lead management and email marketing application is a software application that uses AI to automate the process email marketing of leads. It uses AI to generate personalized pitch and send email to the leads. By leveraging the power of AI, businesses can create highly personalized and relevant email content that resonates with their target audience.
Before we begin
Before we begin, let's take a look at the technologies we will be using in this tutorial.
Altogic - Altogic is a backend development and AI enablement platform that allows developers to build, deploy, and manage their applications with the integration with OpenAI and Replicate. It provides a variety of APIs that can be used to build AI-powered applications.
OpenAI - OpenAI is a AI research and development company that provides a variety of APIs that can be used to build AI-powered applications.
React - React is a JavaScript library for building user interfaces. It is used to build single-page applications.
Vercel - Vercel is a cloud platform for static sites. It provides a global edge network, real-time CDN, and automatic SSL.
Let's build frontend
We will be using React to build the frontend for our application. If you are not familiar with React, you can learn more about it from the official documentation.
To get started, you can clone the repo from the Github Repository: https://github.com/zinedkaloc/ai-lead-email-marketing
You can clone the repo by running the following command in your terminal:
$ git clone [email protected]:zinedkaloc/ai-lead-email-marketing.git
Switch to the app directory by running the following command:
$ cd ai-lead-email-marketing
Install the necessary dependencies by running the following command in your terminal:
$ npm install
info
To get started, you will need a REACT_APP_ENDPOINT_URL
environment variable that points to your Altogic and OpenAI ChatGPT API. You can get this URL by following the steps in the next section.
Building the backend
We will be using Altogic to build the backend for our application. If you are not familiar with Altogic, you can learn more about it from the official documentation. To get started, you can create a free account on Altogic. Once you have created an account, you can create a new project by clicking the New Project button on the left sidebar.
Create an account on OpenAI
Create an API key on OpenAI and copy the secret key.
Create an account on Altogic
Create a new Altogic application with Basic template.
Open the Parameters view of Altogic Designer and complete the following steps:
- Create a new parameter called
OpenAISecretKey
with the value of your OpenAI Secret key. - Create a new parameter called
CompanyOwner
with the value of your Email sender name.- In this case, Deniz Colak
- Create a new parameter called
companyNameAndService
with the value of your Email sender email address.- In this case, MongoDB - The developer data platform that provides the services and tools necessary to build distributed applications fast, at the performance and scale users demand.
tip
We will use these parameters to personalize the email template and send emails to our leads. You can also use other parameters such as emailFrom
, emailFromName
, or emailSubject
etc.

- Open Models view of Altogic Designer to create a new model. Click on the + New button and select Model from JSON. Copy and paste the following JSON to the editor and click on the Next button.
{ "name": "text", "job": "text", "department": "text", "email": "[email protected]", "company": "text"}

- Name the model as
leads
you can also enable the timestamp by clicking on the Enable timestamp button and click on the Next button.

- In the next step you will be asked to automatically generate CRUD endpoints for the model. For this example, we will only need the Create endpoint. Select the Create endpoint and click on the Create button.

tip
In the next sections, we will create a message queue, when user submits the lead form using lead/
endpoint, we will offload the email generation with OpenAI Chat Completion(ChatGPT) API and sending process with Altogic to the message queue. Also, you will be able to delay the email sending process by adding a delay to the message queue.
- Let's create
completions
model to store and use the OpenAI GPT-3 Chat Completion API response to generate emails. Click on the + New button and select Model from JSON. Copy and paste the following JSON to the editor and click on the Next button.
{
"id": "chatcmpl-6tiyvt4G1CP0beQlS2vk8he8OFWU1",
"object": "chat.completion",
"created": 1678738969,
"model": "gpt-3.5-turbo-0301",
"usage": {
"prompt_tokens": 322,
"completion_tokens": 253,
"total_tokens": 575
},
"choices": [
{
"message": {
"role": "assistant",
"content": "Sure, here are I am!"
},
"finish_reason": "stop",
"index": 0
}
]
}
note
For the completion object, you can use the OpenAI GPT-3 Chat Completion API to generate a response.
- Open the Message Queue view of Altogic Designer and click + New button to create a new message queue.
- Name the message queue as
Generate/Send an email
and select theRouted Service
and click/tapAdd new no-code service
button and define the service name asGenerate/Send an email
and click/tapCreate
button.
- Click on the
Generate/Send an email
message queue service and complete the following steps:
Select the
Start Node
and select theleads
model and name it aleads
Click the Marketplace tab on the Nodes Library and search for
OpenAI
to find theCreate Chat Completion
service and drag and drop it to the Designer. Connect theStart
node to theCreate Chat Completion
node.Select the Create Chat Completion node and define the Api key as
params.appParams.OpenAISecretKey
as we defined before.Set Model id as 'gpt-3.5-turbo'
Set Messages as following JSON:
[
{
"role": "user",
"content": {{CONCAT("Given a lead's company is ", input.company, " job is ", input.job, " in ",input.department, " department, and name is ", input.name, " , generate a personalized pitch that demonstrates how ", params.appParams.companyNameAndService, " can help their business grow and achieve their goals. Use data and statistics to support your claims and make the pitch concise and easy to understand. Sender ", " is ", params.appParams.companyOwner, " Format your response using HTML. Use headings, subheadings, bullet points, and bold to organize the information." )}}
}
]
tip
In the above JSON, we are concatenating the prompt field from the request body with a message to format the response using Markdown. You can change the message to your liking.
Set Max Tokens as 1000
Click the Core tab on the Nodes Library and search for
Change Object Type
node and drag and drop it to the Designer. Connect theCreate Chat Completion
node to theChange Object Type
node and select the completions model from the dropdown.Find
Create Single Object
node and drag and drop it to the Designer. Connect theChange Object Type
node to theCreate Single Object
node and select the completions model from the dropdown.Find
Get Object Value
node and drag and drop it to the Designer. Connect theCreate Single Object
node to theGet Object Value
node and insert inputObject.choices definition to the expression editor.Find
Pick Object from Input List
node and drag and drop it to the Designer. Connect theGet Object Value
node to thePick Object from Input List
node and select thePick type
as First.Find
Create Email
node and drag and drop it to the Designer. Connect thepicked
output of thePick Object from Input List
node to theCreate Email
node. Click the output connector ofStart Node
and link it to theCreate Email
node. Now you can see the leads object in theCreate Email
node.- Set the From Email field as
'[email protected]'
// You can change the email address to your liking. - Set the From Name field as
params.appParams.companyOwner
- Set the To field as
lead.email
- Set the Subject field as
'Welcome to Altogic'
// You can change the subject to your liking. - Set the HTML Message field as
{{input.message.content}}
- Set the From Email field as
Find
Send Email
node and drag and drop it to the Designer. Connect theCreate Email
node to theSend Email
node.Find
Finish Successfully
node and drag and drop it to the Designer. Connect theSend Email
node to theFinish
node.
Here is the final overview of the message queue:

- Open the Service view of Altogic Designer and click on the Create Leads Object service and complete the following steps:
- Unlink the connection between
Create Single Object
node andReturn Success Response
node. - Click the Core tab on the Nodes Library and search for
Submit Message to Queue
node and drag and drop it to the Designer. Connect theCreate Single Object
node toSubmit Message to Queue
node and select theGenerate/Send an email
message queue from the dropdown. - Find
Return Success Response
node and drag and drop it to the Designer. Connect theSubmit Message to Queue
node to theReturn Success Response
node.
tip
This will submit the lead to the Generate/Send an email
message queue and return a success response to the client. Here you can specify a delay time to wait before sending the email. For example, you can set the delay time to 5 seconds to wait for the email to be sent or 3 days to wait for the email to be sent after the lead is created.
Here is the final overview of the service:

Connecting the Frontend to the Backend
Now that we have the backend ready, we can connect the frontend to it. To do this, we need to set the endpoint URL of the Create Lead
service in the frontend app. To do this, open the .env
file in the frontend app and set the REACT_APP_ENDPOINT_URL
variable to the endpoint URL of the Create Lead
service.
REACT_APP_ENDPOINT_URL=https://c3-na.altogic.com/e:64063xs2f0xs1e4d9xs8fa7c/leads
Now that we have the endpoint URL, we can run the frontend app by running the following command in your terminal:
$ npm start
Once the app is running, you can visit it in your browser at http://localhost:3000/
.


Here is the code for the handleSubmit
function in the LeadForm
component:
const handleSubmit = async (event) => {
event.preventDefault();
setLoading(true);
setError("");
setSuccess("");
console.log(JSON.stringify(formData));
const response = await fetch(`${process.env.REACT_APP_ENDPOINT_URL}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
});
if (!response.ok) {
let data = await response.json();
setError(data.errors[0].message);
setLoading(false);
} else {
setSuccess("Your form has been submitted successfully!");
setLoading(false);
}
};
In the above code, we are using the fetch
API to make a POST request to the endpoint URL that we have created before in the Altogic with the formData
as the request body. In that endpoint, we are using the Create Lead
service to create a lead in the database and submit the lead to the Generate/Send an email
message queue. The response from the endpoint is a JSON object that contains the success message.
With these steps, we have created a lead collection form that can create a lead in the database and generate an email with the lead information using OpenAI's Chat Completion(ChatGPT) API.
With further development, this app could be expanded to include additional features such as creating drafts of the email, sending multiple emails according to the sales funnel, also with using delayed message queues you can send emails to leads at a specific time such as 1 hour after, 3 days after they submit the form.
tip
If you want to manage leads in a comprehensive way, you can use Altogic Navigator to view and manage your leads. You can also use Altogic Watcher to display the performance of your app in real-time.
Resources
Source Code: The source code for the AI Lead Management and Email Marketing app can be found Github
Demo: Demo of the AI Lead Management and Email Marketing app can be found Vercel.
Conclusion
In conclusion, integrating OpenAI GPT-3 API with Altogic and React is a powerful way to build an AI-powered email marketing and lead management app that can revolutionize the way businesses interact with their customers. With the help of Altogic, you can easily integrate the OpenAI GPT-3 APIs into your any app and build powerful AI-powered applications that can provide personalized experiences to users and increase revenue for businesses.
If you have any questions, please feel free to reach out to us at community forum or discord channel.