Zhin-Ai adalah pustaka JavaScript ringan yang memungkinkan Anda mengintegrasikan asisten AI interaktif langsung ke situs web Anda. Dirancang untuk memandu pengguna, menjelaskan struktur dan komponen website, serta menjawab pertanyaan terkait konten halaman, Zhin-Ai memberikan pengalaman navigasi yang lebih intuitif dan informatif.

Fitur Unggulan

Asisten Interaktif Cerdas: Memahami dan menjelaskan konten website saat ini secara dinamis dan responsif terhadap pertanyaan pengguna.
Gemini AI Powered: Menggunakan API Google Gemini 2.5 Flash untuk menghasilkan respons yang cerdas, relevan, dan alami.
Sistem Memori Percakapan: Secara cerdas mengingat riwayat percakapan sebelumnya (disimpan di localStorage browser) untuk menjaga konteks, memungkinkan interaksi yang lebih personal dan berkelanjutan.
Desain Responsif Adaptif:
- Desktop: Menampilkan tombol mengambang di pojok kanan bawah. Saat diklik, chat box akan muncul di lokasi yang sama.
- Mobile: Menampilkan tombol mengambang. Saat diklik, chat akan tampil sebagai modal (pop-up) di tengah layar, memastikan pengalaman pengguna yang optimal di perangkat berlayar kecil.
Dua Tema Visual: Mendukung tema terang (light) dan gelap (night) yang dapat dengan mudah diaktifkan sesuai preferensi website Anda.
Penyajian Pesan Canggih: Otomatis memformat respons AI, termasuk blok kode (``lang\ncode` ), teks tebal ( teks tebal ), teks miring ( teks miring ), dan tautan ( teks tautan `), agar mudah dibaca dan dipahami.
Mudah Digunakan: Cukup tambahkan satu elemen HTML kustom (<zhin-ai>) dan satu baris kode JavaScript untuk menginisialisasi pustaka.
Creator Attribution: Setiap respons dari Zhin-Ai akan menyertakan footer kecil yang menunjukkan "Creator: Dvszhin" dengan tautan ke halaman npm pustaka ini.

Cara Penggunaan

1. Sertakan Pustaka dari Unpkg

Tambahkan tag <script> berikut di bagian akhir <body> HTML Anda (sebelum tag </body> penutup). Ini akan memuat pustaka Zhin-Ai beserta CSS-nya secara otomatis dari CDN Unpkg.

<!-- Sertakan pustaka Zhin-Ai dari Unpkg -->
<script type="module" src="https://unpkg.com/website-ai-assistant@1.0.0/zhinai.js"></script>

Pastikan versi 1.0.0 sudah di-deploy ke npm agar dapat diakses melalui Unpkg. Jika Anda melakukan pengembangan lokal dan belum deploy, Anda bisa merujuk ke bagian "Mengembangkan dan Menguji Secara Lokal".

2. Tambahkan Elemen Zhin-Ai ke HTML Anda

Tempatkan elemen <zhin-ai> di mana saja di dalam <body> HTML Anda. Posisi yang umum adalah di akhir <body>.

Contoh Penggunaan Elemen:

Dengan Warna Default (Terang):
```
<zhin-ai></zhin-ai>
```
Mengaktifkan Tema Gelap:
```
<zhin-ai theme="night"></zhin-ai>
```
Mengaktifkan Tema Terang (Eksplisit):
```
<zhin-ai theme="light"></zhin-ai>
```
Setelah elemen ini ditambahkan, sebuah tombol mengambang dengan ikon pesan akan muncul di pojok kanan bawah halaman Anda.

3. Konfigurasi Kunci API Google Gemini

PENTING: Untuk Zhin-Ai dapat berfungsi, Anda perlu menyediakan kunci API Google Gemini. Jangan pernah menyimpan kunci API Anda secara langsung di file JavaScript publik untuk lingkungan produksi. Metode di bawah ini cocok untuk pengembangan dan demo.

Tambahkan skrip ini setelah tag <script> untuk zhinai.js Anda:

<script type="module">
    // Pastikan DOM sudah dimuat sebelum mengakses window.ZhinAiAssistant
    document.addEventListener('DOMContentLoaded', () => {
        // Ganti 'YOUR_GEMINI_API_KEY' dengan kunci API Gemini Anda yang sebenarnya.
        // Dapatkan kunci API Anda dari Google AI Studio: https://aistudio.google.com/app/apikey
        if (window.ZhinAiAssistant) {
            window.ZhinAiAssistant.setApiKey('YOUR_GEMINI_API_KEY'); // <-- GANTI DENGAN KUNCI API ANDA
            console.log("Zhin-Ai: API Key configuration script executed.");
        } else {
            console.error("Zhin-Ai: window.ZhinAiAssistant not found. The library might not have loaded correctly.");
        }
    });
