How to use the below codes? – Watch the video below to Build SaaS AI Tools inside WordPress with ChatGPT API and how to use the codes below.
Here are the resources used:
function openai_generate_business_name() { // Get the keywords from the AJAX request if (!isset($_POST['keywords']) || empty($_POST['keywords'])) { wp_send_json_error('Keywords are required'); return; } $keywords = sanitize_text_field($_POST['keywords']); $prompt = "Generate a unique business name based on the following keywords: " . $keywords; // OpenAI API URL and key $api_url = 'https://api.openai.com/v1/chat/completions'; $api_key = 'paste_your_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 { wp_send_json_success($data); } } // Always die in functions echoing AJAX content wp_die(); } add_action('wp_ajax_openai_generate_business_name', 'openai_generate_business_name'); add_action('wp_ajax_nopriv_openai_generate_business_name', 'openai_generate_business_name');
UI Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Business Name 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; } #business-name-generator { 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; } #business-name-generator h1 { margin-bottom: 20px; } #keywords, #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) { #business-name-generator { width: 90%; margin: 20px auto; } } </style> </head> <body> <div id="business-name-generator"> <header> <h1>Business Name Generator</h1> </header> <main> <input type="text" id="keywords" placeholder="Enter keywords..."> <button id="generate-button">Generate Business Name!</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 keywordsInput = document.getElementById('keywords'); 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_business_name'); formData.append('keywords', keywordsInput.value); const response = await fetch('paste_your_website/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>