Back to directory

Coffee

Coffee watches a React codebase for placeholder components and uses the OpenAI chat completions API to generate or update their code each time the source file is saved, inside an isolated Docker container.

Coffee

Coffee is a tool for generating and iterating on React UI components with AI, run from a developer's own editor. It watches a project's JS, JSX, TS and TSX files for a designated placeholder component; whenever one is new or its props or prompt change, Coffee sends the parent component's code, any existing child component code, the prompt and any configuration to the OpenAI chat completions API to generate a new version of that component.

It works with any React codebase, including Next.js and Remix projects, and is described as reliable for standard UI components with simple prop types such as data and callbacks. Coffee runs as a Docker container alongside a project's own development server, so the agentic code it runs stays isolated from the host, and it requires an OpenAI API key.

The tool itself is implemented in Python, though using it does not require touching Python.

More in Design tools

See all 97
  • Wave

    wave.subworkflow.ai

    A browser-based tool for designing layered gradient wave backgrounds, with a colour wheel per layer, presets and shape or colour shuffling, exported as a looping MP4 or GIF.

  • SpikeUI

    nimoxi.com

    A visual, WYSIWYG UI designer that exports a design directly to HTML, CSS and JavaScript or to a native Windows application, sold as a one-time purchase with no subscription, and including a built-in AI assistant that can build components from a description.

  • Bastardica

    bastardica.mitpit.com

    A browser tool that mixes, stretches, and squishes two fonts together glyph by glyph, exporting the result as a downloadable TTF, OTF, or WOFF2 web font.