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

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 Mode…


This content originally appeared on DEV Community and was authored by Ali Ibrahim

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

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


This content originally appeared on DEV Community and was authored by Ali Ibrahim


Print Share Comment Cite Upload Translate Updates
APA

Ali Ibrahim | Sciencx (2025-10-02T17:22:00+00:00) Building Production-Ready AI Agents with Next.js and LangGraph.js. Retrieved from https://www.scien.cx/2025/10/02/building-production-ready-ai-agents-with-next-js-and-langgraph-js/

MLA
" » Building Production-Ready AI Agents with Next.js and LangGraph.js." Ali Ibrahim | Sciencx - Thursday October 2, 2025, https://www.scien.cx/2025/10/02/building-production-ready-ai-agents-with-next-js-and-langgraph-js/
HARVARD
Ali Ibrahim | Sciencx Thursday October 2, 2025 » Building Production-Ready AI Agents with Next.js and LangGraph.js., viewed ,<https://www.scien.cx/2025/10/02/building-production-ready-ai-agents-with-next-js-and-langgraph-js/>
VANCOUVER
Ali Ibrahim | Sciencx - » Building Production-Ready AI Agents with Next.js and LangGraph.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/10/02/building-production-ready-ai-agents-with-next-js-and-langgraph-js/
CHICAGO
" » Building Production-Ready AI Agents with Next.js and LangGraph.js." Ali Ibrahim | Sciencx - Accessed . https://www.scien.cx/2025/10/02/building-production-ready-ai-agents-with-next-js-and-langgraph-js/
IEEE
" » Building Production-Ready AI Agents with Next.js and LangGraph.js." Ali Ibrahim | Sciencx [Online]. Available: https://www.scien.cx/2025/10/02/building-production-ready-ai-agents-with-next-js-and-langgraph-js/. [Accessed: ]
rf:citation
» Building Production-Ready AI Agents with Next.js and LangGraph.js | Ali Ibrahim | Sciencx | https://www.scien.cx/2025/10/02/building-production-ready-ai-agents-with-next-js-and-langgraph-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts