Build & Deploy AI SaaS with Reoccurring Revenue (Next.js, OpenAI, Stripe, Tailwind, Vercel)

Learn how to build and deploy a SaaS using NextJS 13.4, DrizzleORM, OpenAI, Stripe, TypeScript, Tailwind, and Vercel. You will gain expertise in the following areas:
- Leveraging NextJS 13's cutting-edge App Router.
- Managing Payments seamlessly through Stripe.
- Harnessing the beauty of Shadcn and the power of Tailwind CSS.
- Unleashing the capabilities of OpenAI's API for Language Model usage.
- Interacting with databases with the efficiency of ORMs.
Resources
🔗 GitHub Repo: github.com/elliott-chong/chat...
🔗 Vercel AI SDK: vercel.com/blog/introducing-t...
🔗 Timestamp 3:20:00 /api/chat/route.ts file pastebin.com/crLipeHK
Course developed by @elliottchong
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro & Demo
⌨️ (0:09:53) Set Up NextJS
⌨️ (0:11:59) Set Up Shadcn
⌨️ (0:15:45) Set Up ClerkAuth
⌨️ (0:21:52) Home Page
⌨️ (0:33:22) DrizzleORM
⌨️ (0:50:15) File Upload Component
⌨️ (0:57:11) Set Up AWS S3
⌨️ (1:18:12) AI RAG Explanation
⌨️ (1:30:39) React Query Set Up
⌨️ (1:45:11) Set Up Pinecone DB
⌨️ (2:32:27) Chat Side Bar
⌨️ (2:47:42) PDF Viewer
⌨️ (2:50:33) Chat Component ( Vercel AI SDK )
⌨️ (3:08:02) Pinecone OpenAI Get Context
⌨️ (3:26:19) Persist Chat Logs to DB
⌨️ (3:34:16) Stripe Integration
⌨️ (4:14:59) Deploy and Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@elliottchong]

Hello everyone! I’m the creator of this course :) I just want to thank everyone and FCC for the support in the comments so far, Im really happy that it’s able to resonate and help everyone I specialise in creating full stack AI + NextJS tutorials, if you enjoy such content, do subscribe and I will do my best to provide even more value ☺️

[@kalebnim]

Amazing content :D

[@sanchopansa25]

😅😅

[@akelebelay1025]

Can you show me how to search multiple pdfs? and including the source document in each answer?

[@drali4075]

good work brother can u be my mentor this greetings from eastafrica

[@razexamvs8756]

​@@akelebelay1025have u done the project fully?

[@nopetanker]

I'm starting on my final year project on creating a pdf reader with chatgpt features. Not exactly the same as chatPDF, but this tutorial covers a ton of topics that I'll be needing. Thanks for the amazing video.

[@Patrickaroo]

The presenter was completely and perfectly clear and understandable. Their pace and clarity were awesome. All of that on top of top-notch coding skills... and the ability to perfectly explain what is going on in their code in real-time. I am humbled. Thank you!

[@vishaloza6981]

Thank you once again to the FCC team for the invaluable free knowledge!

[@pace0]

These people again want me to learn everything ❤

[@drali4075]

so u dont ? or wat😂

[@yadday5153]

It's coming too fast? I understand.

[@agtemp]

I need to defrag my brain to allocate some memory for everytime some new technology comes into existence. The rate at which IT, AI are evolving is overwhelming...

[@ovskihouse5278]

Thanks a lot for the Association and 4 Dev's also

[@xNytus]

Is this channel following the University courses I'm taking? These tutorials are spot on

[@brilliantchicken4873]

Just a heads up, if you're getting this error related getting Clerk Auth set up: -"TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it." The solution was to npm install the 4.24.2 version of clerk auth instead of the latest one. Additionally, you'll have to open up the browser dev tools and clear out session storage and do a hard refresh + clear cache.

[@ehuerikensamuelobuse5769]

this is so nice, thank you so much for the effort you put in. you are the real guy

[@codewithkin]

Thank you so much for this ❤

[@ctrl-shift-run8681]

