What it does

Coffee is a Dockerized agent that watches your React codebase for <Coffee> JSX tags. Drop one in with a plain-English prompt, save the file, and it calls OpenAI to generate the actual component code in place. When you’re satisfied, add a pour="ComponentName.tsx" prop and it swaps the placeholder for a real import. You can also “caffeinate” existing components by tacking on a coffee="make it blue" prop to trigger edits.

The interesting bit

The whole interaction model is a file-system hack: Coffee runs in an isolated Docker container, monitors your source tree, and mutates files on disk after LLM round-trips. No IDE plugin, no build-tool integration — just a sidecar process that treats your repo as a shared buffer. It’s crude, but it means it works in Vim, VS Code, or Cursor indiscriminately.

Key highlights

• Zero dependencies in your project; runs via docker run with an OpenAI API key
• Supports Next.js, Remix, and plain React; handles simple props (data, callbacks)
• Same DX for creating new components and editing existing ones
• Generated code is meant to be clean and maintainable, not throwaway
• Apache 2.0, with a TODO list that includes GPT-4V support and custom agents

Caveats

• The README admits brewing is “currently a little slow”
• First save after adding a <Coffee> tag will error until the agent finishes — the docs call this “normal”
• No native integration with Next.js, webpack, Prettier, or ESLint yet (all listed as TODOs)
• Only React; Vue and Svelte are on the roadmap

Verdict

Worth a spin if you want to experiment with AI-generated UI without committing to a specific IDE or build pipeline. Skip it if you need fast iteration, type-safe guarantees, or non-React frameworks — the rough edges are still very much present.