coffee
1.0.0
- Коф рам Фон Рон- Эн н.д. Эн Нгинер
Стройте и вытекайте на вашем пользовательском интерфейсе в 10 раз быстрее с ИИ - прямо из своей собственной ide!
Кофе кофеинат ваш рабочий процесс по разработке фронта с ИИ. Этот проект предназначен для того, чтобы быть не просто хорошей демонстрацией, но, скорее, быть эргономичным инструментом, который может писать и взаимодействовать с кодом производства качества.
Нет зависимостей, нет настройки.
Просто ваш react webApp обычно, а затем откройте еще одну оболочку в том же каталоге и запустите:
docker run --pull=always -it -e OPENAI_API_KEY= ${OPENAI_API_KEY} -v $( pwd ) :/mount coframe/coffee:latestВы также можете создать изображение самостоятельно из каталога /React:
./dev.sh build
OPENAI_API_KEY=your_api_key ./dev.sh ../path/to/any/frontend/repo/on/machineВы можете следить за терминалом, управляющим контейнером Docker, чтобы увидеть, чем занимается кофе. Приятно видеть, как создается код!
Кофе использует Docker, чтобы убедиться, что любой агент, который он запускает, полностью изолирован. Кофе в настоящее время реализуется в Python (но вам не нужно трогать Python, чтобы использовать кофе), а агент поколения кода относительно прост.
Когда вы запускаете кофе, он будет прослушать изменения в файлах js/jsx/ts/tsx в вашем каталоге источника, и если он обнаружит компонент <Coffee> JSX, он начнет свою магию!
< 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 > Каждый раз, когда вы сохраняете исходный файл, кофе будет посмотреть, есть ли какие -либо компоненты <Coffee> , которые нуждаются в варке (если они новые или их реквизит или подсказка были обновлены). Для каждого компонента <Coffee> , который находит агент, кофе передаст ваш родительский код компонента, любой существующий код дочерних компонентов, вашу подсказку и любую пользовательскую конфигурацию для API завершения чата OpenAI для создания новой версии целевого компонента.
Ваше приложение может отобразить ошибку сразу после сохранения ее в первый раз, так как кофейный компонент еще не был записан ему агентом кофейного кофе. Это нормально и уйдет после того, как агент кофейного агента принесет время варить компонент.
Итерация на компоненте после того, как он был завариен, так же просто:
< 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 >Процесс пивоварения в настоящее время немного медленно, но мы работаем над несколькими способами сделать его значительно быстрее.
Наконец, как только вы довольны вашим вашим компонентом, вы можете добавить опору pour="ComponentName.tsx" в свой компонент <Coffee> и сохранить файл, который автоматически заменит компонент <Coffee> на сгенерированный компонент.
export function Example ( ) {
return (
< Coffee
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
pour = "MyButton.tsx"
>
Whatever you prompted Coffee to generate
< / Coffee >
) ;
} В этом примере мы добавили специальную pour . Когда вы сохраните этот файл, кофе заменит этот код следующим образом:
import MyButton from "./MyButton" ;
export function Example ( ) {
return < MyButton title = "Click Me" onClick = { ( ) => console . log ( "clicked" ) } / > ;
}Теперь у вас есть полностью функциональный, многоразовый компонент React, который готов к использованию в производстве.
Самая крутая часть кофе, однако, заключается в том, что вы можете редактировать существующие компоненты React так же легко, как создание новых компонентов с нуля.
Допустим, вы хотите отредактировать компонент MyButton (или любой другой). Все, что вам нужно сделать, это добавить 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"
/ >
) ;
}После того, как вы сохраните этот файл, кофе обнаружит этот компонент «кофеина» и обновит его для вас после того, как у него будет время подумать и генерировать его.
Вы можете сохранить итерацию, как это навсегда - у вас никогда не будет кофе! ? Как только вы будете удовлетворены, просто удалите опору coffee , и все готово.
prettier на сгенерированном коде coffee.config.json config Присоединяйтесь к нам в Discord для поддержки, чтобы показать, что вы заварили, и хорошей вибрации в целом.
Следите за нами в Twitter, чтобы узнать о новых выпусках функций, обновления продуктов и других захватывающих новостей!
Если вы хотите стать участником, просто отправьте запрос на привлечение!
⚡ Мы также нанимаем для инженеров -универсалов и инженеров искусственного интеллекта, которые увлечены будущим UX/AI. Кофе - это лишь одна из многих захватывающих вещей, которые мы заваривают. Если вы хотите построить это будущее с нами, пожалуйста, выстрелите нам в Твиттер!
cd react
pip3 install -r dev_requirements.txt
pytestApache 2.0 © COFRAME
