StackBlitz と ChatGPT でチャット形式でUIを構築できるツールを作ってみた
先日作ったツールの紹介です。近い未来のプログラミングを感じられました。
🎨 作ったもの
チャット形式で UI を構築できるツールです。
こちらからアクセスできます。私の ChatGPT API の無料枠が残っている間は API キーの設定は不要で動きます。
🛠️ 仕組み
ざっくり仕組みや工夫したところを紹介します。
コードはすべて以下リポジトリで公開しています。
UI 作成の流れ
ChatGPT の吐き出すコードを、リアルタイムで描画する仕組みは以下のようになっています。
- 1️⃣ チャットで指示された内容を ChatGPT API に送信、回答を取得
- 2️⃣ 回答からコード部分をパースして抽出、StackBlitz の Iframe に送信
- 3️⃣ 結果を描画
StackBlitz の Iframe 上に描画することで、Eval 時のセキュリティ上の問題も軽減しています。
プロンプト
System プロンプトとして、いくつか制約条件を与えています。
ChatGPT の出力をパースしてコードを抽出する都合上、コードを html のコードブロックに記載することや、インラインで JS を書くことなどを設定しています。
コードのパース
正規表現で ChatGPT API の出力をパースしています。
チャット形式での UI 構築
チャット形式で UI を構築していくために、過去のやりとりも送信する必要があります。
単純に実装すると今までの会話をすべて送れば良いのですがそうするとすぐに Token の上限に達してしまいます。それを回避するため、最新の 2 件のやりとりだけを送るようにしています。この 2 件は ChatGPT の最新の回答と、それに対する自分の返答です。
これだけで、デモ動画のような連続した UI 構築が可能になります。
StackBlitz の Iframe へのコード送信
StackBlitz の Iframe にコードを反映するために、StackBlitz の applyFsDiff API を使っています。
このメソッドで、StackBlitz に準備した Vite プロジェクトの index.html を更新することで、IFrame 上の UI を更新しています。
おわりに
ChatGPT のレスポンスが遅く、まだまださくさく UI を構築できるとは言えないですし、作られる UI も微妙なデザインが多いです。ですが、近い未来は、こうやって自然言語でプログラミングをしていく可能性もあるなーと感じました。
LLM 関連は進化が早くて追いついて行くのが大変ですし、自分の築いてきた知識が不要なものになる怖さはありますが、なるべく楽しんでキャッチアップしていきたいです。
追記
こちらが未来でした。
Discussion