Introduction
In this tutorial, you'll learn how to create interactive chat advertisements using OpenAI's ChatGPT API. This technology allows users to have conversations with ads, making them more engaging and personalized. We'll walk through setting up your development environment, creating a basic chat interface, and integrating with OpenAI's API to build an interactive ad experience.
Prerequisites
- A basic understanding of HTML, CSS, and JavaScript
- Node.js installed on your computer
- An OpenAI API key (you can get one from OpenAI's website)
- A code editor like Visual Studio Code
Step-by-step instructions
Step 1: Set up your development environment
1.1 Create a new project directory
First, create a new folder for your project and navigate to it in your terminal:
mkdir interactive-chat-ad
cd interactive-chat-ad1.2 Initialize a Node.js project
Run the following command to create a package.json file:
npm init -y1.3 Install required dependencies
You'll need the OpenAI SDK and Express for handling web requests:
npm install openai expressWhy: We're setting up the basic project structure and installing the tools needed to interact with OpenAI's API and serve our web interface.
Step 2: Create the basic HTML interface
2.1 Create an index.html file
Create a file named index.html in your project directory:
<!DOCTYPE html>
<html>
<head>
<title>Interactive Chat Ad</title>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
#chat-container { border: 1px solid #ccc; height: 400px; overflow-y: scroll; padding: 10px; margin: 20px 0; }
.message { margin: 10px 0; padding: 10px; border-radius: 5px; }
.user { background-color: #e3f2fd; text-align: right; }
.bot { background-color: #f5f5f5; }
#user-input { width: 80%; padding: 10px; }
#send-button { width: 15%; padding: 10px; }
</style>
</head>
<body>
<h1>Interactive Chat Ad</h1>
<p>Ask questions about our products!</p>
<div id="chat-container"></div>
<input type="text" id="user-input" placeholder="Type your message here...">
<button id="send-button">Send</button>
<script src="script.js"></script>
</body>
</html>Why: This HTML structure creates the user interface where users can chat with your ad system. It includes a chat container, input field, and send button.
Step 3: Set up the backend server
3.1 Create server.js file
Create a file named server.js in your project directory:
const express = require('express');
const { OpenAI } = require('openai');
const app = express();
const port = 3000;
// Configure OpenAI API
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY // Make sure to set this in your environment variables
});
app.use(express.static('public'));
app.use(express.json());
// Serve the main page
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// Handle chat requests
app.post('/chat', async (req, res) => {
try {
const { message } = req.body;
const completion = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages: [
{ role: "system", content: "You are a helpful assistant that answers questions about products and services. Keep responses concise and friendly." },
{ role: "user", content: message }
],
max_tokens: 150
});
const response = completion.choices[0].message.content;
res.json({ response });
} catch (error) {
console.error('Error:', error);
res.status(500).json({ error: 'An error occurred' });
}
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});Why: This server handles communication between the user's browser and OpenAI's API, processing user messages and returning AI-generated responses.
Step 4: Create the JavaScript for user interaction
4.1 Create script.js file
Create a file named script.js in your project directory:
document.addEventListener('DOMContentLoaded', () => {
const chatContainer = document.getElementById('chat-container');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
// Add welcome message
addMessage('Welcome! Ask me anything about our products.', 'bot');
// Send message when button is clicked
sendButton.addEventListener('click', sendMessage);
// Send message when Enter is pressed
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
function sendMessage() {
const message = userInput.value.trim();
if (message) {
addMessage(message, 'user');
userInput.value = '';
// Send to backend
fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message: message })
})
.then(response => response.json())
.then(data => {
addMessage(data.response, 'bot');
})
.catch(error => {
console.error('Error:', error);
addMessage('Sorry, there was an error processing your request.', 'bot');
});
}
}
function addMessage(text, sender) {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message');
messageDiv.classList.add(sender);
messageDiv.textContent = text;
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
});Why: This JavaScript handles user interactions, sending messages to the backend server, and displaying responses in the chat interface.
Step 5: Set up environment variables
5.1 Create a .env file
Create a file named .env in your project directory:
OPENAI_API_KEY=your_openai_api_key_hereWhy: Storing your API key in environment variables keeps it secure and prevents accidental exposure in your code.
Step 6: Run your interactive chat ad
6.1 Install dotenv package
Install the dotenv package to load environment variables:
npm install dotenv6.2 Update server.js to load environment variables
Modify your server.js file to include:
require('dotenv').config();Place this line at the top of your server.js file, after the other requires.
6.3 Start your server
Run your server with:
node server.jsOpen your browser and navigate to http://localhost:3000 to see your interactive chat ad in action.
Summary
In this tutorial, you've built a basic interactive chat advertisement system using OpenAI's ChatGPT API. You've learned how to set up a web interface, connect to OpenAI's API, and create a conversation flow where users can ask questions and receive AI-generated responses. This system mimics the concept described in the OpenAI ad-tech news, where advertisements become interactive and can engage with users in real-time.
This foundation can be expanded with more sophisticated prompts, additional features like product recommendations, or integration with actual advertising platforms. The key concept is that interactive ads can significantly increase user engagement compared to traditional static advertisements.
