Build a SMART Portfolio Website (Next.js 14, Langchain, Vercel AI SDK, OpenAI API, Tailwind CSS)

The coolest portfolio website you can build to impress recruiters and friends! It has an AI chatbot that is trained on YOUR data. The AI can answer any question about you and scan your website for relevant information & links.

You will learn about vector embeddings and vector databases, LLMs, prompting, API requests, response streaming, markdown formatting, and more.

You can use the same code to build any other kind of website chatbot, like a smart documentation page. This is the technology you'll need as a developer in the future.

Project files:

📣 Follow Coding in Flow on social media:

Timestamps:
0:00 - What you will build
21:58 - Portfolio website design & metadata
56:41 - Dark theme with next-themes
1:04:41 - Chat box window + useChat (Vercel AI SDK)
1:47:24 - OpenAI ChatGPT API request
1:57:14 - Langchain basics (ChatOpenAI, templates, stream, pipe, invoke)
2:08:16 - Document loading & splitting (DirectoryLoader, TextLoader, RecursiveCharacterTextSplitter)
2:32:20 - Vector embeddings + vector store (AstraDB)
2:48:35 - Langchain vector retriever, createstuffDocumentsChain, createRetrievalChain
3:01:11 - chat_history + createHistoryAwareRetriever (rephrase search prompt)
3:11:59 - Langchain caching (Upstash Redis)
3:19:42 - Deployment (Vercel)

[AmphibianDev]

Man, do you read my mind or what the f**k is happening? I can't thank you enough. I am at the beginning of starting my own company, and you come out with exactly what I needed to build my website. For the moment, I don't have any money to spare, but when I do, I will surely support you by buying your course or making a donation.

[xCarter]

I'm always amazed by how knowledgeable you are in all of these different topics. I've watched and followed along with all of your tutorials so far and I'm more and more impressed each time. Truly amazing what you are doing here and can't thank you enough!

[neelusingh]

Thanks GURU (A Sanskrit word means teacher). Love from India

[GregPeters]

I'm a huge fan of yours, Florian. Appreciate the outstanding content

[wordslivelonger]

Kudos and massive appreciation for using the latest and in-demand technologies and your unique perspective in integrating AI chatbots with Langchain for building applications based on LLMs and it showcases a forward-thinking approach that sets you apart in the ever-evolving tech landscape on youtube.

[mehraj]

A great tutorial will definitely implement it for my portfolio website
Thanks a lot

[quilloai]

My question is how will I load also the file components that don't have text? Like example <HeroSection /> but the text is on that component how will i load it?

[sahilmund]

Can we change the db from astraDb to supabase postgres db. Can u assist me on it

[gonzalovillafane]

How do you recommend I add text? I have 100 pages of text (its a pdf)

[kwonsama]

I have a question. When receiving a response through API, how do receive a response without websocket or sse?

[rapidinsightsai]

great tutorials. Please keep them coming!

[kordou]

Great Content! Thank you for that. RECOMENDED

[azzamismail]

Great content as always. This is a site i would definitely build for myself since I am always worrying about what design to go with. Minimalist wins.

[amanasrani]

This is amazing, i l need this, really thank you🙏🏻❤

[hklyt]

Damn. Thank you so much. Watching from Kenya 🇰🇪

[JeanBaptisteChabi]

Another geat one, please can you make a video on how to develop a mobile app with react native for an existing next js web app, not PWA but native app using the same data as the next js web app

[henrikfogbunzel]

Super cool project with which I have made my own website!

However, I am a bit confused about our design. Can I follow Tailwind CSS official documentation or have we made our own?

[prakashbanjade]

I tried the same, but chat model does not impersonate me. The very first 'kwargs' is the prompt template and the context that I can clearly see in the console. But I don't know why, the model can't even reply my name.

[GREENDAYROKS]

Hey bro great tutorial, taught me alot about langchain. One question I have, how are your responses so quick? As a test case I copied your chat route exactly but am getting 15-20 second response times. Would be great to know if you had any insights about this. Thanks again man!

[prakashbanjade]

What about dynamic data? How can the document be generated?