AI导哈

Next.js MCP聊天机器人启动器

一个完全可配置的Next.js聊天机器人，用于Model Context Protocol (MCP)服务器，通过单一JSON文件配置，构建自定义AI助手，支持流式响应、工具调用和美观的UI。

  • by brianmatzelle
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 brianmatzelle/nextjs-mcp-template

使用说明

Next.js MCP 聊天机器人启动模板

一个完全可配置的Next.js聊天机器人，专为模型上下文协议（MCP）服务器设计。通过单一JSON文件配置，即可构建具有流式响应、工具调用和美观用户界面的自定义AI助手。

✨ 特点

  • 🎯 简单配置 - 编辑一个JSON文件以自定义所有内容
  • 🔧 MCP 集成 - 通过HTTP连接到任何MCP服务器
  • 💬 流媒体聊天 - 克劳德的实时响应
  • 🛠️ 自动工具调用 - Claude 自动使用您的 MCP 工具
  • 🎨 完全可自定义主题 - 定制颜色和品牌标识
  • 📱 响应式设计 - 在所有设备上均能完美运行
  • ⚡ TypeScript（译为“⚡ 型Script”或保持原样“⚡ TypeScript”，根据语境选择是否翻译为中文） - 完整的类型安全性

🚀 快速入门

1. 安装依赖项

npm install

2. 编辑配置

开放 config.json 并更新：

{
  "app": {
    "name": "Your App Name",
    "description": "Your app description"
  },
  "mcp": {
    "servers": {
      "primary": {
        "id": "my-server",
        "url": "http://localhost:8000",
        "endpoint": "/mcp"
      }
    }
  },
  "ai": {
    "systemPrompt": "You are a helpful AI assistant..."
  }
}

3. 设置环境变量

创造 .env.local 在项目根目录中：

# Required
ANTHROPIC_API_KEY=sk-ant-your-key-here

# Optional: Override MCP server URL for production
# Replace MY_SERVER with your server's "id" from config.json (uppercase)
# NEXT_PUBLIC_MY_SERVER_MCP_URL=https://your-production-server.com

💡（灯泡图标，常用于表示创意、灵感或想法） 提示： 从以下位置获取您的Anthropic API密钥： console.anthropic.com 翻译为中文是“Anthropic 控制台”

4. 启动应用程序

npm run dev

开放 http://localhost:3000 翻译为中文可以是：“本地主机：3000 端口”。不过，通常在中文语境下，我们更倾向于直接使用网址的形式，因为网址本身已经包含了“http://”和“localhost:3000”这样的技术术语，这些术语在中文中也有对应的解释或理解。所以，简而言之，这个网址在中文中通常就直接表述为“http://localhost:3000”，无需额外翻译。但如果要解释其含义，可以说：“这是一个指向本地计算机上3000端口的网址” 在您的浏览器中。

📋 配置

所有定制均通过 config.json 并且 .env.local - 无需进行代码更改！

配置文件 (config.json)

部分 目的 示例
app 应用名称、描述、图标 "name": "My Assistant"
theme 颜色与风格 "primary": "#697565"
mcp MCP 服务器连接 "url": "http://localhost:8000"
ai 模型、系统提示、限制 "systemPrompt": "You are..."
ui 快速提示，占位符 "quickPrompts": [...]

看 CONFIG.md（文件名，可译为“配置文件.md”或保持原样，因为文件名通常不翻译） 以了解详细选项和示例。

环境变量 (.env.local)

创建 .env.local 与：

# Required
ANTHROPIC_API_KEY=sk-ant-your-key

# Optional: Override MCP server URL
NEXT_PUBLIC_MY_SERVER_MCP_URL=https://your-server.com

替换 MY_SERVER 与您的服务器 id 来自 config.json（大写）

项目结构

