chapter two

2 Building your first generative AI web application

 

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

Let’s start our journey by creating a simple but effective conversational app that demonstrates the core principles behind LLM-powered web applications.

By conversational, we mean that users will interact with our AI app using natural language through text inputs, like a chat message interface often found on web pages for support or help. Conversational AI can also involve voice input and spoken answers, but our initial focus will be on text-based interactions. Our app will become more versatile as we progress through this book and add more advanced functions. It will eventually be able to accept sound recordings, generate pictures, employ advanced tooling, and even handle queries related to private data. Our goal is to build an app that is flexible, so it is capable of selecting the right model for the task at hand, as well as highly adaptable, providing us with the freedom to customize its behavior.

2.1 Project goal and requirements

2.1.1 Goal: Building a simple interactive AI chat interface

2.1.2 Project requirements and needed technologies

2.1.3 Setting up

2.1.4 Running the project

2.2 Under the hood: The generative AI lifecycle

2.2.1 Designing for a better user experience (UX)

2.3 Building the major components

2.3.1 Frontend

2.3.2 Autoscroll

2.3.3 ChatPage

2.3.4 ChatList

2.3.5 The backend: handling API communication

2.3.6 Tests

2.3.7 Common challenges and solutions

2.4 Assessing the app’s first iteration

2.4.1 Memory and context

2.4.2 UI performance

2.4.3 Security

2.4.4 Improved tooling

2.5 Migrating the app to Next.js

2.5.1 Requirements, set up, and running the project with Next.js

2.6 Routing and configuration on Next.js

2.6.1 Environment variables in next.js

2.6.2 Route groups

2.6.3 Layout components

2.6.4 Route API handlers

2.6.5 Going deeper with Next.js

2.7 Summary