Practical overview
When it fits
Use it as a starting point when an agent application needs MCP connectivity, human-in-the-loop tool handling, persistent PostgreSQL conversations and streamed web responses in a TypeScript and Next.js stack.
Who it is for
- Developers building LangGraph.js agents with a web interface
- Teams that need review controls before agent tools execute
- Builders creating persistent, self-hosted or cloud-deployable agent chat applications
Documented uses
- Create a Next.js chat interface for a LangGraph.js agent
- Load tools dynamically from stdio or HTTP MCP servers
- Review, approve, deny or modify proposed tool calls
- Persist conversation threads and resume them across sessions
- Stream agent responses to the interface
Requirements & limits
The repository is public and MIT licensed. Local setup requires Node.js 18+, pnpm, Docker and an API key from a supported model provider.
- MCP servers can be configured through the web interface and may use stdio or HTTP.
- The approval flow includes approve, deny and modify controls, with documented auto-approval for trusted environments.
- PostgreSQL and Prisma provide the documented persistence layer for LangGraph checkpoints and conversation threads.
- S3-compatible storage is used for file uploads, with MinIO listed for development and AWS S3 or Cloudflare R2 for production.
- Langfuse observability is optional and can use a cloud or self-hosted instance.
Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.
Set up the LangGraph.js agent template locally
Prepare the documented Next.js agent workspace, supporting services and database before starting the development server.
Before you start
- Node.js 18+ and pnpm
- Docker for PostgreSQL and MinIO
- An OpenAI, Google AI or Anthropic API key
Steps
Clone the repository, enter its directory and install dependencies with pnpm.
Copy .env.example to .env.local and configure DATABASE_URL plus one or more model API keys.
Start PostgreSQL and MinIO with Docker Compose.
Generate the Prisma client and run the Prisma database migration.
Start the development server with pnpm dev and open the documented local address.
Expected outcome
A local development instance is prepared for chatting with the agent through the Next.js interface.
Guide limitations
- The documented setup does not establish deployment compatibility or a completed production rollout.
- The guide does not demonstrate a particular model provider or MCP server working in a live run.
Configure an MCP server in the agent interface
Add an MCP server configuration so the template can load tools dynamically.
Before you start
- A running local or remote MCP server
- Access to the template's Settings interface
- For stdio servers, the server command and permitted path arguments; for HTTP servers, its URL
Steps
Open Settings from the sidebar.
Choose Add MCP Server.
Enter a unique name and select stdio or http.
For stdio, provide the command and arguments; for HTTP, provide the server URL.
Save the configuration and use the configured server within the agent workflow.
Expected outcome
The agent configuration contains an MCP server entry for dynamic tool management.
Guide limitations
- The supplied material does not identify a specific external MCP server or verify a completed tool call.
- Custom tool integration remains dependent on the configured server and its own requirements.
Sources & review
Source record details
- Source availability
- Active
- Sources checked
- 3 October 2026
- Original website title
- agentailor/fullstack-langgraph-nextjs-agent · Official homepage title · retained in its source language