Download Resources Click Here.
Use the Shortcode of my cred here.
Prompt:
#Prompt 1 Hey I am providing you an example of how I coded for my "SEO Keyword Generator" and you can use this PHP Code, and UI Code for reference to help me build future AI tools: My domain name is: Enter Domain Name My API Key is: Enter API Key Just remember above details and update memory and after you do it answer in yes or no only. #Prompt 2 I am sharing you first PHP code below okay? Remember the structure for future AI tools. Here is the PHP Code. Also you have to replace 'replace_api_key' with my API key I provided above remeber that always. Now just Use this PHP code for reference have you understood? Answer in Yes or no only? "Paste PHP Code" #Prompt 3 Now I am sharing you first UI code below okay? Remember the structure for future AI tools. Make sure you replace 'https://mydomain.com' with my domain above I provided oky always. Here is the PHP Code. Just Use it for reference have you understood? Answer in Yes or no only? ""Paste UI Code" Update your memory as well
PHP Code:
function openai_generate_keywords() {
if (!is_user_logged_in()) {
wp_send_json_error('User not logged in');
return;
}
// Retrieve user ID and balance only if the user is logged in
$points_required = 5;
$user_id = get_current_user_id();
$balance = mycred_get_users_balance($user_id);
// Check if the user's balance meets the requirement
if ($balance < $points_required) {
wp_send_json_error('Insufficient points. Please recharge to use this tool.');
return;
}
// Get the topic from the AJAX request
if (!isset($_POST['topic']) || empty($_POST['topic'])) {
wp_send_json_error('Topic is required');
return;
}
$topic = sanitize_text_field($_POST['topic']);
$prompt = "Generate SEO keywords for " . $topic;
// OpenAI API URL and key
$api_url = 'https://api.openai.com/v1/chat/completions';
$api_key = 'replace_api_key'; // Replace with your actual OpenAI API key
// Headers for the OpenAI API
$headers = [
'Content-Type' => 'application/json',
'Authorization' => 'Bearer ' . $api_key
];
// Body for the OpenAI API
$body = [
'model' => 'gpt-3.5-turbo',
'messages' => [['role' => 'user', 'content' => $prompt]],
'temperature' => 0.7
];
// Args for the WordPress HTTP API
$args = [
'method' => 'POST',
'headers' => $headers,
'body' => json_encode($body),
'timeout' => 120
];
// Send the request
$response = wp_remote_request($api_url, $args);
// Handle the response
if (is_wp_error($response)) {
$error_message = $response->get_error_message();
wp_send_json_error("Something went wrong: $error_message");
} else {
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
if (json_last_error() !== JSON_ERROR_NONE) {
wp_send_json_error('Invalid JSON in API response');
} elseif (!isset($data['choices'])) {
wp_send_json_error('API request failed. Response: ' . $body);
} else {
mycred_subtract("SEO Keyword Generator", $user_id, $points_required, 'Point deduction for using Tool', time());
wp_send_json_success($data);
}
}
// Always die in functions echoing AJAX content
wp_die();
}
add_action('wp_ajax_openai_generate_keywords', 'openai_generate_keywords');
add_action('wp_ajax_nopriv_openai_generate_keywords', 'openai_generate_keywords');
UI Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEO Keyword Generator</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#keyword-generation-tool {
max-width: 600px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
text-align: center;
}
#keyword-generation-tool h1 {
margin-bottom: 20px;
}
#topic, #generate-button, #result, #copy-button {
width: calc(100% - 20px);
padding: 10px;
margin: 10px 10px;
border-radius: 5px;
border: 1px solid #ddd;
font-size: 16px;
}
#generate-button, #copy-button {
color: #fff;
background-color: #007bff;
cursor: pointer;
border: none;
transition: background-color 0.3s;
}
#generate-button:hover, #copy-button:hover {
background-color: #0056b3;
}
.hidden {
display: none;
}
.loader {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 10px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 600px) {
#keyword-generation-tool {
width: 90%;
margin: 20px auto;
}
}
</style>
</head>
<body>
<div id="keyword-generation-tool">
<header>
<h1>SEO Keyword Generator</h1>
</header>
<main>
<input type="text" id="topic" placeholder="Your Topic...">
<button id="generate-button">Generate Keywords!</button>
<div id="result-container" class="hidden">
<textarea rows='10' id="result" readonly></textarea>
<button id="copy-button">Copy</button>
</div>
</main>
<div id="loading" class="loader hidden"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const generateButton = document.getElementById('generate-button');
const copyButton = document.getElementById('copy-button');
const topicInput = document.getElementById('topic');
const resultContainer = document.getElementById('result-container');
const resultTextarea = document.getElementById('result');
const loading = document.getElementById('loading');
generateButton.addEventListener('click', async (e) => {
e.preventDefault();
generateButton.disabled = true;
loading.classList.remove('hidden');
try {
const formData = new FormData();
formData.append('action', 'openai_generate_keywords');
formData.append('topic', topicInput.value);
const response = await fetch('https://mydomain.com/wp-admin/admin-ajax.php', {
method: 'POST',
body: formData
});
const data = await response.json();
if (data.success) {
resultTextarea.value = data.data.choices[0].message.content;
} else {
resultTextarea.value = 'An error occurred: ' + data.data;
}
} catch (error) {
resultTextarea.value = 'An error occurred: ' + error.message;
} finally {
loading.classList.add('hidden');
resultContainer.classList.remove('hidden');
generateButton.disabled = false;
}
});
copyButton.addEventListener('click', () => {
resultTextarea.select();
document.execCommand('copy');
alert('Copied to clipboard!');
});
});
</script>
</body>
</html>
Ajax Code (Testing):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Function Tester</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
text-align: center;
padding: 20px;
background-color: #f4f4f4;
}
#ajax-tester {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
#ajax-tester input, #ajax-tester button, #ajax-tester textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
font-size: 16px;
}
#ajax-tester button {
color: #fff;
background-color: #007bff;
cursor: pointer;
border: none;
}
#ajax-tester button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div id="ajax-tester">
<h1>Test Your AJAX Function</h1>
<input type="text" id="site-url" placeholder="Enter your WordPress website URL">
<input type="text" id="ajax-action" placeholder="Enter the AJAX function name">
<button id="test-button">Test AJAX Function</button>
<textarea id="response" rows="10" readonly></textarea>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const testButton = document.getElementById('test-button');
const siteUrlInput = document.getElementById('site-url');
const ajaxActionInput = document.getElementById('ajax-action');
const responseTextarea = document.getElementById('response');
testButton.addEventListener('click', async (e) => {
e.preventDefault();
testButton.disabled = true;
try {
const formData = new FormData();
formData.append('action', ajaxActionInput.value);
const response = await fetch(siteUrlInput.value + '/wp-admin/admin-ajax.php', {
method: 'POST',
body: formData
});
const data = await response.json();
responseTextarea.value = JSON.stringify(data, null, 2);
} catch (error) {
responseTextarea.value = 'An error occurred: ' + error.message;
} finally {
testButton.disabled = false;
}
});
});
</script>
</body>
</html>