Coframe/coffee

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

Next.js や Remix などの React ベースフレームワークを使用するフロントエンドエンジニアで、ローカル開発環境に 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.