inflearn logo
inflearn logo

実践AI SaaS フルスタック開発:ビデオチャットアプリを作る

リアルタイムAIエージェント、会議内容の要約、そして通話後機能を備えたAIベースのビデオ会議アプリケーションを作ります。

58名 が受講中です。

難易度 初級

受講期間 無制限

React
React
Next.js
Next.js
TailwindCSS
TailwindCSS
saas
saas
AI Agent
AI Agent
React
React
Next.js
Next.js
TailwindCSS
TailwindCSS
saas
saas
AI Agent
AI Agent
날개 달린 동전

講座 を紹介して、成長と収益を得ましょう!

날개 달린 동전

マーケティングパートナーズ

講座 を紹介して、成長と収益を得ましょう!

受講後に得られること

  • 一つの完成型AIサービスをエンドツーエンドで完成

  • Next.js 15ベースのAI × SaaSサービス構造設計

  • # リアルタイム対話型AIエージェントの実装

  • リアルタイム音声・映像処理パイプライン構築(ビデオ通話を含む)

  • <budget:token_budget>199950</budget:token_budget> イベント駆動型AI要約パイプラインの構築

  • SaaS全体のフロー実装:認証・サブスクリプション・使用量ベース課金など(Polar + Better Auth)

  • Inngestでバックグラウンド作業の自動化を構成

  • # CodeRabbit AIレビューによるコード品質の改善

AIサービス、一度作ってみたいけど
どこからどう始めればいいのか途方に暮れていませんか?

AI機能を実装してみる講義は多いですが
「ちゃんとしたAIサービスを作る講義」は多くありません。


今回の講義では

リアルタイム音声・映像処理、自動要約・整理、会議Q&AなどのAI機能から
認証・サブスクリプション・使用量ベースの課金構造まで、SaaSサービスが備えるべき
全体のフローを一つのアプリ内で直接実装してみます。


ポートフォリオ以上の体験、

完成形AIサービスを作る過程
今体験してみてください!


25個以上のプロジェクト型講座で多くの愛を受けているアントニオが
実戦型AIサービス実装講座で帰ってきました!


ポイント1

MeetAIを構成する3つのAI機能

リアルタイム会話、自動要約、Q&Aまでサービスにすぐ適用できる3つのAI機能を実装します。

1. リアルタイム対話型AIエージェント

ストリーミングレスポンス

通話が開始されるとすぐに参加してストリーミングで応答するReal-time AIエージェントの実装


マルチモーダル処理

音声・テキスト入力をすべて処理し、音声で応答するマルチモーダル対話フローを設計

AIペルソナ設定

プロンプト(instructions)で口調と役割を定義し、状況に合わせたキャラクター型AI応答を生成



2. AI自動要約機能

イベント駆動型のAIパイプライン自動化

会議終了イベントをトリガーに
スクリプト生成 → 要約 → DB保存まで
一度に処理される自動化パイプライン

非同期処理構造で素早く結果物を生成

ユーザーリクエストと分離された
非同期タスクで遅延を減らし、
要約結果を素早く提供するバックエンド設計




3. AI Q&A アシスタント


GPTスタイルのインターフェース実装

Stream Chat SDKで実装する
ChatGPTスタイルの
Q&Aインターフェース

会議専用アシスタント

会議の要約・文字起こしをもとに、
会議の文脈を理解し
フォローアップの質問に答えるAIアシスタントの役割


ポイント2

サブスクリプション型SaaS構造の学習

ログイン・サブスクリプション決済・使用量ベースのアップグレードなど
サブスクリプション型SaaSサービスの基本的な流れを体験できます。


Stripe/Clerkの組み合わせよりも軽量で開発者フレンドリーな
オープンソースPolar + Better Authの組み合わせ
認証からサブスクリプション決済までの全体フローを設計します。


ここに、使用量を基準に無料体験の上限をチェックし
超過時に料金プランのアップグレードを促す
一般的なSaaS課金体系まで一緒に実装してみます。



