DEV Community

Ali Ibrahim
Ali Ibrahim

Posted on

Building Production-Ready AI Agents with Next.js and LangGraph.js

#nextjs #langchain #ai #javascript

I recently open-sourced a fullstack template for building AI agents with Next.js and LangGraph.js, and I wanted to share it with the community!

What is it?

A production-ready starter template that combines Next.js with LangGraph.js and Model Context Protocol (MCP) for building stateful AI agents with human in the loop.

GitHub: https://github.com/IBJunior/fullstack-langgraph-nextjs-agent

Key Features

  • Dynamic Tool Loading: Add MCP servers through the web UI - no code changes required
  • Human-in-the-Loop: Approve or deny tool executions before they run
  • Persistent Memory: PostgreSQL-backed conversation history using LangGraph checkpointer
  • Real-time Streaming: Server-Sent Events with React Query for optimistic UI
  • Modern Stack: Next.js 15, React 19, TypeScript, Prisma, Tailwind CSS, shadcn/ui

Architecture Highlights

The agent uses LangGraph's StateGraph with an agent → tool_approval → tools flow:

  1. User sends a message
  2. Agent processes and requests tool execution
  3. Graph interrupts at tool_approval node
  4. Frontend shows approval UI with tool details
  5. User approves → agent continues with Command
  6. Results stream back in real-time

Quick Start 

# Clone and install
git clone https://github.com/IBJunior/fullstack-langgraph-nextjs-agent.git
cd fullstack-langgraph-nextjs-agent
pnpm install

# Setup environment
cp .env.example .env.local
# Add your OPENAI_API_KEY or GOOGLE_API_KEY

# Start PostgreSQL
docker compose up -d

# Setup database
pnpm prisma:migrate

# Run dev server
pnpm dev
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:3000 and start chatting!

The Agent Interface

Chat Interface

Why MCP Integration?

Instead of hardcoding tools, Model Context Protocol lets you:

  • Add/remove tools dynamically through the UI
  • Use any MCP server from the official catalog
  • Configure servers with environment variables and args
  • Tool names are automatically prefixed to prevent conflicts

Example: Add the filesystem MCP server, and your agent can read/write files. Add a web search server, and it can search the internet. All without touching your code!

Tech Stack

  • Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS
  • Backend: Node.js, Prisma ORM, PostgreSQL
  • AI: LangGraph.js, @langchain/mcp-adapters
  • Models: OpenAI (GPT-4o, GPT-5-mini, etc) & Google AI (Gemini)

Perfect For

  • Learning LangGraph.js and StateGraph patterns
  • Building AI agents that need human oversight
  • Experimenting with Model Context Protocol servers
  • Starting production AI agent projects

Documentation

The repo includes:

  • Detailed architecture documentation
  • MCP server setup examples
  • Tool approval workflow guides
  • CLAUDE.md for AI assistant guidance

Contributing

This is meant to be a community resource! Contributions, issues, and feedback are all welcome.

Check it out and let me know what you think! Happy to answer any questions about the implementation.

GitHub: https://github.com/IBJunior/fullstack-langgraph-nextjs-agent

Top comments (0)