AI导哈

AI应用模板

一个支持模型上下文协议（MCP）的生产就绪AI应用模板，提供多AI提供商支持、会话管理和工具编排功能。

  • by Thichman
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Thichman/mcp-server-template

使用说明

MCP AI 封装模板 🤖

一个支持模型上下文协议（MCP）的、可直接用于生产的AI应用构建模板。克隆此仓库，快速创建您自己的集成自定义工具的MCP驱动AI助手。

✨ 特点

  • 即插即用MCP集成 - 轻松配置多个MCP服务器
  • 现代网页界面 - 使用React和Tailwind CSS构建的简洁、响应迅速的用户界面
  • 支持多个AI服务提供商 - 与Anthropic的Claude、OpenAI以及本地模型兼容
  • 会话管理 - 持久的对话历史和上下文
  • 工具编排 - 自动工具发现和执行
  • 错误处理 - 强大的错误恢复和用户反馈机制
  • Docker 支持 - 使用 Docker Compose 实现一键部署
  • TypeScript - 整个代码库的全面类型安全性

🚀 快速入门

先决条件

  • Node.js 18+ 和 npm/yarn
  • Python 3.10+（用于MCP服务器）
  • Docker（可选，用于容器化部署）

安装

  1. 克隆此仓库：
git clone https://github.com/yourusername/mcp-ai-wrapper.git
cd mcp-ai-wrapper
  1. 安装依赖项：
# Install frontend dependencies
cd frontend
npm install

# Install backend dependencies
cd ../backend
npm install

# Install Python dependencies for MCP servers
cd ../mcp-servers
pip install -r requirements.txt
  1. 配置您的环境：
cp .env.example .env
# Edit .env with your API keys and MCP server configurations
  1. 启动应用程序：
npm run dev
# Or with Docker
docker-compose up

🔧 配置

添加MCP服务器

  1. 将您的MCP服务器添加到 mcp-servers/ 目录
  2. 更新 config/mcp-config.json：
{
  "servers": [
    {
      "name": "your-server",
      "command": "python",
      "args": ["mcp-servers/your-server/server.py"],
      "env": {},
      "capabilities": ["tools", "resources"]
    }
  ]
}
  1. 重启应用程序

支持的人工智能服务提供商

在（系统/应用中）配置您偏好的AI服务提供商 .env：

# Anthropic Claude
ANTHROPIC_API_KEY=your_api_key
MODEL_PROVIDER=anthropic
MODEL_NAME=claude-3-opus-20240229

# OpenAI
OPENAI_API_KEY=your_api_key
MODEL_PROVIDER=openai
MODEL_NAME=gpt-4

# Local Models (Ollama)
MODEL_PROVIDER=ollama
MODEL_NAME=llama2
OLLAMA_BASE_URL=http://localhost:11434

📁 项目结构

mcp-ai-wrapper/
├── frontend/               # React frontend application
│   ├── src/
│   │   ├── components/    # UI components
│   │   ├── hooks/        # Custom React hooks
│   │   ├── services/     # API service layer
│   │   └── types/        # TypeScript definitions
│   └── public/
├── backend/               # Node.js backend server
│   ├── src/
│   │   ├── controllers/  # Request handlers
│   │   ├── services/     # Business logic
│   │   ├── mcp/         # MCP client implementation
│   │   └── utils/       # Utility functions
│   └── tests/
├── mcp-servers/          # MCP server implementations
│   ├── example-server/   # Example MCP server
│   └── custom-servers/   # Your custom MCP servers
├── config/              # Configuration files
├── docker/              # Docker configuration
└── docs/               # Additional documentation

🛠️ 开发

运行测试

# Run all tests
npm test

# Run with coverage
npm run test:coverage

# Run specific test suite
npm test -- --grep "MCP"

构建生产环境

# Build frontend
cd frontend && npm run build

# Build backend
cd backend && npm run build

# Build Docker image
docker build -t mcp-ai-wrapper .

添加自定义工具

在（某处）创建一个新的MCP服务器 mcp-servers/custom-servers/：

# mcp-servers/custom-servers/my-tool/server.py
from mcp.server import Server
from mcp.tools import Tool

class MyCustomTool(Tool):
    async def execute(self, params):
        # Your tool implementation
        return {"result": "success"}

server = Server()
server.register_tool(MyCustomTool())
server.run()

📊 架构

graph TD
    A[Web UI] -->|HTTP/WebSocket| B[Backend API]
    B -->|MCP Protocol| C[MCP Client]
    C -->|Stdio/HTTP| D[MCP Servers]
    B -->|API Calls| E[AI Provider]
    D -->|Tools| F[External Services]

🤝 贡献（或：参与贡献）

欢迎投稿！请阅读我们的 贡献指南 有关我们行为准则的详细信息以及提交拉取请求的流程，请参阅。

📝 许可证

这个项目遵循MIT许可证授权——详见 许可证 文件中详述。

🙏 致谢

📧 支持

⭐ 如果你觉得这个仓库有帮助，请给它点个星！

相关 MCP