https://github.com/Coframe/coframe-public/assets/25165841/b2eb4928-f952-4a9e-93a4-cb1e365eb53e
咖啡通过AI为您的前端开发工作流程注入活力。这个项目不仅仅是一个很好的演示,而是一个可以编写和互动生产质量代码的人性化工具。
功能
- 兼容所有React代码库,包括Next.js、Remix等。
- 对大多数标准UI组件具有足够的可靠性
- 支持大多数简单的prop类型(数据、回调函数等)
- 使用相同的DX同时编辑现有组件和从头创建新组件
- 生成干净、可维护的代码
- 这是AI辅助代码生成的未来趋势!🚀
试用
无依赖,无须设置。
只需像往常一样运行您的React Web应用,然后在同一目录中打开另一个终端并运行:
docker run --pull=always -it -e OPENAI_API_KEY=${OPENAI_API_KEY} -v $(pwd):/mount coframe/coffee:latest
您也可以从/react目录自行构建映像:
./dev.sh build
OPENAI_API_KEY=your_api_key ./dev.sh ../path/to/any/frontend/repo/on/machine
您可以关注运行Docker容器的终端,查看咖啡正在生成的代码!这真的很有趣!
工作原理
咖啡使用Docker确保任何代理代码都完全隔离。咖啡目前用Python实现(但您不需要接触Python来使用咖啡),且代码生成代理相对简单。
当您运行咖啡时,它将监听source目录中的js/jsx/ts/tsx
文件的变更,如果检测到<Coffee>
JSX组件,它将开始其魔法!
<Coffee parameter={parameter}>
这里是您放置提示内容的地方,咖啡将使用它来生成您所需组件的第一个版本。
这与您使用任何LLM(如ChatGPT)时使用的提示类型相同,因此请随意发挥创意并应用您最喜欢的提示工程技巧。
最后,您还可以通过简单地添加上面所示的方式从父组件中传入任何参数。
</Coffee>
每次保存源文件时,咖啡将检查是否有需要处理的<Coffee>
组件(如果它们是新的或其props或提示已更新)。对于每个找到的<Coffee>
组件,咖啡将传递父组件代码、任何现有的子组件代码、您的提示以及任何自定义配置到OpenAI聊天完成API,以生成目标组件的新版本。
ℹ️ 在首次保存后,您的应用程序可能会立即显示错误,因为咖啡组件尚未由咖啡代理写入。这是正常的,在咖啡代理有时间生成组件后,这个问题将会消失。
在生成组件后进行迭代同样简单:
<Coffee parameter={parameter}>
要编辑和更新生成的组件,您只需用所需的更改替换提示。例如,“将按钮背景颜色调暗”。
</Coffee>
生成过程目前有点慢,但我们正在努力寻找几种方式使其显著加快。
最后,一旦您对生成的组件感到满意,您可以向<Coffee>
组件添加pour="ComponentName.tsx"
prop并保存文件,这将自动用生成的组件替换<Coffee>
组件。
export function Example() {
return (
<Coffee
title="点击我"
onClick={() => console.log('clicked')}
pour="MyButton.tsx"
>
无论您提示咖啡生成什么内容
</Coffee>
)
}
在这个例子中,我们添加了一个特殊的pour
prop。当您保存此文件时,咖啡将用以下代码替换此代码:
import MyButton from './MyButton'
export function Example() {
return (
<MyButton title='点击我' onClick={() => console.log('clicked')} />
)
}
现在,您有了一个完全功能、可重用的React组件,可以直接用于生产。
咖啡最酷的地方在于,您可以像从头创建新组件一样轻松地编辑现有的React组件。
https://github.com/Coframe/coframe-public/assets/25165841/3fb67edb-a6a2-4a1c-a48a-00bd74168c1e
假设您想编辑MyButton(或任何其他)组件。您只需添加coffee="description of change to make"
prop:
export function Example() {
return (
<MyButton title='点击我' onClick={() => console.log('clicked')} coffee="将按钮颜色改为蓝色" />
)
}
一旦您保存此文件,咖啡将检测到这个“加咖啡因”的组件,并在有时间思考并生成后为您更新它。
您可以永远这样迭代——咖啡永远不会耗尽!😂 一旦您满意了,只需删除coffee
prop即可。
TODO
- 添加基本测试和GitHub CI
- 对生成的代码运行
prettier
- 提供各种代理:更快/更智能/更便宜
- 添加从组件到代理的视觉和数据反馈循环(GPT-4V)
- 支持自定义提示
- 支持自定义代理
- 扩展对
coffee.config.json
配置的支持 - 与Next.js、webpack、Remix、Prettier、ESLint等工具原生集成
- 添加对其他流行前端框架(Vue、Svelte等)的支持
相关
- v0 - 由Vercel创建的惊人的生成性React项目
- 我们希望他们很快能将其开源,以便更多人使用 🥹
- 我们很高兴能实验一种更原生集成到前端开发者现有工作流程中的DX,以便更好地理解两种方法之间的权衡。
- Screenshot to Code - 展示GPT-V UI生成能力的开源项目🤯
- 第一个展示从图像生成UI的项目之一(当然除了GDB的时间永恒的GPT-4公告!)
- Draw a UI - 同上!
- Cursor - Coframe团队使用和喜爱的AI原生IDE 🥰
- 咖啡可以在任何IDE中使用,但我们非常喜欢Cursor并期待他们推出的下一步产品!
社区
加入我们的Discord获取支持,展示你生成的内容,并享受良好的氛围。
关注我们的Twitter,了解新功能发布、产品更新以及其他令人兴奋的新闻!
核心贡献者
https://github.com/Coframe/coframe-public/assets/25165841/2f355984-2c6a-4773-8601-9ff156bbfb0d
如果您想成为贡献者,只需提交一个拉取请求!
⚡ 我们还在招聘对UX/AI未来充满热情的通才工程师和AI工程师。咖啡只是我们正在孵化的许多令人兴奋的项目之一。如果您想与我们一起构建这个未来,请在Twitter上给我们发送DM!
本地开发
cd react
pip3 install -r dev_requirements.txt
pytest
许可证
Apache 2.0 © Coframe