Build SaaS AI Tools inside WordPress with ChatGPT API

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>