coffee
1.0.0
- COFラメf ront- e nd e ngineer
自分のIDEからAIを使用して、UIを10倍速く構築して反復します。
コーヒーは、AIでフロントエンド開発ワークフローをカフェインします。このプロジェクトは、単なる素敵なデモ以上のものであることを目的としていますが、むしろ、生産品質のコードを書いて対話できる人間工学に基づいたツールであることを目的としています。
依存関係もセットアップもありません。
正常に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>コンポーネントについて、コーヒーは親コンポーネントコード、既存の子コンポーネントコード、プロンプト、およびターゲットコンポーネントの新しいバージョンを生成するために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 >醸造プロセスは現在少し遅いですが、私たちはそれを大幅に速くするためのいくつかの方法に取り組んでいます。
最後に、醸造されたコンポーネントに満足したら、 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 Propを追加しました。このファイルを保存すると、コーヒーはこのコードを次のものに置き換えます。
import MyButton from "./MyButton" ;
export function Example ( ) {
return < MyButton title = "Click Me" onClick = { ( ) => console . log ( "clicked" ) } / > ;
}これで、生産で使用できる完全に機能的で再利用可能な反応コンポーネントができました。
ただし、コーヒーの最もクールな部分は、新しいコンポーネントをゼロから作成するのと同じくらい簡単に既存の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の将来に情熱を注いでいるジェネラリストエンジニアとAIエンジニアのためにも雇用しています。コーヒーは、私たちが醸造する多くのエキサイティングなものの1つにすぎません。この未来を私たちと一緒に構築したい場合は、TwitterでDMを撮影してください！
cd react
pip3 install -r dev_requirements.txt
pytestApache 2.0©Coframe
