How to Vibe Code a Conversational AI Dashboard with Cursor + Claude 3.7 + LangChain

Описание: Learn how to build with AI 🚀 Join our Skool community: https://go.gritai.studio/vibe-code-st...

Can we vibe code our way with Cursor and build a tool that lets us talk to our data? In this episode of Build With Grit, I test out Claude 3.7 Sonnet's coding capabilities by adding a conversational AI to our Norwegian Police Incident Dashboard.

I'll show you how to
✅ Create a chat interface component for our dashboard
✅ Add AI capabilities using LangChain and LangGraph's ReAct agent framework
✅ Equip our AI with tool-calling abilities to query real-time and historical police data
✅ Allow natural language questions about incident statistics and trends

🎯 Timestamps:
0:00 - Intro
1:09 - Vibe Coding Best Practices
2:17 - Let's Start Coding
3:56 - Brainstorm Approach
5:00 - Vibe Coding Conversational Interface
6:54 - First MVP
8:40 - Adding AI Capabilities (LangChain)
12:35 - First Impression
13:12 - How to Set Up Tool Calling
14:32 - LangGraph Benefits
15:40 - LangGraph ReAct Agent
16:16 - Back to "Coding"
17:22 - Model Context Protocol (MCP) Benefits
18:00 - Powerful Cursor Trick
20:55 - Tool Calling Tips
25:52 - Testing Conversation AI
29:02 - Conversation AI Working!
30:59 - Improved Formatting and Suggestions
34:30 - Final Version
36:38 - Recap and Summary


Follow me for more AI building techniques:
Website: https://www.gritai.studio/
Newsletter: https://gritai.kit.com/

#cursor #vibecoding #aicoding #langgraph #langchain