Loading repository data…
agentailor / repository
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 with TypeScript, React, Prisma, and Tailwind CSS.
A production-ready Next.js template for building AI agents with LangGraph.js, featuring Model Context Protocol (MCP) integration, human-in-the-loop tool approval, and persistent memory.
Complete agent workflow: user input → tool approval → execution → streaming response
I help teams design and optimize LangGraph-based AI agents (RAG, memory, latency, architecture).
If you're building something serious on top of this template and want hands-on help:
Happy to jump on a short call.
localStorage automaticallyLANGFUSE_ENABLED env var — zero overhead when disabledgit clone https://github.com/IBJunior/fullstack-langgraph-nextjs-agent.git
cd fullstack-langgraph-nextjs-agent
pnpm install
cp .env.example .env.local
Edit .env.local with your configuration:
# Database
DATABASE_URL="postgresql://user:password@localhost:5434/agent_db"
# AI Models (choose one or more)
OPENAI_API_KEY="sk-..."
GOOGLE_API_KEY="..."
ANTHROPIC_API_KEY="sk-ant-..."
# Optional: Default model
DEFAULT_MODEL="gpt-4o-mini" # or "gemini-1.5-flash" or "claude-sonnet-4-5"
docker compose up -d # Starts PostgreSQL and MinIO
pnpm prisma:generate
pnpm prisma:migrate
pnpm dev
# Or use custom port
pnpm dev --port=3005
Visit http://localhost:3000 to start chatting with your AI agent!
stdio or httpnpx @modelcontextprotocol/server-filesystem)["/path/to/allow"])MCP server configuration form with example filesystem server setup
Want to build your own MCP server? Check out create-mcp-server - scaffold production-ready MCP servers in seconds with TypeScript, multiple frameworks (MCP SDK or FastMCP), and built-in debugging tools.
{
"name": "filesystem",
"type": "stdio",
"command": "npx",
"args": ["@modelcontextprotocol/server-filesystem", "/Users/yourname/Documents"]
}
{
"name": "web-api",
"type": "http",
"url": "http://localhost:8080/mcp",
"headers": {
"Authorization": "Bearer your-token"
}
}
Note: Some HTTP MCP servers require OAuth 2.0 authentication. See OAuth Documentation for details.
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ Next.js UI │◄──►│ Agent Service │◄──►│ LangGraph.js │
│ (React 19) │ │ (SSE Streaming) │ │ Agent │
└─────────────────┘ └──────────────────┘ └─────────────────┘
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ React Query │ │ Prisma │ │ MCP Clients │
│ (State Mgmt) │ │ (Database) │ │ (Tools) │
└─────────────────┘ └──────────────────┘ └─────────────────┘
│
▼
┌──────────────────────────────┐
│ PostgreSQL │ MinIO/S3 │
│ (Persistence)│ (File Store) │
└──────────────────────────────┘
src/lib/agent/builder.ts)src/lib/agent/mcp.ts)src/services/agentService.ts)src/hooks/useChatThread.ts)src/lib/storage/)For detailed architecture documentation, see docs/ARCHITECTURE.md.
The app serves an interactive OpenAPI 3.1 explorer at /api-docs and the raw spec at
/api/openapi — generated from per-route Zod schemas. See docs/API.md for how
it works and how to document new routes.
pnpm dev # Start development server with Turbopack
pnpm build # Production build
pnpm start # Start production server
pnpm lint # Run ESLint
pnpm format # Format with Prettier
pnpm format:check # Check formatting
# Database
pnpm prisma:generate # Generate Prisma client (after schema changes)
pnpm prisma:migrate # Create and apply migrations
pnpm prisma:studio # Open Prisma Studio (database UI)
src/
├── app/ # Next.js App Router
│ ├── api/ # API routes (stream, upload, mcp-servers)
│ └── thread/ # Thread-specific pages
├── components/ # React components
├── hooks/ # Custom React hooks
├── lib/ # Core utilities
│ ├── agent/ # Agent-related logic
│ └── storage/ # File upload & S3 utilities
├── services/ # Business logic
└── types/ # TypeScript definitions
prisma/
├── schema.prisma # Database schema
└── migrations/ # Database migrations
src/lib/agent/builder.ts, src/lib/agent/mcp.tssrc/app/api/agent/stream/route.ts, src/app/api/agent/upload/route.tssrc/lib/storage/ (validation, upload, content processing)prisma/schema.prismasrc/components/Thread.tsx, src/components/MessageInput.tsxsrc/hooks/useChatThread.tsWe welcome contributions! This project is designed to be a community resource for LangGraph.js development.
git checkout -b feature/amazing-featuregit commit -m 'Add amazing feature'git push origin feature/amazing-featureSelected from shared topics, language and repository description—not editorial ratings.
taskforce-aiagent /
TaskForce is a modular, open-source, production-ready TypeScript agent framework for orchestrating AI agents, LLM-powered autonomous agents, task pipelines, dynamic toolchains, RAG workflows and memory/retrieval systems.
bazx-bit /
18720+ .production-ready AI agent prompts, tool schemas, and framework configs. The "Tailwind UI" for AI Agents — organized by department, industry, and compliance standard. Copy-paste into CrewAI, LangGraph, AutoGen, or Vercel AI SDK.
willnapolinighub /
A powerful, production-ready hierarchical multi-agent framework with a visual builder for creating, orchestrating, and deploying AI agent systems. Built with TypeScript, Next.js 16, and featuring a drag-and-drop workflow canvas.
autosergach /
Production-ready starter for building AI agents with Claude Agent SDK. Includes subagents, hooks, session management, and real-world examples.
XidaoApi /
Production-ready MCP (Model Context Protocol) server template for OpenAI-compatible backends. Build AI agent tools with multi-provider routing, failover, and observability.
joeychrys /
A full-stack AI agent application with a Mastra-powered backend and a Next.js chat frontend. This monorepo pairs a TypeScript agent framework with a production-ready web app that includes authentication, payments, and a conversational UI built on assistant-ui.