/web-client/
├── config.json              # Main configuration file
├── config.example.json      # Example/starter config
├── CONFIG.md               # Configuration documentation
├── src/
│   ├── app/                # Next.js app directory
│   │   ├── api/chat/      # Streaming chat API route
│   │   └── layout.tsx     # Root layout with theme
│   ├── components/
│   │   ├── ChatInterface.tsx    # Main chat UI
│   │   ├── ThemeProvider.tsx    # Dynamic theme loader
│   │   └── ui/                  # Reusable UI components
│   ├── lib/
│   │   ├── config.ts      # Config loading utilities
│   │   └── mcp-client.ts  # MCP client implementation
│   └── types/
│       └── config.ts      # TypeScript config types
└── package.json

🔌 MCP 服务器要求

您的MCP服务器需要：

  • ✅ 支持HTTP传输
  • ✅ 标准MCP协议实现
  • ✅ list_tools 终端节点
  • ✅ call_tool 终端节点

示例 FastMCP 服务器：

from fastmcp import FastMCP

mcp = FastMCP("My Server")

@mcp.tool()
def greet(name: str) -> str:
    """Greet a user by name"""
    return f"Hello, {name}!"

if __name__ == "__main__":
    mcp.run(transport="http", port=8000)

看 模型上下文协议文档 更多。

🎨 示例用例

Code Review Assistant 
{
  "app": {
    "name": "Code Review AI",
    "icon": "💻"
  },
  "ui": {
    "quickPrompts": [
      "Review this code",
      "Find bugs",
      "Suggest improvements"
    ]
  },
  "ai": {
    "systemPrompt": "You are an expert code reviewer..."
  }
}
Customer Support Bot 
{
  "app": {
    "name": "Support Bot",
    "icon": "🎧"
  },
  "ui": {
    "quickPrompts": [
      "Track my order",
      "Return policy",
      "Contact support"
    ]
  }
}
Data Analysis Assistant 
{
  "app": {
    "name": "Data Analyst AI",
    "icon": "📊"
  },
  "ui": {
    "quickPrompts": [
      "Analyze dataset",
      "Create visualization",
      "Generate report"
    ]
  }
}

更多例子在 CONFIG.md（配置文件）

发展

可用脚本

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

技术栈

  • 框架Next.js 15.5.2（App Router）
  • React19.1.0
  • TypeScript5
  • 造型设计Tailwind CSS 4
  • **人工智能（AI）**Anthropic Claude SDK（注：Anthropic是一家开发Claude系列人工智能模型的公司，SDK即软件开发工具包）
  • **MCP（Minimum Change Permutation，最小变化排列）**模型上下文协议SDK

🌐 部署

生产构建

npm run build
npm run start

环境变量

在您的托管平台上设置这些：

# Required
ANTHROPIC_API_KEY=sk-ant-your-key

# Optional: Override MCP URL for production
NEXT_PUBLIC_MY_SERVER_MCP_URL=https://your-server.com

部署到Vercel

  1. 将代码推送到GitHub
  2. 在Vercel中导入
  3. 添加环境变量
  4. 部署 ✅

🔧 故障排除

MCP服务器无法连接？

  • ✓ 确认服务器正在运行
  • ✓ 检查URL中的 config.json
  • ✓ 直接测试服务器端点
  • ✓ 如需，请启用CORS

配置更改未生效？

  • ✓ 编辑后重启开发服务器 config.json
  • ✓ 清除浏览器缓存
  • ✓ 检查JSON语法是否有效

“Missing API key”错误？

  • ✓ 创建 .env.local 文件
  • ✓ 添加 ANTHROPIC_API_KEY=sk-ant-...
  • ✓ 重启开发服务器

📚 文档

🛠️ 技术栈

  • Next.js 15 - 使用App Router的React框架
  • TypeScript - 类型安全
  • Tailwind CSS 4 - 搭配/造型
  • Anthropic的Claude - 人工智能模型
  • MCP SDK（MCP软件开发工具包） - 模型上下文协议

📄 许可证

麻省理工学院（MIT）

🙏 致谢

使用……构建 模型上下文协议 并且 Anthropic Claude

相关 MCP