Task Manager MCP Server

A Model Context Protocol (MCP) server for managing tasks with JSON persistence and a real-time Vue.js UI.

Features

• ✅ Add tasks with title and optional description
• ✅ List all tasks or filter by completion status
• ✅ Update task details
• ✅ Mark tasks as completed
• ✅ Delete tasks
• ✅ JSON file persistence (stored in data/tasks.json)
• ✅ Real-time Vue.js UI that syncs with MCP changes
• ✅ Live updates using Server-Sent Events (SSE)

Project Structure

mcp-study/
├── src/
│   ├── index.ts         # MCP server
│   ├── storage.ts       # JSON persistence
│   ├── api-server.ts    # REST API + SSE for UI
│   └── types.ts         # TypeScript types
├── ui/                  # Vue.js frontend
│   └── src/
│       └── components/
│           └── TaskList.vue
├── data/                # Task storage
│   └── tasks.json
└── README.md

Quick Start

1. Install Dependencies

npm install
cd ui && npm install && cd ..

2. Build the MCP Server

npm run build

3. Configure Claude Desktop

Add to your claude_desktop_config.json:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "task-manager": {
      "command": "/Users/YOUR_USERNAME/.nvm/versions/node/v25.2.1/bin/node",
      "args": ["/absolute/path/to/mcp-study/dist/index.js"]
    }
  }
}

Replace the paths with your actual paths. Restart Claude Desktop.

4. Start the Demo UI

./start-demo.sh

This starts:

• API server on http://localhost:3001
• Vue UI on http://localhost:5173

Usage

Through Claude (MCP)

Talk to Claude in Claude Desktop:

• Add a task: "Add a task to buy groceries"
• List tasks: "Show me all my tasks"
• Update task: "Update task [id] and change the title"
• Complete task: "Mark task [id] as completed"
• Delete task: "Delete task [id]"

Through the UI

1. Open http://localhost:5173 in your browser
2. Watch tasks appear in real-time as you add them through Claude
3. See live updates when tasks are completed or modified

The Magic ✨

This demo showcases the power of MCPs:

1. Conversational Interface: Manage tasks through natural language with Claude
2. Visual Interface: See the same data in a beautiful UI
3. Real-Time Sync: Changes from Claude appear instantly in the UI
4. Shared Data: Both interfaces read/write to the same tasks.json file

Try it:

1. Ask Claude to "Add a task to learn about MCPs"
2. Watch it appear in the UI instantly
3. The UI updates in real-time via Server-Sent Events!

Development

Run MCP Server Only

npm run dev

Run API Server Only

npm run api

Run Vue UI Only

cd ui && npm run dev

Build for Production

npm run build