Build and iterate on your UI 10x faster with AI – right from your own IDE!
Coffee caffeinates your frontend development workflow with AI. This project is intended to be more than just a nice demo but rather an ergonomic tool that can write and interact with production-quality code.Featured on GitHub Trending!
/react
directory:
js/jsx/ts/tsx
files in your source directory. If it detects a <Coffee>
JSX component, it will kick off its magic!
<Coffee>
components that need brewing. It passes your parent component code, any existing child component code, your prompt, and any custom configuration to the OpenAI chat completions API to generate a new version of the target component.
ℹ️ Your application may display an error immediately after saving it the first time, as the Coffee component has not been written yet. This is normal and will resolve once the Coffee agent has brewed the component.Iterating on a component after it has been brewed is just as easy:
pour="ComponentName.tsx"
prop to your <Coffee>
component. Save the file, and it will automatically replace the <Coffee>
component with the generated component.
MyButton
component. Just add the coffee="description of change"
prop:
coffee
prop.