🐣

Claude3.5 Sonnet の Artifacts 機能で作ったアプリをローカルで動かす

2024/07/07に公開

Intro

表題通りです。

Artifacts すごいですよね、割とざっくりな指示で簡単なアプリが作れてしまい、機能とUIをまとめて作ってくれるので、ChatGPTの「Code Interpreter」より一般の人もとっつきやすい機能だと思いました。

ただ、claudeのサイトで動かすとレスポンスがもっさりしていることがあったり、ちょっとの修正でも丸ごともう一回作り直して表示するので、ちょっとしたレイアウト修正をしている間に無料枠を使い切ってしまい手持ち無沙汰になってしまいことがあり、不満を抱えてました。

そこでArtifactsで作ったコードをそのまま動かしてみたいと思い、試行錯誤した結果を共有します。

まず、ぶっちゃけArtifactsで作った後に、「ローカルで動くようにPlain HTMLで出力して」みたいなプロンプトで指示をすれば、ローカルで動かすことはできるコードは出力してくれます。npmとか使いたくない人はそっちの方法をお勧めします。

まず、Artifactsで動く際の基本構成は以下の通りです。

使われないこともありますが、大体この辺りのLibraryが使われているようです。

恐らく、Artifactsの裏側のプロンプトでこの辺りのLibraryを使うような指示を出しているのだと思います。（たまにマイナーLibraryを使ってエラーになっているのを見かけました。）

npm などはインストール済みなことを前提にして、アプリ作成のコードが以下になります。

npx create-next-app@latest # この際Tailwindを使うオプションはYesにしてください
npx shadcn-ui@latest init
npm install recharts # 必要に応じて入れてください

これで大体準備ができました。
Artifactsが作ったコードを保存して、xxx.(jsx|tsx)
page.tsxあたりから実行です。簡単ですね。

レイアウトをダークモードにしたかったり、GitHubPageにデプロイするためのGitHub Actionsの設定をしたり、Next.jsのお作法など手間取った部分はあります。。

上記の説明だけじゃうまくいかない！って人は以下のRepositoryを参考にしていただけると幸いです。

最終的にできたサイトは以下になります。
Artifactsで作ったものをタブでわけて個別に見れるようになっています。（画面遷移でもよかったのですが、shadcnのタブを使ってみたくてこのようにしました。）

今回初めて、shadcnを触ったのですが、欲しいコンポーネントだけ取ってくる仕組みや、依存関係がだいぶ低い作り、内部コードのシンプルさ、必要に応じてカスタマイズできるような柔軟性などかなり好みのLibraryだったので、今度何かしら作る際はshadcnを使いたいなと思いました。

Artifactsは最初の一歩を踏み出す時の面倒さや、そこまで楽しくない記述部分を最初から書いてくれるので、本当に助かります。
また、shadcnという知らなかったものも知れたので、好き嫌いせず、色々触れていった方がいいなと感じました。

以上、参考になりましたら幸いです。