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.

We build this project with cutting-edge technology: Next.js 14 (app router), Langchain, Vercel AI SDK, TypeScript, Tailwind CSS, and more.

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.

Sign up for DataStax Astra using your business email, and be eligible for free credits to help accelerate your new project: https://dtsx.io/3SnE2Y2

Project files:
Starting code: https://github.com/codinginflow/nextjs-langchain-portfolio/tree/0-Starting-Point
globals.css: https://github.com/codinginflow/nextjs-langchain-portfolio/blob/Final-Project/src/app/globals.css
tailwind.config.ts: https://github.com/codinginflow/nextjs-langchain-portfolio/blob/Final-Project/tailwind.config.ts
Background image: https://github.com/codinginflow/nextjs-langchain-portfolio/blob/Final-Project/public/background.png

⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbestpractices
💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter
💬 Join our developer community on Discord: https://codinginflow.com/discord

📣 Follow Coding in Flow on social media:
Twitter: https://twitter.com/codinginflow
Instagram: https://instagram.com/codinginflow
TikTok: https://tiktok.com/@codinginflow
Facebook: https://facebook.com/codinginflow

Timestamps:
0:00 – What you will build
6:03 – Next.js project setup + Prettier setup + Tailwind theming
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)