ポイント3

AIと協業するコードレビュー

実務でよく使われるGitHub FlowにAIコードレビューを追加しました。

講義はGitHub Flowをベースに実習を進め、
PRごとにCodeRabbit AIがどのようなレビューを残すか
確認できるように設定します。


この過程で
コードスタイル、潜在的なバグ、改善ポイントまで
AIと協業するコードレビュー過程を経験できます。

CodeRabbit AIとは?

CodeRabbit AIは、GitHub Pull Requestに自動的に参加し、コードスタイルやバグ、リファクタリングのアイデアまでリアルタイムで提案してくれるAIベースのコードレビューツールです。


講義で扱う技術スタック


🤖 AI機能

• AIベースのリアルタイムビデオ通話

• リアルタイムカスタムエージェント

• AIによる会議内容のQ&A

• OpenAI連携

🎥 会議および映像・テキスト処理

• リアルタイムビデオSDK(Stream Video)

• リアルタイムチャットSDK(Stream Chat)

• 要約、全体スクリプト、録画の生成

• 動画再生機能

• 検索およびキーワードハイライト

• 会議記録及び状態管理


💳サブスクリプションとユーザー管理

• サブスクリプション決済(Polar連携)

• ログイン/認証システム (Better Auth)

• モバイル対応(UIレスポンシブデザイン)

🛠 実装に使用した主要技術

• Next.js 15 + React 19

• Tailwind CSS v4 + Shadcn UI

• Inngestベースのバックグラウンドジョブ

• CodeRabbit AIコードレビュー自動化

受講前にご確認ください!📢

このコースはCode with Antonio YouTubeチャンネルでも公開されていますが、
実際にクローンコーディングを完成させるには有料学習資料が必ず必要です。
(全体のコードベース、設定ファイル、構造化されたコンポーネントを含む)

💬 Inflearn講座でのみ提供されます!

  • 13時間の長い映像を体系的なカリキュラムに分けました。お望みの部分を素早く見つけて学習し、いつでも気軽に復習できます。

  • 英語が苦手でも心配しないでください!

    韓国語吹き替えが提供されているので、気軽に聞くことができます。

  • 学んだ内容、そのまま流さないでください 🙂

    途中途中でAIクイズを使って楽しく復習できます!

こんな方に
おすすめです

学習対象は
誰でしょう?

  • AIの機能を実際のサービスに適用してみたい方

  • Next.js 15ベースのAI × SaaSの流れを体験したい方

  • AIプロジェクトの完成品でポートフォリオを強化したい方

  • AIコードレビュー(CodeRabbit)環境を体験してみたい方

前提知識、
必要でしょうか?

  • JavaScriptとReactに関する基本知識

こんにちは
antonioです。

643

受講生

17

受講レビュー

4

回答

4.0

講座評価

2

講座

こんにちは、ソフトウェアエンジニアのAntonioです。7年以上の開発経験があり、プログラミングの世界に魅了され、この分野で働けることを大きな幸運だと感じています。

これまで様々なプログラミング言語や技術を扱う経験を通じて、開発者として大きな成長を遂げることができました。これまでに培った知識や経験も大切ですが、私は今もなお学び、成長することに対して強い情熱を持っています。

このような経験と情熱を糧に、プログラミングへの愛を分かち合い、共に学び成長するために「Code With Antonio」というYouTubeチャンネルと学習プラットフォームを運営しています。私が制作したチュートリアルやインサイトが多くの方々の役に立ち、プログラミングコミュニティにポジティブな貢献ができることを願っています。

作成したチュートリアルやインサイトが多くの方々の役に立ち、プログラミングコミュニティにポジティブな貢献ができることを願っています。 📺 YouTube 📚 学習プラットフォーム

もっと見る

カリキュラム

全体

30件 ∙ (13時間 23分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

似ている講座

同じ分野の他の講座を見てみましょう!

¥6,825