How To Create Free AI Tools with ChatGPT API

free ai tools

Welcome to your best way to gain more knowledge in the field of AI and Free AI Tools. Today, we’ll explore a fascinating topic that combines WordPress with artificial intelligence to help you develop cutting-edge features that can increase user engagement, drive traffic, and monetize your website. This step-by-step tutorial will show you how to create free AI tools using ChatGPT, prompt engineering, and WordPress, which can expand the potential of your online presence.

free ai tools

The Effects of AI Tools: Engagement, Traffic, and Monetization

Let’s first comprehend why creating Free AI tools is a game-changer for your website before we set out on this adventure. There are three strong arguments. 

1- Significant Traffic Increase:

Free AI tools are attention-grabbing. Your website’s traffic and engagement will rise if you provide users with special and useful tools.

2- Information about your clients and the development of client trust:

AI systems frequently require user input, enabling you to gather important data while fostering client trust through comprehensible interactions.

3- Opportunities for Monetization:

Engaging tools open up possibilities for monetization. As traffic to your website increases, you might look at different revenue options including adverts, memberships, or even access to premium tools.

A Step-by-Step Guide to Making Free AI Tools

Step 1: Installing and activating the Code Snippets “WPcode” plugin.

Go to your WordPress Website and head for ‘Plugins > Add New’ on your WordPress dashboard.

Look for the “WPCode,”  plugin, download it, and activate it.

Click on ‘Code Snippets > Add New’ is where you may add your API call.

Name your snippet—for instance, “OpenAI API”—and choose PHP as the code type.

Paste the code as the first step in building your tool. To make things easier for you, feel free to use this code just copy and paste it into your snippet. 

