LangGraph Next.js Agent
Production-ready Next.js template for building AI agents with LangGraph.js. Features MCP integration for dynamic tool loading, human-in-the-loop tool approval, persistent conversation memory with PostgreSQL, and real-time streaming responses. Built w
What is LangGraph Next.js Agent?
LangGraph Next.js Agent is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to production-ready next.js template for building ai agents with langgraph.js. features mcp integration for dynamic tool loading, human-in-the-loop tool approval, persistent conversation memory with post...
Production-ready Next.js template for building AI agents with LangGraph.js. Features MCP integration for dynamic tool loading, human-in-the-loop tool approval, persistent conversation memory with PostgreSQL, and real-time streaming responses. Built w
This server falls under the Coding Agents category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Production-ready Next.js template for building AI agents wit
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx fullstack-langgraph-nextjs-agentConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use LangGraph Next.js Agent
The Fullstack LangGraph Next.js Agent is a production-ready template for building AI agent applications that integrate MCP servers for dynamic tool loading. It combines LangGraph.js for stateful agent orchestration, PostgreSQL for persistent conversation memory across sessions, a human-in-the-loop tool approval UI, real-time streaming via Server-Sent Events, and optional Langfuse observability — all within a single Next.js application. Teams use it as a foundation for building internal AI tools, customer-facing agents, or agentic workflows that need durable state and MCP-powered extensibility.
Prerequisites
- Node.js 18 or later with pnpm installed
- A PostgreSQL database (local Docker instance or hosted, e.g., Supabase, Neon, Tiger Cloud)
- At least one LLM API key: OPENAI_API_KEY, GOOGLE_API_KEY, or ANTHROPIC_API_KEY
- An MCP-compatible server to connect (the template ships with filesystem MCP as a demo)
- Optional: a Langfuse account for LLM observability tracing
Clone the template repository
Clone the project and install dependencies using pnpm. The template is designed to be used as a starting point, not installed as a package.
git clone https://github.com/agentailor/fullstack-langgraph-nextjs-agent.git
cd fullstack-langgraph-nextjs-agent
pnpm installSet up environment variables
Copy the example env file and populate it with your database URL and at least one LLM provider key. The DEFAULT_MODEL variable is optional and selects the model used by the agent.
cp .env.example .env.local
# Edit .env.local:
# DATABASE_URL=postgresql://user:pass@localhost:5432/agentdb
# OPENAI_API_KEY=sk-...
# ANTHROPIC_API_KEY=sk-ant-...
# DEFAULT_MODEL=gpt-4o-miniInitialize the PostgreSQL database
Run the database migration to create the LangGraph checkpointer tables that store conversation history across sessions.
pnpm db:migrateStart the development server
Launch the Next.js development server. The app runs on port 3000 by default and exposes both the agent chat UI and the MCP server configuration settings page.
pnpm devAdd MCP servers through the Settings UI
Navigate to the Settings page in the running app and add MCP servers by name, type (stdio or http), and connection details. No code changes are required — tools are loaded dynamically at runtime.
Enable Langfuse observability (optional)
If you want end-to-end LLM tracing, add your Langfuse keys to .env.local. All agent steps, tool calls, and token usage will be logged automatically.
# Add to .env.local:
# LANGFUSE_PUBLIC_KEY=pk-lf-...
# LANGFUSE_SECRET_KEY=sk-lf-...
# LANGFUSE_HOST=https://cloud.langfuse.comLangGraph Next.js Agent Examples
Client configuration
Environment configuration for the LangGraph Next.js agent with OpenAI and PostgreSQL.
{
"DATABASE_URL": "postgresql://user:password@localhost:5432/agentdb",
"OPENAI_API_KEY": "sk-...",
"DEFAULT_MODEL": "gpt-4o-mini",
"LANGFUSE_PUBLIC_KEY": "pk-lf-...",
"LANGFUSE_SECRET_KEY": "sk-lf-...",
"LANGFUSE_HOST": "https://cloud.langfuse.com"
}Prompts to try
Example interactions with the LangGraph agent once MCP tools are loaded.
- "Read the file at /tmp/data.csv and summarize its contents"
- "Search the web for the latest LangGraph.js release notes"
- "Remember this preference for future sessions: I prefer TypeScript over JavaScript"
- "Approve or deny: the agent wants to write to /tmp/output.txt — should it proceed?"
- "Show me all tool calls made in this conversation and their results"Troubleshooting LangGraph Next.js Agent
Database migration fails with connection refused
Ensure PostgreSQL is running and the DATABASE_URL in .env.local uses the correct host, port, and credentials. For local Docker: `docker run -e POSTGRES_PASSWORD=pass -p 5432:5432 postgres:16`.
MCP tools not appearing after adding a server in Settings
Dynamic tool loading happens at agent request time, not at startup. Send a new message to the agent after adding an MCP server — it will discover and register the tools on the next request.
Streaming responses cut off mid-message
Check that your deployment environment (Vercel, Netlify, etc.) supports long-lived SSE connections. Vercel Edge Functions have a 25-second timeout; use Vercel Fluid or a standard Node.js server for long-running agent streams.
Frequently Asked Questions about LangGraph Next.js Agent
What is LangGraph Next.js Agent?
LangGraph Next.js Agent is a Model Context Protocol (MCP) server that production-ready next.js template for building ai agents with langgraph.js. features mcp integration for dynamic tool loading, human-in-the-loop tool approval, persistent conversation memory with postgresql, and real-time streaming responses. built w It connects AI assistants to external tools and data sources through a standardized interface.
How do I install LangGraph Next.js Agent?
Follow the installation instructions on the LangGraph Next.js Agent GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with LangGraph Next.js Agent?
LangGraph Next.js Agent works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is LangGraph Next.js Agent free to use?
Yes, LangGraph Next.js Agent is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
LangGraph Next.js Agent Alternatives — Similar Coding Agents Servers
Looking for alternatives to LangGraph Next.js Agent? Here are other popular coding agents servers you can use with Claude, Cursor, and VS Code.
Dify
★ 142.2kProduction-ready platform for agentic workflow development.
Ruflo
★ 54.0k🌊 The leading agent orchestration platform for Claude. Deploy intelligent multi-agent swarms, coordinate autonomous workflows, and build conversational AI systems. Features enterprise-grade architecture, self-learning swarm intelligence, RAG integrat
Goose
★ 45.7kan open source, extensible AI agent that goes beyond code suggestions - install, execute, edit, and test with any LLM
Antigravity Awesome Skills
★ 38.3kInstallable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.
AgentScope
★ 25.5kBuild and run agents you can see, understand and trust.
Serena
★ 24.5kA coding agent toolkit that provides IDE-like semantic code retrieval and editing tools, enabling LLMs to efficiently navigate and modify codebases using symbol-level operations instead of basic file reading and string replacements.
Browse More Coding Agents MCP Servers
Explore all coding agents servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up LangGraph Next.js Agent in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use LangGraph Next.js Agent?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.