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:
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