Nebulaforge MCP Powered Langgraph Orchestration

基于模型上下文协议的LangGraph.js人工智能代理

一个用于使用LangGraph.js构建智能AI代理的生产就绪Next.js模板，具有通过模型上下文协议（MCP）动态加载工具、人工在环审批和持久对话记忆的功能。

Demo

*完整的工作流程演示：用户输入→ 工具调用批准→ 执行→ 实时流媒体响应*

     

______________________________________________________________________

目录

• 特性
• 为什么是这个模板？
• 快速开始
• 详细设置指南
• 截图
• 使用指南
• 建筑
• 项目结构
• 发展
• 故障排除
• API 参考
• 贡献
• 资源
• 许可证

______________________________________________________________________

特性

🔧 使用模型上下文协议（MCP）进行动态工具加载

这 模型上下文协议 是一种革命性的标准，允许AI代理在运行时动态发现和使用工具，而无需将其硬编码到您的应用程序中。

• 零代码工具集成 -通过web UI添加新功能，无需代码部署
• 通用工具标准 -使用不断增长的生态系统中的任何兼容MCP的工具服务器
• 多种运输方式 -支持stdio（本地进程）和HTTP（远程服务）MCP服务器
• 自动工具发现 -代理启动时，工具会动态加载
• 命名空间工具名称 -防止与自动服务器名称前缀的冲突（例如。， filesystem_read_file)
• 数据库备份配置 -所有MCP服务器配置都存储在PostgreSQL中以实现持久性

支持的MCP服务器类型：

• 文件系统 -读/写文件，列出目录
• 网络搜索 -Brave Search，谷歌搜索集成
• 数据库 -PostgreSQL、SQLite、MongoDB连接器
• API集成 -REST API、GraphQL端点
• 自定义服务器 -使用MCP SDK构建自己的

🤝 人在循环工具批准

通过交互式工具调用批准，让用户对AI操作进行精细控制。

• 执行前批准 -AI在运行敏感操作之前暂停
• 详细参数检查 -查看AI计划使用的确切论据
• 三方审批流程:

- ✅ 允许 -按要求执行工具 - ❌ 拒绝 -拒绝工具调用，不使用它继续 - ✏️ 修改 -执行前编辑参数（未来增强）

• 自动审批模式 -可信环境的可选旁路
• 每工具粒度 -选择需要批准的工具
• 实时中断 -使用LangGraph的中断系统实现无缝暂停/恢复

Interactive tool approval dialog showing detailed parameter inspection

💾 持久对话记忆

永远不要失去PostgreSQL支持的对话持久性的上下文。

• LangGraph检查点 -每一步都有自动状态快照
• 完整消息历史记录 -使用元数据完成对话日志
• 基于线程的组织 -多个独立对话
• 跨会话简历 -从你停止的地方继续
• 工具调用跟踪 -记录所有工具调用和结果
• 中断恢复 -工具批准后无缝恢复

技术实施：

• 用途 @langchain/langgraph-checkpoint-postgres 用于状态存储
• 存储图形状态、消息和工具结果
• 启用时间旅行调试和对话回放
• 线程ID映射到唯一的检查点命名空间

⚡ 实时流媒体接口

由服务器发送事件提供的流畅、响应迅速的用户体验。

• 逐个令牌流式传输 -查看生成的AI响应
• 服务器发送事件（SSE） -高效的单向流协议
• 乐观的UI更新 -使用React Query进行即时消息渲染
• 类型安全消息 -TypeScript完全覆盖所有消息类型
• 优雅的错误处理 -网络故障、超时和重试
• 渐进增强 -无需JavaScript即可实现基本功能

支持的消息类型：

• human -用户消息
• ai -助理响应（文本+工具调用）
• tool -工具执行结果
• error -带有用户友好消息的错误状态

🎨 现代技术栈

采用尖端技术构建，提供最大的开发人员体验。

前端：

• Next.js 15.5 -带有App Router和Turbopack的React框架
• 反应19.1 -最新React，具有改进的钩子和并发功能
• TypeScript 5.9 -整个烟囱的全型安全
• 顺风CSS 4 -实用程序优先的样式和自定义配置
• shadcn/ui -高质量、可访问的React组件
• Lucide图标 -美观、一致的图标系统
• 帧运动 -流畅的动画和过渡

后端：

• Node.js -JavaScript运行时（需要v18+）
• 棱镜6.16 -具有自动迁移功能的类型安全ORM
• PostgreSQL 17 -强大的关系数据库
• LangGraph.js 1.0 -AI代理状态机框架
• LangChain.js -AI模型抽象和实用程序

AI/ML：

• OpenAI GPT模型 -GPT-4、GPT-4 Turbo、GPT-3.5 Turbo支持
• 谷歌双子座模型 -Gemini 1.5 Flash、Pro、Ultra支持
• 安thropic克劳德 -易于通过LangChain适配器添加
• 定制型号 -带上自己的模型提供商

开发人员工具：

• pnpm -快速、磁盘高效的包管理器
• ESLint -使用Next.js配置进行代码跳转
• 更漂亮 -意见化的代码格式化程序
• Docker Compose -一个命令数据库设置

______________________________________________________________________

为什么是这个模板？

问题

构建可用于生产的AI代理是复杂的：

• 🔴 工具集成需要为每个功能定制代码
• 🔴 没有管理代理权限的标准化方法
• 🔴 会话之间的会话历史记录丢失
• 🔴 流媒体响应很难正确实现
• 🔴 将UI状态与异步AI操作协调起来很棘手

解决方案

此模板提供：

• ✅ MCP标准 -Anthropic、OpenAI等支持的通用工具协议
• ✅ 内置认证 -无需自定义工作流代码的人工监督
• ✅ 自动持久化 -零配置对话内存
• ✅ 生产SSE -久经考验的流媒体实现
• ✅ React查询集成 -乐观的用户界面“刚刚好用”

这是给谁的？

• 人工智能工程师 -使用真实工具快速原型化LangGraph代理
• 产品团队 -采用经过验证的架构，船舶AI功能更快
• 研究人员 -尝试代理工作流程和工具使用
• 学习者 -通过工作代码了解生产AI代理模式

______________________________________________________________________

快速开始

先决条件

在开始之前，请确保您已经：

• Node.js 18+ - 点击此处下载
• pnpm -安装时使用 npm install -g pnpm
• Docker 桌面版 - 点击此处下载 （适用于PostgreSQL）
• AI API密钥 -从以下位置获取一个：

- OpenAI平台 （GPT型号） - 谷歌AI工作室 （双子模型）

安装（5分钟）

# 1. Clone the repository
git clone 
cd fullstack-langgraph-nextjs-agent

