Skip to main content
Glama
akshayark97

task-mcp-learning

by akshayark97
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

Task Manager — MCP Server + Next.js

A small but complete example that demonstrates every core Model Context Protocol (MCP) concept, wired to a Next.js web app that shares the same data.

An AI client (e.g. Claude Desktop) talks to the MCP server to read and change tasks; the Next.js UI shows those same tasks and updates live.

┌────────────────┐   MCP (stdio / JSON-RPC)   ┌───────────────────────┐
│  AI client     │ ─────────────────────────► │  mcp-server/server.ts │
│ (Claude etc.)  │   tools · resources ·      │  Resources / Tools /  │
└────────────────┘   prompts                  │  Prompts / Transport  │
                                              └──────────┬────────────┘
                                                         │  reads/writes
                                                         ▼
                                              ┌───────────────────────┐
┌────────────────┐    HTTP / REST             │   lib/store.ts        │
│  Web browser   │ ─────────────────────────► │   data/tasks.json     │
│ (Next.js UI)   │   /api/tasks               │  (shared file store)  │
└────────────────┘                            └───────────────────────┘

MCP concepts demonstrated

Concept

Where

Examples

Resources

mcp-server/server.ts

tasks://all, tasks://stats, tasks://{id} (templated)

Tools

mcp-server/server.ts

create_task, update_task, complete_task, delete_task, search_tasks

Prompts

mcp-server/server.ts

summarize_tasks, daily_plan (parameterized)

Transport

mcp-server/server.ts

stdio (Claude Desktop compatible)

Related MCP server: task-manager-mcp

Project structure

lib/store.ts                # Shared, file-backed task store (single source of truth)
mcp-server/server.ts        # The MCP server: resources + tools + prompts + stdio
mcp-server/smoke-test.ts    # End-to-end MCP client test (uses the official SDK Client)
app/page.tsx                # Task manager web UI
app/api/tasks/route.ts      # REST: GET (list/search) + POST (create)
app/api/tasks/[id]/route.ts # REST: GET / PATCH / DELETE one task
claude_desktop_config.json  # Example config to connect Claude Desktop

Run it

1. The web app

npm run dev
# open http://localhost:3000

2. The MCP server (standalone)

npm run mcp            # runs the server over stdio
npm run mcp:inspect    # opens the MCP Inspector UI to click through tools/resources/prompts

3. End-to-end smoke test

npx tsx mcp-server/smoke-test.ts

Exercises the full MCP surface: lists tools/resources/templates/prompts, calls a tool, reads resources, and fetches a prompt.

Connect to Claude Desktop

Add the mcpServers block from claude_desktop_config.json to your Claude Desktop config (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json), adjusting cwd to this project's absolute path. Restart Claude Desktop, then ask it to "create a task" or "summarize my tasks" — the changes appear in the web UI too.

How the two sides stay in sync

Both the MCP server process and the Next.js API import the same lib/store.ts, which persists to data/tasks.json. Anything the AI does through MCP is immediately visible in the browser (the UI polls every 3s), and vice-versa — verified across separate processes.

This server cannot be installed

A
license - permissive license
-
quality - not tested
C
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

View all related MCP servers

Related MCP Connectors

  • PlanExe

    MCP server for generating rough-draft project plans from natural-language prompts.

  • better-notion-mcp

    Markdown-first MCP server for Notion API with 8 composite tools and 39 actions.

  • microservices.sh

    MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/akshayark97/task-mcp-learning'

If you have feedback or need assistance with the MCP directory API, please join our Discord server