Build and Deploy a SaaS AI Agent Platform | Next.js 15, React, Better Auth, Polar | Full Course 2025

Meet AI - YouTube Video Transcript Summary

Key Concepts:

• AI Agents: AI trained for specific roles in video calls.
• Stream Video SDK: Used for live video and audio.
• OpenAI Realtime API: Powers real-time AI responses.
• Ingest: Used for background jobs.
• Agent Kit: Used for AI-driven features.
• Better AL: Authentication solution.
• Polar: Payment infrastructure.
• Drizzle ORM: Object-relational mapper for database interaction.
• Neon: Postgres database provider.
• Tailwind CSS: Styling framework.
• Shadcn UI: Collection of accessible UI components.
• TRPC: End-to-end typesafe APIs.
• React Query (Tanstack Query): Data fetching and caching library.
• Nooks: Library for synchronizing React state with URL query parameters.
• DiceBear: Avatar generation library.
• Stream Video and Chat SDK: Provides video and chat functionalities.
• Ingest: Background job processing framework.
• Code Rabbit AI: AI-powered code review tool.

1. Introduction to Meet AI

• Meet AI is a video calling app powered by AI agents.
• AI agents are trained for specific roles (language tutor, interview coach, sales assistant, etc.).
• The AI actively helps during the call, not just providing summaries or transcripts.

2. Creating a New Meeting with an AI Agent

• Click the "New Meeting" button.
• Name the meeting (e.g., "Startup Coaching Call").
• Create a new AI agent or select an existing one.
• Provide instructions for the agent (e.g., "be direct, hyperdriven, and a bit over the top").
• Select the agent and start the meeting.

3. Live AI Interaction During the Call

• The AI agent responds in real-time.
• Example: Asking "Hey Hustle Coach what makes a good startup idea" elicits a response about massive market potential, a unique value proposition, and scalability.
• Powered by Stream Video SDK and OpenAI Realtime API.

4. Post-Call Processing and Content Generation

• After the call, the meeting switches to "processing" status.
• Background jobs are triggered automatically, powered by Ingest and Agent Kit.
• Workflows handle fetching the transcript, summarizing with AI, and saving the results to the database.
• When processing is complete, the meeting is marked as "completed."

5. Available Content After Processing

• Summary: A clean breakdown of what was discussed, organized by topic and timestamp.
• Transcript: Fully searchable, with highlighted search terms.
• Recording: The entire call is recorded and available to replay.
• Chat GPT-like Interface: Powered by Stream Chat SDK, allows asking specific questions about the meeting (e.g., "who asked for advice?").

6. Subscription Model and Responsiveness

• Meet AI is a SaaS product with a subscription model.
• Free trial has limits; upgrading is required for more usage.
• Checkout is powered by Polar.
• Authentication is powered by Better AL, a free and open-source authentication solution.
• The app is fully responsive, adapting to mobile devices.

7. Development Workflow and Test Stack

• The course follows a proper Git workflow.
• Each chapter ends with a new branch and a pull request.
• Code reviews are automated using Code Rabbit AI.
• Test Stack:
  • Next.js 15 with React 19: Full-stack framework with server components and server-side rendering.
  • TRPC: Full-stack type safety with Tanstack Query.
  • Drizzle ORM: Database interaction with Postgres provided by Neon.
  • Tailwind version 4: Styling combined with Chats UI.
  • Better AL: Authentication.
  • Polar: Payments.
  • Stream: Video and chat SDK.
  • Ingest: Background jobs.
  • Code Rabbit: AI-powered code reviews.
  • Open AI: Real-time agents and AI-driven features.
• Deployment to production is planned.

8. Setting Up the Project (Chapter 1)

• Confirming system requirements for Node.js (at least 18.18 or higher).
• Installing Next.js using npx [email protected].
• Selecting options during installation (TypeScript, ESLint, Tailwind CSS, source directory, app router, Turbo pack).
• Setting up Visual Studio Code as the IDE.
• Confirming versions of React, Next.js, TypeScript, and Tailwind CSS in package.json.
• Confirming config files (tsconfig.json, postcss.config.js, next.config.js, eslint.config.js).
• Confirming the presence of the public and src folders.
• Starting the app using npm run dev and verifying the result at localhost:3000.
• Installing ChatsN UI using npx [email protected] init --legacy-peer-deps.
• Adding all ChatsN UI components at once using npx shadcn-ui@latest add * --legacy-peer-deps.
• Pushing the project to GitHub following a proper Git workflow.

