Zenn
Open15

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

AI
shadcn/ui
Claude
Claude 3.5 Sonnet
bolt.new
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起動

参考のコード

knaka Tech-Blogknaka Tech-Blog

Claude.ai生成　Remix 2 , 日程表

  • 生成AI Remix、成果物の続編になります。
  • スケージュール管理的、月単位表示、追加、編集、削除できる。
  • 見た目

  • 見た目、編集dialog

DB連携、 D1 database

  • 永続化できない為、手作業で DB保存機能を追加
  • d1 + CF-workers API経由
  • アプリは、 vercel等にデプロイしておく。
knaka Tech-Blogknaka Tech-Blog

Claude.ai生成　Remix , chat(チャット)アプリ

  • 生成AI Remix、成果物の続編になります。
  • chat アプリ試作的メモです。

関連

プロンプト

コード生成して欲しいです。
chat アプリ、 React , shadcn/ui 使用したいです。

・投稿データ、ダイアログ入力したい。
・投稿データ、削除したい。
・スレッド(返信) 表示を。ダイアログ表示したいです。
・スレッド(返信) 登録を。ダイアログ追加したいです。
・スレッド(返信) 削除機能を追加したい。
  • 見た目

  • 見た目、編集、スレッド一覧 dialog

DB連携、 D1 database

  • 永続化できない為、手作業で DB保存機能を追加
  • UI一部変更
  • d1 + CF-workers API経由
  • アプリは、 vercel等にデプロイしておく。
knaka Tech-Blogknaka Tech-Blog

Claude.ai生成　mermaid 表示、編集 React

  • 生成AI Remix、成果物の続編になります。
  • 前の、CRUD的な画面 AI出力済を。カスタマイズし、mermaid 表示等のメモです。
  • mermaidが対応する作図であれば、表示できそうです。
  • 表示画面が、React SSR構成で、mermaid.js はCNDから読み込む方式。

関連

  • 見た目、 ER図

  • gantt (ガントチャート)

  • mermaid 編集(dialog)

  • リスト

DB連携、 D1 database

  • 生成AIで。永続化むずかしい為、手作業で DB保存機能を追加
  • UI一部変更
  • d1 + CF-workers API経由
  • アプリは、 vercel等にデプロイしておく。
knaka Tech-Blogknaka Tech-Blog

Claude.ai生成　タスク管理 React

  • 生成AI 成果物の続編になります。
  • 前の、CRUD的な画面 AI出力を。カスタマイズ、タスク管理のメモです。

関連

  • 見た目、編集 dialog

  • 日程 gantt (mermaid ガントチャート)

  • Task リスト

DB連携、 D1 database

  • AI出力で、永続化は難しい為。手作業で DB保存機能を追加
  • UI一部変更
  • d1 + CF-workers API経由
  • アプリは、 vercel等にデプロイしておく。
knaka Tech-Blogknaka Tech-Blog

Claude.ai生成　Form + tanstack/react-table

  • claude.ai生成AI 成果物の続編になります。
  • 生成AIで、最近react-table　出力できそうな場合ありましたので。メモです
  • CRUD画面 参考的な内容です
  • chatGpt, gemini は。ほぼ生成NGの結果でした。
  • 動作NGの部分もありましたが。ほぼ生成できました。
  • 生成時間は、追加プロンプト含む。５～１０分です。
  • アカウントによって。同様な出力でない場合あるかもしれません。

関連

  • 見た目、編集 dialog

  • 一覧

プロンプト参考

  • 下記、３回
コード生成して欲しいです。
TODO アプリ、React , shadcn/ui 使用したいです。

