fullstack-langgraph-nextjs-agent

概述

这是一个全面的 Next.js 模板，用于构建生产级的 LangGraph.js AI 代理。它完全集成了模型上下文协议（MCP），支持动态工具加载而无需更改代码。模板包含人工审批工具执行的循环系统，基于 PostgreSQL 的持久对话记忆，以及实时流式响应。使用 TypeScript、React、Prisma 和 Tailwind CSS 构建，提供现代技术栈，支持多模态文件上传和可观察性功能。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

• dynamic_tool_loading

  Dynamically load tools from MCP servers configured in the database

  试试:Load the filesystem tool试试:Add tools from the web API server
• approve_tool_execution

  Approve, deny, or modify tool execution before it happens

  试试:Allow the tool to run试试:Deny this tool execution试试:Modify the tool parameters
• upload_file

  Upload images, PDFs, and text files for multimodal processing

  试试:Upload this document for analysis试试:Share this image with the AI
• query_postgres

  Execute queries on the PostgreSQL database with conversation history

  试试:Find our conversation from yesterday试试:Retrieve the previous thread details
• stream_agent_response

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

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

  Configure MCP servers with stdio or HTTP transport

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

  Persist model provider and selection settings in localStorage

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

  Verify if a tool is available and properly configured

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

  Create a new conversation thread with persistent memory

  试试:Start a new conversation试试:Create a fresh thread for this topic
• process_multimodal_input

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

  试试:Analyze this uploaded image试试:Extract text from this PDF
• toggle_langfuse_logging

  Enable or disable Langfuse observability for agent runs

  试试:Turn on Langfuse tracking试试:Disable observability logging
• restore_conversation

  Restore previous conversation state from the database

  试试:Continue our last conversation试试:Pick up where we left off

可对比工具

安装

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

cp .env.example .env.local

# 数据库
DATABASE_URL="postgresql://user:password@localhost:5434/agent_db"

# AI 模型
OPENAI_API_KEY="sk-..."
GOOGLE_API_KEY="..."
ANTHROPIC_API_KEY="sk-ant-..."

docker compose up -d  # 启动 PostgreSQL 和 MinIO

pnpm prisma:generate
pnpm prisma:migrate

pnpm dev

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

FAQ

如何添加新的 MCP 服务器？

进入设置 > 添加 MCP 服务器。使用名称、类型（stdio 或 http）、stdio 服务器的命令/参数或 HTTP 服务器的 URL 来配置服务器。有关示例配置，请参阅 README。

我可以使用自定义 AI 模型吗？

是的，该模板支持 OpenAI、Google AI（Gemini）和 Anthropic 模型。只需将您的 API 密钥添加到 .env.local，然后在界面中选择您喜欢的模型即可。

fullstack-langgraph-nextjs-agent 对比