Task Manager MCP Server

# 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 ```bash npm install cd ui && npm install && cd .. ``` ### 2. Build the MCP Server ```bash npm run build ``` ### 3. Configure Claude Desktop Add to your `claude_desktop_config.json`: **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` ```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 ```bash ./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 ```bash npm run dev ``` ### Run API Server Only ```bash npm run api ``` ### Run Vue UI Only ```bash cd ui && npm run dev ``` ### Build for Production ```bash npm run build ```