JinDaGe - NextChat-MCP MCP Details

article

README

🚀 与MCP服务器构建器的下一步聊天

这是一个定制版的NextChat，它通过聊天交互，实现了创建和部署使用OpenRouter大语言模型的MCP（模型上下文协议）服务器的功能，为用户提供了便捷的操作体验。

🚀 快速开始

先决条件

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

安装

克隆仓库：

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

安装依赖项：

npm install
# 或者
yarn

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

# 启用MCP功能
ENABLE_MCP=true

# OpenRouter API密钥
OPENAI_API_KEY=您的OpenRouterAPI密钥

# 设置OpenRouter作为基础URL
BASE_URL=https://openrouter.ai/api/v1

# 默认模型（可以更改为任何OpenRouter模型）
DEFAULT_MODEL=openrouter/anthropic/claude-3-opus

# 隐藏用户API密钥输入，因为我们使用的是OpenRouter
HIDE_USER_API_KEY=1

# 启用自定义模型
CUSTOM_MODELS=+openrouter/anthropic/claude-3-opus,+openrouter/anthropic/claude-3-sonnet,+openrouter/google/gemini-pro

启动开发服务器：

npm run dev
# 或者
yarn dev

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

✨ 主要特性

基于聊天的MCP服务器创建：通过简单的聊天即可创建MCP服务器。
工具提取：自动从您的描述中提取工具。
一键部署：单击即可部署您的MCP服务器。
集成指南：获取各种AI系统的一整套集成说明。
OpenRouter集成：通过OpenRouter使用广泛的大语言模型。

💻 使用示例

创建MCP服务器

开始新的聊天。
输入“创建一个MCP服务器”或类似短语。
按照提示为您的服务器命名并描述其功能。
系统将从您的描述中提取工具并部署服务器。
您将收到用于与各种AI系统集成的说明。

🔧 技术细节

MCP服务器创建界面

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

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

工具提取

工具从用户的描述中通过模式匹配提取。系统查找指示特定工具类型的关键词，例如：

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

部署

当前实现使用模拟部署和mock 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的使用条款和条件。

💡 使用建议

如果有任何问题，请随时查看文档或联系支持团队。

NextChat-MCP