MNK/portfolio
GenAI & agents

Conversational AI Agent

6 tools · live reasoning traces

ReAct-style AI agent with tool calling, a visible live thinking panel, and real-time streaming. Built on a LangGraph state graph with persistent SQLite-backed memory, custom tools, and a Next.js chat frontend talking to a FastAPI + WebSocket backend.

Problem

Show how an agent reasons and uses tools instead of hiding it behind a chat box.

Approach

  1. LangGraph ReAct state graph with six tools: Calculator, Weather, DateTime, Web Search, Code Interpreter and RAG Search
  2. Live thinking panel with visible reasoning traces, streamed over WebSocket
  3. SQLite checkpointer for persistent memory
  4. FastAPI backend and a Next.js chat frontend
Conversational AI Agent workflow: 4 stages from input to result
Workflow

Screens

Conversational AI Agent screenshot 1 of 11Conversational AI Agent screenshot 2 of 11Conversational AI Agent screenshot 3 of 11Conversational AI Agent screenshot 4 of 11Conversational AI Agent screenshot 5 of 11Conversational AI Agent screenshot 6 of 11Conversational AI Agent screenshot 7 of 11Conversational AI Agent screenshot 8 of 11Conversational AI Agent screenshot 9 of 11Conversational AI Agent screenshot 10 of 11Conversational AI Agent screenshot 11 of 11

Results

  • Visible reasoning for every tool call
  • Memory that persists across conversations

Stack

  • LangGraph
  • FastAPI
  • WebSocket
  • Next.js
  • SQLite
  • OpenAI

By Muzammil Nawaz Khan, AI Engineer.