# Building an Ai SaaS with MindsDB, GPT4, and React: SmartFeed.ai

I started building my open-source SaaS MVP called [SmartFeedAi](https://github.com/avionmission/smartfeedai/) a week ago. **Unaware of machine learning platforms like MindsDB, I started coding with React and Flask**, excited to leverage Python's powerful machine learning libraries in the backend. But as I started building, **I realized the challenges that MLOps professionals and developers who build machine learning apps for production face (more on that later).**

When I discovered MindsDB on Twitter, I knew it was the solution my app needed. However, by the time I became aware of MindsDB and MindsDB hackathon, only 7 days remained until the end of the hackathon. **I decided to scrap my Flask backend completely and use Express.js with MindsDB instead (even though I was unfamiliar with it at the time).** It was really a race against time for me, but I got to learn so much and **I'm excited to share my story, product, and learnings with all of you!** 🚀

## 📖 The App Idea (and Future of *Content*)

There is a lot of fear-mongering on Twitter that the rise of generative AI will lead to a decline in human-generated content. I don't think so. On the contrary, **I see AI as an opportunity to revolutionize the way we consume content.**

Introducing [SmartFeed.ai](https://github.com/avionmission/smartfeedai) 🚀, the ultimate solution to help you browse through online content efficiently! Here's a quick Demo video:

%[https://youtu.be/KuWdanSs7Bg] 

**With the MVP version of** [**SmartFeed.ai**](https://github.com/avionmission/smartfeedai/)**, you can easily generate short summaries of articles from just a URL using the powerful MindsDB NLP engine.**

The MVP has minimal features due to the time constraints of the hackathon but the potential and vision of SmartFeedai are immense. **AI has the power to change and improve the way people consume content, and SmartFeedai is at the forefront of this revolution.** As SmartFeedai continues to evolve, I believe it will become an essential tool for anyone who wants to stay informed and up-to-date in today's fast-paced world.

## 🔩 How does it work?

* [SmartFeed.ai](https://github.com/avionmission/smartfeedai/) uses MindsDB for GPT-4 model that can perform NLP tasks. **MindsDB makes it easy for developers of all skill levels to integrate AI into their applications by automating and integrating top machine learning frameworks (including GPT-4) into the data stack as "AI Tables".** This innovative approach allows you to train and use models directly with your database, speeding up the development process.
    
* For the backend API, I chose to use Express.js, a flexible and minimalistic web framework for Node.js. **It allowed me to quickly and easily set up the endpoints I needed to make requests and retrieve data from the server.**
    
* To extract data from web pages, I turned to Cheerio, a fast and efficient library for web scraping in Node.js. **With Cheerio, I was able to parse the HTML content of websites and extract the specific data I needed, which was essential for my project's functionality.**
    
* I used React for the frontend of my project due to its component-based architecture and virtual DOM, which allowed for a dynamic and responsive user interface.
    
* **Finally, I used** `mindsdb-js-sdk` **to access MindsDB Cloud's GPT-4 model. MindsDB Cloud is an excellent platform for training and using machine learning models without the need for extensive infrastructure setup.** The SDK allowed me to connect to the MindsDB Cloud API and use the models for my project's predictions.
    

## 💻 How to Use [SmartFeed.ai](https://github.com/avionmission/smartfeedai/)?

1. Create a MindsDB cloud account - you can get your free account [here](https://cloud.mindsdb.com/). It's going to allow us to train a Machine Learning model in minutes!!
    
2. **We will use the MindsDB cloud editor to create a GPT-4 model** that can take long text, understand it and provide a summary based on the given prompt. Here are the SQL commands you have to enter to create the model which will use:
    
    ```sql
    CREATE MODEL text_summary
    PREDICT text_summary
    USING
        engine = 'openai',
        model_name = 'gpt-4',
        input_column = 'text_long',
        max_tokens = 200,
        prompt_template = 'Summarize the following text, but only enough to inspire intrigue. text:{{text_long}}';
    ```
    
    Notice how I have used the prompt in the `prompt_template` property, feel free to use your own prompts based on what kind of response you want from your AI reading assistant ;)
    
3. After pasting the above code into the MindsDB cloud editor, click `> Run` to execute the query and wait for the model to be trained and ready to use.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682584142160/0f64a607-1461-49b7-a02c-fb257e4d57e4.png align="center")
    
4. Clone the [Smartfeedai repository](https://github.com/avionmission/smartfeedai):
    
    ```bash
    git clone https://github.com/avionmission/
    ```
    
5. To run the backend, run this command (use the email and password of your MindsDB cloud account):
    
    ```bash
    cd smartfeedai/api
    MINDSDB_USER=<email> MINDSDB_PASS=<password> npm start
    ```
    
6. To run the React Frontend, run:
    
    ```bash
    cd smartfeedai
    npm start
    ```
    
7. That's it! 🎉🎉 Now you can use [SmartFeed.ai](https://github.com/avionmission/smartfeedai/) on your localhost port 3000.
    

## 🏂Conclusion

In conclusion, [SmartFeed.ai](https://github.com/avionmission/smartfeedai/) is a solution that has the potential to change the way we consume online content. **This was made possible with the power of MindsDB and its integration of top machine learning frameworks, such as GPT-4, making it accessible to developers of all skill levels.** As [SmartFeed.ai](https://github.com/avionmission/smartfeedai/) continues to evolve, it has the potential to become an essential tool for anyone who wants to stay informed and up-to-date in today's fast-paced world.

I am happy about the partnership between [Hashnode](https://hashnode.com/) and [MindsDB](https://mindsdb.com/) that brought about this incredible hackathon. The event was a great opportunity to learn about machine learning tech and expand my skill set.

I highly recommend checking out their [official documentation](https://docs.mindsdb.com/what-is-mindsdb) and joining their [Slack community](https://mindsdbcommunity.slack.com/join/shared_invite/zt-1syebtjn9-MLT4dYX2U7NVdorPPDnlRg). Start building your machine learning projects today by [creating a free account](https://cloud.mindsdb.com/) on MindsDB Cloud and taking advantage of the incredible tools available to you. Thank you again for this opportunity! 🚀🙌🏼🤖