Build SaaS with AI - Part 4

Part 4: Edit Prompt & Add Firebase

Author

Sabrina Ramonov
August 17, 2024

This is part 4 of my series Build SaaS with AI — where I go from Idea to MVP with AI-driven coding!

Now, I have a barebones v1 that repurposes text into a text Facebook post by calling OpenAI ChatGPT.

Time to add more features!

Here’s the Youtube vide for this post:

Table of Contents

Cursor Settings

This step is optional, but I like to force Cursor to use Claude 3.5 Sonnet.

Cursor has no transparency or logs confirming what model is being used on each AI request.

I also enable the Beta feature “Long Context Chat” to allow for more context in my prompts.

Process for Adding New Logic

When building a web application, three core concepts are essential:

  1. Data Model: The structure and organization of your database.

  2. UI (User Interface): The elements users interact with.

  3. Workflows/Logic: The sequences of actions triggered by user interactions.

Here’s my step-by-step process for adding a new logic feature:

  1. Create a new branch in git so that I can roll back to the last “stable” version, in case I mess things up — always happens!

  2. Be ultra specific and clear describing the logical flow in my prompt. Step by step instructions. Think through what needs to happen.

  3. Narrow down the context to relevant files. AI produces better results if you narrow down the context to a handful of relevant files, instead of passing in your entire codebase.

  4. Add files as context to cursor using “@” sign.

  5. Submit the prompt to Cursor AI.

  6. Review code changes and test, test, test!

  7. Once all looks good, merge my branch into main

Version Control

IMPORTANT!

I highly recommend learning how to use git for version control (step 1).

It’s inevitable.

AI will mess up.

I will mess up.

You will mess up.

Depending on how many changes were made, it may be difficult to reverse everything, without accidentally breaking something else. When this happens, it’s often easier to discard the branch you’re on and start fresh in a new branch.

New Feature: Edit Prompt and Regenerate Output

First, check what ChatGPT model Cursor put in the codebase (e.g. gpt-4 or gpt-4o or gpt-4o-mini). Update it to the model you want to use.

Now, let’s implement a new feature:

I want to be able to edit a prompt and one-click regenerate the output.

This is useful to be able to iterate on prompts quickly and optimize each prompt for a given social media platform.

Here’s how I use the process above to implement this feature:

  1. Create a new branch in git so that I can roll back to the last “stable” version, in case I mess things up — always happens!

I run this command in my Warp terminal: 

git branch feature/edit-prompt
git checkout feature/edit-prompt

  1. Be ultra specific and clear describing the logical flow in my prompt. Step by step instructions. Think through what needs to happen.

When the "Generate Content" button is clicked, the prompt should be returned so that the user can edit it. 

That is, when the user clicks "Edit prompt", the prompt used to generate content should appear in the modal. 

When the user clicks "Save and Regenerate" button, the app should re-run content generation with the new prompt and display the new content in the GeneratedContent component.

Use the existing "prompt" in generateContent as the default prompt.

  1. Identify ALL relevant files. Cursor AI produces better results if you narrow down the context to a handful of relevant files, instead of passing in your entire codebase.

  • ContentGenerator.tsx

  • PromptEditModal.tsx

  • route.ts

  • openai.ts

  1. Add files as context to cursor using “@” sign.

  2. Submit the prompt to Cursor AI.

Here’s the full prompt, adding files as context with the @ sign, adding logging, and allowing the AI to first ask clarification questions:

When the "Generate Content" button is clicked, the prompt should be returned so that the user can edit it. 

That is, when the user clicks "Edit prompt", the prompt used to generate content should appear in the modal. 

When the user clicks "Save and Regenerate" button, the app should re-run content generation with the new prompt and display the new content in the GeneratedContent component.

Use the existing "prompt" in generateContent as the default prompt. 

Add robust logging to help troubleshoot issues.

Before starting working on this feature, act as a senior web developer and ask for any clarification in the spec or things that are not clear.

@ContentGenerator.tsx @GeneratedContent.tsx @PromptEditModal.tsx @route.ts @openai.ts

  1. Review code changes and test, test, test!

  2. Once all looks good, merge branch into main

New Feature: Add Firebase as Database

I like Firebase as my database.

