Zenn
Open5

生成AI使ってみた。claude-3.5-sonnet, bolt.new, gemini-1.5 pro

React
shadcn/ui
Claude
Claude 3.5 Sonnet
boltnew
knaka Tech-Blogknaka Tech-Blog

概要

bolt.new 生成AI的な、お試し内容になります。

  • 最近、bolt.newの関連、成果物などSNSで見かけたので、調べた内容です。

[ 公開 2024/10/16 ]

関連

https://bolt.new

使用した感想

  • 無料会員は使用制限あり。使用制限が厳しい(Pro以上は。月10M tokens～)
  • 生成ツール的として使えそうかも。
  • 簡単なアプリだと。ある程度生成できる。
  • ほぼフロント実装
  • DBまわり対象外ぽい。
  • 追加プロンプト(追加の要件)で、修正できる(失敗もあり)
  • プロンプト入力後、約２、３分で生成完了するので。速い
  • 生成後、stackblitzで開ける。ダウンロード可能
  • ダウンロードを、ローカルや、ホスティングに配置できる。

いまいちな点

  • 生成失敗で。画面が真っ白になったり。よくありました
  • Reactの場合、データは変数に設定され。再読み込みで。全て消える方式
  • next.jsの場合、サーバー側保存を依頼すると、。エラーで保存NG

生成された例、レイアウト見た目

  • chat

  • 日程表

  • TODO

  • bookmark

  • cms編集

生成されたコード

knaka Tech-Blogknaka Tech-Blog

claude-3-5-sonnet, gemini-1.5 pro 試し

  • 他の生成AI的なサービスを試してみました。

  • 両方、無料枠あり。制限の有り。

  • anthropic: claude-3-5-sonnet

  • Google AI Studio : gemini-1.5 pro

関連

  • TODO作成の試し。

  • React + vite環境は、上記のbolt.new 参考しました。

  • gemini-1.5 pro

  • 画面レイアウト、下の入力欄に。プロンプト入力　＆　実行

  • プロンプト入力後、コードをコピー
  • vite環境に、貼り付け。
  • 一部、コンポーネントのエラー出ましたが。手作業で修正
  • gemini 版のtodo app下記、画面起動できました。

  • claude-3-5-sonnet
  • anthropicの画面から、ユーザー登録、作業開始。
  • claude画面で、プロンプト入力。
  • 右側に、プレビューが表示される。
  • ダウンロードのリンク押すと、ファイル取得可能でした。

  • 上記の、vite環境にコピー。ペーストして。ローカル環境確認できました。
knaka Tech-Blogknaka Tech-Blog

claude.ai , Pro 版 課金メモ

  • しばらく, claude.ai を使用して。そろそろ使用上限に時期と予想したので。課金登録
  • 月、20 USDで。しばらく使えそうでした。
  • anthropicの、claude.ai Pro登録
  • claude.ai画面で、 Pro登録画面に移動。
  • クレカ登録の入力登録される。今回は Google Payを選択
  • 登録ボタンおすと、支払い完了。
  • Google Payは、事前にクレカ情報を登録しておく。
  • Pro登録後に、左メニューで。Pro表示に変更

  • new画面に、モデル選択が３種類に増えました。
  • Claude 3.5 Sonnet
  • Claude 3 Opus
  • Claude 3 Haiku
knaka Tech-Blogknaka Tech-Blog

Remix 2, claude.ai生成

  • Remixの、生成AI使えるか。試す内容です。
  • 感想としては、 Reactより失敗多めでした (プロンプトによるかも)
  • サーバー機能追加を指定すると。失敗が増える傾向みたい。

関連

https://claude.ai/new

remix + shadcn/ui 準備

  • プロンプト、TODO
コード生成して欲しいです。
TODO アプリ、 Remix shadcn/ui 使用したいです。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。

  • 見た目,　TODO

  • 編集、 dialog

  • フォーム編集, 入力項目を増やす。
  • action(サーバー側) で、バリデーションのエラーメッセージ表示されない。
  • 一覧に、登録データ表示されない。
  • 動作NG部分を。ひたすら手作業で修正する。
コード生成して欲しいです。
TODO アプリ、Remix shadcn/ui 使用したいです。

項目は、下記を追加したい。
title: INPUTタグ type=text
content: INPUTタグ type=text
public(公開、非公開) INPUTタグ type=radio
food_orange: INPUTタグ type=checkbox
food_apple: INPUTタグ type=checkbox
food_banana:  INPUTタグ type=checkbox
pub_date: INPUTタグ type=date
qty1: INPUTタグ type=text
qty2: INPUTタグ type=text
qty3: INPUTタグ type=text

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。


・Remix action 関数で
バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい

検証内容は、下記です。
title: １文字以下は。エラー
content: 未入力は。エラー
qty1: 未入力は。エラー
qty2: 未入力は。エラー
qty3: 未入力は。エラー
  • 見た目、Form編集

knaka Tech-Blogknaka Tech-Blog

Remix 2, claude.ai生成 react-table

  • Remix + tanstack/react-tablesの組み合わせ
  • ソート、検索、ページング可能
  • 前回の、Remix claude.ai生成の、フォーム画面から登録
  • react-table は、一括生成が難航予想しました。
  • react-tableサンプルコード、AI出力を。手作業で組み込む。

  • 見た目、table

  • 見た目、form: table行イベントから。dialog起動

参考のコード