MCP ExplorerExplorer

2do

@henriktreon a month ago
1 MIT
FreeCommunity
AI Systems
a todo app with web/cli and mcp interactions

Overview

What is 2do

2do is a modern todo application that allows users to manage their tasks through a web interface, a command-line tool, and AI assistant integration, all connected to a unified PocketBase database.

Use cases

Use cases for 2do include managing daily tasks, tracking project milestones, organizing personal goals, and collaborating on team projects with shared task lists.

How to use

Users can start by installing the necessary dependencies using npm, then build and start the application. They can access their todo list through a web browser, terminal, or AI assistant.

Key features

Key features include a modern web interface, an interactive CLI tool, AI integration for natural language task management, real-time synchronization across all interfaces, rich metadata for tasks, analytics for tracking progress, and smart search capabilities.

Where to use

2do can be used in various fields such as project management, personal task organization, team collaboration, and productivity enhancement for individuals and groups.

Content

Multi-Interface Todo Application

A modern todo application built on PocketBase with three powerful ways to manage your tasks: a beautiful web interface, an interactive command-line tool, and AI assistant integration.

One todo list. Three ways to access it.

🌟 Features

  • 🌐 Web Interface - Modern React UI with Entur Design System
  • 💻 CLI Tool - Beautiful terminal interface with rich interactivity
  • 🤖 AI Integration - Natural language todo management via Claude Desktop
  • 💾 Unified Data - All interfaces share the same PocketBase database
  • 🔄 Real-time Sync - Changes appear instantly across all interfaces
  • 🎯 Rich Metadata - Priorities, due dates, tags, and descriptions
  • 📊 Analytics - Visual statistics and progress tracking
  • 🔍 Smart Search - Filter and search across all todo properties

🏗️ Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│                 │    │                 │    │                 │
│   Web Browser   │    │   Terminal      │    │  Claude Desktop │
│                 │    │                 │    │                 │
└────────┬────────┘    └────────┬────────┘    └────────┬────────┘
         │                      │                      │
         ▼                      ▼                      ▼
    ┌─────────────────────────────────────────────────────────────┐
    │                   PocketBase Server                         │
    │                (Unified Data Layer)                         │
    └─────────────────────────────────────────────────────────────┘

All three interfaces connect to the same PocketBase database, ensuring your todos stay synchronized no matter how you access them.

🚀 Quick Start

Prerequisites

  • Node.js: Version 16 or higher
  • PocketBase: Included in the pocketbase/ directory

