🔍 検索
投稿する
📚 Bolt・Difyで作るAIアプリケーション開発講座

Bolt x DifyでAIアプリ開発入門

ノーコードツール「Bolt.new」を活用して、非エンジニアでも高品質なAIアプリケーションを最短で構築・公開する方法を解説します。

学習ポイント

  • Bolt.newの基本操作とWebサイトを即座にデプロイ・共有する方法
  • AIへの指示精度を高めるためのDOM（Document Object Model）の基礎知識
  • インスペクター機能やリスカッションモードを活用した効率的な開発・修正手順

本日のゴール

  • Bolt プロジェクトを新規作成し、1クリック公開（プレビューURL取得）できる。

  • DOM要素の基礎（タグ/属性/class/id/階層/選択）を理解し、要素の変更・既存アイコンの利用・配色などの簡単なUI/UX改善ができる。

本日のアジェンダ

  1. Boltを使うための事前準備をしよう：5分

  2. Boltを使うための最低限のエンジニア知識を学ぼう：10分

  3. Boltの基本的なコマンドを覚えよう：10分

  4. 実際にデザインを色々変えてみよう：15分

  5. 実際に作ったWEBサイトを開発者ツールを使って分析してみよう：10分

  6. 質問タイム：10分

1. Boltを使うための事前準備をしよう

  • Githubアカウントの作成(推奨, 第5回目以降は必須)

  • Boltアカウント／ログイン

  • 「契約書チェックAIチャットUI（Prompt）」テンプレート（講師が配布）

  • ブラウザ：最新のChrome/Edge/Safari

1. bolt.newへアクセスし、右上のSign inをクリックし、Githubでサインインを実施。

(Github アカウントがない場合はGoogle認証でログイン)

3. 以下のProjectを開いて、duplicatesする。(実際に説明するときは以下のプロンプトを打つと….ができあがります。で説明する。)

プロンプトを打ち込むと、以下のWebサイトができますと説明。

# 簡易リーガルチェック用チャットWEB — 実装フォーマットプロンプト ## 1) ゴール
PC向けのシンプルなチャットUIを作る。
Dify互換のマルチターンAPIを直接叩く（HTTP/1.1、末尾スラなし）。
--- ## 2) 初期表示（UIのみ・リクエスト送信不要）
左側（ボット側）吹き出しとして、以下をページロード時に自動表示する：

> こんにちは。契約書チェックAIです。ご依頼ありがとうございます。ご提示いただいた「Dify契約書チェックBot\_基準ドキュメント v1.0」に基づき、契約書のレビューを行う準備が整っております。お手数ですが、レビューをご希望の契約書全文をこちらのチャットにお送りください。 --- ## 3) UI要件（最低限） 初期案内メッセージを1件（ボット側） 入力欄 + 送信ボタン + 送信中インジケータ
エラーバナー（400 / 404 / 429 / 5xx を1行で表示）

localStorage と state に以下を保持：

userId（初回生成・以後固定）
conversationId（1ターン目の応答から取得）
--- ## 4) 送信先・ヘッダ・認証
URL：https://dev-app.myuuu.co.jp/v1/chat-messages

APP_TOKEN="app-LBWMkypvBNYnel75b4XkTdnM"

HTTPヘッダ：

Authorization: Bearer <APP_TOKEN>（必須）
Content-Type: application/json
（SSE時のみ）Accept: text/event-stream
--- ## 5) マルチターン送信ルール（最重要）
1ターン目：response_mode: "blocking" で呼び出し、返却JSONの conversation_id を取得して保持。
2ターン目以降：毎回 同じ user と conversation_id を指定。inputs は毎回必須（空でも {} を送る）。
ファイル：フロントでテキスト抽出→ inputs.document_text に貼る、または別APIにアップロード→参照情報を inputs に含める。
SSE：response_mode: "streaming" + Accept: text/event-stream で逐次受信。

https://bolt.new/~/sb1-ivhjqqp1

4. ここまで行ったら１回publishボタンを押してみる。

5. URLへアクセスして、デプロイされてたら成功！ここまでできたら基本的なセットアップと動作確認は終了。

(手順2の補足)

基本的には以下のPromptを打つとできるが、今回は統一的な操作を行いたいため、プロジェクトを作成してからタスクを実施する。

# 簡易リーガルチェック用チャットWEB — 実装フォーマットプロンプト ## 1) ゴール
PC向けのシンプルなチャットUIを作る。
Dify互換のマルチターンAPIを直接叩く（HTTP/1.1、末尾スラなし）。
--- ## 2) 初期表示（UIのみ・リクエスト送信不要）
左側（ボット側）吹き出しとして、以下をページロード時に自動表示する：

