5 Menit Buat Plugin Wordpress Tanya AI (Buat Sendiri)

1. Beli Hosting dan Domain (Direkomendasikan)

Kenapa harus beli hosting dan domain, karna agar lancar dan ga error. Terkadang jika pake lokal koneksi antara WordPress dan api AI kadang error. Tetapi saya tidak memaksa untuk beli hosting dan domain, bisa dilokal saja pake laragon ataupun xampp.

Jika mau beli hosting dan domain bisa pake link ini agar dapat diskon atau klik gambar https://bit.ly/premium-web-hosting-niagahoster

2. Install WordPress

3. Buat Folder openai_integration dikomputer kalian

4. Buat File dengan ekstensi .php

5. Copy Code

<?php
/*
Plugin Name: Open AI Intergration
Description: Menghubungkan Gemini AI Dengan WordPress
Version: 1.0
Author: farhanrivaldy
*/

// Register Shortcode
function ai_shortcode()
{
    ob_start();
?>
    <div id="ai-question">
        <form id="ai-form">
            <label for="user-input">Enter your question:</label><br>
            <input type="text" id="user-input" name="user-input" required><br><br>
            <button type="submit">Submit</button>
        </form>
        <div id="response-container" style="margin-top: 20px;">
            <h3>AI Response:</h3>
            <pre id="ai-response"></pre>
        </div>
    </div>
    <script>
        document.getElementById('ai-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const userInput = document.getElementById('user-input').value;

            fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        action: 'custom_tool_run',
                        input: userInput,
                    }),
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById('ai-response').textContent = data.data;
                    } else {
                        document.getElementById('ai-response').textContent = 'Error: Unable to fetch response.';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    document.getElementById('ai-response').textContent = 'Error: Something went wrong.';
                });
        });
    </script>
<?php
    return ob_get_clean();
}
add_shortcode('ai_shortcode', 'ai_shortcode');

// Backend Function to Handle AI Integration
function custom_tool_run()
{
    // Allow CORS
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type, Authorization');

    // Get input from request
    $input = isset($_POST['input']) ? sanitize_text_field($_POST['input']) : '';
    if (empty($input)) {
        wp_send_json_error('Input is required.');
    }

    // Create prompt for AI
    $prompt = setPrompt($input);

    // Send prompt to Gemini API
    $response = generate_response_with_gemini($prompt);

    // Send response back to user
    if (!empty($response)) {
        wp_send_json_success($response);
    } else {
        wp_send_json_error('AI response failed.');
    }

    wp_die();
}
add_action('wp_ajax_custom_tool_run', 'custom_tool_run');
add_action('wp_ajax_nopriv_custom_tool_run', 'custom_tool_run');

// Helper Functions
function setApiKey()
{
    return "set_api_your_key_here";
}

function setPrompt($input)
{
    return "Answer the following question: " . $input;
}

function generate_response_with_gemini($prompt)
{
    $api_key = setApiKey();
    $api_url = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=' . $api_key;

    $headers = ['Content-Type' => 'application/json'];
    $body = [
        'contents' => [
            [
                'parts' => [
                    ['text' => $prompt]
                ]
            ]
        ]
    ];

    $response = wp_remote_post($api_url, [
        'headers' => $headers,
        'body' => json_encode($body),
        'timeout' => 120,
    ]);

    $responseBody = wp_remote_retrieve_body($response);
    $decoded = json_decode($responseBody, true);

    return $decoded['candidates'][0]['content']['parts'][0]['text'] ?? 'Text not found in response';
}

6. Cari Gemini API di Browser

7. Halaman Gemini API

klik get a Gemini API Key

8. Create API Key Gemini

klik Create API Key

9. Menunggu Loading Pembuatan API Key

10. Copy API Key

11. Taro Code Api Key di set_api_your_key_here

12. Archieve dengan Ekstensi .zip

13. Upload Plugin ke wordpres

14. Plugin Sudah Terpasang

15. Ke Menu Post Add New Post

16. Masukan Shortcodenya

17.

AI Response:

18. Visit Halaman Tanya AI

19 Tunggu beberapa saat agar muncul tulisannya

20. Pertanyaan kedua biasanya muncul agak cepat

untuk teksnya tidak terpotong bisa di geser ke kanan, tergantung tema yang digunakan.

Sekian Untuk Tutorial yang saya berikan, jika ingin dikembangkan silahkan. sekarang ai banyak jenisnya dan untuk kedepannya akan menguntungkan seperti chatbot otomatis seperti https://manychat.com/ atau ai lainnya

5 Menit Buat Plugin WordPress Tanya AI (Buat Sendiri)