Artefak - UI Generatif

Temukan fitur Artifacts revolusioner dari LibreChat untuk pembuatan komponen React, kode HTML, dan diagram Mermaid secara instan.

Generative UI: Membuat komponen React, kode HTML, dan diagram Mermaid
Integrasi Fleksibel: Gunakan model apa pun yang telah Anda atur
Desain Iteratif: Meningkatkan dan menyempurnakan output yang dihasilkan secara cepat
Integrasi Agen: Konfigurasikan artefak di tingkat agen (pendekatan yang direkomendasikan)

Catatan: Cara yang disarankan untuk menggunakan artifacts sekarang adalah melalui fitur Agents, yang memungkinkan kontrol lebih terperinci dengan mengaktifkan/menonaktifkan artifacts di tingkat agen, bukan di seluruh aplikasi.

Fitur Utama Code Artifacts di LibreChat:

Pembuatan prototipe situs web dan UI secara instan dengan AI generatif
Pembuatan tata letak yang dinamis dan responsif dengan mudah
Lingkungan pembelajaran interaktif untuk React dan HTML
Visualisasi ide kompleks menggunakan diagram Mermaid
Iterasi desain yang intuitif dan berpusat pada pengguna dengan dukungan AI
Alternatif gratis dan sumber terbuka untuk alat AI berbayar

Rasakan masa depan desain dan pengembangan UI/UX dengan kemampuan generatif LibreChat. Wujudkan ide Anda menjadi kenyataan lebih cepat dari sebelumnya!

Content-Security-Policy

Anda mungkin perlu memperbarui Content-Security-Policy pada server web Anda untuk menyertakan frame-src 'self' https://*.codesandbox.io agar dapat memuat aplikasi HTML yang dihasilkan di panel Artifacts. Ini adalah dependensi dari pustaka sandpack.

Self-Hosting the Sandpack Bundler

Artifacts di LibreChat menggunakan pustaka Sandpack dari CodeSandbox untuk merender kode HTML/JS secara aman. Secara default, LibreChat terhubung ke CDN publik CodeSandbox, yang mungkin juga mengirimkan telemetri untuk penggunaannya.

Untuk privasi yang lebih baik, kepatuhan keamanan, atau lingkungan jaringan yang terisolasi, Anda dapat melakukan self-host pada bundler.

Mengapa Melakukan Self-Host pada Sandpack Bundler?

Self-hosting the bundler memberikan beberapa keuntungan:

Privasi & Keamanan: Jaga eksekusi kode tetap berada di dalam infrastruktur Anda sendiri
Reliabilitas: Menghapus ketergantungan pada layanan eksternal
Performa: Kurangi latensi dengan menghosting bundler di jaringan Anda
Kepatuhan: Memenuhi persyaratan penanganan data organisasi
Kontrol: Konfigurasikan dan sesuaikan dengan kebutuhan spesifik Anda

Konfigurasi

Setelah Anda menyiapkan bundler yang di-host sendiri, cukup konfigurasikan LibreChat untuk menggunakannya dengan mengatur variabel lingkungan:

# `.env` file
SANDPACK_BUNDLER_URL=http://your-bundler-url

Pertimbangan Umum

Self-hosting the bundler memperkenalkan beberapa overhead tambahan:

Konfigurasi CORS: Anda perlu mengelola kebijakan cross-origin resource sharing
Manajemen Keamanan: Anda bertanggung jawab atas keamanan layanan bundler
Pemeliharaan: Pembaruan dan patch perlu diterapkan secara manual
Persyaratan Sumber Daya: Sumber daya server tambahan akan diperlukan untuk menampung bundler

Untuk instruksi terperinci mengenai pengaturan dan pemeliharaan bundler yang di-host sendiri, lihat repositori CodeSandbox yang di-fork yang disesuaikan untuk deployment LibreChat, termasuk penghapusan telemetri dari Sandpack.

Berita AI 2024: Platform Chat AI Open-Source Asli dan TERBAIK, LibreChat Merilis Code Artifacts! Alat UI Generatif ini Dapat Menghasilkan React, HTML & Diagram Secara Instan dari Satu Prompt di Browser Anda dengan LLM Apa Pun, OpenAI, Anthropic, LLAMA, Mistral, DeepSeek Coder & Lainnya Berkat Integrasi OLLAMA.

#AINews2024 #OpenSourceAI #GenerativeUI #CodeArtifacts #WebDevelopment #ReactJS #LLM #AIPrototyping #DevTools #OLLAMA #LibreChat