ChatBuddy
An AI-Powered Conversational Assistant with Real-Time Tool Intelligence. A modern, full-stack AI chat application that can fetch live weather data, search books, summarize YouTube videos, and look up Wikipedia facts — all while streaming responses token-by-token.
- Next.js 15
- React 19
- TypeScript
- Tailwind CSS
- Claude AI (Anthropic)
- LangChain
- LangGraph
- Convex
- Clerk
- Server-Sent Events (SSE)
How I framed it.
ChatBuddy is a modern, full-stack AI chat application that goes beyond simple question-answering. It's an intelligent assistant that can fetch live weather data, search books, summarize YouTube videos, and look up Wikipedia facts — all while streaming responses token-by-token for an instant, engaging user experience. Built with a focus on production-grade architecture, this project demonstrates how to build AI applications that are not only functional but also cost-efficient and scalable.
What it does.
- Lightning-fast responses that appear word-by-word (no waiting for walls of text)
- Smart tool usage — ask about the weather in Tokyo, and watch the AI fetch real-time data
- Seamless conversation history synced across devices
Inside the build.
LangGraph Agent System
Instead of simple prompt → response chains, ChatBuddy uses LangGraph's stateful agent architecture. The AI can decide when to use tools vs. respond directly, execute tools and incorporate results into its response, and loop back for multi-step reasoning when needed.
Real-Time Streaming (SSE)
Responses stream token-by-token directly to the browser. Users see the AI "thinking" in real-time, with visual indicators when tools are being used.
Anthropic Prompt Caching
System prompts and tool definitions are cached using Anthropic's cache_control mechanism, reducing API costs on repeated conversations by avoiding redundant token processing.
Optimistic UI with Real-Time Sync
Messages appear instantly (optimistic updates) while being persisted to Convex in the background. The app stays snappy while maintaining data consistency.
Under the hood.
- Clean separation between AI logic, API layer, and frontend
- Sophisticated streaming architecture using Server-Sent Events (SSE)
- Cost optimization through Anthropic's prompt caching system
The toolkit.
Weather
Real-time weather data for any city worldwide
Google Books
Search books by title, author, or topic
YouTube Transcript
Extract and summarize video content from URLs
Wikipedia
Factual lookups for people, places, events, and concepts
What I learned.
- Two-layer streaming: Understanding that LangGraph's streamEvents() operates independently of the model's streaming setting
- Prompt caching eligibility: Meeting Anthropic's token thresholds for cost-effective caching
- SSE message parsing: Handling chunked data streams and buffer management on the frontend
- Tool call visualization: Showing users when AI tools are active without disrupting the UX