coffee
1.0.0
- COF 라임 에프 론트의 뜻 이자형 nd 이자형 Ngineer
자신의 ID에서 바로 AI를 사용하여 UI 10X 더 빠르게 UI를 구축하고 반복하십시오!
커피는 AI로 프론트 엔드 개발 워크 플로를 카페인합니다. 이 프로젝트는 단순한 데모가 아니라 프로덕션 품질 코드를 작성하고 상호 작용할 수있는 인체 공학적 도구입니다.
종속성, 설정 없음.
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/machineDocker 컨테이너를 실행하는 터미널을 주시하여 커피가 무엇인지 확인할 수 있습니다. 코드가 생성되는 것을 보는 것은 재미 있습니다!
커피는 Docker를 사용하여 실행되는 에이전트 코드가 완전히 분리되어 있는지 확인합니다. 커피는 현재 파이썬으로 구현되어 있지만 (커피를 사용하기 위해 파이썬을 만질 필요는 없음) 코드 생성 에이전트는 비교적 간단합니다.
커피를 실행하면 소스 디렉토리의 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> 구성 요소가 있는지 확인할 것입니다 (신규 또는 소품 또는 프롬프트가 업데이트 된 경우). 에이전트가 찾은 각 <Coffee> 구성 요소에 대해 Coffee는 상위 구성 요소 코드, 기존 자식 구성 요소 코드, 프롬프트 및 OpenAI 채팅 완료 API에 대한 사용자 정의 구성을 전달하여 대상 구성 요소의 새 버전을 생성합니다.
커피 성분이 아직 커피 에이전트가 작성하지 않았기 때문에 처음으로 저장 한 직후 오류가 표시 될 수 있습니다. 이것은 정상이며 커피 에이전트가 구성 요소를 양조 할 시간이 있으면 사라질 것입니다.
양조 된 후 구성 요소를 반복하는 것은 쉽습니다.
< 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 >양조 프로세스는 현재 약간 느립니다. 그러나 우리는 몇 가지 방법을 연구하고 훨씬 빠르게 노력하고 있습니다.
마지막으로, 양조 된 구성 요소에 만족하면 <Coffee> 구성 요소에 pour="ComponentName.tsx" prop를 추가하고 파일을 저장할 수 있습니다.이 파일은 <Coffee> 구성 요소를 생성 된 구성 요소로 자동 교체합니다.
export function Example ( ) {
return (
< Coffee
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
pour = "MyButton.tsx"
>
Whatever you prompted Coffee to generate
< / Coffee >
) ;
} 이 예에서는 특별한 pour 소품을 추가했습니다. 이 파일을 저장하면 Coffee는이 코드를 다음과 같이 대체합니다.
import MyButton from "./MyButton" ;
export function Example ( ) {
return < MyButton title = "Click Me" onClick = { ( ) => console . log ( "clicked" ) } / > ;
}이제 생산에 사용할 준비가 된 완전히 기능적이고 재사용 가능한 반응 구성 요소가 있습니다.
그러나 커피의 가장 멋진 부분은 기존의 React 구성 요소를 처음부터 새로운 구성 요소를 쉽게 작성하는 것만 큼 쉽게 편집 할 수 있다는 것입니다.
MyButton (또는 다른) 구성 요소를 편집하려고한다고 가정 해 봅시다. coffee="description of change to make" 소품을 추가하기 만하면됩니다.
export function Example ( ) {
return (
< MyButton
title = "Click Me"
onClick = { ( ) => console . log ( "clicked" ) }
coffee = "make the button color blue"
/ >
) ;
}이 파일을 저장하면 Coffee는이 "카페인"구성 요소를 감지하고 생각하고 생성 할 시간이 있으면 업데이트됩니다.
당신은 영원히 이렇게 반복 할 수 있습니다 - 당신은 결코 커피를 마실 수 없습니다! ? 만족하면 coffee 소품을 제거하면 가면 좋습니다.
prettier 실행하십시오 coffee.config.json Config에 대한 지원을 확장하십시오 지원을 위해 Discord에 참여하고, 양조 한 것을 과시하고, 일반적으로 좋은 분위기.
새로운 기능 릴리스, 제품 업데이트 및 기타 흥미로운 뉴스를 위해 Twitter에서 우리를 팔로우하십시오!
기고자가 되려면 풀 요청을 제출하십시오!
OX/AI의 미래에 열정을 가진 일반 엔지니어와 AI 엔지니어들도 고용하고 있습니다. 커피는 우리가 양조 한 많은 흥미로운 것들 중 하나 일뿐입니다. 이 미래를 우리와 함께 구축하고 싶다면 트위터에서 DM을 쏘아주세요!
cd react
pip3 install -r dev_requirements.txt
pytestApache 2.0 © Coframe
