ai component generator

Selamat datang di Generator Komponen AI dengan ChatGPT

Proyek ini menghasilkan hampir semua komponen UI dengan ChatGPT OpenAI dan memungkinkan Anda menyalin kode html

Generator komponen AI2UI

Bagaimana cara kerjanya

Proyek ini menggunakan fungsi ChatGPT API dan Vercel Edge. Ini membuat prompt berdasarkan formulir dan input pengguna, mengirimkannya ke API chatGPT melalui fungsi Vercel Edge, lalu mengalirkan respons kembali ke aplikasi. Anda dapat meminta komponen UI apa pun, gaya bebas. Kemungkinan besar itu akan menghasilkan hal yang tepat untuk Anda. Ini juga dapat digunakan sebagai bootstrap yang bagus untuk proyek, saya mencoba membuat gaya Material-UI menjadi gaya, tetapi Anda dapat mengubah perilaku ini.

Ekspor komponen Anda

Anda sekarang dapat memilih antara ekspor HTML komponen UI Anda dan kombinasi Tailwind CSS, Next.js, React.js, Material UI pilihan Anda

Berjalan Secara Lokal

Proyek ini dibuat dengan Next.js dan TailwindCSS , sehingga Anda dapat menerapkannya langsung ke Vercel.

Setelah mengkloning repo, buka OpenAI untuk membuat akun dan masukkan kunci API Anda ke dalam file bernama .env (OPENAI_API_KEY) Kemudian, jalankan aplikasi di baris perintah dan itu akan tersedia di http://localhost:3000 .

 instalasi npm

pengembang benang

Mengubah perintah dan permintaan ChatGPT

Untuk mengubah respons ChatGPT Anda hanya perlu memberikan contoh apa yang ingin Anda dapatkan kembali (gunakan peran asisten untuk menghasilkan contoh respons yang baik)". Pada contoh di bawah ini saya tunjukkan cara menghasilkan TailwindCSS dan Berikutnya komponen .js, dan kemudian meminta untuk mengembalikan kode HTML yang sesuai.

 // /api/generate.tsconst handler = async (req: Permintaan): Promise => {const {prompt} = (menunggu req.json()) sebagai {prompt?: string;};if (!prompt ) {return new Response("Tidak ada perintah dalam permintaan", {status: 400});}const payload: OpenAIStreamPayload = {model: "gpt-3.5-turbo",pesan: [{"role": "user","content": "buat kode css next.js + tailwind untuk tombol 200 x 100, latar belakang ungu muda, buat teks di dalamnya. Silakan buat komponen next.js yang lengkap"},{"role": "asisten", "konten": ` import React from 'react';                    const MyComponent = () => { return ( 
 
Halo Dunia 
Selamat datang di komponen Next.js saya menggunakan Tailwind CSS
 Klik Saya 
 );                    };                    ekspor Komponen Saya default;                `},{"role": "user","content": "Silakan buat kode html dengan inline css yang membuat komponen berikut, tampilan dan nuansa UI Meterial, kembalikan hanya kode"},{"role": "user" , "konten": prompt},],};const stream = menunggu OpenAIStream(payload);mengembalikan Respons baru(stream);};

Siapa yang membuat proyek ini

Nama saya Yuval - seorang wirausahawan, saya ❤️ membangun sistem end-to-end yang tidak hanya terlihat luar biasa dan terasa canggih, namun juga memiliki makna dan dampak nyata.

? Berkontribusi

Kontribusi, masalah, dan permintaan fitur dipersilakan!

• Fork repositori, Kloning di perangkat Anda. Itu saja?

• Akhirnya buat permintaan tarik :)

Lisensi

Proyek ini berlisensi MIT License.

---

Kami menerima kontribusi dengan penuh cinta! Tunjukkan minat Anda! Menyumbang!