ChatGPTでもArtifactsが使いたい！

Claude Artifacts すごすぎなので、ChatGPTでも実現したい

Claude Artifacts を使うとこのように簡単にモックが作成できるそうです。

ただ、課金するのもアレだし、慣れたChatGPTでどうにかしたいという気持ちがあります。

そんな中で、以下の非公式ライブラリを見つけました。
厳密にはChatGPTではなく、OpenAI APIを使用します。
（会社が同じだからセーフ）

お遊び程度であれば、Claudeに課金するよりも安く済ませそうです。

インストール方法

Readme.md に書いてあるとおりですが、クローンして、npm installして、.envファイルにOpenAIのAPIキーを書いてビルドして実行するだけです。

おすすめカスタマイズ

安く済ませる

クローンしてきただけだと、利用モデルが gpt-4oにハードコードされているので、gpt-4o-miniを使うことで多少精度は落ちますがかなりお安く済ませられます。

pages/api/chat.js

    const stream = await openai.chat.completions.create({
      stream: true,
-      model: 'gpt-4o'
+      model: 'gpt-4o-mini',
      messages: conversations[conversationId]
    })

もっと安くするならローカルLLMも使えるそうです。これもReadme.md#ollama-supportに記載があります。

日本語で指示したい

日本語変換を確定させるためにEnterを押すと、その時点で送信されてしまいストレスがあるので、Shift+EnterやCommand+Enterで送信するように修正しておくと便利です。

components/AutoGrowingInput.jsx

  const handleKeyDown = (e) => {
-   if (e.key === 'Enter' && !e.shiftKey) {
+   if (e.key === 'Enter' && (e.shiftKey || e.metaKey)) {
      onSubmit(e)
    }
  }

試してみる

冒頭の天気予報アプリを再現してみます。
プロンプトとして以下を試します。
(初手ReactだとなぜかPREVIEWが動かなかったのでhtml/css指定)

prompt_1

天気予報アプリを作りたい。reactは使わずhtml/cssだけで。
- 都道府県を選べるセレクトボックス
- 東京の5日間の天気
  - 日付と天気のアイコンを横に日付ごとに横に並べて表示
  - 最高気温・最低気温をそれぞれ表示
- 東京の2週間の天気
  - 1週間の天気と同じ情報を、日付ごとに縦に並べる

以下のようにHTML/CSSを書き出してくれます。

プレビューもまあまあいい感じです。

これに対して数回会話してブラッシュアップすると以下のようになります。
結構いい感じ。

イマイチなところ

イマイチなところも上げておきます。

• 一回一回全ファイル書き直すので、無駄に待ち時間があったりしてだるいです。
• たまにエラーでプレビューが表示されない
• Claudeではtailwindがデフォルトで使えるらしいが、このライブラリで扱うには追加でカスタマイズが必要そう

結論

確かに数分でこれくらいのプロトタイプが作れるのは便利だなと思います。
Claude Artifactsも使ってみたいですね。あとはChatGPT本家が対応するのにも期待ですね。