Setup (3 steps)

  1. Install Dependencies:

    npm install
    npm run build:all
    
  2. Start the app:

    npm start
    

    Auto-Setup: PocketBase automatically creates the database and todos collection on first run!

  3. Choose Your Interface:

    • Web UI: → http://localhost:3000
    • CLI: → use todo command anywhere
    • AI Assistant: Configure Claude Desktop (see below)
    • API/SDK Navigate to the pocketbase admin GUI (http://127.0.0.1:8090/_/) and click the API Preview button to read the API/SDK documentation (SDK’s available are JS and Dart)

MCP Setup

  1. Configure Claude Desktop:

    Open your configuration file:

    • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
    • Windows: %APPDATA%/Claude/claude_desktop_config.json
    • Linux: ~/.config/Claude/claude_desktop_config.json
  2. Add MCP Server:

    {
      "mcpServers": {
        "todo": {
          "command": "node",
          "args": [
            "/absolute/path/to/your/mcp-todo/dist/index.js"
          ],
          "cwd": "/absolute/path/to/your/mcp-todo",
          "env": {
            "MCP_AUTO_START_POCKETBASE": "true"
          }
        }
      }
    }

    Replace the paths with your actual project directory.

  3. Restart Claude Desktop and test with: “Show me my todos”

🌐 Web Interface

A modern, responsive React application built with Entur’s Design System.

Features

  • 🎨 Professional Design - Clean, accessible interface
  • 📱 Responsive - Works on desktop, tablet, and mobile
  • Real-time Updates - See changes instantly
  • 🔍 Advanced Filtering - Search by text, status, priority
  • 📊 Visual Analytics - Progress tracking and insights
  • 🏷️ Tag Management - Organize with custom tags

Quick Start

# Start everything
npm run dev:all

# Or start separately:
npm run pocketbase  # Terminal 1
npm run web         # Terminal 2

Then open http://localhost:3000 in your browser.

💻 Command Line Interface

A beautiful, interactive terminal application with rich colors and intuitive commands.

Features

  • 🎨 Beautiful Terminal UI - Colors, tables, progress bars
  • Fast Commands - Quick operations for power users
  • 🔄 Interactive Mode - Menu-driven interface
  • 📊 Rich Statistics - Visual progress tracking
  • 🔍 Smart Filtering - Search by any property
  • 📅 Due Date Tracking - Overdue highlighting

Installation

# Build and install globally
npm run cli:build
cd cli && npm link

Usage

# Interactive mode (recommended for beginners)
todo

# Quick commands
todo list                    # List all todos
todo add "Buy groceries"     # Quick add
todo complete "groceries"    # Mark as done
todo stats                   # Show statistics
todo --help                  # See all commands

Advanced Usage

# Filtering and search
todo list --status pending         # Only pending todos
todo list --priority high          # Only high priority
todo list --table                  # Compact table view
todo list --search "development"   # Search by text

# Creating todos with full options
todo add "Complex task" \
  --description "Detailed description" \
  --priority high \
  --tags "work,urgent" \
  --due 2025-06-15

# Management commands
todo complete "task name"    # Mark as completed
todo delete "old task"       # Remove todo
todo clear                   # Clear completed todos
todo overdue                 # Show overdue items

🤖 AI Assistant Integration (Claude Desktop)

Manage your todos naturally using AI through the Model Context Protocol (MCP).

Features

  • 🗣️ Natural Language - “Create a high-priority task for the meeting”
  • 🔍 Smart Queries - “Show me overdue tasks tagged with ‘work’”
  • 📊 Analytics - “What’s my completion rate this week?”
  • 🎯 Context Aware - AI understands priorities, due dates, tags

Example Interactions

  • “Create a new todo to review the quarterly report with high priority”
  • “Show me all high priority tasks that are overdue”
  • “Mark my MCP setup todo as completed”
  • “What are my todo statistics?”
  • “Find all todos tagged with ‘development’”
  • “Delete completed todos from last week”

📊 Todo Data Structure

{
  id: string;
  title: string;
  description?: string;
  completed: boolean;
  priority: 'low' | 'medium' | 'high';
  tags: string[];
  dueDate?: string;  // ISO 8601 format
  created: string;   // ISO 8601 format
  updated: string;   // ISO 8601 format
}

🔧 Development

Scripts

# Building
npm run build           # Build MCP server
npm run build:all       # Build everything (MCP + Web + CLI)

# Development
npm run dev             # MCP server watch mode
npm run web             # Start web UI
npm run cli             # CLI development mode
npm run dev:all         # Start PocketBase + Web UI

# Database
npm run pocketbase      # Start PocketBase server
npm run setup           # Build + start PocketBase

# CLI
npm run cli:build       # Build CLI
npm run cli:link        # Build + link globally

Project Structure

├── src/                 # MCP server source
├── web/                 # React web application
├── cli/                 # Command-line interface
├── pocketbase/          # Database server + config
├── pb_data/            # Database files (auto-generated)
└── pb_migrations/      # Database migrations

Available Endpoints

Web UI: http://localhost:3000
PocketBase Admin: http://localhost:8090/\_/
API Base: http://localhost:8090/api/

🌍 Multiple Access Points

Your todos are accessible through:

  1. 🌐 Web Interface - Modern browser experience
  2. 💻 Command Line - Terminal power-user interface
  3. 🤖 AI Assistant - Natural language via Claude Desktop
  4. 🔧 Admin Panel - Direct database management
  5. 📡 REST API - Programmatic access for integrations

All interfaces share the same database - changes sync automatically!

🎯 Use Cases

Personal Productivity

  • Daily task management with beautiful interfaces
  • Cross-device synchronization
  • AI-powered task creation and management

Development Workflow

  • Feature tracking with tags and priorities
  • CLI integration in development environment
  • AI assistant for project planning

Team Collaboration

  • Shared todo lists via web interface
  • Consistent data across team members
  • API integration with other tools

🚀 What’s Next?

This todo application demonstrates the power of multi-interface design:

  • One Backend - PocketBase provides robust, scalable data storage
  • Multiple Frontends - Each optimized for different use cases
  • Unified Experience - Consistent data and functionality across all interfaces

Whether you prefer clicking in a browser, typing in a terminal, or talking to an AI, your todos are always accessible and synchronized.


Built with ❤️ using PocketBase, React, Node.js, and the Model Context Protocol.

Tools

No tools

Comments

Recommend MCP Servers

View All MCP Servers