🔴 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
Watch video 🔴 Let’s build a Generative AI App with NEXT.JS 14! (OpenAI, Streaming, AI Agent, TS, GPTScript) online without registration, duration hours minute second in high quality. This video was added by user Sonny Sangha 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 30,173 once and liked it 1.1 thousand people.