9. Setting Up the Database and ORM (Chapter 2)

• Obtaining a Postgres database using Neon (neon.tech).
• Creating a new project in Neon and setting the database name.
• Obtaining the database URL connection string.
• Creating a .env file in the root of the application and adding the database URL.
• Installing Drizzle ORM packages using npm install drizzle-orm neon-serverless @neondatabase/serverless @types/pg --legacy-peer-deps.
• Installing Drizzle Kit and TSX as dev dependencies using npm install drizzle-kit tsx -D --legacy-peer-deps.
• Creating a database folder in src and an index.ts file inside.
• Adding the connection variable to index.ts.
• Creating a schema.ts file in src/database and defining a table.
• Setting up a drizzle.config.ts file in the root of the application.
• Applying changes to the database using npx drizzle-kit push.
• Verifying the changes in Neon and Drizzle Studio using npx drizzle-kit studio.
• Creating scripts in package.json for database push and studio.
• Creating, reviewing, and merging a pull request.

10. Authentication Setup with Better AL (Chapter 3)

• Installing Better AL using npm install [email protected] --legacy-peer-deps.
• Setting the BETTER_AL_SECRET environment variable.
• Setting the BETTER_AL_URL environment variable to http://localhost:3000.
• Creating a Better AL instance in src/lib/alf.ts.
• Configuring the database to use the Drizzle adapter.
• Generating the database tables using npx better-al-cli generate.
• Copying the generated schema from all.schema.ts to src/database/schema.ts.
• Pushing the changes to the Neon database using npm run database push.
• Adding email and password authentication methods.
• Creating API routes in src/app/api/auth/[...all]/route.ts.
• Creating a client instance in src/lib/alf-client.ts.
• Creating a basic UI in page.tsx to create a new user.
• Creating, reviewing, and merging a pull request.

11. Authentication UI Development (Chapter 4)

• Creating sign-in and sign-up routes with page.tsx files.
• Creating an auth route group with a layout.tsx file for shared styling.
• Creating an alf module with UI/views for signin-view.tsx and signup-view.tsx.
• Using use client in the views to enable client-side interactivity.
• Developing the sign-in view with a form using Shadcn UI components.
• Developing the sign-up view with a form using Shadcn UI components.
• Creating, reviewing, and merging a pull request.

12. Social Provider Login and Route Protection (Chapter 5)

• Setting up GitHub social login:
  • Creating a new OAuth app in GitHub developer settings.
  • Adding the redirect URL.
  • Obtaining the client ID and secret.
  • Configuring the GitHub provider in alf.ts.
  • Adding the onClick handler to the GitHub button in the sign-in and sign-up views.
• Setting up Google social login:
  • Creating a new project in the Google Cloud Console.
  • Configuring the OAuth consent screen.
  • Creating a client ID and secret.
  • Configuring the Google provider in alf.ts.
  • Adding the onClick handler to the Google button in the sign-in and sign-up views.
• Protecting non-auth pages:
  • Using getServerSession in page.tsx to redirect unauthenticated users to the sign-in page.
• Protecting auth pages:
  • Using getServerSession in sign-in/page.tsx and sign-up/page.tsx to redirect authenticated users to the homepage.
• Adding icons to the social login buttons.
• Creating, reviewing, and merging a pull request.

13. Dashboard Sidebar Development (Chapter 6)

• Creating a dashboard route group.
• Moving the main page.tsx into the dashboard route group.
• Creating a layout.tsx file for the dashboard layout.
• Creating a dashboard module with UI/components for dashboard-sidebar.tsx.
• Developing the dashboard sidebar component with navigation links and an upgrade item.
• Modifying the globals.css file to obtain the theme for the project.
• Using the new themes to fix the gradient colors in the authentication views.
• Creating, reviewing, and merging a pull request.

14. Dashboard Navbar Development (Chapter 7)

• Creating a dashboard-navbar.tsx component in the dashboard module.
• Adding a collapse button to toggle the sidebar.
• Adding a search button to open a command model.
• Implementing the command model with a search input and a command list.
• Adding a responsive drawer to the dashboard user button for mobile devices.
• Creating, reviewing, and merging a pull request.

15. TRPC Setup (Chapter 8)

