【ITニュース解説】How I built a credit-based AI website builder with FastAPI and Gemini
2026年10月05日に「Dev.to」が公開したITニュース「How I built a credit-based AI website builder with FastAPI and Gemini」について初心者にもわかりやすく解説しています。
ITニュース概要
AIウェブサイトビルダー「Talivo」の開発事例。FastAPIと無料のGemini APIで、プロンプトからHTMLサイトを生成する。クレジット管理はDBの原子操作で安全にし、失敗時は返金。モデル出力は常に検証が重要。AI連携だけでなく、認証や管理者機能など周辺システムの構築が成功の鍵だと解説する。
ITニュース解説
今回紹介するプロジェクト「Talivo」は、フリーランスやウェブ制作会社が自分たちで運用し、顧客に提供できるAIウェブサイトビルダーの開発事例だ。既存のAIウェブサイトビルダーの多くが、利用者が他社のプラットフォーム上でサービスを提供する形であるのに対し、Talivoは利用者が自社のブランドでウェブサイト生成サービスを提供できることを目指している。つまり、ユーザーがAIの力を借りて簡単にウェブサイトを作成できるだけでなく、その生成サービスを「販売」できるツールとして設計されている。
Talivoの最終目標は、ユーザーが「ボローニャにある家族経営のパン屋のための温かみのあるウェブサイト」のような簡単な指示を入力するだけで、デザインとコンテンツが完成したウェブサイトが手に入ることだ。そして、このようなウェブサイトの生成には「クレジット」が必要となる。このクレジットの配布や料金設定は、Talivoを運用する側が自由に設定できる仕組みとなっている。
この目標を実現するために、システムは大きく四つの要素で構成されている。一つ目は「認証(Auth)」で、誰がウェブサイト生成を要求しているのかを特定する機能だ。二つ目は「クレジット」で、ユーザーがサイト生成を行うのに十分な残高があるかを判断する。三つ目は「生成(Generation)」で、ユーザーの指示に基づいて実際のHTMLウェブサイトを作成する中核部分だ。そして四つ目は「管理(Admin)」で、システム管理者(Talivoの運用者)がユーザーやクレジット残高を管理するための機能である。
技術選定においては、「FastAPI」と「Gemini」が採用された。FastAPIはPython製の高速なウェブフレームワークで、非同期処理を簡単に扱える点、記述量が少ないにもかかわらず高機能な点、Pydanticというライブラリによる自動的な入力値の検証機能がある点が評価された。特にTalivoはソースコードごと販売されるため、コードの可読性が高く、他の開発者が容易に理解し拡張できる点が重要視された。
GeminiはGoogleが提供する大規模言語モデルで、このプロジェクトではそのAPIが利用されている。Geminiが選ばれた最大の理由は、Google AI Studioから無料でAPIキーを取得できることだ。これにより、Talivoを購入したユーザーはクレジットカード情報を登録することなく、すぐにウェブサイト生成機能を使い始めることができる。これは「ダウンロードしてすぐに使える」という製品コンセプトにおいて、初期の障壁を取り除く上で非常に重要だった。また、GeminiのFlashモデルは応答速度が速く、ユーザーが生成完了を待つ時間が短く済むという利点もあった。
ウェブサイト生成の中核部分は、Geminiに対して工夫された指示(システムプロンプト)を与えることで実現している。この指示では、「あなたはウェブデザインの専門家であること」「一つの完全なHTMLドキュメントのみを返すこと」「CSSはすべてHTMLファイル内に記述すること」「モダンでレスポンシブなデザインであること」「実際のコンテンツを生成し、意味のないダミーテキスト(Lorem ipsum)を使わないこと」「HTML以外のマークダウン記法や説明文は一切出力しないこと」といった具体的な要件を厳しく指定している。
しかし、AIモデルの出力は、たとえ厳密な指示を与えても、時には指示通りにならないことがある。例えば、HTMLコードをマークダウンのコードブロック(html...)で囲んで返してしまうケースだ。そのため、Geminiから返ってきたテキストは、必ず「クリーンアップ処理」を通過させる。この処理では、余分なマークダウン記号などを除去し、結果が正しくHTMLドキュメントとして成立しているかを検証する。もしHTMLとして不完全であれば、それは失敗として処理される。これは「モデルの出力もユーザー入力と同様に信頼せず、必ず検証する」という重要な教訓に基づいている。
次に、このサービスの収益性に関わる重要な部分が「クレジット管理」である。単純にユーザーのクレジット残高をチェックし、減算するという処理を複数同時に行うと問題が発生する可能性がある。例えば、残高が1クレジットしかないユーザーがほぼ同時に二つの生成リクエストを送った場合、両方のリクエストが「残高あり」と判断され、結果として二回分のサイト生成が行われてしまうことが起こりうる。これを「競合状態(race condition)」と呼ぶ。
この問題を解決するために、Talivoではクレジットのチェックと減算を「原子的な(atomic)データベース操作」として実装している。具体的には、データベースに対して「ユーザーIDが一致し、かつクレジットが1以上である場合に限り、クレジットを1減らす」という命令を一度に実行する。この命令が実行された結果、データベースで実際にデータが更新された(rowcountが1)場合にのみ、クレジット消費が成功したと判断する。これにより、複数のリクエストが同時に来ても、クレジットは正確に一度だけ減算され、残高がマイナスになったり、無料生成が行われたりするのを防ぐことができる。
さらに、ユーザーの信頼を得るために重要なのは「課金と返金」のルールだ。GeminiのAPI呼び出しは、タイムアウトしたり、前述のように不正な形式の出力を返したりして、サイト生成が失敗することがある。このような場合、ユーザーはクレジットを消費したのに何も得られず、不満を感じてしまう。そこでTalivoでは、「まずクレジットを消費し、サイト生成が成功すればそれで完了、もし失敗した場合は消費したクレジットをすぐに返金する」という仕組みを採用している。これにより、ユーザーは安心してサービスを利用でき、運用者への信頼感が高まる。
認証機能については、あえてシンプルな設計が採用された。メールアドレスとパスワードによる一般的な登録方式で、セキュリティのためにパスワードは平文ではなくハッシュ化して保存される。FastAPIのDepends()という機能を使うことで、クレジットを消費するような重要な処理を行うエンドポイントでは、必ずユーザー認証が事前に実行されるように設定されており、認証の漏れを防ぐ工夫がされている。
管理パネルも機能が絞られている。システム運用者は、ユーザー一覧、各ユーザーのクレジット残高、そして手動でクレジットを追加する機能を利用できる。自動決済機能(クレジットカード決済など)はV1では意図的に含められなかった。これは、運用者が現金、銀行振込、請求書払いなど、あらゆる方法で顧客から料金を受け取れる柔軟性を持たせるためであり、特定の決済サービスに縛られず、手数料を回避する目的もある。もちろん、ソースコードが提供されているため、必要であればStripeなどの決済サービスを後から追加することも可能だ。
非開発者でもTalivoを簡単にインストールできるように、Windows向けには仮想環境の構築、必要なライブラリのインストール、サーバーの起動までを自動で行うinstall.batスクリプトが用意されている。macOSやLinux、一般的なサーバー環境ではPython 3.10以降とGemini APIキーを用意するだけで実行できる。
このプロジェクトを通じて得られた教訓として、AI関連製品の開発においてAIモデルの呼び出し自体は比較的簡単な部分であり、むしろクレジット管理、ユーザー認証、エラー発生時の適切な処理、そして製品のインストール容易性といった周辺機能にこそ、開発工数の大半と製品価値の大部分が宿るという点が挙げられている。また、AIモデルの出力は常にユーザー入力と同様に厳しく検証すべきであり、課金システムは最初から競合状態を避けるための原子的な設計とすべきだ。そして、失敗時には積極的に返金することでユーザーからの信頼を築くことが重要となる。最後に、動くデモを提供することが、単なるスクリーンショットよりも開発者や潜在的な顧客を説得する上で最も効果的だということも示されている。