coffee

Kopi ☕

- - Cof ramuan F Ront- E nd E ngineer

Bangun dan beralih di UI 10X Anda lebih cepat dengan AI - langsung dari IDE Anda sendiri!

coffee.mp4

Coffee Caffeinates Workflow Pengembangan Frontend Anda dengan AI. Proyek ini dimaksudkan untuk menjadi lebih dari sekadar demo yang bagus, tetapi lebih merupakan alat ergonomis yang dapat menulis dan berinteraksi dengan kode berkualitas produksi.

• Fitur
• Cobalah
• Cara kerjanya
• Todo
• Terkait
• Masyarakat
• Kontributor inti
• Lisensi

Fitur

• Bekerja dengan basis kode React termasuk Next.js, Remix, dll.
• Cukup andal untuk sebagian besar komponen UI standar
• Mendukung sebagian besar jenis prop sederhana (data, panggilan balik, dll)
• Menggunakan DX yang sama untuk mengedit komponen yang ada serta membuat komponen baru dari awal
• Menghasilkan kode yang bersih dan dapat dipelihara
• Di sinilah masa depan AI-Assisted Code-Gen menuju!

Cobalah

Tidak ada dependensi, tidak ada pengaturan.

Hanya Webapp React Anda secara normal, dan kemudian buka cangkang lain di direktori yang sama dan jalankan:

docker run --pull=always -it -e OPENAI_API_KEY= ${OPENAI_API_KEY} -v $( pwd ) :/mount coframe/coffee:latest

Anda juga dapat membangun gambar sendiri dari Direktori /React:

./dev.sh build
OPENAI_API_KEY=your_api_key ./dev.sh ../path/to/any/frontend/repo/on/machine

Anda dapat mengawasi terminal yang menjalankan wadah Docker untuk melihat kopi apa yang sedang terjadi. Sangat menyenangkan melihat kode yang dihasilkan!

Cara kerjanya

Kopi menggunakan Docker untuk memastikan bahwa kode agen yang dijalankan sepenuhnya terisolasi. Kopi saat ini diimplementasikan dalam Python (tetapi Anda tidak perlu menyentuh Python untuk menggunakan kopi), dan agen generasi kode relatif sederhana.

Saat Anda menjalankan kopi, itu akan mendengarkan perubahan pada file js/jsx/ts/tsx di direktori sumber Anda, dan jika mendeteksi komponen <Coffee> JSX, itu akan memulai keajaibannya!

 < Coffee parameter = { parameter } >
  Here is where you put your prompt that Coffee will use to generate the first
  version of your desired component. This is the same type of prompt that you'd
  use with any LLM like ChatGPT, so feel free to get creative and apply your
  favorite prompt engineering tricks. Finally, you can also pass in any
  parameters you want from your parent component by simply adding them as
  demonstrated above.
< / Coffee >

Setiap kali Anda menyimpan file sumber Anda, kopi akan melihat apakah ada komponen <Coffee> yang perlu diseduh (jika mereka baru atau apakah alat peraga atau prompt mereka telah diperbarui). Untuk setiap komponen <Coffee> yang ditemukan agen, kopi akan melewati kode komponen induk Anda, kode komponen anak yang ada, prompt Anda, dan konfigurasi khusus ke OpenAI CHAT CHARTIONS API untuk menghasilkan versi baru dari komponen target.

Aplikasi Anda dapat menampilkan kesalahan segera setelah menyimpannya pertama kali karena komponen kopi belum ditulis oleh agen kopi. Ini normal dan akan hilang setelah agen kopi punya waktu untuk menyeduh komponen.

Iterasi pada komponen setelah diseduh sama mudahnya:

 < Coffee parameter = { parameter } >
  To edit and update the brewed component, all you need to do is replace the
  prompt with your desired changes. For instance, "make the button background
  darker".
< / Coffee >

Proses pembuatan bir saat ini agak lambat, tetapi kami sedang mengerjakan beberapa cara untuk membuatnya secara signifikan lebih cepat.