• Installing TRPC dependencies using npm install @trpc/server@next @trpc/client@next @trpc/react-query@next @tanstack/react-query@latest zod.
• Creating a TRPC router in src/trpc/init.ts.
• Creating an app router in src/trpc/routers/_app.ts.
• Adding a dynamic TRPC route in src/app/api/trpc/[trpc]/route.ts.
• Creating a query client factory in src/trpc/query-client.ts.
• Creating a TRPC client for client components in src/trpc/client.tsx.
• Mounting the provider in the root of the application in src/app/layout.tsx.
• Creating a TRPC caller for server components in src/trpc/server.tsx.
• Experimenting with TRPC in a client component and a server component.
• Creating, reviewing, and merging a pull request.

16. Agents Entity Setup (Chapter 9)

• Installing nano ID using npm install nano ID --legacy-peer-deps.
• Creating the agents schema in src/database/schema.ts.
• Running npm run database push to apply the changes to the database.
• Creating the agents module with server procedures in src/modules/agents/server/procedures.ts.
• Adding the agents router to the app router in src/trpc/routers/_app.ts.
• Creating the agents page in src/app/dashboard/agents/page.tsx.
• Creating the agents view in src/modules/agents/UI/views/agents-view.tsx.
• Creating, reviewing, and merging a pull request.

17. Authentication Socials (Chapter 10)

• Implementing social provider login for GitHub and Google.
• Learning how to protect non-ALF pages.
• Creating, reviewing, and merging a pull request.

18. Authentication UI (Chapter 11)

• Developing the UI for our authentication.
• Creating the AL pages, out layout, and out module.
• Creating the AL views or components.
• Creating, reviewing, and merging a pull request.

19. Agents Data Table (Chapter 12)

• Developing the agents data table.
• Creating a list header component.
• Adding a new agent button.
• Creating a reusable loading and error states.
• Creating, reviewing, and merging a pull request.

20. Agents Filters (Chapter 13)

• Implementing agents filters.
• Modifying the agents get many procedure.
• Adding a package called Nuks.
• Implementing the UI components for the filters.
• Synchronizing the React server component filters and client filters.
• Creating, reviewing, and merging a pull request.

21. Agent Page (Chapter 14)

• Developing the individual agent page.
• Modifying the existing agents get one procedure.
• Creating the agent ID server component page.
• Adding a data table redirect on click.
• Creating the agent ID client view.
• Creating, reviewing, and merging a pull request.

22. Agent Update and Delete (Chapter 15)

• Implementing update and delete functionality for an individual agent.
• Adding agents procedure agents.update update procedure.
• Adding the actual edit and delete UI.
• Creating, reviewing, and merging a pull request.

23. Meetings Setup (Chapter 16)

• Setting up the meetings entity in our project.
• Adding the meetings schema.
• Adding the meetings module.
• Adding the meetings pages.
• Creating, reviewing, and merging a pull request.

24. Meetings Form (Chapter 17)

• Developing the meetings form.
• Creating a list header component.
• Adding a new meeting button.
• Creating a reusable loading and error states.
• Creating, reviewing, and merging a pull request.

25. Meetings Data Table (Chapter 18)

• Developing the meetings data table.
• Making the existing data table component reusable.
• Adding the empty state component for the meetings view.
• Creating, reviewing, and merging a pull request.

26. Meetings Filters (Chapter 19)

• Implementing the meetings filters.
• Modifying the meetings get many procedure.
• Adding a package called Nuks.
• Implementing the UI components for the filters.
• Synchronizing the React server component filters and client filters.
• Creating, reviewing, and merging a pull request.

27. Meeting Page (Chapter 20)

• Developing the individual meeting ID page.
• Modifying the agents get one procedure.
• Adding the agents remove procedure.
• Adding the agent ID page and the agent ID view.
• Creating, reviewing, and merging a pull request.

28. Meeting Variants (Chapter 21)

• Adding meeting variants.
• Creating cancelled, processing, active, completed, and upcoming states.
• Creating, reviewing, and merging a pull request.

29. Connecting Agents (Chapter 22)

• Connecting the agent to our video call.
• Obtaining the OpenAI API key.
• Setting up enrock to expose our local host.
• Setting up stream web hook handler.
• Creating, reviewing, and merging a pull request.

30. Background Jobs (Chapter 23)

• Implementing background jobs into our project.
• Completing the three web hook events from our previous web hook implementation.
• Configuring Ingest.
• Creating, reviewing, and merging a pull request.

31. Completed State (Chapter 24)

• Implementing the completed state with the new summary.
• Creating, reviewing, and merging a pull request.