🔴 React.js Clones by PAPA React - 🔴 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-opt-in-form 🚨 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