coffee

Coffee 项目介绍

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发布。