coffee
1.0.0
- Cof Auflauflauf F ront- E nd E Ngineer
Bauen Sie Ihre UI 10x schneller mit KI auf und iterieren Sie sie direkt aus Ihrer eigenen Ideen!
Kaffee kebeltiert Ihren Frontend Development Workflow mit KI. Dieses Projekt soll mehr als nur eine nette Demo sein, sondern ein ergonomisches Tool, das mit Code in Produktionsqualität schreiben und interagieren kann.
Keine Abhängigkeiten, kein Setup.
Nur Ihr React WebApp und öffnen Sie dann eine andere Shell im selben Verzeichnis und rennen Sie:
docker run --pull=always -it -e OPENAI_API_KEY= ${OPENAI_API_KEY} -v $( pwd ) :/mount coframe/coffee:latestSie können das Bild auch selbst aus dem Verzeichnis /React erstellen:
./dev.sh build
OPENAI_API_KEY=your_api_key ./dev.sh ../path/to/any/frontend/repo/on/machineSie können das Terminal im Auge behalten, um den Docker -Container auszuführen, um zu sehen, welcher Kaffee vorhanden ist. Es macht Spaß zu sehen, wie der Code generiert wird!
Kaffee verwendet Docker, um sicherzustellen, dass jeder von ihm ausgeführte Agentencode vollständig isoliert ist. Der Kaffee wird derzeit in Python implementiert (aber Sie müssen Python nicht berühren, um Kaffee zu verwenden), und der Code-Generation-Agent ist relativ einfach.
Wenn Sie Kaffee ausführen, werden Änderungen an js/jsx/ts/tsx -Dateien in Ihrem Quellverzeichnis zu hören. Wenn es eine <Coffee> JSX -Komponente erkennt, startet er seine Magie!
< 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 > Jedes Mal, wenn Sie Ihre Quelldatei speichern, wird der Kaffee prüfen, ob es <Coffee> -Komponenten gibt, die Brauen benötigen (wenn sie neu sind oder ob ihre Requisiten oder eine Aufforderung aktualisiert wurden). Für jede <Coffee> -Komponente, die der Agent findet, übergibt Kaffee Ihren übergeordneten Komponentencode, den vorhandenen untergeordneten Komponentencode, Ihre Eingabeaufforderung und jede benutzerdefinierte Konfiguration an die API OpenAI -Chat -CHAT -Abschlüsse, um eine neue Version der Zielkomponente zu generieren.
Ihre Anwendung kann einen Fehler unmittelbar nach dem Speichern des ersten Sparts angezeigt, da die Kaffeekomponente noch nicht vom Kaffeeagenten geschrieben wurde. Dies ist normal und wird verschwinden, nachdem der Kaffeemittel Zeit hatte, die Komponente zu brauen.
Es ist genauso einfach, eine Komponente zu iterieren, nachdem sie gebraut wurde:
< Coffee parameter = { parameter } >
To edit and update the brewed component, all you need to do is replace the
prompt with your desired changes. For instance, "make the button background
darker".
< / Coffee >Der Brauprozess ist derzeit etwas langsam, aber wir arbeiten an verschiedenen Möglichkeiten, um ihn erheblich schneller zu machen.
Sobald Sie mit Ihrer gebrankten Komponente zufrieden sind, können Sie Ihrer <Coffee> -Komponente einen pour="ComponentName.tsx" -Pequität hinzufügen und die Datei speichern, die die <Coffee> -Komponente automatisch durch die generierte Komponente ersetzt.
export function Example ( ) {
return (
< Coffee
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
pour = "MyButton.tsx"
>
Whatever you prompted Coffee to generate
< / Coffee >
) ;
} In diesem Beispiel haben wir eine spezielle pour -Stütze hinzugefügt. Wenn Sie diese Datei speichern, ersetzt Kaffee diesen Code durch folgende:
import MyButton from "./MyButton" ;
export function Example ( ) {
return < MyButton title = "Click Me" onClick = { ( ) => console . log ( "clicked" ) } / > ;
}Jetzt haben Sie eine voll funktionsfähige, wiederverwendbare React -Komponente, die in der Produktion verwendet werden kann.
Der coolste Teil des Kaffees besteht jedoch darin, dass Sie vorhandene React -Komponenten genauso einfach bearbeiten können wie neue Komponenten von Grund auf neu.
Nehmen wir an, Sie möchten die MyButton (oder eine andere) Komponente bearbeiten. Alles, was Sie tun müssen, ist die coffee="description of change to make" :
export function Example ( ) {
return (
< MyButton
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
coffee = "make the button color blue"
/ >
) ;
}Sobald Sie diese Datei gespeichert haben, erkennt Kaffee diese "koffeinhaltige" Komponente und aktualisiert sie für Sie, nachdem es Zeit hatte, nachzudenken und zu generieren.
Sie können so für immer so iterieren - Sie können niemals den Kaffee ausgehen! ? Sobald Sie zufrieden sind, entfernen Sie einfach die coffee -Requisite und Sie können loslegen.
prettier auf generiertem Code aus coffee.config.json config Besuchen Sie uns auf DIENCORD, um zu unterstützen, um zu zeigen, was Sie gebraut haben, und gute Stimmung im Allgemeinen.
Folgen Sie uns auf Twitter für neue Feature -Veröffentlichungen, Produkt -Updates und andere aufregende Nachrichten!
Wenn Sie Mitwirkender sein möchten, geben Sie einfach eine Pull -Anfrage ein!
⚡ Wir stellen auch für Generalisteningenieure und KI -Ingenieure ein, die sich für die Zukunft von UX/AI leidenschaftlich interessieren. Kaffee ist nur eines der vielen aufregenden Dinge, die wir gebraut haben. Wenn Sie diese Zukunft mit uns aufbauen möchten, schießen Sie uns bitte einen DM auf Twitter!
cd react
pip3 install -r dev_requirements.txt
pytestApache 2.0 © Coframe
