coffee
1.0.0
- COF devejecer F ront- mi Dakota del Norte mi ngineer
Construye e itere en tu UI 10x más rápido con AI, ¡desde tu propio ideal!
El café se cafeine su flujo de trabajo de desarrollo frontend con IA. Este proyecto está destinado a ser más que una buena demostración, sino ser una herramienta ergonómica que puede escribir e interactuar con el código de calidad de producción.
Sin dependencias, sin configuración.
Solo su aplicación web React normalmente, y luego abra otro shell en el mismo directorio y ejecute:
docker run --pull=always -it -e OPENAI_API_KEY= ${OPENAI_API_KEY} -v $( pwd ) :/mount coframe/coffee:latestTambién puede construir la imagen usted mismo desde el directorio /React:
./dev.sh build
OPENAI_API_KEY=your_api_key ./dev.sh ../path/to/any/frontend/repo/on/machinePuede vigilar la terminal que ejecuta el contenedor Docker para ver qué está haciendo el café. ¡Es divertido ver el código que se está generando!
Coffee usa Docker para asegurarse de que cualquier código de agente que ejecute esté completamente aislado. El café se implementa actualmente en Python (pero no necesita tocar Python para usar el café), y el agente de generación de código es relativamente simple.
Cuando ejecuta el café, escuchará los cambios en los archivos js/jsx/ts/tsx en su directorio de origen, y si detecta un componente <Coffee> JSX, ¡comenzará su magia!
< 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 > Cada vez que guarde su archivo fuente, el café buscará si hay algún componente <Coffee> que necesiten elaboración (si son nuevos o si sus accesorios o un aviso se han actualizado). Para cada componente <Coffee> que el agente encuentra, el café pasará su código de componente principal, cualquier código de componente infantil existente, su mensaje y cualquier configuración personalizada a la API de finalización de chat de OpenAI para generar una nueva versión del componente de destino.
Su aplicación puede mostrar un error inmediatamente después de guardarla la primera vez, ya que el agente de café aún no le ha escrito el componente del café. Esto es normal y desaparecerá después de que el agente del café haya tenido tiempo de preparar el componente.
Iterar en un componente después de que se haya elaborado es igual de fácil:
< 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 >El proceso de elaboración de cerveza es actualmente un poco lento, pero estamos trabajando de varias maneras para hacerlo significativamente más rápido.
Finalmente, una vez que esté satisfecho con su componente elaborado, puede agregar un accesorio pour="ComponentName.tsx" a su componente <Coffee> y guardar el archivo, que reemplazará automáticamente el componente <Coffee> con el componente generado.
export function Example ( ) {
return (
< Coffee
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
pour = "MyButton.tsx"
>
Whatever you prompted Coffee to generate
< / Coffee >
) ;
} En este ejemplo, agregamos un accesorio pour especial. Cuando guarde este archivo, el café reemplazará este código con el siguiente:
import MyButton from "./MyButton" ;
export function Example ( ) {
return < MyButton title = "Click Me" onClick = { ( ) => console . log ( "clicked" ) } / > ;
}Ahora tiene un componente React reutilizable totalmente funcional que está listo para usar en producción.
Sin embargo, la parte más genial del café es que puede editar los componentes React existentes tan fácilmente como crear nuevos componentes desde cero.
Digamos que desea editar el componente MyButton (o cualquier otro). Todo lo que necesita hacer es agregar el coffee="description of change to make" Prop:
export function Example ( ) {
return (
< MyButton
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
coffee = "make the button color blue"
/ >
) ;
}Una vez que guarde este archivo, el café detectará este componente "con cafeína" y lo actualizará para usted después de que haya tenido tiempo de pensar y generarlo.
Puedes seguir iterando así para siempre, ¡nunca puedes quedarte sin café! ? Una vez que esté satisfecho, simplemente retire el accesorio coffee y listo.
prettier el código generado coffee.config.json Config Únase a nosotros en Discord para obtener apoyo, para mostrar lo que ha elaborado, y buenas vibraciones en general.
¡Síganos en Twitter para ver nuevas publicaciones, actualizaciones de productos y otras noticias emocionantes!
Si desea ser un contribuyente, ¡envíe una solicitud de extracción!
⚡ También estamos contratando ingenieros generalistas e ingenieros de IA que son apasionados por el futuro de UX/AI. El café es solo una de las muchas cosas emocionantes que tenemos elaborando. Si quieres construir este futuro con nosotros, ¡envíenos un DM en Twitter!
cd react
pip3 install -r dev_requirements.txt
pytestApache 2.0 © Coframe
