AI导哈

待办事项管理应用

一款基于Model Context Protocol (MCP)的现代待办事项应用，提供自然语言交互的AI助手功能，支持本地存储和多任务管理。

  • by choutianxius
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 choutianxius/mcp-todo-app

使用说明

MCP todo应用程序

一个由模型上下文协议（MCP）支持的现代todo应用程序，具有一个通过自然语言命令管理todo的AI代理侧边栏。Vibe使用Manus AI编码，并使用Cursor+Claude代码进行优化。

特性

核心功能

  • CRUD操作：创建、读取、更新和删除待办事项
  • 索引数据库持久性：所有待办事项都存储在浏览器本地
  • 丰富的待办事项：支持标题、描述和标签
  • 过滤：查看所有、待处理或已完成的待办事项
  • 批量操作：立即清除所有已完成的待办事项

MCP代理集成

  • 自然语言接口：使用对话命令与待办事项交互
  • 并排布局：代理侧边栏与主要内容一起工作，不会阻止交互
  • MCP工具：用于待办事项管理的六个专用工具：
    • list_todos：通过可选过滤获取所有待办事项
    • create_todo：添加带有标题、描述和标签的新待办事项
    • update_todo：修改现有待办事项
    • delete_todo：删除特定待办事项
    • toggle_todo：将待办事项标记为已完成/未完成
    • clear_completed：批量删除已完成的待办事项

代理命令

代理理解各种自然语言模式：

  • 全部列出：“显示所有待办事项”、“列出待处理的待办事项”和“我已完成的任务是什么？”
  • 创建全部：“添加待办事项：购买杂货”，“创建：修复bug#紧急”
  • 全部完成：“将第一个标记为已完成”，“完成购买杂货”
  • 删除待办事项：“删除第二个待办事项”，“删除购买杂货”
  • 清除完成：“清除所有已完成的待办事项”
  • 帮助：“你能做什么？”，“帮助”

设计

新野蛮主义与计算美学

  • 醒目的4px电子色边框（青色、品红色、石灰色）
  • 硬阴影（8像素偏移，无模糊）
  • 内容的单空间排版（JetBrains Mono）
  • 粗体无衬线字体（Space Grotesk）用于标题
  • 高对比度深色主题
  • 清晰、即时的交互（150ms过渡）

技术栈

  • 前端：React 19+TypeScript
  • 样式：顺风CSS 4+shadcn/ui组件
  • 存储：IndexedDB（通过Dexie）用于本地持久化
  • 路由：用于客户端路由的Wouter
  • 构建工具：快
  • 后端：用于MCP集成的Express服务器

建筑

MCP灵感设计

虽然传统的MCP对Node.js/Python进程使用stdio传输，但此实现将MCP概念应用于浏览器：

  1. 工具定义 (client/src/lib/mcp-tools.ts)：具有模式和执行功能的MCP风格工具
  2. 代理服务 (client/src/lib/agent-service.ts)：解释自然语言并调用适当的工具
  3. 索引数据库层 (client/src/lib/db.ts)：待办事项的持久存储
  4. UI组件：待办事项列表和代理侧边栏的React组件

项目结构

client/
  src/
    components/
      TodoItem.tsx          # Individual todo card
      TodoList.tsx          # Todo list with filtering
      AddTodoForm.tsx       # Form to create new todos
      AgentSidebar.tsx      # Chat interface for agent
    lib/
      db.ts                 # IndexedDB wrapper
      mcp-tools.ts          # MCP tool definitions
      agent-service.ts      # Natural language processing
    types/
      todo.ts               # TypeScript interfaces
    pages/
      Home.tsx              # Main application page
server/
  index.ts                  # Express server for MCP

入门指南

先决条件

  • Node.js 22+
  • pnpm

可用脚本

  • pnpm install：安装依赖项
  • pnpm dev：启动开发服务器
  • pnpm build：为生产而建造
  • pnpm preview：预览生产版本
  • pnpm format：使用Prettier格式化代码

用法

手动待办事项管理

  1. 使用输入表单添加新待办事项
  2. 输入标题（必填）
  3. 可选择添加描述和标签（逗号分隔）
  4. 点击“添加待办事项”进行创建

代理驱动管理

  1. 点击标题中的“切换代理”按钮打开侧边栏
  2. 键入自然语言命令，如：
    • “显示我的所有待办事项”
    • “添加待办事项：购买牛奶”
    • “将第一个标记为完成”
    • “删除购买牛奶”
  3. 代理将执行相应的MCP工具并更新您的待办事项
  4. 在侧边栏打开时继续使用主待办事项列表

许可证

麻省理工学院

相关 MCP