Build a SMART Portfolio Website (Next.js 14, Langchain, Vercel AI SDK, ChatGPT 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:

Project files:
Starting code:
Background image:

Get my full-stack Next.js with Express & TypeScript course:
Get my free React Best Practices course:
Join my newsletter for regular web dev tips:
Join our developer community on Discord:

Follow Coding in Flow on social media:

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)

This gaming startup tries to show 'AI + crypto' is not a fad

This gaming startup tries to show ‘AI + crypto’ is not a fad

keymakr image annotation

The Vital Role of Image Annotation in 2024