項目は、下記を追加したい。
title: INPUTタグ type=text
content: textarea
form_type: INPUTタグ type=text
public(公開、非公開) INPUTタグ type=radio
food_orange: INPUTタグ type=checkbox
food_apple: INPUTタグ type=checkbox
food_banana:  INPUTタグ type=checkbox
food_melon:  INPUTタグ type=checkbox
food_grape:  INPUTタグ type=checkbox
date_publish: INPUTタグ type=date
date_update1: INPUTタグ type=date
date_update2: INPUTタグ type=date
date_update3: INPUTタグ type=date
option_text_1: textarea
option_text_2: textarea
option_text_3: textarea
category_ict:  INPUTタグ type=checkbox
category_sport:  INPUTタグ type=checkbox
category_food:  INPUTタグ type=checkbox
category_drink:  INPUTタグ type=checkbox
qty1: INPUTタグ type=text
qty2: INPUTタグ type=text
qty3: INPUTタグ type=text


・TODOの追加機能、。ダイアログで編集したいです。
・TODOの編集機能。ダイアログで編集したいです。
・TODOの削除、追加したいです。
・TODOの検索を、追加したいです。
  • 2回目
コード生成して欲しいです。
上記の、
バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい

項目は、下記になります。
title: １文字以下は。エラー
content: 未入力は。エラー
form_type: 未入力は。エラー
qty1: 未入力は。エラー
qty2: 未入力は。エラー
qty3: 未入力は。エラー
  • 3回目
コード生成して欲しいです。
上記の、
リストを、tanstack/react-table 使用したいです。
knaka Tech-Blogknaka Tech-Blog

Claude.ai生成, sqlite + Remix DB連携

  • 生成AI 成果物の続編になります。
  • sqlite等連携、最近SNSの例を見た為。試す例になります。
  • 生成時間は、追加プロンプト含む。１０分ほど です。
  • アカウントによって。同様な出力でない場合あるかもしれません。
  • TODOに、DB連携を追加。
  • AI出力は、Remix actio内で。DB書き込んでるようでした。

関連

プロンプト参考

  • 下記、３回。　TODO作成、バリデーション、DB連携の順です。
コード生成して欲しいです。
TODO アプリ、Remix shadcn/ui 使用したいです。

・TODOの追加機能を、ダイアログで編集したいです。
・TODOの編集機能を、ダイアログで編集したいです。
・TODOの削除機能を、追加したいです。
・TODOの検索機能を、追加したいです。
  • 2回目
コード生成して欲しいです。
上記、
Remix action 関数で
バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい

検証内容は、下記です。
TODOデータ: 未入力は、エラー
  • 3回目
上記、
データベースと、連携してほしい。
sqlite に、データを保存したい。

外観

  • 見た目、編集 dialog

  • 一覧

Setup

  • ORM指定しない場合、 Prisma実装になりました。

  • prisma install手順、Claude 解説を参考(Claude desktop)

npm install @prisma/client
npm install -D prisma
#
npx prisma generate
npx prisma migrate dev --name init
  • Remix + shadcnUI 環境 組み込み、DB登録できました。
knaka Tech-Blogknaka Tech-Blog

Claude.ai生成 Sqlite + Express.js + React

  • 生成AI 成果物の続編になります。
  • 生成時間は、追加プロンプト含む。 5分ほど です。
  • アカウントによって。同様な出力でない場合あるかもしれません。
  • 前の、 Remix DB連携と構成似ています。
  • TODOに、DB連携を追加。
  • ORMは、prisma を指定。
  • テストは、ローカル sqlite DB連携しました。

関連

  • SELECT 実行、登録後。
$ sqlite3  prisma/dev.db
SQLite version 3.37.2 2022-01-06 13:25:41
Enter ".help" for usage hints.
sqlite> SELECT * FROM Todo;
2|t2bbb|0|1731970144688|1731970208561
4|t3|0|1731975578321|1731975578321
5|t4|0|1731975581914|1731975581914
sqlite>
  • 見た目、編集 dialog

プロンプト参考

  • 下記、2回。
コード生成して欲しいです。
CRUD アプリ、Express.js, React,  shadcn/ui 使用したいです。

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

