fullstack-langgraph-nextjs-agent

Overview

This is a comprehensive Next.js template for building production-ready AI agents with LangGraph.js. It features full Model Context Protocol (MCP) integration allowing dynamic tool loading without code changes. The template includes a human-in-the-loop approval system for tool execution, persistent conversation memory with PostgreSQL backend, and real-time streaming responses. Built with TypeScript, React, Prisma, and Tailwind CSS, it offers a modern tech stack with multimodal file uploads and observability features.

Try asking AI

After installing, here are 5 things you can ask your AI assistant:

• dynamic_tool_loading

  Dynamically load tools from MCP servers configured in the database

  Try:Load the filesystem toolTry:Add tools from the web API server
• approve_tool_execution

  Approve, deny, or modify tool execution before it happens

  Try:Allow the tool to runTry:Deny this tool executionTry:Modify the tool parameters
• upload_file

  Upload images, PDFs, and text files for multimodal processing

  Try:Upload this document for analysisTry:Share this image with the AI
• query_postgres

  Execute queries on the PostgreSQL database with conversation history

  Try:Find our conversation from yesterdayTry:Retrieve the previous thread details
• stream_agent_response

  Stream real-time responses from the AI agent using Server-Sent Events

  Try:Stream the response to my queryTry:Show me the agent's thinking in real-time
• configure_mcp_server

  Configure MCP servers with stdio or HTTP transport

  Try:Add a filesystem MCP serverTry:Configure an API-based MCP server
• save_model_settings

  Persist model provider and selection settings in localStorage

  Try:Save GPT-4 as my default modelTry:Remember my model preferences
• check_tool_availability

  Verify if a tool is available and properly configured

  Try:Is the filesystem tool available?Try:Check if the web API server is connected
• create_conversation_thread

  Create a new conversation thread with persistent memory

  Try:Start a new conversationTry:Create a fresh thread for this topic
• process_multimodal_input

  Process and analyze multimodal inputs including text, images, and PDFs

  Try:Analyze this uploaded imageTry:Extract text from this PDF
• toggle_langfuse_logging

  Enable or disable Langfuse observability for agent runs

  Try:Turn on Langfuse trackingTry:Disable observability logging
• restore_conversation

  Restore previous conversation state from the database

  Try:Continue our last conversationTry:Pick up where we left off

Comparable tools

Installation

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

cp .env.example .env.local

# Database
DATABASE_URL="postgresql://user:password@localhost:5434/agent_db"

# AI Models
OPENAI_API_KEY="sk-..."
GOOGLE_API_KEY="..."
ANTHROPIC_API_KEY="sk-ant-..."

docker compose up -d  # Starts PostgreSQL and MinIO

pnpm prisma:generate
pnpm prisma:migrate

pnpm dev

{"mcpServers": {"langgraph-agent": {"command": "node", "args": ["path/to/your/project/dist/server.js"]}}}

FAQ

How do I add new MCP servers?

Navigate to Settings > Add MCP Server. Configure the server with name, type (stdio or http), command/args for stdio servers, or URL for HTTP servers. See README for example configurations.

Can I use custom AI models?

Yes, the template supports OpenAI, Google AI (Gemini), and Anthropic models. Simply add your API key to .env.local and select your preferred model in the interface.

Compare fullstack-langgraph-nextjs-agent with