Build SaaS with AI: Part 3

Part 3: Create Simple UI and Text Repurposing Flow

Author

Sabrina Ramonov
August 16, 2024

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

In this post, I build a barebones v1 that allows you to repurpose blog text into a text-only Facebook post.

Now I’m back from vacation — full speed ahead!

My mom yelled at me for this! @ Bryce

Here’s the Youtube video accompanying this post:

Table of Contents

Refresher

In part 1, we scoped down the spec to a manageable MVP.

If you're technical, you can probably build out more features than what we’re going to build. If you're not technical, trim down spec as much as possible.

Use your domain expertise and feedback from potential users to figure out the tiny kernel you can build in a short period of time that still provides value.

Remember:

The goal is to get this in the hands of users as fast as possible.

Spec Updates

Below is the updated version of the spec.

Items in blue are additions, while items in red will be removed.

I made these tweaks, based on my experience using AI to build MVPs these past few weeks. Here are 2 of them, if you’re curious:

I’ve learned it's crucial to specify your tech stack clearly and in ALL major prompt requests. So that AI knows what framework and tools we’re using and stays consistent.

It helps to ask Cursor AI to specify its proposed directory structure and new files that must be created. Cursor AI doesn’t automatically create new files, so this helps you ensure you’re creating files in the right folder.

Also, I've noticed a few common issues that are easy to fix if you address them upfront in the prompt:

  • always include "use client" in components that require client-side state

  • Ensure text is readable and follows a modern color palette. Small issues like white text on a white background make the UI unusable.

I removed unnecessary features from the spec, like error handling and input validation. My focus is to build the Create screen where users can input text content, select a platform, and generate repurposed content.

I also moved the feature “Advanced Prompt Editing” to the next video.

Here’s the Latest Spec:

Your goal is to build a SaaS web app that helps users repurpose content from one social media platform to another.

- Use Next.js, Typescript, Tailwind CSS, and App Router.

- Use Next.js app router when creating new screens

- Do not use src directory

- ALWAYS show the proposed directory structure including all new files that must be created.

- ALWAYS show directory structure first

- For each step in your plan, specify the filename and path to the file.

- For next.js components that require client side state, use use client

- Tailwind config is specified in tailwind.config.ts

- Use a modern color palette, ensuring that any user-facing text is readable and visible. Force the text colors everywhere to ensure only light mode is supported.

The UI screen consists of the follow sections:

Build just the UI portion, leaving TODOs in place of logic and user interactions. 

Use the attached mockup as a guideline.

When the user opens the home page, CreateScreen should be shown.

Build the screens and functionality below, referring to the attached mockup.

  • Create a persistent left sidebar with navigation options:

    • Create

    • Queue

    • Dashboard

    • Brand

    • Settings (added)

  • Implement a top bar displaying the current screen name

  • Ensure responsive design for mobile devices

# Create Screen

  • Develop the main content creation interface:

    • Multi-line text input for original content

    • Platform selection via checkboxes (LinkedIn, Twitter, Facebook)

    • "Generate Content" button to trigger AI repurposing

  • Implement error handling and input validation

# AI Content Generation

  • Integrate OpenAI API for content repurposing

  • When user clicks the “Generate Content” button, the app makes an API call to OpenAI ChatGPT to repurpose the text input into a Facebook social media post. The ChatGPT prompt should force the output to be in JSON format.

  • There will be a different prompt for each social media platform.

  • Implement a retry mechanism for API failures

# Content Display and Editing

  • Show AI-generated content for each selected platform. In the right side, the app displays the results returned from ChatGPT:

    • facebook post

  • Provide inline editing capabilities for generated content

  • Implement character count and platform-specific limitations

Cursor AI Rules

Before we start building, let’s set up some rules for AI-driven coding.

Go to Cursor > Settings > Cursor Settings > General > Rules for AI.

These rules supposedly help guide AI. But I’m not certain it works all the time, so I include important rules at the beginning of big prompt requests.

Check out more sample rules in Cursor’s forum.

Create UI

Typically when I build an MVP:

  • I start with the data model

  • then design the UI screens

  • last, I build the logic workflows

We won’t have a database yet, so let’s start creating UI.

Open the AI chat sidebar in Cursor.

Paste our prompt with the first 2 sections # Navigation and # Create Screen.

On Mac, hit (Cmd) ⌘ + Enter to chat with the entire codebase.

Cursor AI will propose a directory structure.

Go ahead and create new files according to the directory structure:

Then, let Cursor AI implement each component and page one-by-one.

Navigate to the file, or click on the file if it already exists.

Then hit the Play button to apply changes.

Review each change first before clicking Accept.

I recommend digging into Cursor AI’s recap and explanation of changes.

The less technical you are, the more time you should spend trying to understand what’s going on.

It will be painful at first.

But, keep in mind most software engineers went through YEARS of college, BEFORE ever building a working web app.

(myself included, btw)

Simply ask Cursor AI follow-up questions if you don’t understand something or need more context. Type your question in the same chat, so that context is preserved and Cursor knows what you’re referring to.

Implement Repurposing Logic

After setting up our main UI, the “Create” screen, let’s implement simple logic for text-only content repurposing.

This involves creating an API route and utility function for making API calls to OpenAI's ChatGPT. Make sure to set up your OpenAI API key in a .env.local file.

Here’s the prompt:

Cursor AI explains the new files and code edits required:

Once everything is set up, test the app by running it locally. 

Open a terminal, or Cursor’s built-in terminal, and run this command: 

npm run dev

Navigate to http://localhost:3000 

Input some text content, select a platform, and click the Generate Content button to see if it works.

Errors usually pop up on the first run.

Totally normal, don’t freak out!

Troubleshoot each error by checking the console log message and asking Cursor AI for help.

It also helps to instruct Cursor to insert more logging statements to debug issues more effectively.

The better you explain an error and point out relevant files to Cursor, the better Cursor will debug it! It’s all about specificity, clarity, and context.

Once everything’s working…

I can paste in content from a past newsletter, hit Generate Content, and see the content repurposed by ChatGPT! 🍾 

Update ChatGPT Prompt

We’ve got the basic repurposing logic in place.

But, I don’t love the result.

So, it’s time to update our prompt!

I’ll use one of the writing prompts from my library, and tell Cursor AI to modify only that specific part of the code.

Limiting context to a single code block helps Cursor AI implement changes successfully and reduces the chance of introducing bugs.

Here’s how:

  • Find the relevant code block

  • Highlight it

  • On Mac, hit (Cmd) ⌘ + K to edit only the code block

  • Type in a prompt describing your desired edit

  • Hit Enter to submit the edit

Yay, this looks way better! 😄 

I like long text posts to have more structure, so they’re easier to read.

But, it’s personal preference.

That’s it for our v1!

I’ve made a simple UI and implemented a text-only repurposing flow, which calls OpenAI ChatGPT with my custom prompt, and repurposes one of my past newsletters into a text post for Facebook.

Up Next…

  • Add more features!

  • Setup Firebase

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!