# 2. Install dependencies
pnpm install

# 3. Set up environment variables
cp .env.example .env.local

# 4. Edit .env.local with your API key (see next section)

# 5. Start PostgreSQL with Docker
docker compose up -d

# 6. Set up the database
pnpm prisma:generate
pnpm prisma:migrate

# 7. Start the development server
pnpm dev

🎉 就是这样！ 打开 http://localhost:3000 然后开始和你的AI代理聊天。

______________________________________________________________________

详细设置指南

步骤1：环境配置

复制后 .env.example 到 .env.local，配置以下变量：

# =============================================================================
# API Base URL (for frontend API calls)
# =============================================================================
NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api/agent

# =============================================================================
# PostgreSQL Database Configuration
# =============================================================================
# These match the Docker Compose settings - only change if you modify compose.yaml
POSTGRES_USER=user
POSTGRES_PASSWORD=password
POSTGRES_DB=mydb

# Full database connection string
# Format: postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=public
DATABASE_URL=postgresql://user:password@localhost:5434/mydb?schema=public

# =============================================================================
# AI Model API Keys (at least one required)
# =============================================================================

# Google AI (Gemini models) - Free tier: 15 requests/minute
# Get your key: https://aistudio.google.com/app/apikey
GOOGLE_API_KEY=your_google_api_key_here

# OpenAI (GPT models) - Paid tier required
# Get your key: https://platform.openai.com/api-keys
OPENAI_API_KEY=your_openai_api_key_here

# =============================================================================
# Optional: Default Model Selection
# =============================================================================
# Uncomment and set your preferred default model
# DEFAULT_MODEL=gpt-4o-mini          # OpenAI GPT-4 Omni Mini
# DEFAULT_MODEL=gpt-4-turbo          # OpenAI GPT-4 Turbo
# DEFAULT_MODEL=gemini-2.5-flash     # Google Gemini 2.5 Flash (fastest)
# DEFAULT_MODEL=gemini-1.5-pro       # Google Gemini 1.5 Pro (best reasoning)

步骤2：数据库设置

启动PostgreSQL：

# Start Docker Desktop first (if not running)

# Start PostgreSQL in the background
docker compose up -d

# Verify it's running
docker ps
# Should show: postgres:17-alpine container on port 5434

运行迁移：

# Generate Prisma client (needed after any schema changes)
pnpm prisma:generate

# Create database tables
pnpm prisma:migrate

# Optional: Open Prisma Studio to inspect the database
pnpm prisma:studio
# Opens at http://localhost:5555

数据库架构：

迁移创建了两个表：

model Thread {
  id        String   @id @default(uuid())  // Unique thread ID
  title     String                         // Thread name/title
  createdAt DateTime @default(now())       // Creation timestamp
  updatedAt DateTime @updatedAt            // Last update timestamp
}

model MCPServer {
  id        String        @id @default(uuid())  // Unique server ID
  name      String        @unique                // Server name (e.g., "filesystem")
  type      MCPServerType                       // "stdio" or "http"
  enabled   Boolean       @default(true)        // Enable/disable server
  // For stdio servers:
  command   String?                             // Command to run (e.g., "npx")
  args      Json?                               // Command arguments array
  env       Json?                               // Environment variables
  // For http servers:
  url       String?                             // HTTP endpoint URL
  headers   Json?                               // HTTP headers (auth, etc.)
  createdAt DateTime      @default(now())
  updatedAt DateTime      @updatedAt
}

enum MCPServerType {
  stdio  // Local process communication
  http   // Remote HTTP communication
}

步骤3：启动开发服务器

pnpm dev

预期产量：

  ▲ Next.js 15.5.4
  - Local:        http://localhost:3000
  - Turbopack:    enabled
  - Experiments:  turbopack

 ✓ Starting...
 ✓ Ready in 1.2s

服务器启动故障排除：

步骤4：验证安装

1. 打开应用程序：导航到 http://localhost:3000
2. 创建一个线程：单击侧栏中的“新线程”
3. 发送消息：键入“Hello！”并按Enter键
4. 检查AI响应：您应该看到来自AI的流式响应

如果AI没有回应：

• 检查浏览器控制台是否有错误（F12→ 控制台选项卡）
• 在中验证您的API密钥是否正确 .env.local
• 确保您有剩余的API配额
• 检查正在运行的终端中的服务器日志 pnpm dev

______________________________________________________________________

截图

Main Chat Interface

Clean, responsive design with real-time streaming responses

MCP Server Management

Easy setup and configuration of tool servers via web UI

Thread Management

Organize multiple conversations with persistent history

Agent Configuration

Support for multiple AI model providers (OpenAI, Google)

______________________________________________________________________

使用指南

创建和管理线程

线程 是独立的对话会话，有自己的历史和背景。

1. 创建新线程:

- 点击侧边栏中的“新话题”按钮 - 给它一个描述性的标题（可选） - 立即开始聊天

1. 在线程之间切换:

- 单击侧边栏中的任何线程进行切换 - 保留所有消息历史记录 - 每个线程都保持自己的对话状态

1. 删除线程:

- 将鼠标悬停在侧边栏中的某个线程上 - 点击垃圾箱图标 - 确认删除（此操作无法撤消）

添加MCP服务器

MCP服务器提供AI代理可以使用的工具。以下是如何添加它们：

1. 导航到“设置”:

- 点击齿轮图标(⚙️) 在侧边栏中 - 转到“MCP服务器”选项卡

1. 添加新服务器:

- 点击“添加MCP服务器” - 填写配置表

1. 服务器配置字段:

Add MCP Server *显示文件系统服务器设置的MCP服务器配置表*

MCP服务器配置示例

1.文件系统服务器（本地文件访问）

允许AI读取/写入特定目录中的文件。

{
  "name": "filesystem",
  "type": "stdio",
  "command": "npx",
  "args": [
    "@modelcontextprotocol/server-filesystem",
    "/Users/yourname/Documents"
  ],
  "enabled": true
}

⚠️ 重要：路径必须存在且可访问。使用绝对路径。

提供的工具：

• filesystem_read_file -读取文件内容
• filesystem_write_file -写入文件
• filesystem_list_directory -列出目录内容
• filesystem_create_directory -创建新目录
• filesystem_move_file -移动/重命名文件
• filesystem_get_file_info -获取文件元数据

2.Brave搜索服务器（网络搜索）

使人工智能能够使用勇敢搜索API搜索网页。

{
  "name": "brave-search",
  "type": "stdio",
  "command": "npx",
  "args": ["-y", "@modelcontextprotocol/server-brave-search"],
  "env": {
    "BRAVE_API_KEY": "your_brave_api_key"
  },
  "enabled": true
}

