Next.js 15 Todo应用程序与MCP集成
一个使用Next.js 15构建的现代全栈todo应用程序，具有服务器操作、SQLite数据库和用于AI助手访问的模型上下文协议（MCP）端点集成功能。
🏗️ 建筑
graph TB
subgraph "Next.js 15 Application"
UI[Web UI
Browser Interface]
MCP[MCP Endpoint
/api/mcp]
SA[Server Actions
CRUD Operations]
DB[(SQLite Database
todos.db)]
UI --> SA
MCP --> SA
SA --> DB
end
subgraph "DigitalOcean App Platform"
APP[Deployed App
Node.js 22.x, 1GB RAM]
end
subgraph "Local Development"
BROWSER[Browser Tool
Manual Testing]
CURL[Curl Script
MCP API Tests]
end
UI -.->|Deploy| APP
MCP -.->|Deploy| APP
APP -->|Test| BROWSER
APP -->|Test| CURL
style UI fill:#60a5fa
style MCP fill:#34d399
style DB fill:#fbbf24
style APP fill:#f472b6
style BROWSER fill:#a78bfa
style CURL fill:#a78bfa✨ 特性
- ✅ 现代用户界面：使用Tailwind CSS构建的美观、响应迅速的界面
- ✅ 服务器操作：Next.js 15个服务器操作，实现无缝数据突变
- ✅ SQLite数据库：轻量级、持久的存储空间，采用更好的平方3
- ✅ MCP端点：通过JSON-RPC 2.0实现程序化待办事项管理的AI可访问界面
- ✅ 实时更新：数据更改后自动重新验证
- ✅ 类型安全：整个应用程序完全支持TypeScript
🚀 入门指南
先决条件
- Node.js 22.x或更高版本
- npm或纱线
安装
- 克隆存储库：
git clone https://github.com/YOUR_USERNAME/next15-todo-mcp.git
cd next15-todo-mcp- 安装依赖项：
npm install- 运行开发服务器：
npm run dev- 打开 http://localhost:3000 在您的浏览器中。
📁 项目结构
next15-todo-mcp/
├── app/
│ ├── actions/
│ │ └── todos.ts # Server Actions for CRUD operations
│ ├── api/
│ │ └── mcp/
│ │ └── route.ts # MCP endpoint (V2)
│ ├── page.tsx # Main todo list UI
│ └── layout.tsx # Root layout
├── lib/
│ └── db.ts # SQLite database setup
├── tests/
│ └── mcp-api.sh # Curl-based MCP endpoint tests (V3)
├── todos.db # SQLite database file
└── README.md🎯 用法
web界面
- 添加任务：在输入框中键入任务，然后单击“添加任务”
- 完成任务：单击任何任务上的“完成”按钮
- 删除任务：单击“删除”按钮删除任务
MCP端点
MCP端点通过JSON-RPC 2.0协议为AI助手提供对todo操作的编程访问 /api/mcp.
可用工具
| 工具 | 说明 | 参数 |
|---|---|---|
ping | MCP端点的健康检查 | 无 |
getTasks | 检索所有待办事项 | 无 |
addTask | 创建新的待办事项 | title （字符串） |
completeTask | 将待办事项标记为已完成 | id （编号） |
deleteTask | 删除待办事项 | id （编号） |
请求示例
1.健康检查（Ping）
curl -X POST http://localhost:3000/api/mcp \
-H "Content-Type: application/json" \
-d '{
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"name": "ping",
"arguments": {}
},
"id": 1
}'答复：
{
"jsonrpc": "2.0",
"id": 1,
"result": {
"content": [
{
"type": "text",
"text": "✅ Pong from Next.js 15 To-Do MCP Server!"
}
]
}
}2.获取所有任务
curl -X POST http://localhost:3000/api/mcp \
-H "Content-Type": application/json" \
-d '{
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"name": "getTasks",
"arguments": {}
},
"id": 2
}'3.添加新任务
curl -X POST http://localhost:3000/api/mcp \
-H "Content-Type: application/json" \
-d '{
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"name": "addTask",
"arguments": {
"title": "Buy groceries"
}
},
"id": 3
}'4.完成任务
curl -X POST http://localhost:3000/api/mcp \
-H "Content-Type: application/json" \
-d '{
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"name": "completeTask",
"arguments": {
"id": 1
}
},
"id": 4
}'5.删除任务
curl -X POST http://localhost:3000/api/mcp \
-H "Content-Type: application/json" \
-d '{
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"name": "deleteTask",
"arguments": {
"id": 1
}
},
"id": 5
}'列出可用工具：
curl -X POST http://localhost:3000/api/mcp \
-H "Content-Type: application/json" \
-d '{
"jsonrpc": "2.0",
"method": "tools/list",
"params": {},
"id": 6
}'🧪 测试
手动测试（浏览器UI）
打开 http://localhost:3000 在浏览器中与web UI交互。
自动测试（Curl-V3）
一个全面的基于curl的测试脚本根据所有5个工具和JSON-RPC 2.0协议合规性验证MCP端点：
在本地运行测试：
# Start dev server in one terminal
npm run dev
# In another terminal, run tests
./tests/mcp-api.sh
# Or specify a different base URL
./tests/mcp-api.sh https://your-production-url.com测试覆盖范围：
- ✅ 列出所有可用工具(
tools/list) - ✅ 验证所有5个工具是否存在（ping、getTasks、addTask、completeTask、deleteTask）
- ✅ Ping工具（健康检查）
- ✅ 获取所有任务
- ✅ 添加新任务
- ✅ 添加标题为空的任务（错误处理）
- ✅ 完成任务
- ✅ 删除任务
- ✅ 工具名称无效（错误处理）
- ✅ JSON-RPC 2.0格式合规性
- ✅ 并发请求处理
测试结果示例：
==========================================
MCP Endpoint Test Suite
==========================================
Passed: 12
Failed: 0
Total: 12
✓ All tests passed!🚢 部署
此应用程序部署在DigitalOcean应用程序平台上，具有：
- 运行时：Node.js 22.x
- 例子：基本共享CPU（1GB RAM）
- 生成命令:
npm run build - 运行命令:
npm start - 自动部署：从GitHub主分支启用
部署您自己的
- 分叉此存储库
- 在上创建新应用程序 数字海洋应用平台
- 连接您的GitHub存储库
- 如上所示配置构建和运行命令
- 部署！
📊 发展路线图
✅ V1-基本Todo应用程序（已完成）
- Next.js 15设置
- CRUD的服务器操作
- SQLite数据库
- 带有Tailwind的现代用户界面
- 部署到DigitalOcean应用平台
✅ V2-MCP集成（当前）
- MCP端点实现✅
- 待办事项管理的5个工具✅
- MCP协议合规性（JSON-RPC 2.0）✅
- 全面的API文件✅
📋 V3-自动化测试（下）
- 基于卷曲的MCP端点测试脚本
- JSON-RPC 2.0协议验证
- 跨所有工具的集成测试
- 测试覆盖范围：12项综合测试
🛠️ 技术栈
- 框架: Next.js 15
- 语言: TypeScript
- 样式: 顺风 CSS
- MCP协议：JSON-RPC 2.0实现
- 测试：基于卷曲的API测试（shell脚本）
- 部署: 数字海洋应用平台
📝 许可证
麻省理工学院
🤝 贡献
欢迎投稿！请随时提交拉取请求。
______________________________________________________________________
内置于❤️ 使用Next.js 15和MCP