Here’s how to set it up:

  • Create an account

  • Create a new project in the Firebase console

  • Select “web app”

  • Skip Firebase hosting for now

Firebase | Google's Mobile and Web App Development Platform

Discover Firebase, Google’s mobile and web app development platform that helps developers build apps and games that users will love.

firebase.google.com

Make sure you have the Firebase SDK installed.

Go to your terminal and run: 

npm install firebase

The following prompt will generate scaffolding for Firebase integration.

Run it WITH ENTIRE CODEBASE as context.

Create an initial scaffold for firebase integration. It should utilize typescript and adhere to the coding standards in the current codebase.

For every new file created, output the full path to the file.

Output all paths to the newly created files first.

Explain step by step how to set up a new firebase project from scratch.

Here’s an overview of the Firebase configuration file created by AI:

  • Firebase Configuration (util/firebase.ts):

    Contains Firebase config objects and initializes Firebase in your app.

  • Firebase Provider (components/FirebaseProvider.tsx):

    • Provides Firebase context to your application.

  • Hooks (hooks/useFirebase.ts):

    • Custom hooks for interacting with Firebase services.

In addition, AI walks me through:

  • Adding Firebase initialization in my app’s main entry point

  • Updating environment variables to include Firebase config details

To test everything works, run the app with npm run dev and go to localhost:3000 to check.

Next, I ask Cursor AI to implement a new feature, adding Firebase files to the prompt context.

Tips for Adding Features that Use Firebase

  • Be concise

  • Ask for the overview of the data model

  • For new features, only use firebase context to drive the output

  • For existing features (e.g. same CRUD), you can add previously implemented CRUD features to stay consistent

    • “For this new feature, follow the same CRUD structure as the X feature specified in Y file”

  • Think through the data model (e.g. each user can create multiple prompts, each prompt has text field and createdAt, etc.)

New Feature: Create, Read, Update, and Delete (CRUD) Prompts

CRUD = create, read, update, delete.

Implementing CRUD operations is vital for managing user data within an app.

This new feature will enable users to:

  • create prompts

  • use (i.e. read) prompts to send to ChatGPT to remix content

  • update prompts to make them better

  • delete prompts they no longer want

To be clear, I haven’t implemented user authentication yet (next video), so I’m throwing around the term “users” loosely.

Include Firebase files (useFirebase.ts and firebase.ts) as context in the prompt via “@” sign, since these are the relevant files Cursor AI should focus on. 

@useFirebase.ts @firebase.ts 

Implement the CRUD operations for prompts using the following guidelines:

- Each user has many prompts
- Each prompt belongs to a user
- Output functionality into a separate service file designed to interact with the firebase data

Before producing the code, think step by step about it and output the data model in Firebase to implement this feature.

Before starting working on this feature, act as a senior web developer and ask for any clarification in the spec or things that are not clear.

After answering AI’s clarifying questions, here’s the final implementation plan:

  1. Create a New Service File:

    • Prompt Service (services/promptService.ts):

      • Handles all CRUD operations related to user prompts.

  2. Design the Data Model:

    • Each prompt should have the following fields:

      • title: A brief name for the prompt.

      • content: The text content of the prompt.

      • createdAt: Timestamp for when the prompt was created.

      • updatedAt: Timestamp for the last update.

      • user: Reference to the user who created the prompt.

  3. Implement CRUD Functions:

    • Implement functions to create, read, update, and delete prompts in the promptService.ts file.

  4. Connect CRUD Operations to UI:

    • Ensure the UI components reflect changes made by CRUD operations in real-time.

Recap

We’ve covered my high-level process to implement logic features, talked about Git for version control, designing prompts for AI-driven coding, and tips for implementing features that use Firebase.

We also implemented a new feature (Edit Prompt), integrated Firebase, and started creating CRUD operations and routes (Prompt). However, I haven’t updated the UI to allow users to perform those CRUD operations (next video).

Up Next…

Did I miss anything?

Have ideas or suggestions?

Message me on LinkedIn đź‘‹

Sabrina Ramonov

P.S. If you’re enjoying my free newsletter, it’d mean the world to me if you share it with others. My newsletter just launched, every single referral helps. Thank you!