bolt.newとChatGPTを連携し、SEOアシスタントアプリを作る
リクエストをいただいていたbolt.newで作成した画面とChatGPTを連携して、下記アプリを作ってみることにする。
SEOアシスタントアプリ
概要:
キーワードを入力すると、ChatGPTがSEO向けの最適な「タイトル」「ディスクリプション」「関連キーワード」などを生成。
boltの画面で結果を一覧表示。
活用例:
小規模ビジネス: 商品やサービスのSEO対策を迅速に行いたい。 ブロガー: 記事を書く前にタイトルアイデアを得たい。
実装手順
1. 必要な準備
(1) OpenAI APIのセットアップ
OpenAIの公式サイトからAPIキーを取得します。
OpenAI API ドキュメント を参考にしてください。
(2) bolt.new アカウント
bolt.newでアプリケーションを作成する環境を準備します。
bolt.newの画面にカスタムUIコンポーネントを追加する手順を確認します。
2. 機能設計
(1) 必要な機能
入力フォーム:
キーワードを入力するボックス。
送信ボタン:
ChatGPTにキーワードを送信。
結果表示エリア:
SEOタイトル、ディスクリプション、関連キーワードを一覧で表示。
(2) ユーザーの流れ
ユーザーがboltの画面でキーワードを入力。
ChatGPT APIがそのキーワードを元にSEOタイトルとディスクリプションを生成。
boltの画面で結果を表示。
OpenAI APIのセットアップを実施してみよう
■APIキーの取得
ダッシュボードの「API keys」メニューから、
APIキーはセキュリティのため、コードに直接記載せず環境変数として管理
Windows
システム環境変数に保存する：
「システム環境変数の編集」を開く。
環境変数に「OPENAI_API_KEY」という名前でキーを登録。
それでは、bolt.new にお願いしてみよう
＜とりあえず、お願いした内容＞
bolt.newで作成した画面とChatGPTを連携して、下記アプリを作りたい。
SEOアシスタントアプリ
概要:
キーワードを入力すると、ChatGPTがSEO向けの最適な「タイトル」「ディスクリプション」「関連キーワード」などを生成。
boltの画面で結果を一覧表示。
必要な構成と概要
<アプリの仕組み>
ユーザーがbolt.newの画面でキーワードを入力。
フロントエンドからバックエンド（FlaskまたはNode.js）にリクエストを送信。
バックエンドがOpenAI APIを呼び出して、SEOのタイトル、ディスクリプション、関連キーワードを生成。
結果をbolt.newの画面に表示。実装画面イメージ
入力フォーム:
キーワードを入力するテキストボックス。
送信ボタン:
フロントエンドからバックエンドにリクエストを送信。
結果表示エリア:
ChatGPTが生成した結果（タイトル、ディスクリプション、関連キーワード）を表示するスペース。
3.ChatGPTのAPIキーは、windowsのシステム環境変数に「OPENAI_API_KEY」という名前で登録済
APIキーワードは、環境変数からは取ってくれて無い感じですね
でも無事表示されました。
ちなみに作成したロゴのイメージを貼って、デザインがどう変わるか試してみました。
うまく画像が表示されませんでした。
添付画像の扱いは、ちょっと苦手なのかな。