🔴 Let’s build a Generative AI App with NEXT.JS 14! (OpenAI, Streaming, AI Agent, TS, GPTScript)

❗️ Get started with GPTScript Today: https://links.papareact.com/gptscript

❗️❗️ Get the 'story-book.gpt' script for FREE here: https://www.papareact.com/gptscript-o...

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course

🛠️ Looking for the Code for this build? (Plus over 50+ others!)
https://links.papareact.com/github

Join me as I show you how to build a StoryTeller AI App from scratch with the latest Next.js 14. You'll learn the following in this build:

👉 How to implement GPTScript to create an AI Agent assistant capable of chaining AI tasks together - we'll build a Storybook with beautiful text & images, completely built from the AI agent's initial single prompt!
👉 Ability to See a Real-Time Process of the Storybook Creation Process! (See the AI Agent in action!)
👉 Ability to Store All Previously Created Stories by writing to the server... in fact the AI Agent does this for us!
👉 How to build API routes using the app router Route Handler syntax
👉 How to implement streaming to stream in the AI Agent's processes in real-time from our API endpoint!
👉 How to utilise the power of caching in Next.js to create an optimal & efficient user experience!
👉 How to use Next.js Server Components & Client Components and when/where to use them!
👉 How to Integrate OpenAI into the Build
👉 Create a Beautiful UI & UX for our Frontend using the highly Popular Shadcn & Tailwind CSS
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to deploy the final build on Vercel

🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter

🕐 TIMESTAMPS:
00:00 Introduction
01:10 Build Demo
09:08 Build Tech
12:52 Explaining GPTScript
19:00 Initialising the Build
26:00 Building the Header Component
33:36 Implementing Shadcn/ui
35:38 Building the Nav Icons for the Header Component
38:24 Building the Home Page
44:56 Building the Story Writer Component
58:15 Building the AI Terminal Viewer
1:10:21 Creating an API Endpoint (1/2)
1:11:54 Setting Up GPTScript
1:16:27 Creating an API Endpoint (2/2)
1:21:04 Implementing GPTScript
1:28:38 Implementing the Streaming Functionality
1:50:44 Explaining How the Streaming Functionality Works
1:57:29 Fetching All the Stories
2:13:52 Building the Stories Page
2:29:01 Building the Story Book Carousel View
2:39:03 Implementing Toast Notifications
2:43:11 Final Build Demo
2:50:17 Deploying to Vercel
2:54:22 Build Summary

Let’s get it PAPAFAM 🔥.

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with OpenAI and/or any of its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes.

#nextjs #nextjs15 #react #ai #chatgpt #reactjs #coding #javascript #tailwindcss #shadcn #openai #reactjstutorial #coding #tutorial #beginner #programming #machinelearning #story #aiagents