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.