coffee
1.0.0
- COF nommer F ront- E nd E ngineer
Construisez et itérez sur votre ui 10x plus rapidement avec AI - directement de votre propre IDE!
Le café caféine votre flux de travail de développement frontal avec l'IA. Ce projet est destiné à être plus qu'une simple démo, mais plutôt être un outil ergonomique qui peut écrire et interagir avec le code de qualité de production.
Pas de dépendances, pas de configuration.
Juste votre react webApp normalement, puis ouvrez un autre shell dans le même répertoire et exécutez:
docker run --pull=always -it -e OPENAI_API_KEY= ${OPENAI_API_KEY} -v $( pwd ) :/mount coframe/coffee:latestVous pouvez également construire l'image vous-même à partir du répertoire / React:
./dev.sh build
OPENAI_API_KEY=your_api_key ./dev.sh ../path/to/any/frontend/repo/on/machineVous pouvez garder un œil sur le terminal exécutant le contenant Docker pour voir ce que fait le café. C'est amusant de voir le code généré!
Coffee utilise Docker pour s'assurer que tout code agentique qu'il exécute est entièrement isolé. Le café est actuellement implémenté dans Python (mais vous n'avez pas besoin de toucher Python pour utiliser le café), et l'agent de génération de code est relativement simple.
Lorsque vous exécutez du café, il écoutera les modifications dans les fichiers js/jsx/ts/tsx dans votre répertoire source, et s'il détecte un composant <Coffee> > JSX, il lancera sa 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 > Chaque fois que vous enregistrez votre fichier source, Coffee cherchera à voir s'il y a des composants <Coffee> qui ont besoin de brassage (s'ils sont nouveaux ou si leurs accessoires ou leur invite ont été mis à jour). Pour chaque composant <Coffee> que l'agent trouve, Coffee passera votre code de composant parent, tout code de composant enfant existant, votre invite et toute configuration personnalisée à l'API Openai Chat Completion afin de générer une nouvelle version du composant cible.
Votre application peut afficher une erreur immédiatement après l'avoir enregistrée la première fois car le composant café ne lui a pas encore été écrit par l'agent de café. Ceci est normal et disparaîtra après que l'agent de café ait eu le temps de préparer le composant.
Ilérer sur un composant après avoir été brassé est tout aussi facile:
< 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 >Le processus de brassage est actuellement un peu lent, mais nous travaillons sur plusieurs façons de le rendre beaucoup plus rapidement.
Enfin, une fois que vous êtes satisfait de votre composant brassée, vous pouvez ajouter un accessoire pour="ComponentName.tsx" à votre composant <Coffee> et enregistrer le fichier, qui remplacera automatiquement le composant <Coffee> par le composant généré.
export function Example ( ) {
return (
< Coffee
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
pour = "MyButton.tsx"
>
Whatever you prompted Coffee to generate
< / Coffee >
) ;
} Dans cet exemple, nous avons ajouté un accessoire pour spécial. Lorsque vous enregistrez ce fichier, le café remplacera ce code par ce qui suit:
import MyButton from "./MyButton" ;
export function Example ( ) {
return < MyButton title = "Click Me" onClick = { ( ) => console . log ( "clicked" ) } / > ;
}Vous avez maintenant un composant React entièrement fonctionnel et réutilisable prêt à l'emploi dans la production.
La partie la plus cool du café, cependant, est que vous pouvez modifier les composants React existants tout aussi facilement que la création de nouveaux composants à partir de zéro.
Disons que vous souhaitez modifier le composant Mybutton (ou tout autre). Tout ce que vous avez à faire est d'ajouter le coffee="description of change to make"
export function Example ( ) {
return (
< MyButton
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
coffee = "make the button color blue"
/ >
) ;
}Une fois que vous enregistrez ce fichier, le café détectera ce composant "caféiné" et le mettra à jour pour vous après avoir eu le temps de penser et de le générer.
Vous pouvez continuer à itérer comme ça pour toujours - vous ne pouvez jamais manquer de café! ? Une fois que vous êtes satisfait, retirez simplement l'accessoire coffee et vous êtes prêt à partir.
prettier sur le code généré coffee.config.json Config Rejoignez-nous sur Discord pour le soutien, pour montrer ce que vous avez brassé et les bonnes vibrations en général.
Suivez-nous sur Twitter pour de nouvelles versions de fonctionnalités, des mises à jour de produits et d'autres nouvelles passionnantes!
Si vous souhaitez être contributeur, soumettez simplement une demande de traction!
⚡ Nous embauchons également pour les ingénieurs généralistes et les ingénieurs de l'IA qui sont passionnés par l'avenir de l'UX / AI. Le café n'est qu'une des nombreuses choses passionnantes que nous avons brasso. Si vous voulez construire cet avenir avec nous, veuillez nous tirer un DM sur Twitter!
cd react
pip3 install -r dev_requirements.txt
pytestApache 2.0 © coframe
