MCP服务器

一个强大的模型上下文协议 (MCP) 服务器,提供与Appwrite数据库操作的无缝集成,结合了现代Web界面和稳健的数据库交互功能。

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

使用说明

应用程序写入MCP服务器

一个强大的 模型上下文协议(MCP)服务器 它提供了与Appwrite数据库操作的无缝集成。该项目将一个漂亮、现代的web界面与一个强大的MCP服务器相结合,用于数据库交互,该服务器使用Next.js 15、React 19和最新的web技术构建。

🌟 特性

  • 🔥 MCP服务器集成:完整的模型上下文协议服务器实现
  • 🗄️ 数据库操作:完成Appwrite数据库的CRUD操作
  • ⚡ 迅速的:使用Next.js 15和Turbopack进行了速度优化
  • 🔒 安全:基于安全最佳实践和类型安全操作构建
  • 🎨 漂亮的UI:采用Tailwind CSS和Framer Motion的现代响应式界面
  • 📱 响应式设计:在所有设备上完全响应
  • 🌙 现代堆栈Next.js 15、React 19、TypeScript和最新依赖项
  • 🎯 互动演示:展示MCP操作的实时终端风格演示

可用的MCP工具

服务器提供7个强大的数据库工具:

  1. creatorInfo -获取创建者的详细信息
  2. getDocument -通过文档的唯一ID检索文档
  3. listDocuments -列出集合中的所有文档
  4. createDocument -在数据库中创建新文档
  5. updateDocument -更新现有文档
  6. deleteDocument -从数据库中删除文档
  7. upsertDocument -创建或更新文档(追加销售操作)

📸 截图

英雄专区

登录页面上有一个动画英雄部分,其中有一个实时展示MCP操作的终端演示。

交互式代码展示

通过语法高亮显示和简单的复制粘贴功能浏览完整的代码库。

MCP现场演示

通过交互式演示数据库操作体验MCP服务器的运行。

🚀 快速开始

先决条件

  • Node.js 18+或Bun
  • Appwrite帐户和项目
  • Appwrite数据库和集合设置

1.克隆存储库

git clone https://github.com/dev0jha/mcp-server.git
cd mcp-server

2.安装依赖项

使用npm:

npm install

使用包子(推荐):

bun install

3.环境设置

创建一个 .env 根目录中的文件:

APPWRITE_ENDPOINT=https://YOURID.cloud.appwrite.io/v1
APPWRITE_PROJECT_ID=YOUR-PROJECT-ID
APPWRITE_API_KEY=YOUR-API-KEY
DATABASE_ID=YOUR-DB-ID

将占位符值替换为实际的Appwrite凭据:

  • APPWRITE_ENDPOINT:您的Appwrite实例终结点
  • APPWRITE_PROJECT_ID:您的Appwrite项目ID
  • 应用程序写入_ API _键:您的Appwrite API密钥(具有数据库权限)
  • 数据库ID:您的Appwrite数据库ID

4.运行开发服务器

npm run dev
# or
bun dev

打开 http://localhost:3000 查看应用程序。

📖 用法

网络界面

web应用程序提供:

  • 英雄专区:通过动画终端演示概述MCP服务器功能
  • 代码展示:带语法高亮显示的交互式代码浏览器
  • MCP演示:服务器功能的现场演示
  • 视频展示:视觉指南和教程
  • 文档链接:快速访问资源和GitHub存储库

MCP服务器端点

MCP服务器位于:

https://your-domain.com/mcp

您可以将此端点与任何兼容MCP的客户端一起使用,以与您的Appwrite数据库进行交互。

MCP使用示例

// Connect to the MCP server
mcp.connect('https://mcp.devojha.in/mcp')

// List all documents
await mcp.listDocuments({ collectionId: 'company_names' })

// Create a new document
await mcp.createDocument({
  company_name: 'Example Corp',
  company_id: 12345
})

// Get a specific document
await mcp.getDocument({ documentId: 'doc_id_here' })

// Update a document
await mcp.updateDocument({
  documentId: 'doc_id_here',
  company_name: 'Updated Corp',
  company_id: 67890
})

// Delete a document
await mcp.deleteDocument({ documentId: 'doc_id_here' })

🛠️ 技术栈

