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 prop을 사용해 <Coffee> 컴포넌트를 영구적이고 재사용 가능한 React 컴포넌트 파일로 자동 교체합니다.

또한,任意의 컴포넌트에 coffee prop을 추가하면 기존 컴포넌트를 편집할 수 있으며, 에이전트가 변경 설명에 따라 기존 코드를 업데이트합니다.

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.