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:/react
directory:
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 tojs/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.
Related
- 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!