Build and Deploy a SaaS AI Agent Platform | Next.js 15, React, Better Auth, Polar | Part 2/2

Key Concepts

• AI Agent Integration: Real-time AI personas for video calls.
• Transcript & Chat: Searchable meeting transcripts and AI-powered chat using OpenAI.
• Subscription Management: Implementing free trials and premium tiers via Polar.
• TRPC & Drizzle ORM: Type-safe API procedures and database management.
• Deployment: Vercel deployment, environment variable management, and Ingest integration.
• Stream IO: Real-time video, audio, and chat infrastructure.

---

1. Searchable Transcripts & AI Chat

The tutorial extends the meeting experience by adding transcript retrieval and an AI-powered chat interface.

• Transcript Procedure: A protected TRPC procedure (getTranscript) fetches the transcript URL, parses it using JSONL, and maps speaker IDs to user/agent profiles.
• UI Implementation: Uses react-highlight-words to allow users to search and highlight specific terms within the transcript.
• AI Chat: Uses stream-chat for real-time messaging. The generateChatToken procedure handles authentication. The chat interface is powered by a ChatProvider and ChatUI component, which integrates with OpenAI to provide context-aware responses based on meeting summaries and agent instructions.

2. Subscription & Premium Tier Framework

The app implements a monetization strategy using Polar.

• Polar Integration: The Polar SDK is integrated into the Better Auth flow. By setting createCustomerOnSignUp: true, the app automatically synchronizes users with Polar customers, using the database externalId to track subscription status without relying solely on webhooks.
• Premium Procedure: A custom premiumProcedure was created to gate access to features (e.g., creating agents or meetings). It checks if a user has an active subscription; if not, it enforces limits (e.g., max 1 free agent/meeting) and redirects users to an /upgrade page if they exceed these limits.
• Dashboard Trial Component: A UI component displays usage progress (e.g., "1 out of 1 agents used") using a Progress bar, providing a clear visual indicator for free-tier users.

3. Deployment & Infrastructure

The final phase focuses on moving the application from local development to production on Vercel.

• Environment Configuration: Critical steps include updating NEXT_PUBLIC_APP_URL and BETTER_AUTH_URL to the production domain.
• OAuth Updates: GitHub and Google Cloud Console settings must be updated to include the production callback URLs.
• Ingest Integration: The app uses Ingest for background job processing. To ensure Ingest can communicate with a protected Vercel deployment, a "Deployment Protection Bypass" key is configured in the Vercel dashboard and added to the Ingest integration settings.
• Build Fixes: The tutorial notes the use of npm install --legacy-peer-deps as an override in Vercel to resolve dependency conflicts during the build process.

4. Key Methodologies & Processes

• Git Workflow: The project follows a strict branch-based workflow (e.g., 26-transcript-and-chat, 27-payments, 28-bugs), with all changes reviewed via CodeRabbit AI before merging into the main branch.
• Cache Invalidation: To ensure the UI reflects usage limits in real-time, the app invalidates the freeUsage query whenever a user creates or deletes a meeting/agent.
• Redirects: A next.config.js redirect was implemented to force the root URL (/) to redirect to /meetings, improving user flow.

5. Notable Quotes

• "This is probably the most important line in this entire setup because this will allow us to synchronize our users with polar customers without us needing to constantly listen to a web hook." — Regarding the Polar/Better Auth integration.
• "If you do find something serious, feel free to leave a comment or send me an email so I can take a look." — Encouraging community engagement for bug resolution.

Synthesis

This tutorial series provides a comprehensive blueprint for building a production-ready AI SaaS application. By combining Stream IO for real-time communication, OpenAI for intelligent interaction, and Polar for subscription management, the project demonstrates how to handle complex features like AI-driven chat, usage-based gating, and secure deployment. The emphasis on type safety (TRPC/Drizzle), automated testing/review (CodeRabbit), and robust deployment configurations (Vercel/Ingest) offers a professional-grade framework for developers.