> こんにちは。契約書チェックAIです。ご依頼ありがとうございます。ご提示いただいた「Dify契約書チェックBot\_基準ドキュメント v1.0」に基づき、契約書のレビューを行う準備が整っております。お手数ですが、レビューをご希望の契約書全文をこちらのチャットにお送りください。 --- ## 3) UI要件（最低限） 初期案内メッセージを1件（ボット側） 入力欄 + 送信ボタン + 送信中インジケータ
エラーバナー（400 / 404 / 429 / 5xx を1行で表示）

localStorage と state に以下を保持：

userId（初回生成・以後固定）
conversationId（1ターン目の応答から取得）
--- ## 4) 送信先・ヘッダ・認証
URL：https://dev-app.myuuu.co.jp/v1/chat-messages

APP_TOKEN="app-LBWMkypvBNYnel75b4XkTdnM"

HTTPヘッダ：

Authorization: Bearer <APP_TOKEN>（必須）
Content-Type: application/json
（SSE時のみ）Accept: text/event-stream
--- ## 5) マルチターン送信ルール（最重要）
1ターン目：response_mode: "blocking" で呼び出し、返却JSONの conversation_id を取得して保持。
2ターン目以降：毎回 同じ user と conversation_id を指定。inputs は毎回必須（空でも {} を送る）。
ファイル：フロントでテキスト抽出→ inputs.document_text に貼る、または別APIにアップロード→参照情報を inputs に含める。
SSE：response_mode: "streaming" + Accept: text/event-stream で逐次受信。

2. Boltを使うための最低限のエンジニア知識を学ぼう

この講義では、Webの見方を「設計図」と「立体模型」で説明します。ページのソース表示で見えるHTMLが設計図、開発者ツールで確認できるDOMがその立体模型です。公開サイトのHTMLは誰でも閲覧可能。Webは平面ではなく、要素が重なって構成されます。要素は〈タグ・属性・中身〉の三点セット。タグ種別を正しく指定するだけでもLLMの出力品質は向上。CSSは色・余白・大きさ等の見た目、JavaScriptはホバーなどの動きを担当します。AIに依頼する際は、どのページのどの位置のどの要素かを具体的に伝え、ボタン本体か枠線やその余白なのかまで明確化します。位置指定はヘッダー／ヒーロー／お問い合わせボタンなどを起点に、画面構造の語彙で表現する練習を。重なりの意識が欠けると認識ずれが起きるため、構造把握と精密な指示が最重要です。演習で具体例を可視化し理解を深めます。

https://dom-3jik.bolt.host/

3. Boltの基本的なコマンドを覚えよう

Upload files

スクリーンショットなどのファイルがアップロードできる

PDFやjpeg, またWebサイトのスクリーンショットなどがアップロードできる。

Enhance Prompt

勝手に入力したプロンプトを解釈して、エンジニアの言葉を含めたものにLLMを使って変換してくれるツール。一見便利そうであるが、文字数が少ないとハルシネーションが入るため、上級者向けの機能です。

discussion mode

WEBサイトを編集せずに、今のWEBサイトの状態がどうなってるか？どのようにすれば良いか？など設計や現状理解を深めるために使うモード。編集させたくなくて、知りたいことがある場合はこのモードを使うと良い。

Code Preview タブの切り替え

実際にコードを編集したい場合はCode, 完成したWEBサイトを簡易的にみたい場合はPreviewで切り替える。なおboltではjshという特殊なエディタがChrome上で立ち上がり、コードを自由に編集できるように改良されている。

この機能を使うことで、例えばエンジニアにURLを共有し、コードの中身のレビューや変更などの操作を代行させることができる。

Preview画面におけるresponsive mode

アプリを作成した場合に、ターゲットセグメントによっては携帯媒体を使用してもらうことがある場合も多い。その場合に携帯画面でもデバッグができるように、

Inspector

こちらで具体的にタグを選択して、タグに対してプロンプトを打てるようになります。

使いこなすために難易度が高いので、上級者向けで、基本的に単一の命令になるようにしてください。(いっぺんに多くの命令を出してしまうと精度が落ちます。)

実際にタグを選択した例

以下ではこれらの知識を使って、実際にWEBサイトのデザインを編集してみましょう！

4. 実際にデザインを色々変えてみよう

ユーザーとBOTの吹き出しの色を変えてみよう

タグを選んで以下のプロンプトを入れる

ユーザーの吹き出し(赤色)とボットの吹き出し(青色)で配色を分けるようにしてください。

