使用说明
应用程序写入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个强大的数据库工具:
creatorInfo-获取创建者的详细信息getDocument-通过文档的唯一ID检索文档listDocuments-列出集合中的所有文档createDocument-在数据库中创建新文档updateDocument-更新现有文档deleteDocument-从数据库中删除文档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设置
- 在以下位置创建Appwrite项目 cloud.apwrite.io
- 创建数据库
- 创建一个集合(例如,“company_names”)
- 在集合中设置以下属性:
company_name(字符串,必填)company_id(整数,必填)
- 生成具有数据库权限的API密钥:
- 导航到项目设置
- 转到API密钥部分
- 使用创建新密钥
databases.read和databases.write范围
- 更新您的
.env包含凭据的文件
MCP客户端配置
要将此服务器与MCP客户端(如Claude Desktop)一起使用,请使用以下配置:
{
"mcpServers": {
"appwrite": {
"url": "https://mcp.devojha.in/mcp",
"transport": "sse"
}
}
}
📝 可用脚本
dev-使用Turbopack启动开发服务器(快速刷新)build-构建生产应用程序start-启动生产服务器lint-运行ESLint进行代码质量检查
🚀 部署
部署到Vercel(推荐)
- 点击上面的“部署”按钮
- 在Vercel仪表板中添加环境变量
- 部署!
手动部署
# Build the project
npm run build
# Start the production server
npm start
确保在您的托管平台中设置环境变量。
🤝 贡献
欢迎投稿!请随时提交拉取请求。对于重大更改,请先打开一个问题来讨论您想要更改的内容。
开发工作流程
- 分叉项目
- 创建功能分支(
git checkout -b feature/AmazingFeature) - 提交您的更改(
git commit -m 'Add some AmazingFeature') - 推到分支(
git push origin feature/AmazingFeature) - 打开拉取请求
代码质量
- 遵循现有代码样式
- 写有意义的提交消息
- 为复杂逻辑添加注释
- 彻底测试您的更改
- 跑
npm run lint在承诺之前
📄 许可证
此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。
🙏 致谢
📞 支持
如果您有任何问题或需要帮助,请:
🔗 链接
- 现场演示: https://mcp.devojha.in
- 文档: 模型上下文协议文档
- GitHub 仓库: github/dev0jha/mcp服务器
- 投资组合: devojha.in
建于❤️ 通过 开发
文件夹: https://devojha.in |GitHub: @dev0jha