访问官网
GithubCoffee 项目介绍
Coffee 是一款由 Coframe 团队开发的前端开发工具，专注于加速用户界面(UI)的开发过程。通过集成AI技术，Coffee让开发者能够在自己的集成开发环境(IDE)中，以更高的效率编写和维护生产质量的代码。
项目目标
Coffee 的目标不仅仅是展示AI在代码编写中的潜力，更是为了成为一个可以帮助开发者完成生产环境代码的实用工具。通过它，开发人员能够实现更快速而便捷的UI组件迭代与开发。
核心特性
- 广泛兼容：支持任何React代码库，包括Next.js、Remix等。
- 高效稳定：适用于大多数标准UI组件，支持基本的数据属性和回调。
- 无缝集成：在编辑现有组件与新建组件时，采用相同的开发者体验。
- 生成高质量代码：确保代码整洁且易于维护。
- AI驱动的未来：引领AI辅助代码生成的潮流。
如何尝试
无需额外依赖或复杂设置即可使用Coffee。开发者只需在React web应用目录中打开一个新的终端窗口，运行如下命令即可：
docker run --pull=always -it -e OPENAI_API_KEY=${OPENAI_API_KEY} -v $(pwd):/mount coframe/coffee:latest
开发者还能通过自定义命令自行构建镜像：
./dev.sh build
OPENAI_API_KEY=your_api_key ./dev.sh ../path/to/any/frontend/repo/on/machine
工作原理
Coffee 通过Docker隔离运行的代码，现已由Python实现。Coffee监听源目录中的.js, .jsx, .ts, .tsx文件的更改，一旦检测到 <Coffee> JSX组件，它将自动生成代码。
使用Coffee生成或编辑组件十分简单，只需通过Coffee组件传递相应的参数和提示即可完成。示例如下：
<Coffee parameter={parameter}>
这里输入你的提示信息，Coffee会根据提示生成组件的第一个版本。
</Coffee>
每当保存文件时，Coffee会检查任何需要更新的<Coffee>组件，并通过OpenAI的API生成新的组件代码。
项目待办事项
- 增加基础测试和GitHub CI
- 对生成代码运行
prettier - 提供多样化的代理（更快、更智能、更便宜）
- 图像和数据反馈循环集成
- 支持自定义提示和代理
- 扩展配置文件支持
- 与Next.js、webpack、Remix等工具集成
- 增加对其他前端框架的支持（如Vue、Svelte）
相关项目
- v0：生成式React环境，由Vercel开发。
- Screenshot to Code：开源项目，展示GPT-V在UI生成中的强大能力。
- Draw a UI：同类项目。
- Cursor：原生AI集成开发环境，受到Coframe团队的喜爱。
社区与贡献
开发者可以加入Coframe的Discord社区进行支持交流，关注其Twitter以获取最新动态。同时，Coffee项目还欢迎有志于用户体验与AI未来的工程师加入，共同推进项目发展。
许可证信息
Coffee 项目采用Apache 2.0 开源许可证，由 Coframe发布。