レスポンシブボタンを使って携帯に変えた場合にUIが崩壊してないことを確認する。

ただし、チャット画面が下についてないことが気になるので、

モバイル画面の上下幅を携帯全面使うように固定してください

と記載して、広げる

不要な要素を削除してみよう

今回はチャットアプリなので、ファイルアップロードボタンは不要。

文書ファイルアップロードボタンを削除して

時間表示も同様に不要なので削除。

このように最初のうちに不要だと思う要素を削除しておくことで、AIが扱う不要コンテクストが除外でき、プロンプトの精度が向上します。

ホバー効果をつけてみよう

以下のプロンプトでつけられる

テキストエリアにホバー効果をつけてください。

react iconsを使って、デザインを変えてみよう。

https://react-icons.github.io/react-icons/を見ながらデザインを選ぶ。

アイコンを選んで、タグのところを選択し、boltへ命令

また送信ボタンをinsepectして、以下のようにプロンプトを打つ。

送信ボタンを
import { IoSendSharp } from "react-icons/io5";
に変えてください

React-iconを使用して、送信押下中は**砂時計（FaHourglassEnd）**に切り替わり、完了で元に戻るようにできる。

React-iconを使用して、送信押下中は**砂時計（FaHourglassEnd）**に切り替わるようにしてください。

Publishボタンを押してデプロイし、Xでシェアしてみよう

右上のPublishボタンを押すとURLがチャット欄に出てくるので確認する

WEBサイトを確認する

discussion modeを使用して、使用されているreactのバージョンを確認してみよう。

以上ここまでで、基本的なBoltの操作の説明をさせて頂きました。

受講者の皆さんはBoltに慣れてきましたでしょうか。

次は、実際に作ったWEBサイトを見て開発者ツールで分析する基礎を学びましょう。

5. 実際に作ったWEBサイトを開発者ツールを使って分析してみよう

次に開発者ツールの紹介に移行します。

開発者ツールはフロントエンド開発のエンジニアには必須ツールでは、今日機能が追加されすぎてもはや初心者では扱えない代物になっています。全ての機能を説明すると一週間あっても時間が足りないくらいです(笑)。そこで今回MVPフェーズのデバッグの最低限の機能にピックアップして説明します。

右クリック → 検証で開発者ツールを開く

まず要素タブです。

こちらはHTMLの要素を選ぶとそれに対応するレンダリング箇所を対応させることができます。

更にスタイルタブで、どのようなDOM設計になってるかを図解として確認することができます。

これらは説明されても正直すぐわかるものではないので、ChatGPTなど使いながら触りながら意味を覚えていくと良いと思います。

inspectorとレスポンシブレンダリング機能は、開発者ツールの左上にもついており、すでに説明したBoltの機能と使い方は同じです。ただし、こちらの方が対応デバイス数が多く、様々なデバイスの検証ができます。inspectorは述べたとおりですが、こちらの場合は選択した要素のプロパティが表示されます。

tipsとして、このプロパティを画像としてboltに代入する方法も有効です。bolt自前実装のinspectorでうまく認識されない場合はこの画面も合わせてプロンプトに入れることがあります。

次にコンソールタブに関する説明です。こちらは主にプログラムからのloggingが見れる場所であり、エラーやデバッグ時に重要な情報を提供してくれます。

boltでエラーが出た場合にはこちらにもloggingされる場合が多いので、最新の情報含めて約10〜20件くらいをコピーしてプロンプトに入れるのをお勧めします。

次に最後ですが、ネットワークタブです。ここは非常に重要で、ここでは基本的にWEBサイトを通して通信した全てのHTTPリクエストを見ることができます。特に重要なのが、difyとの通信。

ご覧いただければわかるように、今回はサーバーを用意せず、APIキーを露出した状態で実装をしています。そのため、このように通信を見ることでセキュリティリスクがあるAPIキーを見ることができてしまいます。

今回はセミナーのために開放していますが、実際の運用サービスではこのようなことをしてAPIキーを盗まれた場合に、DDoS攻撃などで高度な負荷をかけたりしてユーザー側はサーバーを止めることができてしまいます。このようなセキュリティ・可用性など含めて実際に運用する際に気を付けることを講座の後半である５回目, ６回目で詳しく講義させて頂ければと思います。

以上ここまでが、Boltの基本的な操作方法をBoltを操作する上で最低限のエンジニアの知識になります。少し難しい部分もあるかと思いますが、これで基本的なWEBサイトを作ることが可能です。

ぜひみなさん手を動かして実際してみてください。