— Coframe Front-End Engineer

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!

​
Features

  • Works with any React codebase including Next.js, Remix, etc.
  • Reliable enough for most standard UI components.
  • Supports most simple prop types (data, callbacks, etc).
  • Uses the same DX for both editing existing components and creating new components from scratch.
  • Generates clean, maintainable code.
  • This is where the future of AI-assisted code generation is headed! 🚀

​
Try It

No dependencies, no setup.

Just run your React web app normally, and then open another shell in the same directory and run:

docker run --pull=always -it -e OPENAI_API_KEY=${OPENAI_API_KEY} -v $(pwd):/mount coframe/coffee:latest

You can also build the image yourself from the /react directory:

./dev.sh build
OPENAI_API_KEY=your_api_key ./dev.sh ../path/to/your/frontend/repo

Keep an eye on the terminal running the Docker container to see what Coffee is up to. It’s fun to see the code being generated!

​
How It Works

Coffee uses Docker to ensure any agentic code it runs is fully isolated. It’s implemented in Python, but you don’t need to touch Python to use Coffee. The code-generation agent is relatively simple.

When you run Coffee, it listens for changes to js/jsx/ts/tsx files in your source directory. If it detects a <Coffee> JSX component, it will kick off its magic!

<Coffee parameter={parameter}>
  Here is where you put your prompt that Coffee will use to generate the first
  version of your desired component.

  This is the same type of prompt that you'd use with any LLM like ChatGPT, so
  feel free to get creative and apply your favorite prompt engineering tricks.

  Finally, you can also pass in any parameters you want from your parent component
  by simply adding them as demonstrated above.
</Coffee>

Every time you save your source file, Coffee checks for any <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:

<Coffee parameter={parameter}>
  To edit and update the brewed component, replace the prompt with
  your desired changes. For instance, "make the button background darker".
</Coffee>

The brewing process is currently a little slow, but we’re working on ways to make it significantly faster.

Finally, once you’re happy with your brewed component, you can add a pour="ComponentName.tsx" prop to your <Coffee> component. Save the file, and it will automatically replace the <Coffee> component with the generated component.

export function Example() {
  return (
    <Coffee
      title="Click Me"
      onClick={() => console.log('clicked')}
      pour="MyButton.tsx"
    >
      Your prompt here
    </Coffee>
  )
}

When you save this file, Coffee will replace the code with:

import MyButton from './MyButton'

export function Example() {
  return (
    <MyButton title='Click Me' onClick={() => console.log('clicked')} />
  )
}

Now you have a fully functional, reusable React component that’s ready for production.

The coolest part of Coffee is that you can edit existing React components just as easily as creating new ones.

Suppose you want to edit the MyButton component. Just add the coffee="description of change" prop:

export function Example() {
  return (
    <MyButton title='Click Me' onClick={() => console.log('clicked')} coffee="make the button color blue" />
  )
}

After saving, Coffee detects this “caffeinated” component and updates it for you.

You can keep iterating like this indefinitely—you can never run out of Coffee! 😂 Once you’re satisfied, remove the coffee prop.

  • v0.dev – An amazing generative React playground by Vercel
    • We’re hoping they open-source it soon to reach a wider audience 🥹
    • We wanted to experiment with a DX more natively integrated into a developer’s existing workflow to understand the trade-offs between approaches.
  • Screenshot to Code – Open-source project showcasing the power of GPT-V for UI generation 🤯
    • One of the first projects to showcase GPT-V’s capabilities for UI generation from an image.
  • Draw a UI – Similar concept!
  • Cursor – AI-native IDE that the Coframe team uses and loves 🥰
    • Coffee can be used in any IDE, but we’re huge fans of Cursor and are excited to see what they launch next!

​
Community

Join us on Discord for support, to showcase what you’ve brewed, and for good vibes in general.

Follow us on Twitter for feature releases, product updates, and other exciting news!

​
Core Contributors

If you’d like to contribute, submit a pull request!

⚡ We are also hiring generalist and AI engineers passionate about the future of UX/AI. Coffee is just one of the exciting projects we have brewing. If you want to build this future with us, please DM us on Twitter!

​
Local Development

cd react
pip3 install -r dev_requirements.txt
pytest

​
License

Apache 2.0 © Coframe