获取API密钥: 勇敢搜索API

提供的工具：

• brave-search_web_search -搜索网页
• brave-search_local_search -搜索本地企业

3.PostgreSQL数据库服务器

允许AI查询您的PostgreSQL数据库。

{
  "name": "postgres",
  "type": "stdio",
  "command": "npx",
  "args": ["-y", "@modelcontextprotocol/server-postgres"],
  "env": {
    "POSTGRES_CONNECTION_STRING": "postgresql://user:pass@localhost:5432/dbname"
  },
  "enabled": true
}

⚠️ 安全警告：仅适用于生产环境中的只读数据库用户。

4.HTTP API服务器（自定义远程工具）

连接到通过HTTP运行的自定义MCP服务器。

{
  "name": "custom-api",
  "type": "http",
  "url": "https://api.example.com/mcp",
  "headers": {
    "Authorization": "Bearer your_api_token",
    "X-API-Version": "1.0"
  },
  "enabled": true
}

构建自定义HTTP服务器：参见 MCP SDK文档

工具审批工作流

启用工具批准后，会发生以下情况：

1. AI分析请求:

- 用户发送一条消息，如“我的文档文件夹中有哪些文件？” - AI决定使用 filesystem_list_directory 工具

1. 出现审批提示:

- 执行自动暂停 - UI显示工具名称、描述和参数 - 用户看到确切的参数： {"path": "/Users/yourname/Documents"}

1. 用户做出决策:

- ✅ 允许：工具按所示参数执行 - ❌ 拒绝：AI在不使用工具的情况下继续运行 - *（未来）* ✏️ 修改：执行前编辑参数

1. 执行仍在继续:

- 如果允许，工具将运行并返回结果 - 人工智能将结果纳入其响应中 - 对话自然流畅

配置审批设置：

// In your chat interface, set approval mode:
const { sendMessage } = useChatThread({ threadId });

// Require approval for all tools
await sendMessage("Search the web for AI news", {
  approveAllTools: false  // Default behavior
});

// Auto-approve all tools (trusted mode)
await sendMessage("Search the web for AI news", {
  approveAllTools: true
});

根据工具批准 （未来增强）：

// Approve specific tools only
await sendMessage("Search the web and read my files", {
  tools: ["brave-search_web_search"],  // Only web search allowed
  approveAllTools: false
});

选择AI模型

根据您的需求在不同的AI模型之间切换：

通过用户界面 （推荐）：