Looks fantastic. Another interesting project to try out next.

[@kaisersoser5918]

One of the best and most interesting projects I have completed,...by far! Well done Elliot. I will be looking out for more material from you. You are an excellent teacher!!!

[@mentalpump]

Hi Kaiser, I am glad that you completed it successfully. I am also after it getting one issue . Am facing trouble in getting the embeddings from OpenAI API. I followed Elliot so far but aint getting embeddings from open AI api. Can you help with it?

[@kaisersoser5918]

@@mentalpump Hi Mental, I had the same issue. The problem is you cant use the OpenAI apis without funding your account first. Just spend about $10 or so to pay for OpenAI API calls, and you should see embeddings generated by OpenAI. I hope this helps!

[@KCOVedantKohli]

error creating chat :- TypeError: Cannot read properties of undefined (reading '0') at getEmbeddings (webpack-internal:///(rsc)/./src/lib/embeddings.ts:18:27) can u help ?

[@oleksandr7093]

please add subtitles! it greatly simplifies the perception of information for foreigners

[@ktfjulien]

Exactly what I needed

[@necri1616]

The value u r guys providing is crazy 🎉

[@markwatney2147]

Thanks for the course 🤗 Do any of you had the error "Clerk: auth() and currentUser() are only supported in App Router" when setting up Clerk ?

[@JEM_GG]

Incredible breakdown 👏

[@Buharialtinee]

Thanks for sharing

[@HectorSalazar_hrsalazar]

Awesomeness 🎉🎉🎉🎉🎉

[@Victor-wh9bs]

completed successfully, ThankU so much. every detail is explained in an understandable manner.

[@jsjtalks]

Hi bro, didn't you face the error POST localhost:3000/api/create-chat 500 (Internal Server Error) If yes, how did you solve it?

[@user-534-z]

@@jsjtalks did you solve it? I am getting the same error

[@Victor-wh9bs]

What's the issue

[@FahadKiani1]

hey did you solve the issue with VectorDB since it has upgraded since then? If you have a working version, would you mind sharing the repo?

[@mahendranath2504]

Thank you so much 👍👋👌🫡👏🤝🙏🏻✌️🫰🏻

[@huzaifanaseerkhan]

Amazing

[@georgesngandeu9115]

You are awesome bro 🎉

[@somarble]

It would be really good to have the source text highlighted to see where AI took that info

[@SatoshiNakamoto-dd5eq]

Good luck my friends

[@alekseirozhnov3038]

Making credentials public for IAM user with S3 full access is VERY dangerous. It means anyone on the internet will be able to access and manipulate (create/delete) buckets in your AWS account. To not expose those sensitive credentials on a client you either need to use presigned urls to upload files to a specific place in s3. Or to proxy this file upload through your own server so that your client doesn't upload to S3 directly

[@muscleheadzzzz]

Then don't do it. It's meant as an instructional, so make your own judgment based on your own application.

[@alekseirozhnov3038]

@@muscleheadzzzz just better make a note on this, so people don't accidentally expose themselves without realising

[@kahvyuhh]

Great tip!

[@STN_YT]

Not to mention the fact that the PDF files might hold sensitive information. But solution would be to have a middle layer in the API that takes user id and checks it against S3 metadata of the item. Also means the upload part should go through the api middle layer.

[@brilliantchicken4873]

Thanks for pointing this out. Seemed odd that he didn't even bring it up in his recording. For anyone else who isn't familiar with presigned urls, I found this youtube vid that breaks it down: kzbin.info/www/bejne/Z3WcmJqKf554oMU&ab_channel=BeABetterDev

[@WayOfTheCode]

This guy speaks at my speed which is amazing and what I wanted.

[@technolus5742]

any video can be sped up or down

[@jamesfrederick2044]

i have to watch at .75x

[@GCKteamKrispy]

Can you guys do more tutorials on stripe?

[@thegeneralaz]

Great

[@bakersentamu4725]

This is awesome

[@AjaySingh-jz8qx]

Oh Man that is Mars technology 🤯🤯🤯

[@deveeshshetty2867]

Anyone who faced hydration error near to 1:40:51. Move the component inside the body tags in the `layout.tsx` file.

[@Ricocase]

Will open ai accurately answer multiple .Pdf questions that cover similar data?

[@barbarosswordofthemediterr9660]

First Viewer of this Amazing Video ❤

[@codewithkin]

Damn

[@soumadip_skyy_banerjee]

❤

[@sedorador4967]

What are the requirements for this course?

[@attinderpalsingh5841]

I just wanted to know, What will be the response if some question is asked which is not in the pdf ?

[@revepe79]

❤Looking forward to collaborating and working with good programmers in my decentralized clean electricity Web3 project.❤🎉

[@PrinceSingh-ym2mq]

I don't know about Web3 technologies but I would like contribute your project if it is opensource or if it is personal

[@CrzyGazara]

run the vedio at 0.75 X , you will thank me.

[@hopree2839]

Lol

[@DrMrPersonGuy]

2x or bust, even if I have to keep rewinding

[@Taurh]

I'lll start to follow along, tho I wonder if I can use azure storage instead of AWS S3?

[@RGHdrizzle]

U can use it

[@user-hr2ju8pm9n]

Can we make chrome extensions that use Chatgpt using this framework?

[@ShadowMind312]

So, If I have a book in PDF format. May I use this to have GPT build ideas based upon the coverage of concepts in one or more books?

[@chessknock17]

You should be able to in theory cause it's based on Open Ai API. and it seems like there's no upload file size limit here

[@ShadowMind312]

@@chessknock17 thanks

[@wumwi]

For any Windows users getting an error with setting up Pinecone, try using /temp/pdf-.... rather than /tmp/pdf-....

[@sidekillergaming9793]

In which file it is?

[@leroylau415]

@@sidekillergaming9793 Using C:\\Windows\\Temp\\pdf-${Date.now()}.pdf worked for me! (We need to escape the backslashes hence '\\' rather than '\') This is in the s3-server.ts file.

[@hansaroniOnYouTube]

He said, "If you've learnt something new today, please like, comment and subscribe". Just doing that.

[@user-mz4pd4ko8p]

Does this course teach us how to use these technologies or should I learn them before starting this project?

[@kurtloban3664]

Programming with Mosh (find him on YT) said you should watch the video(s) first at 2x speed, take notes, then watch it again coding along. That will be make it stick. Tough to do on 5 hour videos though.

[@user-mz4pd4ko8p]

@@kurtloban3664 Thanks! I’ve been trying to find an efficient way to learn from tutorials. I’ve heard some people watch once then try to do the project on their own, and others pause before the challenge and try to sole it themselves but I will put your method into practice

[@OjoDike]

This is amazing content, bravo!! Quick question. Can someone use Python for this instead of Next.js? Are the concepts applicable?

[@sathishkannan6600]

iyou can't use edge with python. You can make simple apps with gradio or some python frontend framework and you can use serverless functions to run equivalent python functions.

[@durjayghosh7664]

please guys make video on laravel react js

[@faizansohail5855]

How can I update price for my current users in stripe kindly tell me

[@bdthombre]

Hi great content. Just a query, won't it be easy just pass directly "fileKey" as "currentChat.fileKey" instead of sending "chatId" and again making call to the API?? [at 03:18:08]

[@FahadKiani1]

hey did you resolve this?

[@inezanette]

Terminal Cmd @ 2:54:23 = npx shadcn-ui@latest add input

[@ygonet]

Valeu!

[@piotrfszawadzkki5355]

Hi. Can i get any info what extension should i add to vsc to have hints about code in file page.tsx?

[@toxicgamer6751]

toaster not working either through dev-dependencies or normal dependancy solution?

[@rainx6995]

*Note: Projects in the gcp-starter environment do not currently support namespaces. any other alternative to use namespace

[@mikenemrok7203]

I guess you just have to dump all into one index :( which is lame, unless you want to pay for the higher tier. Or... use a different vector storage.

[@mikenemrok7203]

update: I deleted my index and project in pinecone, and started again with creating a new project & index. It now seems I can have namespaces (still free tier). Make sure to update your library as well! I wasted a couple hours trying to figure out why I couldn't query the embeddings...

[@brilliantchicken4873]

@@mikenemrok7203 Yup, this worked for me to. For others experiencing the same issue: 1. Delete the default project that's created for you when you signup with Pinecone. (Also delete the index that you may have created while first following along with the tutorial) 2. Create a new project: name it, select the environment (closest one to you). 3. Next create a new index under the project you just created, with 1536 dimensions and a cosine metric. (which is what the video has you do as well) @ 1:46:58 4. Go to your API keys, now either create a new apikey or use the default key that's supplied, and replace your PINECONE_API_KEY value in your .env. 5. Update your PINECONE_ENVIRONMENT value in your .env as well. Note that you can get your environment on the index dashboard under the host url. 6. last but not least, remember to update your pinceone.ts file's line => const pineconeIndex = client.Index(

[@FahadKiani1]

hey @@mikenemrok7203 - did it work for you? I tried this as well but didn't work

[@innovatespark]

Hi, I need some help with the Postgres on the terminal in Visual Studio Code.

[@SyedRaahim-zv4br]

Please Help! I set up s3 exactly like you said but i still get a CORS error when i try to upload the file.

[@WarTornTales]

i had the same issue, and my problem was that i had the region wrong!

[@stevenlarsen5273]

I'm getting the following error when inserting into pinecone - TypeError: Cannot read properties of undefined (reading 'text'), when in fact it does read the text. Any ideas?

[@kiransalve403]

This is awesome content man, can anyone tell me if I show this project in my portfolio, will get job as fresher

[@akelebelay1025]

Can anybody help me how can I search multiple pdf's instead of only one at a time?

[@ibrarshah2336]

What should we have learned before this video so we understand it easily?

[@juancarlosmaciasnajera4946]

typescript , react and how works a api rest

[@jellalfernand]

Thank you for this video. It is very interesting. I just need to know which font you use in your Visual Studio Code. Please

[@matthiaswiehl9267]

Looks like Space Mono to me.

[@razexamvs8756]

Has anyone done the project fully..if yes pls comment below..

[@slawikus1982]

Thanks for a wonderful tutorial! It took me the whole weekend to accomplish it :) Does anyone know how to fix the errors which pop up on each page? It seems they also pop up during the authors progress (errors popup on the left bottom side of the screen). Warning: Expected server HTML to contain a matching in . Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: An error occurred during hydration. The server HTML was replaced with client content in . Warning: validateDOMNesting(...): cannot appear as a child of . Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server. Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

[@brilliantchicken4873]

This might be it: On your layout.tsx, move the into the tag.

[@slawikus1982]

@@brilliantchicken4873 thanks for a reply! I'll give it a try!

[@codeheaven559]

i'm always getting null in userId while const { userId } = auth(); although i'm loggedin? Have you faced similar issue?

[@KiritoKun-fl7fh]

currently, the app is working fine but there's an issue the openai is not able to read the PDF the output is a general GPT response response is as I apologize for the misunderstanding, but as an AI assistant, I am unable to directly access or analyze specific files or documents. However, you can provide me with any specific information or questions from the resume, and I'll be more than happy to provide assistance based on my knowledge and expertise.

[@CA_786]

So how much money would we need to invest in order to gain this reocuuring revenue?

[@AnonymousAccount514]

what do you mean?

[@CA_786]

@@AnonymousAccount514 to build and deploy this, to set it all up, including openai (which is expensive if we talking about gpt4) I don't have enough time to watch a 4 hour vid for no reason so I'd like to know if it's actually a feasible thing or recquires money investment

[@drali4075]

i wish i knew this at my 20s

[@STN_YT]

Depending on your age in your 20s the technology was not there to begin with

[@drali4075]

truesay and stil i dont if would keep with the speed of tech or already left me behind@@STN_YT

[@DailyQuizVideos]

What terminal did you open in the beginning?

[@aryanmauryamr.perfect1426]

Sir but open ai api is not free

[@junaidiqbal4104]

there is alot of confusion at 2:20:00, why we need the hash, and why we need the metadata to handle, while the langchain handle this its own

[@gabrielotieno9697]

For me to use OpenAI Embedding Api key, should I pay for it?

[@osamarizk]

I think the subscription is not completed yet, as where is the credit that should give to user, then ask him to subscribe to pro? Please advise

[@brentusc1]

with the large number of packages installed to create this project, does anyone understand if this is expensive to run on the server? I have not finished yet and my folder has 35,753 files and 682MB. I'm wondering if it is best practice to use fewer packages/components for a small web app or if this is not an issue.

[@deifosplayground8873]

most likely the bigest folder is the nodel_modules, it should not be a problem, however you can remove or change libraries to see if the size changes.

[@crels7360]

Having this error after setting up the Toaster: "Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported." Anyone had the same issue?

[@freshsesay9366]

It really hard to follow along 😮

[@AcademicResearcherSoumyadeepMa]

Can you name the font family used in the VS Code?

[@bloklab]

2:32:06 NAMESPACE ISSUE - hope this helps someone out that is still stuck with this, adjust your step 4. Point within your pinecone.ts file with the below. This will bypass the namespace issue on starter plan (as this only available on an upgraded pinecone tier), you need to remove the namespace convention. An option is to maybe just comment out for use at a later stage and replace with “ await pineconeIndex.upsert(vectors);” “// 4. Upload to pinecone const client = await getPineconeClient(); const pineconeIndex = await client.index('chatpdf'); // Upgraded pinecone tier needed to Namespace // const namespace = pineconeIndex.namespace(convertToAscii(fileKey)); console.log("inserting vectors into pinecone"); await pineconeIndex.upsert(vectors); // upgraded pinecone tier needed for Namespace // await namespace.upsert(vectors); return documents[0] } “

[@ArpitDhamija]

thanks it worked. How are you handling spaces between the words? As for current version of this video, all text combined are inserted without any space between them

[@jackjack121]

Thanks, I was looking for this!

[@mrjt6404]

Can you add subtitles to this video please, The speaker's English is good enough but I have hearing impairment problem

[@GradLearns]

I'm curious if @freecodecamp has a way to download their video so that community caption contributions can be made or if there is a process like that so we can send captions.

[@v1d300]

I can see the option to enable subtitles and the option to show Transcript.

[@amansinghbhadauria2818]

Will all the services and platform used free ?

[@srijayadhikari9600]

FCC in one year : send a rover to proxima centauri 💀

[@feramonicsDigital]

ISSUE Question: [38:31] _export const db = drizzle(sql)_ shows an *error* ---> Argument of type 'NeonQueryFunction' is not assignable to parameter of type 'NeonQueryFunction'. Could you please explain? Thanks.

[@SudhanshuPanthri]

Replace your new versions of drizzle kit and orm and change them to this in your package.json file "drizzle-kit": "^0.19.13", "drizzle-orm": "^0.28.5", once done just run npm install and see if the error persists. It worked for me.

[@nahidraihan]

I am facing typescript problem with this line "const sql = neon(process.env.DATABASE_URL); export const db = drizzle(sql);", how to solve this?

[@aetheredits7966]

has anyone used cloudinary instead of s3 bucket??

[@AtifAli-pm]

Having a serious issue not sure how to fix anyone have nay ideas? "Error upserting chunk [PineconeError: PineconeClient: Error calling upsert: PineconeError: The requested feature 'Namespaces' is not supported by the current index type 'Starter'.]"

[@sidekillergaming9793]

Fixed?

[@louisamoah-nuamah5915]

Just don't use the gcp-starter environment, delete your project and recreate a new project with a different free-tier environment.

[@ArpitDhamija]

@@louisamoah-nuamah5915 I'm getting same error, I have created index in free-tier in pinecone

[@ArpitDhamija]

I just fixed it. Delete the starter project and also delete the index. Then make a new project in free-tier

[@ajinkyabodke_]

@@ArpitDhamija hi after fixing this i got new error TypeError: Cannot read properties of undefined (reading 'text') at eval (webpack-internal:///(rsc)/./node_modules/@pinecone-database/pinecone/dist/errors/utils.js:136:40) at step (webpack-internal:///(rsc)/./node_modules/@pinecone-database/pinecone/dist/errors/utils.js:107:23)

[@geeovanni44]

I am running into issues with axios. I just wrote a lengthy comment regarding this and it seems to have been deleted. I need help!!!

[@salazarjohnseth]

Great tutorial. However, I'm stuck with the 'Set Up AWS S3' part. Is there a free alternative to it? Update: Used firebase instead as it's a free alternative to AWS. Update: Used isPending instead of isLoading in 1:42:15

[@kapilojha]

can you share how you used firebase in this project i'm stuck their too.

[@salazarjohnseth]

@@kapilojha Now I'm trying to find a free alternative to OpenAI API.

[@kapilojha]

@@salazarjohnseth I have made the Amazon S3 work but successfully wasted $5.90 dollars and the embeddings still aren't working 🥲 now I have switched to a totally different approach to this project which h is using only python libraries to make this project and even deploy it. Using python

[@junaidiqbal4104]

i did the same, firebase, prisma, open ai, neondb, qdrant

[@tonystank8105]

we need a next js tutorial asap!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@LUIZBRASIL1982]

I reduced the speed in 25% and is still fast lol 🙃

[@aghorastore]

Have someone had this issue? "PermanentRedirect: The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint."

[@ittechzone8036]

Can we upload multiple pdfs to chat??

[@tjmusicofficial6408]

how to get open ai api key in thiss

[@Hammad_raza100]

Just curious to know that, if everyone of the viewers build this app by copying, then will everyone will able to make money out of it ?

[@johnapple3471]

dont you need to create a separae index for each new pdf?

[@junaidiqbal4104]

i am thinking the same

[@CrzyGazara]

bookmark for me @44:55

[@gabrielotieno9697]

@elliotchong, let me take this time thank you for the knowledge shared. I have an inquiry. After uploading the PDF file on my own, I encounter an error messages. How can I fix it

[@questreal5812]

What's the error message?

[@gabrielotieno9697]

​@questreal5812 the error is "error creating chat"

[@kartiksaini-xn6ke]

I am getting the same error, please help. Is that error coming from "FileUpload.tsx" and axios ?

[@gabrielotieno9697]

@@kartiksaini-xn6ke I noticed in the Pinecone.ts file that one must remove the environment parameter. It fixed my problem

[@cookstolo7781]

@@kartiksaini-xn6ke how did you fix it

[@GenXdad]

For everyone struggling with the cadence. x .75

[@folajhimie]

First to make a comment

[@techcreatorbook]

Does this bot have memory?

[@tiimmyvegas4974]

This doesn’t work with starter pod by the way

[@0pc0de]

I see your point. After doing a bit of digging, I found that the author changed the source code in pinecone.ts to upsert the vectors to this console.log('Inserting vectors into pinecone') const namespace = pineconeIndex.namespace(convertToASCII(fileKey)) await namespace.upsert(vectors) This however doesn't work and gives the error : PineconeBadRequestError: The requested feature 'Namespaces' is not supported by the current index type 'Starter'. which basically means exactly what you said, THIS DOESN'T WORK WITH STARTER POD! Bummer

[@HEWfunkingKNEWit]

Stripe not available in every country fyi

[@AnonymousAccount514]

is there a Stripe equivalent...Use that instead?

[@chessknock17]

Connect to VPN?

[@AnonymousAccount514]

@@chessknock17 is that an actual practice for actual businesses in non-Stripe countries? wouldnt it be too slow?

[@chessknock17]

@AnonymousAccount514 I don't believe it's a standard practicein business. I was only saying you can connect to VPN to be able to test/build your application and see what it's like