Building AI Agents: From Streaming Chatbots to LangGraph with MCP
How to build AI agents in Next.js — from a simple streaming chatbot with SQLite memory, to tool-calling agents, MCP servers, and LangGraph state machines using the Vercel AI SDK and LangChain.
Get the Full Source Code on GitHub
This article is a summary. The full, runnable project —
all five progressively advanced agent tabs, the SQLite
database, and the MCP server — lives in the audoir/ai-agent-tutorial repository.
Introduction
Building AI agents has never been more accessible, yet the landscape of tools and frameworks can be overwhelming. The ai-agent-tutorial repository takes a progressive approach — each tab in the demo UI corresponds to a more advanced API route, letting you see exactly how the complexity grows and what capabilities each layer adds.
This post summarizes the five tabs: a simple streaming chatbot backed by SQLite memory, inline tool-calling, tools served over MCP, and finally LangChain and LangGraph as a powerful alternative to the Vercel AI SDK. Head to the repo for the full, runnable code.
The Database
Every tab shares a single in-memory SQLite database (via better-sqlite3), created once when the Node.js process starts. It has three business tables (inventory, customers, sales) that the agents query and modify, plus three internal tables (chat_sessions, chat_messages, tool_calls) that track conversation history and log every tool call an agent makes — visible live in the app's "View Database" tab.
Five Progressive Agent Tabs
Each tab wires up a different API route, building in complexity from a basic streaming chatbot to a full LangGraph state machine.
🤖 Basic AI Agent
The simplest possible agent: a streaming chatbot using the Vercel AI SDK's streamText(), with conversation memory implemented manually by saving every message to SQLite and re-sending the full history on each turn.
🛠️ AI Agent with Tools
Adds function-calling: three tool() definitions (one per database table) let the model generate and execute SQL against the database, with stopWhen capping the reasoning loop at 10 steps.
⚡ AI Agent with MCP
The same tools from Tab 2, now served over the Model Context Protocol (MCP) via mcp-handler. The agent discovers tools dynamically at runtime instead of importing them inline.
🦜 Basic LangChain Agent
Introduces LangChain and LangGraph as an alternative to the Vercel AI SDK — a tool-free chatbot that demonstrates LangGraph's built-in SqliteSaver checkpointer for automatic conversation memory.
🕸️ LangGraph with Tools
The most advanced tab: a hand-built StateGraph (llmCall ↔ toolNode) gives you explicit control over the agent's reasoning loop, in contrast to the automatic loop the Vercel AI SDK provides in Tab 2.
Key Concepts
Inline Tools vs. MCP Tools
Inline tools (Tab 2) are simple and coupled to one agent. MCP tools (Tab 3) run behind a standard protocol, making them discoverable and reusable across any MCP-compatible agent or app.
Manual Memory vs. Checkpointing
Tab 1 manually persists chat history to SQLite. LangGraph (Tabs 4 & 5) automates this with a SqliteSaver checkpointer keyed by thread_id.
Automatic Agentic Loop
The Vercel AI SDK (Tabs 1–3) handles the tool-call loop for you — less code, less control, ideal for standard tool-calling patterns.
Explicit State Graphs
LangGraph (Tab 5) lets you define the reasoning loop as an explicit graph — more code, but full control over branching, logging, and multi-step workflows.
Architecture at a Glance
Each tab maps to a progressively more advanced API route:
Tab 1 POST /api/chat → streamText + manual SQLite memory
Tab 2 POST /api/chat-with-tools → streamText + inline tool() defs
Tab 3 POST /api/chat-with-mcp → streamText + MCP client → /api/mcp/mcp
Tab 4 POST /api/chat-with-langchain → LangChain createAgent + SqliteSaver
Tab 5 POST /api/chat-with-langgraph → LangGraph StateGraph + SqliteSaverTwo shared utility modules keep things DRY across tabs — lib/sql-tools.ts (the Zod input schema and SQL execution helpers used by Tabs 2, 3, and 5) and lib/chat-session.ts (session creation and message persistence used by Tabs 1 and 2). See the repository for the full implementation of every route and utility.
Key Dependencies
| Package | Purpose |
|---|---|
ai / @ai-sdk/openai | Vercel AI SDK core and OpenAI provider — streamText, tool |
@ai-sdk/mcp / mcp-handler | MCP client for the AI SDK and MCP server handler for Next.js routes |
@langchain/openai / @langchain/langgraph | LangChain OpenAI integration and LangGraph StateGraph primitives |
@langchain/langgraph-checkpoint-sqlite | SQLite checkpointer for LangGraph |
better-sqlite3 | Synchronous SQLite driver for Node.js |
zod | Schema validation for tool inputs |
Conclusion
There is no single "right" way to build AI agents. The Vercel AI SDK offers a streamlined, low-boilerplate path for standard tool-calling patterns, while LangGraph gives you explicit control over the agent's reasoning loop — ideal for complex, branching workflows.
MCP sits orthogonally to both: it's a protocol for making tools reusable and discoverable, regardless of which agent framework you choose. Together, these five tabs give you a complete picture of the modern AI agent stack.
Ready to Build It Yourself?
Clone the repository, add your OpenAI API key, and run all five agent tabs locally to see the full progression in action.
Clone ai-agent-tutorial on GitHubAbout the Author
Wayne Cheng is the founder and AI app developer at Audoir, LLC. Prior to founding Audoir, he worked as a hardware design engineer for Silicon Valley startups and an audio engineer for creative organizations. He holds an MSEE from UC Davis and a Music Technology degree from Foothill College.
Further Exploration
Experiment with extending the examples in the ai-agent-tutorial repository . Consider adding new tools, implementing human-in-the-loop steps, or connecting to external APIs to deepen your understanding of AI agent architectures.
For more AI-powered development tools and tutorials, visit Audoir .