Akhirnya, setelah Anda senang dengan komponen yang diseduh, Anda dapat menambahkan prop pour="ComponentName.tsx" ke komponen <Coffee> Anda dan menyimpan file, yang secara otomatis akan menggantikan komponen <Coffee> dengan komponen yang dihasilkan.

 export function Example ( ) {
  return (
    < Coffee
      title = "Click Me"
      onClick = { ( ) => console . log ( "clicked" ) }
      pour = "MyButton.tsx"
    >
      Whatever you prompted Coffee to generate
    < / Coffee >
  ) ;
}

Dalam contoh ini, kami menambahkan prop pour khusus. Saat Anda menyimpan file ini, kopi akan menggantikan kode ini dengan yang berikut:

 import MyButton from "./MyButton" ;

export function Example ( ) {
  return < MyButton title = "Click Me" onClick = { ( ) => console . log ( "clicked" ) } / > ;
}

Sekarang Anda memiliki komponen reaksi yang berfungsi penuh dan dapat digunakan kembali yang siap digunakan dalam produksi.

Namun, bagian paling keren dari kopi adalah Anda dapat mengedit komponen reaksi yang ada semudah membuat komponen baru dari awal.

coffee-component.mp4

Katakanlah Anda ingin mengedit komponen MyButton (atau lainnya). Yang perlu Anda lakukan adalah menambahkan coffee="description of change to make" prop:

 export function Example ( ) {
  return (
    < MyButton
      title = "Click Me"
      onClick = { ( ) => console . log ( "clicked" ) }
      coffee = "make the button color blue"
    / >
  ) ;
}

Setelah Anda menyimpan file ini, kopi akan mendeteksi komponen "berkafein" ini dan memperbarui untuk Anda setelah ada waktu untuk berpikir dan menghasilkannya.

Anda dapat tetap berulang seperti ini selamanya - Anda tidak akan pernah kehabisan kopi! ? Setelah Anda puas, lepaskan saja penyangga coffee dan Anda siap melakukannya.

Todo

• Tambahkan Tes Dasar dan GitHub CI
• Jalankan prettier pada kode yang dihasilkan
• Variasi agen: lebih cepat/lebih pintar/lebih murah
• Tambahkan visual dan loop umpan balik data dari komponen ke agen (GPT-4V)
• Dukung prompt khusus
• Dukung agen khusus
• Perluas dukungan untuk coffee.config.json config
• Integrasikan secara alami dengan alat -alat seperti Next.js, Webpack, Remix, Prettier, Eslint, dll.
• Tambahkan dukungan untuk kerangka kerja frontend populer lainnya (Vue, Svelte, dll)

Terkait

• V0 - Generatif Bereaksi Generatif Bermain Oleh Vercel
  • Kami berharap mereka segera untuk membukanya untuk khalayak yang lebih luas?
  • Kami sangat senang bereksperimen dengan DX yang lebih terintegrasi ke dalam alur kerja pengembang frontend yang ada, sehingga kami dapat lebih memahami pengorbanan antara dua pendekatan.
• Screenshot to Code - Proyek OSS Menampilkan kekuatan GPT -V untuk generasi UI?
  • Salah satu proyek pertama yang memamerkan kemampuan GPT-V untuk generasi UI dari suatu gambar (selain pengumuman GPT-4 yang abadi GDB, tentu saja!)
• Gambar UI - Ditto!
• Kursor - Ide asli ai yang digunakan dan dicintai oleh tim COFRAME?
  • Kopi dapat digunakan di IDE apa pun, tetapi kami penggemar berat CURSOR dan senang melihat apa yang mereka luncurkan selanjutnya!

Masyarakat

Bergabunglah dengan kami di Discord for Support, untuk memamerkan apa yang Anda buat, dan getaran yang baik secara umum.

Ikuti kami di Twitter untuk rilis fitur baru, pembaruan produk, dan berita menarik lainnya!

Kontributor inti

coffee-contributors.mp4

Jika Anda ingin menjadi kontributor, cukup kirimkan permintaan tarik!

⚡ Kami juga mempekerjakan insinyur generalis dan insinyur AI yang bersemangat tentang masa depan UX/AI. Kopi hanyalah salah satu dari banyak hal menarik yang kami buat. Jika Anda ingin membangun masa depan ini bersama kami, silakan tembak kami DM di Twitter!

Pengembangan Lokal

 cd react
pip3 install -r dev_requirements.txt
pytest

Lisensi

Apache 2.0 © COFRAME