Task Manager

Provides a task-tracking MCP server with JSON persistence and real-time UI via SSE.

typescript

0

GitHub Stars

typescript

Language

6 months ago

First Indexed

3 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

You have an MCP server that manages tasks with JSON persistence and a real-time Vue.js UI. It provides a conversational way to create, view, update, complete, and delete tasks, while keeping everything in sync with a live frontend and a simple JSON data store.

How to use

You can manage tasks from either Claude or the built-in UI. Use Claude to add, list, update, complete, or delete tasks, and watch changes appear in the UI in real time. The UI automatically stays in sync with changes made through Claude via live updates.

How to install

Prerequisites: Node.js installed on your machine and a working shell. You will set up dependencies, build the server, and start the demo UI.

# 1) Install top-level dependencies
npm install

# 2) Install UI dependencies
cd ui && npm install && cd ..

# 3) Build the MCP server
npm run build

Configuration and startup

Configure Claude Desktop to run the MCP server by pointing it to the Node runtime and the built server entry. This example uses an absolute path to your local setup.

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

Start the demo UI

Run the demo startup script to bring up both the backend API and the Vue UI. This provides a quick way to explore the MCP experience end-to-end.

./start-demo.sh

Usage patterns

Through Claude you can say or type commands like: add a task, list all tasks, update a task, mark a task as completed, or delete a task. In the UI, you can see real-time updates as you or Claude modify the task data, with cross-interface changes reflected instantly.

Available tools

addTask

Create a new task with a title and optional description and save it to the JSON data store.

listTasks

Retrieve all tasks or filter them by completion status to view current work.

updateTask

Modify task fields such as title or description, or update its status.

completeTask

Mark a task as completed to reflect progress.

deleteTask

Remove a task from the data store.

persistData

Persist task data to a JSON file to ensure data durability across restarts.

liveUI

Provide real-time updates to the Vue.js frontend via Server-Sent Events (SSE) so changes appear instantly.