「Coffee」というGithubで公開されているコードがヤバい！

何がどうやばいかって。
「やりたいこと」を「文章」で書くだけでそれができる。こんな世界がついうに来てしまった。

百聞は一見にしかず。その動きは以下の動画をぜひ見てほしい。

そう。見てお分かりの通り、<Coffee>タグ内に書いた言葉が、まさかのWebページに反映される。

もはや、衝撃としか言えなかった。これから起きうる変化に若干恐怖を覚えた関係で、手が震えてPostを悩んだくらい。

ただ、日々進歩する。これを機に更なる進化を遂げる。そう感じとって、多くのエンジニアや業界全体の在り方に届けという思いも込めてPost。

今回はそのCoffeeを用いた実装について分かりづらいものが多かったので説明する。

準備・環境

環境

確認できているのは、Macbook　Pro M1の環境
Dockerが必要
OpenAI のAPIKeyが必要。

こんなところ。

準備

以下のGithubから、ローカルへクローンしておく。

OpenAIのAPIKeyを取得しておく。

やっていく

そんなに難しいことはない。今回は、Cursorエディタを使っているが、もちろんVSCodeでも良い。

原理は比較的に簡単で、Docker上で動くファイル監視システムが、指定してWebアプリのプロジェクトのtsxファイルなどの変更を監視し、Coffee内の情報から、Compornentを生成してくれるというもの。

実際にCursorで、クローンしたCofeeプロジェクトを開く。

開いたら、「react」というフォルダがあるので、ターミナルを開いて、そのフォルダをカレントにする。

OPEN AIのAPIKeyを環境変数に設定。

次に、コンテナイメージをビルドする。

./dev.sh build

こんな感じに成功する。

ついで、サンプルで入っている「Next.js」のプロジェクトが、Cloneしたフォルダの中の「_roastery/sample_app_nextjs」にあるので、別のターミナルを開いて、そのフォルダをカレントにする。

ついで実行できるように、以下のコマンドを順に実行する。

npm install
npm run dev

これでOK。問題がなければ3087ポートで起動するので、リンクをクリックしてlocalhostの画面を確認してみる

こんな感じの画面↓が出るはず。

ついで、左側のReactフォルダにある方のターミナルで、以下のコマンドを実行する。引数は、Coffeeが監視する対象のフォルダを指す。

./dev.sh ../_roastery/sample_app_nextjs

エラーがなければ以下のようになる。

ついで、実際のページを編集してみる。Sample_app_nextjs/app/page.tsxを開き、<InputForm>のタグの上に以下のように入れてみる。

<Coffee> 
黄色い円を一つ。
</Coffee>

こんな感じになる。エラーは無視して、保存してみてほしい。そうすると、「./dev.sh」を実行している方のターミナルが動き出す。並行でブラウザも見ていてほしい。

行ったことが出来上がってしまった。。

さらにこれ、前に行ったことが記憶されている。
だから文章を削除して、前に伝えたことに付け加えることができる。
例えば。「やっぱり色は赤」というのが通じてしまう。

まさに、エンジニアがもう一人いる状態。

もちろんJavascriptも実装できる。

そして、最後に、気に入ったところまでできたら、コンポーネント化までしてくれる。

「pour="作りたいコンポーネント名.tsx"」という属性を、Coffeeタグに入れて保存すると。。

即時、そのコンポーネントがCompornentsフォルダに作られ、もともとのCoffeeタグまで置き換わる。

たったこれだけなのである。

全てを変えることはできなくとも。

「自然言語」だけでここまでいけるものが出てきたのは、インパクトが大きい。

早足で説明したが、これを自分で試した時、あまりの衝撃に、手が震えた。XへのPostも悩んだ。
しかし、進化を信じた。

これが新たな進化につながることを期待して。


この投稿を気に入ってもらえたら、ぜひ❤️のクリックとフォローをお願い致します。