2 Getting started with generative AI web apps using React and Next.js

 

This chapter covers

  • Setting up a simple generative AI web app with React
  • Interfacing with the OpenAI Client
  • Introducing Next.js and adopting it as our backend service

The first chapter explained the “why” part of building Generative AI web apps: generative AI empowers you to build tools that streamline workflows and revolutionize user experiences. Now, it's time to get hands-on with building practical generative AI web applications.

Building generative AI applications might seem daunting at first What considerations do you need to have in place before writing a single line of code? What tools can help you start with generative AI? How does a simple conversational application look, and what happens behind the scenes when you start interacting with it?

This chapter lays down the essential groundwork for your journey into this exciting domain.

And why not start our learning adventure by building our own AI persona that we can use throughout this book and whom we can refer to when building our generative AI web apps? Let’s call it Astra. Astra AI is a conversational AI agent/persona that we will enhance with capabilities to serve our educational needs, much like Google Bard (https://gemini.google.com/). Initially, our agent will be simple. It will understand only text prompts and answer general questions.

2.1 Building blocks for scalable generative AI web apps

2.2 A simple conversational chat web app

2.2.1 The Goal: Building a simple interactive AI chat interface

2.2.2 Project Requirements

2.2.3 Setting up

2.2.4 Running the project

2.2.5 What happens behind the scenes

2.2.6 Designing for interaction: A user-centered approach

2.2.7 Introduction to React

2.2.8 Exploring the code

2.2.9 Common pitfalls and tips

2.3 Introducing Next.js

2.3.1 The goal: Migrate to Next.js

2.3.2 Project requirements

2.3.3 Setting up

2.3.4 Running the project

2.3.5 Exploring the code

2.3.6 Environment variables in next.js

2.3.7 Route groups

2.3.8 Layout components

2.3.9 Route API handlers

2.4 Summary