【makereal tldraw（draw-a-ui）】5秒で書いたワイヤーフレームをおしゃれなサイトに変えるAIツールを使ってみた
WEELメディア事業部LLMリサーチャーの藤崎です。
ブラウザ上で描いたワイヤーフレームから自動でHTMLのコードを出力することができる、tldrawのmakerealをご存知でしょうか？
makerealのGitHubでのスターはなんと10,000を超えていて、その注目度の高さが伺えますよね。
今までのコーディング作業が自動化されるとなると、使ってみたい！と思う人も多いはず。。。
実際、動かしてみたのですが本当にびっくりしました！
サッと描いたイラストから自動で実際に動作するコードを生成するなんて、まるで映画『アイアンマン』において、トニー・スタークが自宅の研究所で直感的なインターフェースを操作しているかのようです。
あとは空間上にホログラム化できれば完璧なのですが・・・！
この記事ではmakerealの導入方法や使い方、どこまでできるのかの検証を行いますのでぜひ最後までご覧ください。
特に、コーディングがもっと楽になれば・・・と考えているHTMLコーダーの方、必見です！
makereal（draw-a-ui）の概要
makerealはブラウザ上で描いたワイヤーフレームからHTMLのコードを自動で出力することができるツールです。
GPT-4のAPIとNext.jsを使っており、ローカルで動作します。
ローカルで環境構築を行う生成AIだとGPUが必要だったりとそこそこ高いマシンスペックが要求されますが、makerealはノートPCでも動かすことができました。
makereal（draw-a-ui）の料金体系
makerealはMIT licenseとなっていますので、無料で利用することができます。
ただ、gpt4-vison APIを使うので別途OpenAI APIの費用が必要ですのでご注意ください。
なお、ノーコード開発について詳しく知りたい方は、下記の記事を合わせてご確認ください。
→【生成AI×ノーコード】AI時代のノーコード開発をAIエンジニアが解説
makereal（draw-a-ui）の使い方
では早速、makerealを使ってみましょう！
まずGitからソースコードを任意のフォルダにダウンロードします。
git clone https://github.com/SawyerHood/draw-a-ui次に、生成された「draw-a-ui」というフォルダに移動します。
cd draw-a-uiそして、draw-a-uiのフォルダ内にOpenAI APIの設定ファイルを作成します。
「OpenAIKEYを入力」の箇所は各自のKEYを入力してくださいね。
echo "OPENAI_API_KEY=OpenAIKEYを入力" > .env.local最後にinstallコマンドでdraw-a-uiをインストールして完了です！
npm installdraw-a-uiを起動するには下記のコマンドを実行します。
npm run dev「Ready」の表示がでたらブラウザで「http://localhost:3000」にアクセスしてください。
真っ白なキャンバスの、お絵描きツールのような画面が表示されればmakerealを使うことができます！
makereal（draw-a-ui）を実際に使ってみた
これ以降は、以下の記事からご確認ください。
他の記事もご覧になりたい方は、こちらをご覧ください。