Coframe/coffee

Build and iterate on your UI 10x faster with AI - right from your own IDE ☕️

What it solves

Coffee 加速前端开发，允许开发者在 IDE 中直接生成和迭代 React 组件。它消除了需要从独立的 AI 聊天界面复制粘贴代码到代码库的需求，将 AI 生成过程整合到与编写代码相同的工作流中。

How it works

Coffee 作为后台进程（通过 Docker）运行，监控你的源目录中 JavaScript 和 TypeScript 文件的变化。当检测到包含提示的特殊 <Coffee> JSX 组件时，它会使用 OpenAI chat completions API 生成相应的 React 组件代码。

开发者可以通过更新 <Coffee> 组件内部的提示来迭代。满意后，可使用 pour 属性自动将 <Coffee> 组件替换为永久、可复用的 React 组件文件。

它还支持通过在任意组件添加 coffee 属性来编辑已有组件，这会触发代理根据变更描述更新现有代码。

Who it’s for

使用基于 React 的框架（如 Next.js 或 Remix）的前端工程师，想要将 AI 辅助的 UI 生成直接集成到本地开发环境中。

Highlights

  • IDE-native workflow: Generate components without leaving your editor.
  • Direct code replacement: Automatically converts AI-generated placeholders into production-ready files via the pour prop.
  • In-place editing: Modify existing components by simply adding a coffee prop to the JSX.
  • Isolated execution: Uses Docker to ensure agentic code is fully isolated.