← All blog posts

How to build a book recommendation site with AI

I will show you how I used ChatGPT by OpenAI to create a book recommendation site in Webflow. I will take you behind the scenes and show you what tools I used, what processes I followed and what my thoughts are on using AI to generate these types of sites.

December 10, 2022

I have been experimenting with ChatGPT by Open Ai and wanted to see how I could use AI and No-code to build projects. After experimenting with Postman and the OpenAI api, I decided to build out a book recommendation site like Blinkest. I set myself a limit of 3 hours for the project, and booknotes.ai is the finished result.

What tools did I use to build this project?

  • Webflow and Relume to build the front-end and the CMS
  • Airtable as my database that also allowed me to use the Airtable Web clipper to get book info from Amazon to Airtable
  • Whalesync to sync Webflow and Airtable
  • make.com to run my workflows
  • ChatGPT API to generate the summary, audience and learnings outline

My process for building the site

  1. I started by practicing prompts in the ChatGPT
  2. After settling on my use case, I started running my prompts via Postman
  3. After refining my prompts, I started to work on what the MVP would like, which included: a home page, a book template page and a genre template page
  4. After setting up all fields in the Webflow CMS and Airtable, I started building the site in Webflow by importing the Relume Styleguide
  5. I used HappyHues.co to get inspiration for a color palette and started adjusting my style guide. Once I was happy with the style guide, I started importing Relume components.
  6. I started setting up my make.com workflows for generating OpenAI api calls

How to use the OpenAI api and make.com

The site is powered by two workflows: the first workflow is responsible for generating the summary, audience overview and lessons outline for each book. The second workflow is responsible for generating the paragraphs for each lesson the reader will learn in the book. The reason I made this a separate workflow was so that I could first review the takeaways and if need be, regenerate them by re-making the api call.

After making some adjustments to my prompts and to some formatting issues I was having, I was good to go. Next, I had to set up a workflow for syncing Webflow and Airtable. Because I didn’t want to spend too much time on the setup, I decided to use Whalesync. The process for setting up Whalesync happened super fast and what is displayed in Webflow is now controlled by a view in my Airtable books table.

Small improvements to my workflows

At this stage, I had a rough MVP that allowed me to sync data between Webflow and Airtable. Two workflows in make.com that allowed me to make api calls to ChatGPT.

Next, I added a webclipper extension to Airtable to make it easier to populate my database with info I found on Amazon.com. While I was at it, I decided to sign up to the Amazon affiliate program, which allowed me to store my affiliate links in each book record. Last but not least, I also made some minor UX improvements, but that is where we are now.

As I continue to explore the world of no-code and AI, I have many exciting plans for the future. For example, I will be using this project as an opportunity to experiment with new tools like Wized and Memberstack 2.0, and you can expect to see more tutorials on how to use these tools with booknotes.ai.

Additionally, I am just beginning to uncover the vast potential of AI in the world of no-code, and I plan to continue creating more videos like this one to showcase the many different ways that AI can be used to enhance and improve no-code projects.

If you're interested in staying up-to-date with my latest tutorials and projects, be sure to subscribe to my newsletter. This way, you'll never miss out on the latest and greatest no-code and AI innovations. I can't wait to see where this journey takes us next!


Use the code

Copy

Dive Deeper with the MVMP Marketplace Course

Learn how to build the essential features for your online marketplace. Start creating the most essential features for your no-code marketplace and start scaling your site

Learn more →
Subscribe to the newsletter!

Get notified when I publish my next video or blog

😘 Got it!
Oops! Something went wrong while submitting the form.
🚀 6 Tips for Building Webflow Sites More Efficiently

🚀 6 Tips for Building Webflow Sites More Efficiently

Discover the secrets to enhancing your Webflow design process with these 6 essential tips! In this video, we'll walk you through time-saving techniques, productivity-boosting hacks, and valuable strategies to help you build Webflow sites more efficiently. From style guides to on-page optimization, these expertly-crafted tips will empower you to work smarter, create beautiful and responsive websites faster, and take your Webflow skills to new heights. Don't miss out on unlocking your full Webflow potential – tune in now to elevate your website-building experience!

Supercharge Your Webflow Landing Pages: Creating Custom Open Graph Images with Placid (Part 3)

Supercharge Your Webflow Landing Pages: Creating Custom Open Graph Images with Placid (Part 3)

Join us for the final installment of our series as we explore the creation of custom open graph images for each landing page. In Part 3, we'll use Placid to automatically generate visually appealing open graph images with custom screenshots and text. Enhance your website's social media presence and elevate your landing pages with these custom images. Complete your automation journey and unlock your website's full potential with this innovative workflow.

Supercharge Your Webflow Landing Pages: Automatically Updating Webflow CMS Items (Part 2)

Supercharge Your Webflow Landing Pages: Automatically Updating Webflow CMS Items (Part 2)

Continue your automation journey with Part 2 of our series! In this video, we'll guide you through setting up a workflow that automatically updates Webflow CMS items whenever any of your titles have been created or updated. We'll use Airtable Automations to trigger a make.com workflow that seamlessly updates your Webflow items. Streamline your website-building process and keep your landing pages up-to-date with this powerful workflow.

Supercharge Your Webflow Landing Pages: Automated Title Tags, Meta Descriptions, and More (Part 1)

Supercharge Your Webflow Landing Pages: Automated Title Tags, Meta Descriptions, and More (Part 1)

Discover how to optimize your landing pages with automated workflows! In Part 1, we'll explore how to use OpenAI's GPT-4 language model to automatically generate SEO-optimized Title Tags, Meta Descriptions, H1 and H2 headings for your landing pages. Enhance your website's search engine visibility and boost your SEO efforts with these powerful techniques.

Introducing Relume Ipsum: Revolutionize Your Web Design Process with AI-Generated Copy

Introducing Relume Ipsum: Revolutionize Your Web Design Process with AI-Generated Copy

Ready to take your web design game to the next level? Discover how Relume Ipsum's AI-powered plugin can revolutionize your content creation process. Read our blog post now!

Webflow SEO Hack: Convert Your CMS Images to WebP

Webflow SEO Hack: Convert Your CMS Images to WebP

In August, Webflow added an internal compression tool that allows you to convert images to the webP filetype for improved web performance. While this feature is available for static images, it is not yet available for CMS images. Luckily, a solution to this problem is converting your CMS images to WebP.