coffee
1.0.0
- COF rame F ronte E nd E Ngineer
Construa e itera na sua interface do usuário 10x mais rápido com ai - diretamente do seu próprio IDE!
Cafeinatos de café seu fluxo de trabalho de desenvolvimento de front -end com IA. Este projeto pretende ser mais do que apenas uma boa demonstração, mas ser uma ferramenta ergonômica que pode escrever e interagir com o código da qualidade da produção.
Sem dependências, sem configuração.
Apenas o seu react webapp normalmente, e depois abra outro shell no mesmo diretório e execute:
docker run --pull=always -it -e OPENAI_API_KEY= ${OPENAI_API_KEY} -v $( pwd ) :/mount coframe/coffee:latestVocê também pode construir a imagem a partir do diretório /react:
./dev.sh build
OPENAI_API_KEY=your_api_key ./dev.sh ../path/to/any/frontend/repo/on/machineVocê pode ficar de olho no terminal que executa o recipiente do Docker para ver o que está fazendo o café. É divertido ver o código gerado!
O Coffee usa o Docker para garantir que qualquer código Agentic que ele execute esteja totalmente isolado. Atualmente, o café é implementado no Python (mas você não precisa tocar em Python para usar o café) e o agente de geração de código é relativamente simples.
Quando você toma café, ele ouve alterações nos arquivos js/jsx/ts/tsx no diretório de origem e, se ele detectar um componente JSX <Coffee> , ele começará sua mágica!
< 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 > Toda vez que você salva seu arquivo de origem, o café procurará se existem componentes <Coffee> que precisam ser fabricados (se forem novos ou se seus adereços ou prompts foram atualizados). Para cada componente <Coffee> que o agente encontra, o café passará seu código de componente pai, qualquer código de componente filho existente, seu prompt e qualquer configuração personalizada para a API de conclusão de chat do OpenAI para gerar uma nova versão do componente de destino.
Seu aplicativo pode exibir um erro imediatamente após salvá -lo pela primeira vez, pois o componente de café ainda não foi escrito pelo agente do café. Isso é normal e desaparecerá depois que o agente do café teve tempo de preparar o componente.
Itera em um componente depois de ter sido fabricado é igualmente 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 >O processo de fabricação de cerveja é atualmente um pouco lento, mas estamos trabalhando em várias maneiras de torná -lo significativamente mais rápido.
Finalmente, depois de ficar feliz com o seu componente fabricado, você pode adicionar um componente PERT pour="ComponentName.tsx" ao seu componente <Coffee> e salvar o arquivo, que substituirá automaticamente o componente <Coffee> pelo componente gerado.
export function Example ( ) {
return (
< Coffee
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
pour = "MyButton.tsx"
>
Whatever you prompted Coffee to generate
< / Coffee >
) ;
} Neste exemplo, adicionamos um pour especial. Ao salvar este arquivo, o café substituirá este código pelo seguinte:
import MyButton from "./MyButton" ;
export function Example ( ) {
return < MyButton title = "Click Me" onClick = { ( ) => console . log ( "clicked" ) } / > ;
}Agora você tem um componente de reação totalmente funcional e reutilizável que está pronto para uso na produção.
A parte mais legal do café, no entanto, é que você pode editar os componentes do React existentes com a mesma facilidade que a criação de novos componentes do zero.
Digamos que você deseja editar o componente MyButton (ou qualquer outro). Tudo o que você precisa fazer é adicionar o 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"
/ >
) ;
}Depois de salvar esse arquivo, o café detectará esse componente "cafeinado" e o atualizará para você depois de ter tempo para pensar e gerá -lo.
Você pode continuar iterando assim para sempre - você nunca pode ficar sem café! ? Quando estiver satisfeito, basta remover o suporte coffee e pronto.
prettier no código gerado coffee.config.json config Junte -se a nós na Discord para obter apoio, para mostrar o que você fabricou e boas vibrações em geral.
Siga -nos no Twitter para novos lançamentos de recursos, atualizações de produtos e outras notícias emocionantes!
Se você gostaria de ser um colaborador, basta enviar uma solicitação de tração!
⚡ Também estamos contratando engenheiros generalistas e engenheiros de IA apaixonados pelo futuro da UX/AI. O café é apenas uma das muitas coisas emocionantes que temos fabricação. Se você quiser construir este futuro conosco, atire em nós um DM no Twitter!
cd react
pip3 install -r dev_requirements.txt
pytestApache 2.0 © Coframe