</script>

Saran Keamanan Tambahan untuk Produksi: Untuk aplikasi produksi, sangat disarankan untuk:

Menggunakan Variabel Lingkungan: Jika Anda menggunakan proses build (Webpack, Vite, dll.), suntikkan kunci API sebagai variabel lingkungan.
Proxy Server: Buat endpoint di server backend Anda yang meneruskan permintaan ke API Gemini, sehingga kunci API Anda tidak pernah terekspos di sisi klien.

Cara Kerja AI (Sistem Instruksi)

Zhin-Ai berinteraksi dengan API Google Gemini menggunakan konfigurasi berikut:

Model Digunakan: gemini-2.5-flash-preview-05-06
Instruksi Sistem Dinamis:
- Bagian utama instruksi (core persona asisten) diambil dari URL publik: https://raw.githubusercontent.com/zhinnx/files/main/zhin-ai-prompt.txt.
- Ditambah dengan struktur HTML lengkap dari halaman web saat ini (document.documentElement.outerHTML). Ini memungkinkan AI memiliki konteks penuh tentang konten, tata letak, dan elemen yang ada di halaman yang sedang dilihat pengguna.
Memori Percakapan (Chat History): Setiap pesan dari pengguna dan AI akan disimpan dalam localStorage browser. Riwayat percakapan ini kemudian disertakan dalam setiap permintaan API berikutnya (contents array), memungkinkan AI untuk memiliki "ingatan" tentang diskusi sebelumnya dan mempertahankan konteks.
Konfigurasi Generasi:
- temperature: 0.5 (kontrol kreativitas; nilai yang lebih rendah menghasilkan respons yang lebih fokus dan konservatif).
- maxOutputTokens: 800 (batas panjang respons AI).
Format Pesan Otomatis: Respons AI secara otomatis diformat untuk menampilkan:
- Blok kode (``bahasa\nkode` `)
- Teks tebal (**teks tebal**)
- Teks miring (*teks miring*)
- Tautan ([teks tautan](url))

Mengembangkan dan Menguji Secara Lokal

Untuk kontribusi atau pengujian fitur baru sebelum deploy ke Unpkg:

Clone Repository:

git clone https://github.com/Dvszhin/website-ai-assistant.git
cd website-ai-assistant

Perbarui zhinai.js dan index.html: Pastikan Anda menggunakan versi terbaru dari zhinai.js (dengan inisialisasi window.ZhinAiAssistant di awal) dan index.html (dengan elemen <zhin-ai>).
Buat File Demo HTML: Gunakan kode index.html yang disediakan dalam demo, simpan di direktori root proyek Anda.
Jalankan Server Lokal (Penting!): Browser modern memberlakukan batasan keamanan (CORS) yang mencegah fetch API dan beberapa fungsionalitas Custom Elements berjalan langsung dari file lokal (file:///). Anda harus menjalankan server HTTP sederhana untuk menguji.
- Menggunakan Node.js (jika terinstal): Buka terminal di direktori root proyek Anda, lalu jalankan:
```
npx serve .
# Atau jika Anda menginstal http-server secara global:
npm install -g http-server
http-server .
```
- Menggunakan Python (jika terinstal): Buka terminal di direktori root proyek Anda, lalu jalankan:
```
python -m http.server 8000
```
- Ekstensi Browser (untuk VS Code): Gunakan ekstensi seperti "Live Server". Buka index.html di VS Code, klik kanan, dan pilih "Open with Live Server".
Akses dari Browser: Buka browser Anda ke alamat yang diberikan oleh server lokal Anda (misalnya http://localhost:5000, http://localhost:8000, atau http://127.0.0.1:5500).

Kontribusi

Kontribusi disambut hangat! Jika Anda memiliki ide untuk fitur baru, perbaikan bug, atau peningkatan performa, silakan ikuti langkah-langkah di bawah ini:

Fork repository ini.
Buat branch baru (git checkout -b feature/nama-fitur-baru).
Lakukan perubahan Anda.
Commit perubahan Anda (git commit -m 'Tambahkan Fitur Baru yang Menarik').
Push ke branch Anda (git push origin feature/nama-fitur-baru).
Buka Pull Request.

Lisensi

Pustaka ini dilisensikan di bawah Lisensi MIT.

Dibuat oleh: Dvszhin https://www.npmjs.com/package/website-ai-assistant

Package detail

website-ai-assistant

readme