Coding with Cursor AI: My Real Time Builder AI App

Introduction

Today, I wanted to make some enhancements to my real-time website builder application powered by AI. I thought it would be interesting to share this journey with a video, showcasing the new feature additions and the overall functionality of the app.

Overview of the Application

To start off, let me give you a quick overview of how my website builder operates. Users can input a brief description of the type of website they want to create. For instance, I entered "2008 Reddit clone" and clicked on "generate website." In real-time, the application generates an interface reminiscent of Reddit's earlier versions, which I find quite impressive.

Next, I decided to add an upvote and downvote feature, similar to those found on Reddit. By clicking on "modify," I was able to keep the existing code while adding new elements—no need to rewrite everything from scratch. The outcome, although not perfect, turned out to be quite acceptable.

Adding Dark Mode

To enhance user experience, I contemplated introducing a dark mode option. Upon implementing this change, I found that the dark mode looked aesthetically pleasing and added a modern touch to the app.

Following this, I wanted to switch the titles of the Reddit posts on my website to something relevant to 2008. After using interesting prompts, I generated titles like "10 Hilarious Moments" and "The Dark Knight: A Game Changer", which were fitting for the era.

Next, I attempted to link titles to actual URLs, specifically for the announcement of "The Dark Knight." While I successfully generated a link to the movie, the application used example.com as a placeholder, which did not fulfill my expectations.

Integrating Images

The feature I planned to focus on today involves integrating the capability to generate and display images based on user inputs. The idea is to have the app generate fitting images that resonate with the descriptions provided.

To implement this, I considered using Cursor AI and some components from OpenAI, specifically the GPT-4 model and the Flux API, which I previously explored in another video. After some testing, I confirmed that the image feature could be added seamlessly to the existing application.

Upon creating the function for image generation, the application took input descriptions—such as an image of "The Dark Knight"—and returned a URL that linked to the generated image. I conducted successful tests on this aspect, confirming that images could be conveniently integrated into the HTML output of the site.

User Input and Feedback

After verifying the image generation functionality, I decided to test how it interacted with other features. For instance, I wondered whether modifying the website might change the image as well. In a bid to give users more control, I added a separate input field for generating images, allowing for modifications without impacting the original image.

By integrating this new feature, users can generate images specifically for their modifications while retaining the initial visual elements of their websites.

Final Adjustments

I made several adjustments to the user interface to accommodate the new image-generation feature. Now, users can create any website from a "World of Warcraft" theme and generate corresponding images, all while modifying their sites without losing their original designs.

After several rounds of testing, I found that the application allowed for seamless transitions between images and modifications, illustrating its potential for varied web design applications.

Conclusion

This enhancement journey has been exciting and educational. The ability to generate unique images using AI further enriches user interaction within my app. If you're interested in the codebase, consider supporting the channel for access to my GitHub repository.

I hope you enjoyed following along with me today; I’m looking forward to sharing more updates soon!

Keywords

• Real-time website builder
• AI
• Cursor AI
• Dark mode
• Image generation
• HTML
• Website modification

FAQ

What is the purpose of the Real Time Builder AI App?
The app allows users to generate websites in real-time based on text inputs describing the desired site.

Can users modify the website after generating it?
Yes, users can modify existing websites and add features such as image generation without overwriting the original designs.

What technology is used for image generation?
The app uses the Flux API via Replicate for fast image generation based on user input.

Is there a feature for dark mode?
Yes, the app includes a dark mode option for an enhanced user experience.

Where can I find the code for this project?
The code will be available for channel supporters on GitHub.