【ITニュース解説】🚀 I Built a Block-Based AI Prompt Builder with Next.js and Supabase - Here's What I Learned

AI（人工知能）の活用が広がる中で、AIに指示を出す「プロンプト」の管理は多くの開発者やユーザーにとって課題となっている。プロンプトは、テキストファイルやメモアプリ、チャットツールなど様々な場所に散らばりがちで、それを編集したり、過去に効果的だったバージョンを探し出したりする作業は非常に煩雑になりやすい。このような問題を解決するために開発されたのが「Prompt Builder」というツールである。このツールは、AIプロンプトの作成、整理、そして共有を一元的に行えるブロックベースのワークスペースとして機能する。

Prompt Builderの最大の特徴は、従来の「壁のような長いテキスト」でプロンプトを管理するのではなく、個別の「ブロック」を組み合わせてプロンプトを構築する点にある。例えば、「文脈」「指示」「例」「出力形式」といった要素をそれぞれ独立したブロックとして扱い、これらをドラッグ＆ドロップで並べ替えることで、プロンプトの構成を直感的に変更できる。各ブロックには、表示・非表示の切り替え機能があり、プロンプトの様々なバリエーションを簡単にテストできる。また、カスタムタグを付与したり、音声入力でテキストを書き起こしたり、個別にコピー＆ペーストや内容のクリアを行ったりすることも可能だ。最も注目すべき機能は、作成中のプロンプトがリアルタイムでどのように結合されるかをプレビュー画面で確認できる点であり、同時に文字数も表示されるため、長さの調整も容易である。

このPrompt Builderを支える技術スタックは、現代のWebアプリケーション開発で広く用いられている強力なツール群で構成されている。コアとなる部分では、Reactフレームワークを基盤とし、サーバーサイドレンダリングやルーティングなどの機能を提供するNext.js 14（App Router方式）が採用されている。データ管理とユーザー認証には、PostgreSQLデータベースをバックエンドとするBaaS（Backend as a Service）であるSupabaseが使われている。これにより、データベースの構築や認証システムの開発にかかる手間を大幅に削減している。課金システムには、世界的に広く利用されているStripeが導入され、有料機能の提供を可能にしている。ユーザーインターフェースのデザインは、Utility-FirstなCSSフレームワークであるTailwind CSSと、その上で構築された再利用可能なUIコンポーネントライブラリであるshadcn/uiによって実現されている。アプリケーションの状態管理においては、エディタのようなUIコンポーネント内部の状態管理には軽量なZustandが、サーバーから取得したデータなどの非同期な状態管理にはTanStack Queryがそれぞれ活用されている。また、ドラッグ＆ドロップ機能の実装には、柔軟性が高く人気のあるライブラリである@dnd-kitが用いられている。テキストエリアが入力内容に合わせて自動で拡大する機能にはreact-textarea-autosizeが、画面上部に表示される一時的な通知にはsonnerが、そしてダークモードの切り替え機能にはnext-themesがそれぞれ採用されており、ユーザー体験の向上に貢献している。

アーキテクチャ設計においては、いくつかの重要な決定がなされている。ブロックの保存戦略としては、SupabaseのPostgreSQLデータベースで提供されるJSONBというデータ型が用いられている。JSONBは、JSON形式のデータをデータベース内で効率的に保存・検索できるデータ型であり、ブロックのような柔軟な構造を持つデータを扱うのに非常に適している。これにより、将来的にブロックの種類やプロパティが変更されても、データベーススキーマを頻繁に修正することなく対応できる。また、ユーザーがサインアップせずにプロンプトを共有できる機能を実現するために、nanoidというライブラリでユニークな短いIDを生成し、そのIDとプロンプトの内容を公開用のテーブルに保存する仕組みが導入されている。これにより、手軽にプロンプトを共有できるため、ツールの普及に役立っている。リアルタイムプレビューのパフォーマンス最適化も重要な課題であった。ユーザーがキーボード入力を行うたびに全体が再レンダリングされると動作が重くなるため、ReactのReact.memo機能を使って変更がないコンポーネントの再レンダリングを防ぎ、プレビューの更新を一定時間遅らせる「デバウンス」処理を導入している。さらに、ブロックの数が多くなった場合には、画面に表示されている部分のみをレンダリングする「仮想化」技術を@tanstack/react-virtualを用いて採用することで、スムーズな操作感を維持している。

Prompt Builderには、特に注目すべきクールな機能がいくつかある。Pro版の機能として提供される音声入力と翻訳機能はその一つだ。ユーザーが音声でプロンプトを入力すると、それがテキストに変換され、さらに必要に応じて別の言語に翻訳される。これにより、より多様な言語でのプロンプト作成が可能となる。先に述べたドラッグ＆ドロップ機能は、@dnd-kitライブラリを活用して実装されており、直感的でスムーズなブロックの並べ替えを実現している。また、Pro版では変数システムも提供されており、「こんにちは {{name}}, {{topic}}について」のように、プロンプト内で再利用可能なプレースホルダーを設定できるため、定型的なプロンプトの作成と管理がさらに効率的になる。

このPrompt BuilderはすでにMVP（Minimum Viable Product、必要最低限の機能を持つ製品）としてローンチされており、アカウント登録なしで試用できる。無料ティアでは、3つのプロンプト、1プロンプトあたり5ブロック、10個の共有リンクが利用可能であり、Pro版にアップグレードすることで、機能が無制限になり、エクスポート機能やカスタムタグ、変数システムなどが利用できるようになる。開発を通じて得られた教訓としては、まず「共有機能は開発の初期段階から考慮すべき」という点だ。認証なしで共有を可能にするのは実装が複雑だったが、ツールの普及には不可欠であったと開発者は感じている。また、「JSONBは柔軟なデータ構造に非常に役立つ」という点も挙げられている。正規化されたテーブル構造よりも、JSONBを使うことで将来的な変更に強く、柔軟なデータモデルを実現できた。さらに、「プレビューのパフォーマンスはユーザー体験において極めて重要」であり、ユーザーは即座のフィードバックを期待するため、積極的に最適化に取り組むべきであるという教訓も得られた。SaaS（Software as a Service）の課金システムにおいては、「Stripeが依然として最高である」という認識があり、その開発者体験の良さが高く評価されている。今後の展望としては、チームでの共同作業を可能にするワークスペース機能、プロンプトのマーケットプレイス、APIアクセス、Chromeブラウザ拡張機能の開発、さらなるAIモデルとの連携強化などが計画されている。

このPrompt Builderは、AIプロンプトの管理という現代的な課題に対して、ブロックベースという視覚的で直感的なアプローチと、最新のWeb技術を組み合わせることで、効率的かつ柔軟なソリューションを提供している。開発者が直面した課題や、それを解決するために採用した技術、そしてそこから得られた教訓は、システムエンジニアを目指す初心者にとっても多くの学びとなるだろう。