1. 打开设置(⚙️ 侧边栏中的图标）
2. 转到“代理配置”
3. 从下拉列表中选择您喜欢的型号

通过API:

await sendMessage("Explain quantum computing", {
  model: "gpt-4o-mini"  // or "gemini-2.5-flash"
});

型号比较：

费率限制（自由层）：

• 谷歌双子座Flash：15个请求/分钟，1500个/天
• OpenAI：需要付费帐户

______________________________________________________________________

建筑

高级系统设计

┌─────────────────────────────────────────────────────────────────┐
│                         Next.js Frontend                        │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────────────┐  │
│  │   Thread.tsx │  │ useChatThread│  │  React Query Cache  │  │
│  │  (UI Layer)  │─▶│  (Hook)      │─▶│  (State Management) │  │
│  └──────────────┘  └──────────────┘  └──────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼ HTTP/SSE
┌─────────────────────────────────────────────────────────────────┐
│                      Next.js API Routes                         │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │  /api/agent/stream                                       │   │
│  │  • Receives user messages                                │   │
│  │  • Opens SSE connection                                  │   │
│  │  • Streams AI responses chunk-by-chunk                   │   │
│  └──────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                       Agent Service Layer                       │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │  agentService.ts (streamResponse)                        │   │
│  │  • Loads MCP tools from database                         │   │
│  │  • Creates LangGraph agent instance                      │   │
│  │  • Handles streaming iteration                           │   │
│  │  • Processes message chunks                              │   │
│  └──────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                      LangGraph.js Agent                         │
│  ┌─────────────┐  ┌──────────────┐  ┌────────────────────────┐ │
│  │   START     │─▶│ callModel    │─▶│ tool_approval (wait)   │ │
│  └─────────────┘  └──────────────┘  └────────────────────────┘ │
│                           │                      │               │
│                           ▼                      ▼               │
│                    ┌─────────────┐      ┌──────────────────┐    │
│                    │  AI Model   │      │  User Approves   │    │
│                    │  (OpenAI/   │      │  or Denies Tool  │    │
│                    │   Google)   │      └──────────────────┘    │
│                    └─────────────┘               │               │
│                           │                      ▼               │
│                           ▼              ┌──────────────────┐    │
│                    ┌─────────────┐      │  callTools       │    │
│                    │  Response   │◀─────│  (execute)       │    │
│                    └─────────────┘      └──────────────────┘    │
│                           │                      │               │
│                           └──────────┬───────────┘               │
│                                      ▼                            │
│                              ┌──────────────┐                    │
│                              │   END        │                    │
│                              └──────────────┘                    │
└─────────────────────────────────────────────────────────────────┘
                              │
                ┌─────────────┴─────────────┐
                ▼                           ▼
┌────────────────────────────┐  ┌─────────────────────────┐
│   MCP Tool Servers         │  │  PostgreSQL Database    │
│  ┌──────────────────────┐  │  │  ┌──────────────────┐   │
│  │ Filesystem Server    │  │  │  │ Thread Table     │   │
│  │ (stdio)              │  │  │  ├──────────────────┤   │
│  ├──────────────────────┤  │  │  │ MCPServer Table  │   │
│  │ Web Search Server    │  │  │  ├──────────────────┤   │
│  │ (stdio)              │  │  │  │ Checkpoints      │   │
│  ├──────────────────────┤  │  │  │ (LangGraph)      │   │
│  │ Custom HTTP Server   │  │  │  └──────────────────┘   │
│  │ (http)               │  │  │                          │
│  └──────────────────────┘  │  └─────────────────────────┘
└────────────────────────────┘

核心组件

1.代理生成器(src/lib/agent/builder.ts)

LangGraph代理的核心。构造一个具有节点和边的状态机。

class AgentBuilder {
  // Creates a StateGraph with:
  // 1. callModel - Invokes AI model
  // 2. tool_approval - Interrupts for user approval
  // 3. callTools - Executes approved tools

  build() {
    const graph = new StateGraph(MessagesAnnotation)
      .addNode("callModel", this.callModel.bind(this))
      .addNode("callTools", toolNode)
      .addEdge("__start__", "callModel")
      .addConditionalEdges("callModel", this.routeAfterModel.bind(this));

    return graph.compile({
      checkpointer: this.checkpointer,
      interruptBefore: ["tool_approval"]  // Pause for approval
    });
  }
}

主要特点：

• 状态管理：用途 MessagesAnnotation 用于类型安全状态
• 中断：暂停执行之前 tool_approval 节点
• 检查点：在每一步将状态保存到PostgreSQL
• 条件路由：基于AI输出的智能边缘（工具调用与最终答案）

2.MCP集成(src/lib/agent/mcp.ts)

从数据库中配置的MCP服务器动态加载工具。

async function loadMCPTools(): Promise {
  // 1. Fetch enabled MCP servers from PostgreSQL
  const servers = await prisma.mCPServer.findMany({
    where: { enabled: true }
  });

  // 2. Connect to each server (stdio or HTTP)
  for (const server of servers) {
    const client = server.type === 'stdio'
      ? new StdioClientTransport(server.command, server.args)
      : new HttpClientTransport(server.url, server.headers);

    // 3. Fetch tools from the server
    const tools = await client.listTools();

    // 4. Prefix tool names to prevent conflicts
    // e.g., "read_file" becomes "filesystem_read_file"
    const prefixedTools = tools.map(tool => ({
      ...tool,
      name: `${server.name}_${tool.name}`
    }));

    allTools.push(...prefixedTools);
  }

  return allTools;
}

为什么这很重要：

• 动态加载：添加/删除工具而不重新部署
• 命名空间安全：多个服务器可以有同名工具
• 与协议无关：适用于本地（stdio）和远程（HTTP）服务器
• 数据库驱动：配置在重新启动后仍然有效

3.流媒体服务(src/services/agentService.ts)

处理从代理流到前端的服务器发送事件。

export async function streamResponse(params: {
  threadId: string;
  userText: string;
  opts?: MessageOptions;
}) {
  // 1. Get or create agent with MCP tools
  const agent = await getOrCreateAgent();

  // 2. Stream graph execution
  const iterable = await agent.stream(
    { messages: [new HumanMessage(params.userText)] },
    {
      configurable: { thread_id: params.threadId },
      streamMode: "updates"  // Get incremental updates
    }
  );

  // 3. Transform graph chunks into message chunks
  async function* generator() {
    for await (const chunk of iterable) {
      // Extract messages from graph state
      const messages = chunk?.callModel?.messages || [];

      for (const msg of messages) {
        // Handle different message types
        if (isAIMessage(msg)) {
          yield {
            type: "ai",
            data: {
              content: msg.content,  // Text response
              tool_calls: msg.tool_calls  // Tool requests
            }
          };
        } else if (isToolMessage(msg)) {
          yield {
            type: "tool",
            data: {
              content: msg.content,  // Tool results
              tool_call_id: msg.tool_call_id
            }
          };
        }
      }
    }
  }

  return generator();
}

流媒体流量：

1. 用户发送消息→ 前端呼叫 /api/agent/stream
2. API路由打开SSE连接
3. streamResponse 创建异步生成器
4. 每次图形更新→ 新的SSE活动
5. 前端接收块→ 增量更新UI

4.聊天挂钩(src/hooks/useChatThread.ts)

React钩子，使用React Query管理客户端聊天状态。

export function useChatThread({ threadId }: Options) {
  const queryClient = useQueryClient();

  // Fetch message history (with React Query caching)
  const { data: messages } = useQuery({
    queryKey: ["messages", threadId],
    queryFn: () => fetchMessageHistory(threadId),
    enabled: !!threadId
  });

  // Send message with optimistic updates
  const sendMessage = async (text: string, opts?: MessageOptions) => {
    // 1. Optimistic UI: add user message immediately
    const userMessage = { type: "human", data: { content: text } };
    queryClient.setQueryData(["messages", threadId], (old) => [
      ...old,
      userMessage
    ]);

    // 2. Open SSE stream
    const stream = createMessageStream(threadId, text, opts);

    // 3. Handle incoming chunks
    stream.onmessage = (event) => {
      const chunk = JSON.parse(event.data);

      // Append AI response incrementally
      queryClient.setQueryData(["messages", threadId], (old) => {
        // Find existing AI message or create new one
        // Update with new content chunk
        // Return updated array
      });
    };
  };

  return { messages, sendMessage };
}

为什么选择React Query？

• 乐观的更新：即时UI反馈
• 自动缓存：没有多余的API调用
• 重新验证时失效：快速感知性能
• 开发工具集成：调试状态易于更改

数据流示例

让我们追踪一个完整的用户交互：

用户：“我的文档文件夹中有哪些文件？”

1.前端（Thread.tsx）:

// User presses Enter
onSubmit(message) {
  sendMessage(message, { approveAllTools: false });
}

2.聊天挂钩（使用ChatThread.ts）:

// Optimistically add user message to UI
queryClient.setQueryData(["messages", threadId], (old) => [
  ...old,
  { type: "human", data: { content: message } }
]);

// Open SSE connection
const stream = createMessageStream(threadId, message);

3.API路由（/API/agent/stream/Route.ts）:

export async function GET(req: NextRequest) {
  const userContent = searchParams.get("content");
  const threadId = searchParams.get("threadId");

  // Create SSE stream
  const stream = new ReadableStream({
    async start(controller) {
      const iterable = await streamResponse({ threadId, userText: userContent });

      for await (const chunk of iterable) {
        // Send SSE event
        controller.enqueue(`data: ${JSON.stringify(chunk)}\n\n`);
      }
    }
  });

  return new Response(stream, {
    headers: { "Content-Type": "text/event-stream" }
  });
}

4.代理服务（agentService.ts）:

// Load MCP tools (including filesystem)
const tools = await loadMCPTools();

// Create agent
const agent = await new AgentBuilder()
  .setTools(tools)
  .build();

// Stream execution
const iterable = await agent.stream(
  { messages: [new HumanMessage(userContent)] },
  { configurable: { thread_id: threadId } }
);

// Yield chunks
for await (const chunk of iterable) {
  yield { type: "ai", data: chunk.callModel.messages[0] };
}

5.LangGraph代理（builder.ts）:

// Node: callModel
async callModel(state) {
  const response = await this.model.invoke(state.messages);

  // Response contains tool call:
  // {
  //   tool_calls: [{
  //     name: "filesystem_list_directory",
  //     args: { path: "/Users/yourname/Documents" }
  //   }]
  // }

  return { messages: [response] };
}

// Conditional edge: has tool calls → interrupt for approval
routeAfterModel(state) {
  const lastMessage = state.messages[state.messages.length - 1];
  if (lastMessage.tool_calls?.length > 0) {
    return "tool_approval";  // INTERRUPT HERE
  }
  return "__end__";
}

6.前端显示审批界面:

// UI renders tool approval dialog
 approveToolExecution(toolCallId, "allow")}
  onDeny={() => approveToolExecution(toolCallId, "deny")}