function openai_generate_text() {
// Get the topic from the AJAX request
$prompt = $_POST['prompt'];
// OpenAI API URL and key
$api_url = 'https://api.openai.com/v1/chat/completions';
$api_key = 'sk-XXX'; // 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_text', 'openai_generate_text');
add_action('wp_ajax_nopriv_openai_generate_text', 'openai_generate_text');

And here you need to get your Openai API Key. 

How can you get your API Key?

1- If you have an account on https://openai.com, log in. If you don’t have one, sign up. 

2- After logging in, head for the Openai API page. You will find API under your account dashboard. Generate a new secret key to get your OpenAI API key.

Make sure to publish the script and set it to “run everywhere”.

Try My Free AI Tools

Free AI Tools

Step 2: Create the Free AI Tool Page 

Log into your WordPress dashboard and select “Pages > Add New.”

Give your page a title, e.g. “AI YouTube Video Title”.

Layout changes can be made to the page using Elementor.

The tool’s name should go in a heading (H1), and its explanation should go in a subheading (H3).

Publish the page.

Step 3: Adding HTML Code to Your Tool

On the Elementor editing page, you will find a sidebar on the left. In the search box write “HTML”, and drag it under the tool’s description. 

Enter the following Custom HTML Code.

 
 

” style=”color:#d8dee9ff;display:none” aria-label=”Copy” class=”code-block-pro-copy-button”>

<div id="video-generation-tool">
    <input type="text" id="keywords" placeholder="Keywords or Niche...">
    <button id="generate-button">Generate Video Titles!</button>
    <div id="result-container" style="display: none;">
        <div class="result-wrapper">
            <div class="result-content">
                <textarea id="result" readonly></textarea>
            </div>
            <div class="copy-button-container">
                <button id="copy-button">Copy</button>
            </div>
        </div>
    </div>
    <div id="loading" class="loader" style="display: none;"></div>
</div>

<style>
    /* Basic styles for the video generation tool */
    #video-generation-tool {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        font-family: Arial, sans-serif;
    }

    #keywords {
        width: 100%;
        padding: 15px;
        margin-bottom: 20px;
        font-size: 16px;
        border-radius: 5px;
        border: 1px solid #ddd;
    }

    #generate-button {
        display: block;
        width: 100%;
        padding: 15px;
        margin-bottom: 20px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        color: #fff;
        background-color: #3498db;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    #generate-button:hover {
        background-color: #2980b9;
    }

    #result-container {
        display: none;
        margin-bottom: 20px;
    }

    .result-wrapper {
        position: relative;
        overflow: hidden;
    }

    .result-content {
        display: flex;
    }

    #result {
        flex: 1;
        height: 400px;
        padding: 15px;
        font-size: 16px;
        border-radius: 5px;
        border: 1px solid #ddd;
        background-color: #f9f9f9;
    }

    .copy-button-container {
        margin-top: 10px;
        text-align: right;
    }

    #copy-button {
        padding: 8px 12px;
        font-size: 14px;
        border: none;
        border-radius: 5px;
        color: #fff;
        background-color: #3498db;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    #copy-button:hover {
        background-color: #2980b9;
    }

    /* CSS for the loader */
    .loader {
        display: block;
        margin: 50px auto;
        border: 16px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

To see your tool’s layout, which includes a title, a button to produce titles, and a results box, update the page.

Step 4: Connecting the Page to ChatGPT API Function 

Go back to the page you’ve already made, and inside the HTML widget, enter the JavaScript code. 

Here’s the Javascript. I’ve created it especially for you. You just copy and paste it below the previous HTML Code.

” style=”color:#d8dee9ff;display:none” aria-label=”Copy” class=”code-block-pro-copy-button”>
<script>
    document.getElementById("generate-button").addEventListener("click", function (e) {
        e.preventDefault();
        
        var generateButton = document.getElementById("generate-button");
        
        if (generateButton.disabled) {
            return; // Prevent multiple clicks while content is being generated
        }
        
        generateButton.disabled = true;
        
        var keywords = document.getElementById('keywords').value;
        var prompt = "Generate 5 YouTube video titles about " + keywords;
        var loading = document.getElementById('loading');
        var result = document.getElementById('result');
        var resultC = document.getElementById('result-container');

        loading.style.display = 'block';
        result.style.display = 'none'; // Hide result textarea
        resultC.style.display = 'none';

        var formData = new FormData();
        formData.append('action', 'openai_generate_text');
        formData.append('prompt', prompt);

        fetch('/wp-admin/admin-ajax.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            loading.style.display = 'none';
            if (data.success) {
                result.value = data.data.choices[0].message.content;
                result.style.display = 'block'; // Show result textarea
                resultC.style.display = 'block';
            } else {
                result.value = 'An error occurred: ' + data.data;
                result.style.display = 'block'; // Show result textarea
                resultC.style.display = 'block';
            }
            generateButton.disabled = false;
        })
        .catch(error => {
            loading.style.display = 'none';
            result.value = 'An error occurred: ' + error.message;
            result.style.display = 'block'; // Show result textarea
            resultC.style.display = 'block';
            generateButton.disabled = false;
        });
    });

    var copyButton = document.getElementById('copy-button');
    copyButton.addEventListener('click', function () {
        var result = document.getElementById('result');
        result.select();
        document.execCommand('copy');
        alert('Copied to clipboard!');
    });
</script>

Apply the JavaScript code by updating the page.

Evaluate Your AI Tool

Free AI Tools

Use your tool by entering keywords associated with the video titles you want to watch.

The created titles will appear once you click “Generate” and wait a short while.

Discover the power of your AI tool, which enables users to create catchy YouTube video titles.

Bonus: Create a Free AI Tools kit

The YouTube Video Title Generator can be followed up by the creation of other tools for different markets.

Use the JavaScript and HTML code that are provided in the description of each new tool.

Engage ChatGPT to optimize the HTML and JavaScript code for your particular specialization and interest. To make this procedure even easier, here are the prompts you can use to ask ChatGPT to optimize your codes to make several AI Tools. You can learn more about prompt engineering Here

Prompt 1:

Use the following HTML Code of [generating Lyrics] and convert it into an HTML code for generating [3 catchy Blog post titles based on a niche]. Replace the placeholders with your desired tool.  The code is (Copy and paste the code provided above)

Prompt 2

Use the following prompt to convert and optimize the HTML Code.

The prompt is: Optimize the following Javascript and convert it to suit the previous HTML code to [generate 3 catchy Blog post titles]. The Javascript is (Copy and paste the Javascript provided above)

Conclusion

Congratulations! You now know how to use WordPress and ChatGPT to build free AI tools. These resources could increase user engagement, increase traffic, and create new revenue streams for your business. This article will walk you through the steps you need to take to use AI to create useful solutions that are new and meet your audience’s demands. Why then wait? Start creating and experimenting with your AI tools today. And remember, if you have any questions, feel free to reach out to us and leave your comments. We will reply ASAP. Happy tool crafting!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top