前端

  • Next.js 15.3.3 -带有App Router和Turbopack的React框架
  • 反应19.0.0 -具有最新并发功能的UI库
  • TypeScript 5 -类型安全和增强的开发人员体验
  • 顺风CSS 4 -实用性优先的样式框架
  • 帧运动 -流畅的动画和过渡
  • Radix UI -可访问、无样式的组件图元
  • Shadcn/ui -美观、可重用的组件库
  • Lucide反应 -现代图标库

后端和数据库

  • 应用程序17.0.0 -后端即服务平台
  • @vercel/mcp适配器 -模型上下文协议服务器实现
  • @模型上下文协议/sdk -用于构建工具的MCP SDK
  • 佐德 -TypeScript第一模式验证

开发工具

  • ESLint -代码删除和质量检查
  • PostCSS -CSS处理和优化
  • 包子 -快速包管理器和运行时(推荐)
  • 志贵 -漂亮的语法高亮显示

📁 项目结构

├── src/
│   ├── app/
│   │   ├── [transport]/
│   │   │   └── route.ts          # MCP server endpoint
│   │   ├── layout.tsx            # Root layout
│   │   ├── page.tsx              # Homepage
│   │   └── globals.css           # Global styles
│   ├── components/
│   │   ├── ui/                   # Shadcn UI components
│   │   ├── magicui/              # Additional UI components
│   │   ├── hero-section.tsx      # Hero section with terminal demo
│   │   ├── code-showcase.tsx     # Code browser component
│   │   ├── mcp-demo.tsx          # MCP demonstration component
│   │   ├── video-showcase.tsx    # Video tutorials component
│   │   ├── link-and-info.tsx     # Footer and links component
│   │   ├── navbar.tsx            # Navigation component
│   │   └── copy-url-btn.tsx      # URL copy button component
│   ├── lib/
│   │   ├── utils.ts              # Utility functions
│   │   └── tools/
│   │       └── appwrite.ts       # Appwrite tools and handlers
│   └── hooks/
│       └── use-mobile.ts         # Mobile detection hook
├── public/                       # Static assets and images
├── .env                         # Environment variables
├── next.config.ts               # Next.js configuration
├── tailwind.config.js           # Tailwind CSS configuration
├── tsconfig.json                # TypeScript configuration
└── package.json                 # Dependencies and scripts

🔧 配置

Appwrite设置

  1. 在以下位置创建Appwrite项目 cloud.apwrite.io
  2. 创建数据库
  3. 创建一个集合(例如,“company_names”)
  4. 在集合中设置以下属性:
    • company_name (字符串,必填)
    • company_id (整数,必填)
  5. 生成具有数据库权限的API密钥:
    • 导航到项目设置
    • 转到API密钥部分
    • 使用创建新密钥 databases.read 和 databases.write 范围
  6. 更新您的 .env 包含凭据的文件

MCP客户端配置

要将此服务器与MCP客户端(如Claude Desktop)一起使用,请使用以下配置:

{
  "mcpServers": {
    "appwrite": {
      "url": "https://mcp.devojha.in/mcp",
      "transport": "sse"
    }
  }
}

📝 可用脚本

  • dev -使用Turbopack启动开发服务器(快速刷新)
  • build -构建生产应用程序
  • start -启动生产服务器
  • lint -运行ESLint进行代码质量检查

🚀 部署

部署到Vercel(推荐)

  1. 点击上面的“部署”按钮
  2. 在Vercel仪表板中添加环境变量
  3. 部署!

手动部署

# Build the project
npm run build

# Start the production server
npm start

确保在您的托管平台中设置环境变量。

🤝 贡献

欢迎投稿!请随时提交拉取请求。对于重大更改,请先打开一个问题来讨论您想要更改的内容。

开发工作流程

  1. 分叉项目
  2. 创建功能分支(git checkout -b feature/AmazingFeature)
  3. 提交您的更改(git commit -m 'Add some AmazingFeature')
  4. 推到分支(git push origin feature/AmazingFeature)
  5. 打开拉取请求

代码质量

  • 遵循现有代码样式
  • 写有意义的提交消息
  • 为复杂逻辑添加注释
  • 彻底测试您的更改
  • 跑 npm run lint 在承诺之前

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

🙏 致谢

📞 支持

如果您有任何问题或需要帮助,请:

  • 打开一个问题 GitHub
  • 检查 文档
  • 联系维护人员

🔗 链接


建于❤️ 通过 开发

文件夹: https://devojha.in |GitHub: @dev0jha