こんにちは、AIメディアのテックブログ担当です。今回は、Replit AgentとDifyを使って、1日でLLM（大規模言語モデル）を組み込んだ簡易SaaSを開発してみました。初心者の方でも理解できるように、手順やポイントを詳しく解説します。
動画で知りたい方はこちら。
Replit AgentとDifyの基礎知識
Replit Agentとは
Replit Agentは、コードを自動生成してくれるAIツールです。プログラミングの知識が少なくても、自然言語で指示を出すだけでアプリケーションを作成できます。前回の記事でも詳しく紹介していますので、興味のある方はこちらをご覧ください。
Difyとは
Difyは、LLMを簡単に利用できるプラットフォームです。
複雑な設定なしで、LLMのモデル切り替えやLLMを活用したテキスト生成やデータ取得が可能になります。ワークフローの開発、チャットボット作成などがGUIベースで簡単に行え、LLMを使ったアプリ開発のハードルを下げる強力なツールです。
Replit AgentでSaaSの基本機能を実装
会員登録とログイン機能の実装
まず、ユーザーが利用できるように会員登録とログイン機能を実装しました。Replit Agentに以下のように指示を出します。
- 「ユーザーがメールアドレスとパスワードで登録できるようにして」
- 「ログインしたユーザーのみがアクセスできるページを作成して」
これだけで、基本的な認証機能が自動的に生成されます。
会員登録やログイン画面の一例
会員だけに提供したいサービスである場合に必須機能・ページである2つの機能も一瞬で作ってくれました。パスワード再発行ページ、処理については少々複雑なので今回はスキップします。複雑な要件でなければ、10分程度でサクッと開発してくれるのでぜひ試してみてください。UIも指定することなく、よしなにこれを生成してくれるのが本当にすごい。
会員登録画面の一例
ログインページ画面の一例
メールアドレスとパスワードを入力すると、ログイン後の画面にリダイレクトします。
ログイン後画面で、メール作成と管理ができるSaaSを開発しています。ログイン後は右上にログアウト導線が表示されています。クリックするとログアウトできます。
一覧機能と新規作成機能の実装
次に、ユーザーがデータを操作できるように一覧表示と新規作成機能を追加します。
- 「ユーザーの投稿一覧を表示して」
- 「新しい投稿を作成できるフォームを作って」
Replit Agentは、これらの指示に基づいて必要なコードを生成し、データベースとの連携も自動的に行ってくれます。
機能ではなく、ページを個別で開発して欲しい場合は、ユーザー投稿一覧ページを作って、一覧の一つずつの投稿内容はこれにして、と厳密に指定しましょう。厳密に指定しなければ、自分の思う要件にならないことが多いので注意が必要です。
DifyでLLMや複雑な処理を組み込み
ワークフローの設定方法
LLMを組み込むために、Difyのワークフローを設定します。以下の手順で進めます。
- Difyに登録し、新しいプロジェクトを作成
- LLMの設定や処理を作成し、ワークフローを完成させる
- 細かいDify側の処理や方法についてはまた別途テックブログなどで書いていきます。
- Difyのワークフローを本サービスから動かすために、Dify側でワークフローのAPIキーを取得
- Replit Agentに「DifyのAPIキーを使って、テキスト生成機能を追加して」と指示する
- Replit Agent側にAPIキーを登録する
テキスト生成と表示
Difyを組み込むことで、ユーザーが入力した内容をもとにテキストを生成し、表示する機能が実装できます。
- ユーザーが入力フォームにテキストを入力
- Difyが、その情報を元にワークフローを動かす
- LLMを使ってテキストを生成
- 生成されたテキストを、Replit Agentで開発したSaaSの画面でユーザーに表示
この流れで、LLMを活用したSaaSの機能が完成します。付随する処理は別途Replit Agentに依頼し続けると基本的なユーザー体験を提供できます。
AIでのメール生成と管理SaaSの作成画面
メール生成をするときに、営業メールの作成の内容をどうして欲しいのかをインプットします。ここにSalesforceやHubspotなどのSFA、CRMサービスのデータを入れるとそれを考慮して個社別のメールが生成できるようになります。
メールのタイトル、本文はAI生成ボタンをクリックすると生成され、保存することも可能です。裏側ではDifyのワークフローが動いており、そこで細かい営業メール生成のノウハウなどが入っています。なので、毎回プロンプトに大量のデータを入れなくても済みます。
このように、ReplitとDifyを組み合わせるとAI・LLM機能があるSaaSを開発することができます。
開発を通して学んだこと
要件定義の重要性
開発中に感じたのは、要件定義の明確さが重要だということです。Replit Agentは高機能ですが、指示が曖昧だと期待通りの動作をしません。
- Notionなどのツールを使って要件を整理
- 要件定義・整理を自動化、AIで実現できるサービスであるGear.indigoなどの使用してみるとよりスムーズに開発の依頼が可能になるかもしれない
- 必要なボタンや入力エリアを具体的に記述
- ユーザーストーリーを簡潔にまとめる
こうすることで、Replit Agentが意図を正確に理解し、開発がスムーズになります。
効率的な開発のコツ
開発中に何度も試行錯誤が必要でした。その中で得たコツを共有します。
- 問題が解決しない場合は、新規プロジェクトを作成する
- 無駄な時間を省き、クリーンな環境で再スタート
- 小さな機能ごとにテストを行う
- エラーの原因を特定しやすくなる
定期的にサービスが止まる
Replit Agentでは、定期的にサービスが止まるようになっている。（この解決策は、次のテックブログで永続的に動かす方法などについてご紹介します。）
以下のような画面になったときには、定期的にシステムの再起動が必要です。Runボタンを押すか、Agentに再起動してと送ると再起動がスタートします。
consoleタブで、以下のような画面になったら再起動が開始しています。
まとめ
Replit AgentとDifyを組み合わせることで、1日でLLMを組み込んだ簡易的なSaaSを開発することができました。Replit Agentでは、自然言語で開発初心者でも取り組みやすい環境が整っているので、ぜひチャレンジしてみてください。
内部リンク
最後に
開発を進める中で、要件定義やプロジェクト管理の重要性を再認識しました。効率的な開発には、ツールの活用と計画的な進行が不可欠です。これからも新しい技術に挑戦し、皆さんと共有していきたいと思います。
AI×SaaSを開発したい方はぜひお問い合わせよりご連絡くださいませ。
