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

Quick Start

1. Install Dependencies

2. Build the MCP Server

3. Configure Claude Desktop

Add to your claude_desktop_config.json:

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

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

4. Start the Demo UI

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

Run API Server Only

Run Vue UI Only

Build for Production