coffee
1.0.0
- COF rame f r e ND e ngineer
使用AI構建並迭代您的UI 10倍 - 與您自己的IDE緊接！
咖啡用AI為您的前端開發工作流動。該項目的目的不僅僅是一個不錯的演示，而是可以編寫生產質量代碼和互動的符合人體工程學的工具。
沒有依賴關係，沒有設置。
只是您的react web應用程序正常，然後在同一目錄中打開另一個外殼並運行：
docker run --pull=always -it -e OPENAI_API_KEY= ${OPENAI_API_KEY} -v $( pwd ) :/mount coframe/coffee:latest您還可以通過 /react Directory構建圖像：
./dev.sh build
OPENAI_API_KEY=your_api_key ./dev.sh ../path/to/any/frontend/repo/on/machine您可以密切關注運行Docker容器的航站樓，以了解咖啡的攝入量。看到代碼正在生成很有趣！
咖啡使用Docker來確保其運行的任何代理代碼都是完全隔離的。咖啡目前是在Python中實施的（但您無需觸摸Python即可使用咖啡），而代碼生成代理相對簡單。
當您經營咖啡時，它將收聽源目錄中對js/jsx/ts/tsx文件的更改，如果它檢測到<Coffee> JSX組件，它將啟動其魔術！
< 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 >每次保存源文件時，咖啡都會尋找是否有需要釀造的<Coffee>組件（如果它們是新的，或者他們的道具或提示已更新）。對於代理商找到的每個<Coffee>組件，咖啡將通過您的父組件代碼，任何現有的子組件代碼，您的提示以及對OpenAI聊天完成API的任何自定義配置，以生成目標組件的新版本。
您的應用程序可能會在第一次保存後立即顯示出錯誤，因為咖啡代理商尚未將咖啡組件寫給它。這是正常的，在咖啡經紀人有時間釀造該零件之後，它將消失。
釀造後在組件上迭代同樣容易：
< 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 >目前，釀造過程有點慢，但是我們正在努力使其更快地進行的幾種方法。
最後，一旦您對釀造的組件感到滿意，就可以將pour="ComponentName.tsx"支架添加到<Coffee>組件中並保存文件，該文件將自動用生成的組件替換<Coffee>組件。
export function Example ( ) {
return (
< Coffee
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
pour = "MyButton.tsx"
>
Whatever you prompted Coffee to generate
< / Coffee >
) ;
}在此示例中，我們添加了一個特殊的pour道具。保存此文件時，咖啡將用以下內容替換此代碼：
import MyButton from "./MyButton" ;
export function Example ( ) {
return < MyButton title = "Click Me" onClick = { ( ) => console . log ( "clicked" ) } / > ;
}現在，您有一個功能齊全的可重複使用的反應組件，可以在生產中使用。
但是，咖啡中最酷的部分是您可以像從頭開始創建新組件一樣容易編輯現有的React組件。
假設您要編輯MyButton（或任何其他）組件。您需要做的就是添加coffee="description of change to make"道具：
export function Example ( ) {
return (
< MyButton
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
coffee = "make the button color blue"
/ >
) ;
}保存此文件後，咖啡將檢測到此“含咖啡因”的組件，並在它有時間思考和生成後為您更新它。
您可以永遠這樣迭代 - 您永遠無法用完咖啡！ ？一旦滿意，只需刪除coffee道具，就可以了。
prettier coffee.config.json的支持。config.json配置加入我們的不和諧，以尋求支持，展示您所釀造的東西以及一般的氛圍。
在Twitter上關注我們，以獲取新功能發行，產品更新和其他令人興奮的新聞！
如果您想成為貢獻者，只需提交拉動請求即可！
⚡我們還在招聘對UX/AI的未來充滿熱情的通才工程師和AI工程師。咖啡只是我們釀造的眾多激動人心的東西之一。如果您想和我們一起建立這個未來，請在Twitter上向我們拍攝DM！
cd react
pip3 install -r dev_requirements.txt
pytestApache 2.0©Coframe