・バリデーション追加したい。react-hook-form未使用にしたい
npmは zod 使用したい。
検証内容は、下記です。
TODOデータ: 未入力は、エラー

データベースと、連携してほしい。
sqlite に、データを保存したい。
  • 2回目
上記、
sqlite 接続は、 prismaを使用したい。

Setup

  • prisma install手順、Claude 解説を参考(Claude desktop)

npm install @prisma/client
npm install prisma --save-dev

npx prisma init
npx prisma migrate dev --name init
npx prisma generate
  • Express 環境 , 組み込み、DB登録できました。

修正したコード

knaka Tech-Blogknaka Tech-Blog

Claude.ai生成 , postgres + Express.js + React

  • postgres + 生成AI の例になります。
  • 生成AI 成果物の続編になります。
  • 生成時間は、追加プロンプト含む。 5分ほど です。
  • アカウントによって。同様な出力でない場合あるかもしれません。
  • 前の、 sqlite DB連携と構成。ほぼ、そのまま使用します。
  • ORMは、prisma を指定。

関連

準備

  • postgresを準備する
  • schema.prisma設定を、postgresに変更する。
  • schema.prisma: postgres変更
  • 下記、db接続先等を変更する。
  • .envに、接続先を設定
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
  • prisma初期化、migration : 前のsqliteと同様です。
bunx prisma init
bunx prisma migrate dev --name init
bunx prisma generate

Test

  • 登録後、SELECT実行、 psql
user1# SELECT * FROM "Todo";
 id | title | completed |        createdAt        |        updatedAt
----+-------+-----------+-------------------------+-------------------------
  1 | t1    | f         | 2024-11-19 23:25:14.085 | 2024-11-19 23:25:14.085
  2 | t2    | f         | 2024-11-19 23:25:16.91  | 2024-11-19 23:25:16.91
  3 | t3bb  | f         | 2024-11-19 23:25:20.551 | 2024-11-19 23:25:24.752
(3 rows)
  • pgAdmin 確認

  • 編集画面、前と同様

補足、docker環境で、postgres接続

knaka Tech-Blogknaka Tech-Blog

Claude.ai生成 sqlite + Express.js + React ユーザー作成

  • sqlite DB + 生成AI の例になります。
  • ユーザー登録を、sqlite prisma実装になります。
  • 生成AI 成果物の続編になります。
  • 生成時間は、追加プロンプト含む。 5分ほど です。
  • アカウントによって。同様な出力でない場合あるかもしれません。
  • ログイン画面は、前の実装と同様です。middleware　でログイン判定します。

関連

AI生成、修正したコード

  • 見た目、ユーザー登録(sqlite)

  • ログイン画面

プロンプト

コード生成して欲しいです。
ユーザー作成画面
Express.js, React,  shadcn/ui 使用したいです。

・入力項目は、下記にして欲しい。
名前: INPUT タグ　type=text
メールアドレス: INPUT タグ　type=text
パスワード: INPUT タグ　type=password

・パスワード暗号化は、bcrypt を使用したい。

・データベースと、連携してほしい。
sqlite に、データを保存したい。
sqlite 接続は、 prismaを使用したい。
  • AI画面ログ。バックエンド

knaka Tech-Blogknaka Tech-Blog

Claude.ai生成 sqlite + Express.js + tanstack/react-table

  • sqlite DB + 生成AI の例になります。
  • 生成AI 成果物の続編になります。
  • 前のsqlite prisma実装　CRUD的画面にtanstack react-table追加 (ほぼ手作業)
  • 行指定ソート、ページング追加。
  • 検索は、AI生成済を、そのまま使用。

関連

AI生成済 + 修正したコード

  • 一覧 , react-table

  • 編集dialog(前とほぼ同様)

  • prisma migrate, 前と同様
bunx prisma init
bunx prisma migrate dev --name init
bunx prisma generate