/>

7.用户点击“允许”:

approveToolExecution(toolCallId, "allow") {
  // Resume graph execution with approval
  await handleStreamResponse({
    threadId,
    opts: { allowTool: "allow" }
  });
}

8.代理人简历:

// Node: callTools (auto-executed after approval)
async callTools(state) {
  const results = await executeMCPTool(
    "filesystem_list_directory",
    { path: "/Users/yourname/Documents" }
  );

  return { messages: [new ToolMessage(results)] };
}

// Back to callModel with tool results
async callModel(state) {
  // State now includes tool results
  // AI generates final response
  const response = await this.model.invoke(state.messages);

  // Response: "I found 15 files in your Documents folder: ..."
  return { messages: [response] };
}

9.前端显示最终响应:

// SSE chunk received
stream.onmessage = (event) => {
  const chunk = JSON.parse(event.data);

  // Incrementally update AI message in UI
  setMessages((old) => [
    ...old,
    { type: "ai", data: { content: chunk.data.content } }
  ]);
};

结果：用户看到他们的文件列表！

______________________________________________________________________

项目结构

fullstack-langgraph-nextjs-agent/
├── src/
│   ├── app/                          # Next.js App Router
│   │   ├── api/                      # API routes
│   │   │   └── agent/
│   │   │       ├── stream/
│   │   │       │   └── route.ts      # SSE streaming endpoint
│   │   │       ├── threads/
│   │   │       │   └── route.ts      # Thread CRUD operations
│   │   │       └── mcp/
│   │   │           └── route.ts      # MCP server management
│   │   ├── thread/
│   │   │   └── [id]/
│   │   │       └── page.tsx          # Individual thread page
│   │   ├── layout.tsx                # Root layout with providers
│   │   ├── page.tsx                  # Home page (redirects to thread)
│   │   └── globals.css               # Global styles
│   │
│   ├── components/                   # React components
│   │   ├── Thread.tsx                # Main chat interface
│   │   ├── ThreadSidebar.tsx         # Thread list sidebar
│   │   ├── MessageBubble.tsx         # Individual message component
│   │   ├── ToolApprovalDialog.tsx    # Tool approval UI
│   │   ├── MCPServerForm.tsx         # MCP server configuration
│   │   └── ui/                       # shadcn/ui components
│   │       ├── button.tsx
│   │       ├── input.tsx
│   │       ├── dialog.tsx
│   │       └── ...
│   │
│   ├── hooks/                        # Custom React hooks
│   │   ├── useChatThread.ts          # Main chat hook
│   │   ├── useThreads.ts             # Thread management
│   │   └── useMCPServers.ts          # MCP server CRUD
│   │
│   ├── lib/                          # Core utilities
│   │   ├── agent/
│   │   │   ├── builder.ts            # LangGraph agent builder
│   │   │   ├── mcp.ts                # MCP tool loader
│   │   │   └── checkpointer.ts       # PostgreSQL checkpointer
│   │   ├── prisma.ts                 # Prisma client singleton
│   │   └── utils.ts                  # Helper functions
│   │
│   ├── services/                     # Business logic layer
│   │   ├── agentService.ts           # Agent streaming service
│   │   ├── chatService.ts            # Chat message service
│   │   ├── threadService.ts          # Thread CRUD service
│   │   └── mcpService.ts             # MCP server service
│   │
│   └── types/                        # TypeScript type definitions
│       ├── message.ts                # Message types
│       ├── thread.ts                 # Thread types
│       └── mcp.ts                    # MCP server types
│
├── prisma/
│   ├── schema.prisma                 # Database schema
│   └── migrations/                   # Database migrations
│       └── 20240101000000_init/
│           └── migration.sql
│
├── docs/
│   └── images/                       # Documentation images
│       ├── hero-demo.gif
│       ├── chat-interface.png
│       ├── tool-approval.png
│       └── ...
│
├── public/                           # Static assets
│   ├── favicon.ico
│   └── ...
│
├── .env.example                      # Environment template
├── .env.local                        # Your local environment (gitignored)
├── compose.yaml                      # Docker Compose config
├── package.json                      # Dependencies and scripts
├── tsconfig.json                     # TypeScript configuration
├── tailwind.config.ts                # Tailwind CSS config
├── next.config.ts                    # Next.js configuration
├── .eslintrc.json                    # ESLint rules
├── .prettierrc                       # Prettier formatting
└── README.md                         # This file!

关键文件说明

前端

• [src/app/thread/\[id\]/page.tsx](src/app/thread/%5Bid%5D/page.tsx) -主线程页面，渲染 `` 组件
• src/组件/线程.tsx -带有消息列表和输入的聊天界面
• src/hocks/useChatThread.ts -React钩子用于聊天状态管理

后端

• src/app/api/agent/stream/route.ts -SSE流API终结点
• src/services/agentService.ts -代理执行和流逻辑
• src/lib/agent/builder.ts -LangGraph代理构建
• src/lib/agent/mcp.ts -MCP工具加载和初始化

数据库

• 普里马/普里马计划 -数据库模式（线程、MCPServer模型）
• src/lib/prisma.ts -Prisma客户端单例（防止热重新加载问题）

配置

• .env.本地 -环境变量（API键、数据库URL）
• 复合yaml -Docker Compose for PostgreSQL
• Tsconflict.儿子 -TypeScript编译器选项
• next.config.ts -Next.js框架配置

______________________________________________________________________

发展

可用脚本

# Development
pnpm dev                 # Start dev server with hot reload (Turbopack)
pnpm build              # Build for production
pnpm start              # Start production server
pnpm lint               # Run ESLint on all files
pnpm format             # Format all files with Prettier
pnpm format:check       # Check if files are formatted

# Database
pnpm prisma:generate    # Generate Prisma client (run after schema changes)
pnpm prisma:migrate     # Create and apply new migration
pnpm prisma:studio      # Open Prisma Studio (visual database editor)

# Custom commands
pnpm prisma db push     # Push schema changes without creating migration
pnpm prisma db seed     # Run database seed script (if configured)

开发工作流程

1.更改数据库架构

# Edit prisma/schema.prisma
# For example, add a new field to Thread model:

model Thread {
  id          String   @id @default(uuid())
  title       String
  description String?  // NEW FIELD
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

# Generate migration
pnpm prisma:migrate

# Enter migration name when prompted
# Example: "add_thread_description"

# This creates:
# - New migration file in prisma/migrations/
# - Updates database schema
# - Regenerates Prisma client

2.添加新的MCP服务器类型

步骤1：如果需要，更新数据库

// prisma/schema.prisma
model MCPServer {
  // Add new fields if required
  timeout Int? @default(30000)  // Example: tool timeout
}

步骤2：更新TypeScript类型

// src/types/mcp.ts
export interface MCPServerConfig {
  // ... existing fields
  timeout?: number;  // Match Prisma model
}

步骤3：更新MCP加载器

// src/lib/agent/mcp.ts
async function loadMCPTools() {
  // ... existing code

  // Handle new config option
  const client = new StdioClientTransport(
    server.command,
    server.args,
    { timeout: server.timeout }  // Use new field
  );
}

步骤4：更新UI表单

// src/components/MCPServerForm.tsx

3.添加新消息类型

// src/types/message.ts
export type MessageType = "human" | "ai" | "tool" | "error" | "system";  // Add "system"

export interface SystemMessageData {
  id: string;
  content: string;
  level: "info" | "warning" | "error";
}

export type MessageResponse =
  | { type: "human"; data: HumanMessageData }
  | { type: "ai"; data: AIMessageData }
  | { type: "tool"; data: ToolMessageData }
  | { type: "error"; data: ErrorMessageData }
  | { type: "system"; data: SystemMessageData };  // Add new type

然后更新消息呈现：

// src/components/MessageBubble.tsx
function MessageBubble({ message }: Props) {
  if (message.type === "system") {
    return (
      

        {message.data.content}
      

    );
  }
  // ... existing message types
}

测试您的更改

手动测试

1. 测试新功能:

# Start dev server
pnpm dev

# In browser:
# 1. Create a new thread
# 2. Test your changes
# 3. Check browser console for errors
# 4. Check terminal logs

1. 测试数据库更改:

# Open Prisma Studio
pnpm prisma:studio

# Verify:
# - New fields appear
# - Migrations applied correctly
# - Data is saved properly

1. 测试API端点:

# Use curl or Postman
curl http://localhost:3000/api/agent/threads

# Or use browser DevTools Network tab

调试

前端调试:

// Add debug logs in components
console.log("[DEBUG] Messages:", messages);
console.log("[DEBUG] Is sending:", isSending);

// Use React DevTools
// - Install React DevTools browser extension
// - Inspect component state and props

后端调试:

// Add debug logs in services
console.log("[DEBUG] Agent stream started:", { threadId, userText });
console.log("[DEBUG] MCP tools loaded:", tools.map(t => t.name));

// Check terminal output while dev server runs

数据库调试:

# View raw SQL queries
export DEBUG="prisma:query"
pnpm dev

# Or use Prisma Studio
pnpm prisma:studio

代码风格指南

TypeScript

// ✅ Good: Explicit types
interface Props {
  threadId: string;
  onSend: (message: string) => Promise;
}

// ❌ Bad: Implicit any
function Component({ threadId, onSend }) {
  // ...
}

// ✅ Good: Async/await with error handling
async function sendMessage(text: string) {
  try {
    await api.send(text);
  } catch (error) {
    console.error("Send failed:", error);
  }
}

// ❌ Bad: Unhandled promise
function sendMessage(text: string) {
  api.send(text);  // Promise not awaited
}

React组件

// ✅ Good: Functional component with types
interface ThreadProps {
  threadId: string;
}

export function Thread({ threadId }: ThreadProps) {
  const { messages, sendMessage } = useChatThread({ threadId });
  // ...
}

// ❌ Bad: Missing types
export function Thread({ threadId }) {
  // ...
}

// ✅ Good: Hooks at top level
function Component() {
  const [state, setState] = useState();
  const data = useQuery(/* ... */);

  useEffect(() => {
    // Side effects
  }, []);
}

// ❌ Bad: Conditional hooks
function Component({ condition }) {
  if (condition) {
    const data = useQuery(/* ... */);  // ERROR: Conditional hook
  }
}

命名规范

// Components: PascalCase
export function ThreadSidebar() {}

// Hooks: camelCase starting with "use"
export function useChatThread() {}

// Services: camelCase with descriptive names
export async function streamResponse() {}

// Types: PascalCase
export interface MessageResponse {}
export type MessageType = "human" | "ai";

// Constants: UPPER_SNAKE_CASE
const DEFAULT_MODEL = "gpt-4o-mini";
const MAX_RETRIES = 3;

______________________________________________________________________

故障排除

常见问题及解决方案

问题：数据库连接失败

错误消息:

PrismaClientInitializationError: Can't reach database server at `localhost:5434`

解决方案:

# Check if Docker is running
docker ps

# If not running, start Docker Desktop

# Start PostgreSQL
docker compose up -d

# Verify container is running
docker ps | grep postgres

# Check logs if still failing
docker compose logs db

替代解决方案 （如果端口5434正在使用中）：

# Find process using port 5434
lsof -i :5434

# Kill the process (replace PID with actual number)
kill -9 

# Restart database
docker compose down
docker compose up -d

问题：未找到Prisma客户端

错误消息:

Error: @prisma/client did not initialize yet. Please run "prisma generate"

解决方案:

# Generate Prisma client
pnpm prisma:generate

# If still failing, clean and reinstall
rm -rf node_modules
pnpm install
pnpm prisma:generate

问题：超过API密钥配额

错误消息:

[429 Too Many Requests] You exceeded your current quota, please check your plan and billing details.

解决方案:

对于 谷歌双子座 （免费套餐：15次/分钟，1500次/天）：

# Wait for rate limit to reset (1 minute for per-minute limit)
# OR
# Get a new API key from https://aistudio.google.com/app/apikey

# Update .env.local
GOOGLE_API_KEY=your_new_key_here

# Restart dev server
# Ctrl+C to stop
pnpm dev

对于 开放人工智能 （需要付费帐户）：

# Check usage: https://platform.openai.com/usage
# Add credits: https://platform.openai.com/account/billing

# Update .env.local
OPENAI_API_KEY=sk-...

# Restart dev server

问题：AI在聊天中没有响应

症状：已发送消息，但未显示AI响应

调试步骤:

1. 检查浏览器控制台 (F12 → 控制台）：

// Look for errors like:
// - Failed to fetch
// - 429 Too Many Requests
// - Network error

1. 检查服务器日志 （终端运行 pnpm dev):

# Look for:
[ERROR] callModel failed: ...
[DEBUG] Agent stream started: ...

1. 验证环境变量:

# Check .env.local has valid API key
cat .env.local | grep API_KEY

# Make sure no quotes around the key
# ✅ Good: GOOGLE_API_KEY=AIzaSy...
# ❌ Bad:  GOOGLE_API_KEY="AIzaSy..."

1. 创建新线程:

Sometimes old threads have corrupted message history.
Click "New Thread" and try again.

1. 检查数据库连接:

pnpm prisma:studio
# If it opens, database is working
# If error, restart PostgreSQL (see above)

问题：MCP服务器未加载

症状：工具未出现在代理中，或出现“找不到工具”错误

调试步骤:

1. 验证服务器配置:

# Open Prisma Studio
pnpm prisma:studio

# Check MCPServer table:
# - Is "enabled" = true?
# - Are args correct JSON array?
# - Is command path correct?

1. 手动测试服务器:

# For filesystem server:
npx @modelcontextprotocol/server-filesystem /path/to/test

# You should see MCP initialization output
# If error, check:
# - Node.js version (need 18+)
# - Path exists and is accessible
# - No permission issues

1. 检查服务器日志 （终端运行 pnpm dev):

