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
