1️⃣ Get Started with Clerk 👉 https://go.clerk.com/R9MPryz
2️⃣ Get Started with Wxflows tool 👉 https://ibm.biz/wxflows-sonny
❗️Get the Complete Source Code for FREE 👉 https://www.papareact.com/ai-agent-bu...
🚨 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 powerful AI Agent with Next.js 15 that can interact with various tools and services. In this comprehensive build, you'll learn:
👉 How to implement Prompt Caching for optimized AI responses using Anthropic's caching feature (Drastically reduces token usage)
👉 How to integrate IBM's wxflows tooling to make any data source a tool in seconds, including YouTube transcripts and Google Books APIs!
👉 How to use LangChain and LangGraph for sophisticated tool usage, including:
State management with StateGraph
Tool orchestration with ToolNode
Memory management with MemorySaver
Intelligent message trimming for context management
👉 Build custom streaming solutions for Next.js 15, working around LangChainAdapter limitations when working with Custom Tools
Real-time token streaming
Tool execution feedback
Proper error handling for failed tool calls
👉 Create a modern chat interface with:
Real-time updates
Message history management
Tool interaction visualization
👉 Implement authentication with Clerk and integrate it with Convex database for:
User management
Chat history persistence
Real-time data synchronization
👉 Leverage Claude 3.5 Sonnet for advanced AI capabilities with:
Tool-augmented responses
Context-aware conversations
Efficient token management (4096 token context window)
👉 Deploy your application to production via Vercel with:
Environment variable management
Production-ready configurations
Performance optimization
MORE!
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter
🕐 TIMESTAMPS:
0:00 Introduction
01:05 Build Demo
06:17 Explaining IBM’s Watsonx.ai Engine
10:26 Build Tech Stack
17:08 Build Breakdown (1/2)
27:12 Setting Up Clerk for Authentication
30:17 Initialising the Build
33:04 Build Breakdown (2/2)
42:43 Setting Up IBM’s Watsonx.ai Engine (Wxflows)
49:40 Implementing Clerk for Authentication
52:07 Setting Up Convex
57:51 Implementing Clerk & Convex Together
1:07:33 Building the Landing Page
1:14:33 Implementing Clerk Passkey Functionality (1/2)
1:21:04 Building the Dashboard Page
1:27:02 Building the Header Component
1:30:02 Implementing Clerk Passkey Functionality (2/2)
1:32:16 Adding State management via 'use' hook (React 19)
1:41:57 Building the Sidebar Component
1:48:31 Implementing Convex
1:53:37 Implementing Create & Delete Functionality for Chats
2:02:18 Building the Chat Row Component
2:07:51 Building the Dashboard Page
2:10:48 Building the Chat Page
2:20:30 Building the Chat Interface Component
2:43:04 Explaining the Build
2:47:00 Implementing Streaming
3:01:15 Setting Up LangChain & langgraph
3:05:26 Setting Up Anthropic (Claude)
3:10:14 Implementing IBM Wxflows (for Tools)
3:27:51 Implementing langgraph [LangChain Framework] (1/2)
3:31:51 Creating & Explaining System Message (for Prompt Caching)
3:36:59 Implementing langgraph [LangChain Framework] (2/2)
3:55:09 Implementing Prompt Caching
4:01:50 Building the Complete Message Flow
4:12:25 Building the Streaming Functionality
4:31:00 Building the Message Bubbles with Shadcn/ui
4:37:20 Live Debugging the Streaming Functionality
4:48:55 Testing the Build & Final Fixes
5:07:43 Deploying to Vercel
5:13:15 Final Deployed Build Demo
5:18:04 Build Summary
5:20:11 Outro
Let’s get it PAPAFAM 🔥.
#nextjs15 #ai #aiagents #reactjs #aiagent #javascript #convex #ibm #openai #backend #coding #tutorial #beginner #programming
