NextChat with MCP Server Builder

NextChat 与 MCP 服务构建器

这是 NextChat 的定制版本，新增了通过聊天交互创建和部署 MCP（模型上下文协议）服务的功能，并使用 OpenRouter 提供大模型。

功能

• 基于聊天创建 MCP 服务：只需与 AI 聊天即可创建 MCP 服务
• 工具提取：根据你的描述自动提取工具
• 一键部署：只需单击一次即可部署 MCP 服务
• 集成指南：获取适用于各种 AI 系统的集成说明
• OpenRouter 集成：通过 OpenRouter 使用各种大模型

开始使用

前提条件

• Node.js 18.0.0 或更高版本
• npm 或 yarn
• OpenRouter API 密钥

安装

1. 克隆仓库：

git clone https://github.com/vredrick2/NextChat.git
cd NextChat

2. 安装依赖：

npm install
# or
yarn

3. 创建一个 .env.local 文件，内容如下：

# Enable MCP functionality
ENABLE_MCP=true

# OpenRouter API key
OPENAI_API_KEY=your_openrouter_api_key

# Set OpenRouter as the base URL
BASE_URL=https://openrouter.ai/api/v1

# Default model (can be changed to any OpenRouter model)
DEFAULT_MODEL=openrouter/anthropic/claude-3-opus

# Hide user API key input since we'll be using OpenRouter
HIDE_USER_API_KEY=1

# Enable custom models
CUSTOM_MODELS=+openrouter/anthropic/claude-3-opus,+openrouter/anthropic/claude-3-sonnet,+openrouter/google/gemini-pro

4. 启动开发服务器：

npm run dev
# or
yarn dev

5. 在浏览器中打开 http://localhost:3000。

创建 MCP 服务

1. 开始新的聊天
2. 输入“创建一个 MCP 服务”或类似语句
3. 按照提示为服务命名并描述其功能
4. 系统将根据你的描述提取工具并部署服务
5. 你将收到说明，了解如何在各种 AI 系统中使用你的 MCP 服务

实现细节

MCP 服务创建界面

MCP 服务创建界面通过一个 React 组件实现，引导用户完成创建和部署 MCP 服务的流程。该界面包括：

• 名称输入
• 描述输入
• 工具提取
• 部署
• 集成指南生成

工具提取

系统使用模式匹配，根据用户描述提取工具。系统会查找指示特定工具类型的关键词，例如：

• 计算器工具
• 转换工具
• 天气工具
• 搜索工具
• 翻译工具

部署

当前实现使用模拟 URL 模拟部署。在生产环境中，这将连接到真正的部署服务。

集成

系统会为各种 AI 系统生成集成指南：

• Cursor
• Claude Desktop
• Windsurf
• 直接 API 访问

项目结构

• /app/utils/mcp/types.ts：MCP 服务和工具的 TypeScript 接口
• /app/utils/mcp/storage.ts：用于管理 MCP 服务的存储工具
• /app/utils/mcp/extraction.ts：工具提取功能
• /app/utils/mcp/deployment.ts：部署工具
• /app/utils/mcp/chat-integration.ts：聊天集成工具
• /app/api/mcp/create/route.ts：用于创建 MCP 服务的 API 端点
• /app/components/mcp/server-creation.tsx：MCP 服务创建组件
• /app/components/mcp/server-list.tsx：MCP 服务列表组件

未来增强

• 使用 OpenRouter AI 模型增强工具提取
• 实际部署到无服务器函数
• 工具测试界面
• 已部署服务的分析
• MCP 服务的版本控制

许可证

本项目采用 MIT 许可证授权，详情请参阅 LICENSE 文件。

致谢

• 基于 NextChat
• 灵感来自 mcpify.ai
• 使用 OpenRouter 提供大模型
• 实现了 Model Context Protocol