ChatGPT clone
Full-featured generative AI conversational interface with token streaming, code syntax highlighting, and persistent multi-chat sessions.
~120ms
Near-instantaneous response streaming start
SSE (Chunked)
Server-Sent Events for smooth word-by-word typing
IndexedDB
Uncapped session memory without 5MB browser limit
40+ Langs
Prism/Highlight engine with instant one-click copy
Frontend & AI Integration Engineer
2024
AI & Fullstack Engineering
AI Engineering Research Project
Project Overview & Purpose
Aplikasi web modern yang mereplikasi antarmuka obrolan cerdas ChatGPT dari OpenAI. Dibangun untuk memberikan pengalaman percakapan AI yang mulus dengan streaming token real-time huruf demi huruf, pemformatan markdown otomatis, highlighting blok kode program, dan riwayat obrolan multi-sesi.
Mengeksplorasi dan menguasai integrasi antarmuka LLM (Large Language Model) modern, khususnya penanganan response streaming berbasis Server-Sent Events (SSE), parsing teks berformat dinamis saat data masih mengalir, dan pengelolaan state percakapan yang kompleks.
Technologies & Architecture
Server-Sent Events & Incremental AST Pipeline
Alur pengolahan data streaming dari API model bahasa besar hingga terender menjadi elemen UI yang terstruktur.
Edge API Proxy
Next.js Route Handler bertindak sebagai reverse proxy terenkripsi untuk menyamarkan API key rahasia dari client.
ReadableStream Chunk Decoding
Client membaca stream byte data mentah dan mendekode potongan teks UTF-8 menggunakan TextDecoderStream.
Incremental Markdown AST Parsing
Parser khusus memperbarui pohon sintaks markdown secara reaktif tanpa merusak blok kode yang belum selesai terkirim.
Challenges & Technical Solutions
Saat AI mengirimkan blok kode atau tabel secara bertahap, parser markdown standar sering merusak tampilan karena tag penutup belum diterima.
Impact: Menimbulkan kedipan layar (flicker) yang mengganggu kenyamanan pengguna saat membaca jawaban AI.
Mengembangkan algoritma parser yang mendeteksi tag kode terbuka (open backticks) dan secara otomatis melengkapinya sementara saat rendering.
Result: Tampilan kode dan teks mengalir mulus tanpa kedipan sedikit pun.
Halaman harus otomatis bergulir ke bawah mengikuti teks baru, tetapi tidak boleh memaksa scroll jika pengguna sedang membaca pesan di bagian atas.
Impact: Pengguna merasa kesal karena halaman terus terpental ke bawah saat mereka mencoba menyeleksi atau menyalin teks lama.
Membuat hook deteksi posisi scroll: auto-scroll hanya aktif jika pengguna berada di toleransi 80px dari posisi paling bawah jendela obrolan.
Result: Pengguna bebas membaca riwayat lama tanpa terganggu aliran respon baru.
Menyimpan ratusan sesi percakapan panjang dengan cepat melebihi kapasitas standar browser LocalStorage.
Impact: Aplikasi mengalami crash saat menyimpan percakapan baru atau data sesi lama terhapus.
Mengalihkan penyimpanan percakapan dari LocalStorage ke IndexedDB terstruktur yang mampu menampung gigabytes data secara asynchronous.
Result: Kapasitas penyimpanan tidak terbatas dengan kecepatan baca-tulis tinggi.
Key Features & Highlights
Natural SSE Token Streaming
Efek mengetik kata demi kata yang sangat halus mencerminkan kecepatan generate model AI sesungguhnya.
Code Block with One-Click Copy
Deteksi otomatis bahasa pemrograman, penomoran baris, dan tombol salin kode yang responsif.
Multi-Chat Session Sidebar
Navigasi multi-sesi dengan fitur rename judul percakapan, hapus sesi, dan pencarian riwayat obrolan.
Model Parameter Configuration
Pengaturan fleksibel untuk parameter temperature, system instructions, dan batas panjang token.
Lessons Learned & Retrospective
Key Takeaways for Future Iterations
Penyajian data streaming berbasis Server-Sent Events (SSE) jauh lebih efisien untuk AI daripada polling HTTP berulang.
IndexedDB adalah pilihan penyimpanan terbaik untuk aplikasi web yang mengelola data teks dalam jumlah besar di sisi client.
User experience pada aplikasi AI sangat ditentukan oleh kenyamanan membaca selama proses streaming teks berlangsung.