# build a SaaS with Gemini 3 in Cursor

Source: https://www.youtube.com/watch?v=ag7kbLFlPyA
Recap page: https://rapidrecap.app/video/ag7kbLFlPyA
Generated: 2025-11-19T15:05:04.967+00:00

---
## Quick Overview

The video successfully refactors an Open SaaS template demo app to use OpenAI's Structured Outputs feature by implementing a collaborative chat interface, which allows for iterative plan refinement before committing tasks to the final schedule, demonstrating a more robust and user-friendly planning workflow than direct function calling.

**Key Points:**
- The core refactoring involved switching the `generateScheduleWithGpt` function to use the `openai.beta.chat.completions.parse` method with `zodResponseFormat` for structured output.
- A new collaborative planning flow was introduced, replacing the immediate schedule generation with a chat interface where users can review and iterate on the AI-suggested plan before acceptance.
- The plan involves backend updates in `app/src/demo-ai-app/operations.ts` to define `PlannerResponseSchema` and implement `getAgentResponse` and `saveGeneratedPlan` actions.
- Frontend updates in `app/src/demo-ai-app/DemoAppPage.tsx` include creating a `PlanningChat` component to handle chat history, display proposed plans with "Preview" and "Accept" buttons, and pass tasks/hours to the chat.
- The speaker tested the new feature by inputting tasks like 'film it all for a dope video' and received a structured, prioritized schedule that they could collaboratively refine via chat.
- The model `gpt-4o-mini` was suggested over `gpt-3.5-turbo` due to better support for Structured Outputs and cost-effectiveness.
- The resulting daily schedule successfully broke down main tasks into subtasks, showing high, medium, and low priorities clearly.

![Screenshot at 00:12: The presenter navigates the Open SaaS landing page, highlighting the project's popularity with over 12.9K GitHub stars, before transitioning to the code environment to begin the refactoring process.](https://ss.rapidrecap.app/screens/ag7kbLFlPyA/00-00-12.png)

**Context:** The video demonstrates a technical enhancement to an existing AI-powered daily scheduler demo application, which was originally built using Wasp and relied on direct function calling to OpenAI's API for schedule generation. The presenter aims to improve this process by introducing a conversational, collaborative planning interface that leverages OpenAI's Structured Outputs feature for more reliable, schema-enforced responses.

## Detailed Analysis

The presenter walks through the process of refactoring a demo SaaS application, specifically the AI Day Scheduler, to utilize OpenAI's Structured Outputs feature instead of traditional function calling. The main goal is to introduce a collaborative chat interface where the user and AI can refine the generated schedule before it is committed. The plan involves specific backend updates in `app/src/demo-ai-app/operations.ts` to define a `PlannerResponseSchema` using Zod, implement new actions like `getAgentResponse` (which uses `openai.beta.chat.completions.parse` with the schema) and `saveGeneratedPlan`, and move credit decrement logic. Frontend changes focus on creating a `PlanningChat` component in `app/src/demo-ai-app/DemoAppPage.tsx` to manage chat history, display proposed plans with 'Preview' and 'Accept' buttons, and integrate this new flow to replace the old 'Generate Schedule' button. The demo successfully shows the AI prioritizing tasks based on user input and then offering a detailed breakdown of subtasks upon request, which is then committed to the final schedule upon user acceptance, proving the effectiveness and robustness of the structured output approach.

### Initial State & Goal

- Open SaaS template used direct function calling
- Goal is to refactor to use OpenAI Structured Outputs for collaborative planning
- Demo app is an AI Day Scheduler

### Backend Refactoring

- Refactor `generateScheduleWithGpt` in `operations.ts`
- Define `PlannerResponseSchema` using Zod object matching schedule structure
- Implement `getAgentResponse` using `.parse()` and `saveGeneratedPlan` action.

### Wasp Configuration

- Register new actions `getAgentResponse` and `saveGeneratedPlan` in `app/main.wasp` to expose them to the frontend.

### Frontend Implementation

- Create `PlanningChat` component in `DemoAppPage.tsx`
- Display chat history (User vs AI)
- Handle 'Proposed Plan' messages with 'Preview'/'Accept' buttons
- Replace 'Generate Schedule' button with chat initiation flow.

### Demonstration & Results

- User inputs tasks ('film it all for a dope video', 'refactor my saas app', 'learn gemini 3 ai model for coding')
- AI generates a prioritized plan
- User queries subtasks via chat
- AI provides detailed subtask breakdown
- Final plan is accepted and updates the main schedule view.

![Screenshot at 00:00: Presenter introduces the video, showing the Open SaaS landing page advertising 'The free SaaS template with superpowers'.](https://ss.rapidrecap.app/screens/ag7kbLFlPyA/00-00-00.png)
![Screenshot at 00:13: The presenter points to the GitHub star count \(12.9K\) on the Open SaaS landing page, indicating community adoption.](https://ss.rapidrecap.app/screens/ag7kbLFlPyA/00-00-13.png)
![Screenshot at 00:34: The presenter navigates the code editor, highlighting imports in Hero.tsx before shifting focus to the AI demo logic.](https://ss.rapidrecap.app/screens/ag7kbLFlPyA/00-00-34.png)
![Screenshot at 00:51: The AI Day Scheduler demo interface is shown, where the user interacts with task input fields and the 'Generate Schedule' button.](https://ss.rapidrecap.app/screens/ag7kbLFlPyA/00-00-51.png)
![Screenshot at 01:37: The AI generates a proposed plan with tasks prioritized as High, Medium, and Low, which the presenter reviews.](https://ss.rapidrecap.app/screens/ag7kbLFlPyA/00-01-37.png)
![Screenshot at 02:54: The presenter instructs the AI agent to refactor the demo app using the OpenAI Structured Outputs feature on DemoAppPage.tsx.](https://ss.rapidrecap.app/screens/ag7kbLFlPyA/00-02-54.png)
![Screenshot at 03:56: The agent compiles a plan which includes modifying operations.ts to define GeneratedScheduleSchema and refactor the core scheduling function.](https://ss.rapidrecap.app/screens/ag7kbLFlPyA/00-03-56.png)
![Screenshot at 05:58: The presenter enters new, more complex tasks into the scheduler and sets the working hours to 8.](https://ss.rapidrecap.app/screens/ag7kbLFlPyA/00-05-58.png)
![Screenshot at 07:07: The agent presents a detailed plan for implementing the collaborative chat interface, separating the planning process into a chat session and a final commit action.](https://ss.rapidrecap.app/screens/ag7kbLFlPyA/00-07-07.png)
![Screenshot at 09:23: The final schedule appears on the main page after accepting the AI's proposed plan, showing detailed, prioritized subtasks for each main item.](https://ss.rapidrecap.app/screens/ag7kbLFlPyA/00-09-23.png)