Artificial intelligence (AI) is at the forefront of technological innovation, especially in the realm of generative AI. Large language models (LLMs) like ChatGPT, with over 100 million active users weekly, have become household names. However, despite the widespread recognition of AI's potential, many teams struggle to integrate these powerful tools into their daily operations effectively.
Introduction
This tutorial aims to bridge that gap by guiding you through the process of building an AI-powered ad copy generator using DronaHQ and GeminiAI. The resulting application will be a valuable tool for marketers, enabling them to create compelling ad copy efficiently and effectively.
We'll leverage DronaHQ's user-friendly components, action flows, connectors, and queries to develop the application. Finally, we'll publish it, making it accessible to everyone.
Prerequisites
Before we start, ensure you have the following:
DronaHQ Account: Sign up for a free account at DronaHQ to build your application visually.
Connector & API Configuration Knowledge: Familiarity with configuring APIs. Don't worry if you're new to this; we'll guide you through setting up the API connection within DronaHQ.
Gemini API Key: For advanced users, a Gemini API key from Google AI Studio unlocks more powerful AI capabilities. While the core generator works without it, integration is available if you have one.
Application Overview
Let's take a look at what our application will look like once it's complete:
Adding Google GeminiAI as a Connector
Configuring the GeminiAI REST API
In DronaHQ, select REST API from the connector list.
Fill in the basic details to establish a secure connection. DronaHQ makes it easy to configure any REST API connector with options for authentication, query strings, headers, and more.
You can also import details directly by pasting a cURL command in the IMPORT CURL section.
Here is the information formatted into a table:
| Property | Description |
|---|---|
| Method | POST |
| Endpoint URL | https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent |
| Query String Parameters |
key: <your gemini AI key>
|
| Headers |
Content-Type: application/json
|
Body/Form Parameters:
{
"contents": [
{
"role": "user",
"parts": [
{
"text": "Write the first line of a travel blog about a hidden beach."
}
]
},
{
"role": "model",
"parts": [
{
"text": "Nestled away from the bustling tourist trails, lies a hidden gem of pristine sands and crystal-clear waters."
}
]
},
{
"role": "user",
"parts": [
{
"text": "Can you describe the beach's surroundings in detail?"
}
]
}
]
}
Explanation
The JSON payload is sent in the body of the request. This includes:
An array called
contentswith multiple objects representing the conversation.Each object contains a
rolefield indicating whether it is the user or the model.Each object also contains a
partsfield, which is an array of objects, each containing atextfield with the message text.
The example conversation provided in the Body/Form Parameters is about writing the first line of a travel blog and then expanding on it based on the model's response.
Test the connector to ensure it works correctly and save it.
Adding API to GeminiAI Connector
Now, we will configure an API to our connector that generates data based on dynamic user input, focusing on a Gen Z audience.
- API Name:
createProductAdd - Body/Form Parameters: Use the same structure as the test body provided earlier, adjusted to include dynamic inputs from the application.
{
"contents": [
{
"parts": [
{
"text": "You are a product marketer targeting a Gen Z audience. Create exciting and fresh advertising copy for products and their simple description. Keep the copy under a few sentences long."
},
{
"text": "input Product: {{exInputOne}}"
},
{
"text": "Product Copy: {{exCopyOne}}"
},
{
"text": "input Product: {{exInputTwo}}"
},
{
"text": "Product Copy: {{exCopyTwo}}"
},
{
"text": "{{inputproduct}}"
},
{
"text": "Product Copy:"
}
]
}
],
"generationConfig": {
"temperature": 0.9,
"topK": 1,
"topP": 1,
"maxOutputTokens": 2048,
"stopSequences": []
}
}
Code Explanation
This JSON is designed to generate advertising copy for products targeting a Gen Z audience. The contents array contains conversation parts with text prompts, including variables for product names and their descriptions. The generationConfig section includes parameters like temperature (0.9 for more randomness), topK (1 for top-K sampling), topP (1 for cumulative probability), maxOutputTokens (2048 for max tokens), and stopSequences (empty array for no stop sequences).
To test the JSON with specific variables, provide data for the placeholder's variables {{exInputOne}}, {{exCopyOne}}, {{exInputTwo}}, {{exCopyTwo}}, and {{inputproduct}} with some values.
Then save it after a successful testing.
Creating the UI on DronaHQ
We'll use visual components such as headings, cards, text inputs, text areas, and buttons. The drag-and-drop interface makes it easy to design a user-friendly UI. Customize the colors and themes to match your branding.
Triggering the GeminiAI Connector from the App
To trigger the action using the Button control to call the GeminiAI connector:
- Double-click the Button control to open its action flow.
- Add a Server-Side Action of the GeminiAI connector. Select the
createProductAddAPI. - Provide the details, including the key and demo data. Pass the keywords from the card control in the variable section to make a request with the demo data.
- Save the output in a variable.
JavaScript Block for Filtering Response
Add a JS Block On-Screen Action to filter the details from the connector response. Use the following code:
let res = data.candidates[0];
if (res.hasOwnProperty("content")) {
if (res.content.hasOwnProperty("parts")) {
if (res.content.parts.length > 0) {
output = res.content.parts[0].text;
}
}
}
Test the script, save the output in a variable, and finish.
Display response
Finally, add a Server-Side Action Block to set the control value, displaying the JS block response in the selected control.
ActionFlow
Conclusion
Congratulations! Your AI-powered ad copy generator is complete and ready to be published and shared. This application can significantly streamline the ad copy creation process, making it more efficient and effective.
Further Applications and Ideas
Diversify Content Creation: Extend the application beyond ad copy generation to create content for diverse platforms such as social media, blogs, and email campaigns. Customize input prompts and generation settings to suit varied content formats and audience preferences.
Enhanced Personalization: Integrate user data for personalized content generation. Utilize customer demographics and preferences to tailor ad copy dynamically, boosting engagement and conversion rates effectively.
Integrate with Analytics: Connect the application with analytics platforms to monitor and analyze the performance of generated content. Gain actionable insights to improve content strategies and refine AI-driven outputs.
Multilingual Support: Expand the application’s capabilities to support multiple languages. Utilize AI functionalities to generate content in various languages, catering to global markets and diverse audience segments.
References
For more detailed insights and resources, refer to:
- Configuring APIs - Explore comprehensive guides on configuring APIs within DronaHQ to extend functionality and integrate seamlessly with external services.
- Building UI - Master the art of designing multiscreen applications using DronaHQ’s UI Builder. Enhance user experience and optimize interface aesthetics effortlessly.
- Preview and Publish Apps - Navigate through the process of previewing and publishing apps developed on DronaHQ. Ensure smooth deployment and accessibility for end users.
Top comments (0)