# Look for:
[MCP] Loading tools from server: filesystem
[MCP] Loaded 6 tools from filesystem

# Or errors:
[ERROR] Failed to connect to MCP server: ...

1. 常见MCP配置错误:

❌ 参数格式错误:

{
  "args": "/Users/name/Documents"  // WRONG: String instead of array
}

✅ 正确的参数格式:

{
  "args": ["@modelcontextprotocol/server-filesystem", "/Users/name/Documents"]
}

❌ 路径不存在:

{
  "args": ["@modelcontextprotocol/server-filesystem", "/Users/name/Documennts"]
  // Typo: "Documennts" vs "Documents"
}

✅ 有效绝对路径:

{
  "args": ["@modelcontextprotocol/server-filesystem", "/Users/kartikvadhawana/Desktop/Resume _amazon"]
  // Note: Spaces in path are OK, just be exact
}

问题：反应水合错误

错误消息 （在浏览器控制台中）：

Warning: Prop `className` did not match. Server: "..." Client: "..."
Warning: validateDOMNesting:  cannot appear as a descendant of 

解释：这些通常是不影响功能的化妆品警告。

解决方案 （如果他们打扰你）：

1. 检查组件中的嵌套按钮
2. 确保类名逻辑是确定性的（不是基于 Math.random()等等）
3. 使用 suppressHydrationWarning 关于已知的不匹配：

  {/* Content that differs between server/client */}

问题：端口3000已在使用中

错误消息:

Error: listen EADDRINUSE: address already in use :::3000

解决方案:

# Find process using port 3000
lsof -ti :3000

# Kill the process
lsof -ti :3000 | xargs kill -9

# Or use a different port
PORT=3001 pnpm dev

问题：热重载不起作用

症状：代码更改不会反映在浏览器中

解决方案:

# 1. Hard refresh browser
Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)

# 2. Clear Next.js cache
rm -rf .next
pnpm dev

# 3. If using Turbopack, try without it
pnpm next dev  # (instead of next dev --turbopack)

______________________________________________________________________

API 参考

REST端点

GET /api/agent/threads

获取所有对话线索。

响应:

{
  threads: Array
}

示例:

curl http://localhost:3000/api/agent/threads

POST /api/agent/threads

创建一个新的对话线程。

请求正文:

{
  title: string;
}

响应:

{
  thread: {
    id: string;
    title: string;
    createdAt: string;
    updatedAt: string;
  }
}

示例:

curl -X POST http://localhost:3000/api/agent/threads \
  -H "Content-Type: application/json" \
  -d '{"title": "New Conversation"}'

DELETE /api/agent/threads/:id

按ID删除线程。

响应:

{
  success: boolean;
}

示例:

curl -X DELETE http://localhost:3000/api/agent/threads/abc123

GET /api/agent/stream

通过服务器发送事件流式传输AI响应。

查询参数:

• content （必填）：用户消息文本
• threadId （必填）：对话上下文的线程ID
• model （可选）：要使用的AI模型（例如。， gpt-4o-mini, gemini-2.5-flash)
• tools （可选）：逗号分隔的允许工具名称列表
• approveAllTools （可选）： "true" 跳过工具审批提示
• allowTool （可选）： "allow" 或 "deny" 批准后恢复

响应：包含事件的SSE流：

事件： message （默认）

data: {
  "type": "ai" | "tool" | "error",
  "data": {
    "id": string,
    "content": string,
    "tool_calls"?: Array
    }>
  }
}

事件： done

data: {}

事件： error

data: {
  "message": string,
  "threadId": string
}

示例 （使用EventSource）：

const eventSource = new EventSource(
  `/api/agent/stream?content=Hello&threadId=abc123&model=gemini-2.5-flash`
);

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log("Received:", data);
};

eventSource.addEventListener("done", () => {
  console.log("Stream complete");
  eventSource.close();
});

eventSource.addEventListener("error", (event) => {
  console.error("Stream error:", JSON.parse(event.data));
});

GET /api/agent/mcp

列出所有MCP服务器。

响应:

{
  servers: Array;
    url?: string;
    headers?: Record;
    createdAt: string;
    updatedAt: string;
  }>
}

POST /api/agent/mcp

创建新的MCP服务器配置。

请求正文:

{
  name: string;
  type: "stdio" | "http";
  enabled?: boolean;
  // For stdio:
  command?: string;
  args?: unknown[];
  env?: Record;
  // For http:
  url?: string;
  headers?: Record;
}

响应:

{
  server: MCPServer;
}

PUT /api/agent/mcp/:id

更新现有的MCP服务器。

请求正文：与POST相同

响应:

{
  server: MCPServer;
}

DELETE /api/agent/mcp/:id

按ID删除MCP服务器。

响应:

{
  success: boolean;
}

______________________________________________________________________

贡献

我们欢迎社区的贡献！无论是bug修复、新功能、文档改进还是示例，您的帮助都会使这个项目变得更好。

如何做出贡献

1. 分叉存储库

   # Click "Fork" on GitHub
   # Then clone your fork:
   git clone https://github.com/YOUR_USERNAME/fullstack-langgraph-nextjs-agent.git
   cd fullstack-langgraph-nextjs-agent

1. 创建要素分支

   git checkout -b feature/amazing-feature
   # Or for bug fixes:
   git checkout -b fix/bug-description

1. 进行更改

- 编写干净、有文档记录的代码 - 遵循现有代码样式 - 为复杂逻辑添加注释 - 修改数据结构时更新类型

1. 测试您的更改

   # Run linting
   pnpm lint

   # Check formatting
   pnpm format:check

   # Test manually
   pnpm dev
   # (Automated tests coming soon!)

1. 提交您的更改

   git add .
   git commit -m "feat: add amazing feature"

   # Use conventional commit format:
   # - feat: New feature
   # - fix: Bug fix
   # - docs: Documentation changes
   # - refactor: Code refactoring
   # - style: Formatting changes
   # - test: Adding tests
   # - chore: Maintenance tasks

1. 推到你的叉子

   git push origin feature/amazing-feature

1. 打开拉取请求

- 转到GitHub上的原始存储库 - 点击“新建拉取请求” - 选择您的叉子和树枝 - 填写PR模板： - 变更说明 - 相关问题（如有） - 屏幕截图（用于UI更改） - 测试步骤

贡献指南

代码质量:

• ✅ 使用TypeScript严格模式-否 any 类型
• ✅ 为公共API添加JSDoc注释
• ✅ 遵循现有的命名约定
• ✅ 保持功能小而集中（尽可能\<50行）
• ✅ 将可重用逻辑提取到单独的函数中

文档:

• ✅ 如果添加功能，请更新README
• ✅ 为复杂逻辑添加内联注释
• ✅ 包括新API的使用示例
• ✅ 更新TypeScript类型和接口

测试 （添加自动测试时）：

• ✅ 编写实用函数的单元测试
• ✅ 为API路由添加集成测试
• ✅ 测试边缘情况和错误处理
• ✅ 在提交PR之前，确保测试通过

MCP集成:

• ✅ 彻底测试新的MCP服务器
• ✅ 记录所需的环境变量
• ✅ 包括示例配置
• ✅ 验证stdio和HTTP传输（如果适用）

我们需要帮助的领域

高优先级:

• 🔴 自动化测试 -单元测试、集成测试、E2E测试
• 🔴 错误处理 -更强大的错误恢复和用户反馈
• 🔴 MCP服务器示例 -更多预配置的服务器模板
• 🔴 性能优化 -数据库查询优化、缓存

中优先级:

• 🟡 UI/UX改进 -更好的移动支持和可访问性
• 🟡 文档 -视频教程，建筑深度探索
• 🟡 工具批准增强功能 -参数编辑、审批历史
• 🟡 模型支撑 -添加Claude、Llama、自定义型号适配器

锦上添花:

• 🟢 Docker部署 -Dockerfile和docker组合用于生产
• 🟢 CI/CD管道 -GitHub自动化测试操作
• 🟢 管理员仪表板 -分析、使用跟踪、用户管理
• 🟢 多用户支持 -身份验证，用户特定线程

代码审查流程

1. 自动检查：GitHub Actions将运行linting和格式检查
2. 维护人员审查：项目维护人员将审查您的代码
3. 反馈回路：处理任何要求的更改
4. 合并：一旦获得批准，我们将合并您的PR！

典型审查时间表：2-5天（我们会尽量快一点！）

______________________________________________________________________

学习资源

LangGraph.js

官方文件:

• LangGraph.js文档 -完整的API参考
• 状态图教程 -构建你的第一张图
• 检查点指南 -PostgreSQL持久性
• 循环中的人类 -审批工作流程

视频教程:

• LangGraph速成课程 -30分钟介绍
• 构建人工智能代理 -高级图案

示例项目:

• LangGraph示例 -官方示例
• 代理示例 -LangChain烹饪书

模型上下文协议（MCP）

官方资源:

• MCP规范 -协议规范
• MCP文件 -入门指南
• 构建MCP服务器 -服务器开发
• MCP TypeScript SDK -SDK参考

MCP服务器目录:

• 官方MCP服务器 -预构建服务器
• -集装箱工具
• 社区服务器 -社区构建的集成

文章与指南:

• 介绍MCP -人类公告
• 面向开发人员的MCP -开发者深度挖掘

Next.js和React

Next.js 15:

• Next.js文档 -官方文件
• 应用路由器指南 -应用路由器模式
• 服务器操作 -数据突变
• 流媒体和暂停 -渐进渲染

反应19:

• React 19发布说明 -有什么新鲜事吗
• React文档 -正式文件
• 挂钩参考 -所有React钩子

React查询（TanStack查询）:

• React查询文档 -完整文档
• 乐观的更新 -UI模式
• SSE集成 -服务器发送的事件

TypeScript

官方资源:

• TypeScript手册 -语言指南
• TypeScript备忘单 -快速参考
• 行为准则 -最佳做法

高级主题:

• 高级类型 -实用程序类型、泛型
• 收窄 -类型防护装置
• 异步/等待 -承诺

AI/ML概念

提示工程:

• OpenAI提示指南 -最佳做法
• 人类学提示库 -示例提示
• 提示指南 -综合指南

工具使用/函数调用:

• OpenAI函数调用 -它是如何工作的
• 谷歌Gemini工具 -工具集成
• LangChain工具 -工具抽象

代理模式:

• 重演模式 -推理+表演
• 思维链 -多步推理
• 自主代理 -概述文章

数据库和ORM

棱镜:

• Prisma文档 -完整的文档
• Prisma架构 -架构引用
• 迁移指南 -数据库迁移

PostgreSQL:

• PostgreSQL教程 -SQL教程
• PostgreSQL文档 -正式文件

______________________________________________________________________

许可证

该项目根据 MIT许可证.

MIT License

Copyright (c) 2024 IBJunior

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

这意味着什么:

• ✅ 您可以将此代码用于个人项目
• ✅ 您可以将此代码用于商业项目
• ✅ 您可以根据需要修改代码
• ✅ 您可以分发代码
• ⚠️ 您必须在副本中包含许可证通知
• ❌ 作者对任何损害不承担责任

______________________________________________________________________

致谢

如果没有这些惊人的技术和社区，这个项目就不会存在：

框架和库:

• LangChain -对于令人难以置信的AI框架和LangGraph.js
• Next.js -对于惊人的React框架
• 维塞尔 -用于Next.js和优秀的开发工具
• 棱镜 -一流的ORM

标准和协议:

• 模型上下文协议 -通用工具集成标准
• Anthropic -感谢MCP和Claude的开拓者

AI提供商:

• 开放人工智能 -对于GPT模型和API
• 谷歌 -适用于Gemini型号

UI和设计:

• shadcn/ui -对于漂亮的React组件
• 顺风CSS -实用性优先的造型
• Lucide -用于干净、一致的图标
• 帧运动 -为了获得流畅的动画效果

社区:

• 所有报告错误、建议功能和提交PR的贡献者
• LangChain Discord社区寻求支持和灵感
• Next.js社区提供最佳实践和模式

______________________________________________________________________

由以下材料制成❤️ 开源社区

*如果你觉得这很有帮助，请考虑给它一颗星！ ⭐*