Private todo and MCP workflow

A Vue 3 + webedge-db todo app with an MCP server for AI agents.

Vue 3webedge-dbMCP

Dev-story

Challenge

When you hand work to an AI agent, its tasks and yours end up in different places — the agent cannot see your list and you cannot see its.

What we did

A Vue 3 + webedge-db todo app (Better Auth login at todo.webedge.dev) that also exposes a local MCP server, so agents call the same task functions and read/write the same database as the person.

Result

You and an agent work off one task list — the agent can add, update and close tasks, and you see them in the same app.

Dev-story article

Private todo and MCP workflow: how the project was built

Agents kept losing follow-up work: they would surface a task mid-conversation, and it would evaporate when the chat ended. The tension was that a human's real todo list lived in one place and an agent's memory lived in another, so neither could trust the other. The fix was to give both the human UI and the agents write access to the exact same database rather than a scratch copy.

Sections

Modules

Stack

Vue 3 + webedge-db

Why the project exists

When you hand work to an AI agent, its tasks and yours end up in different places — the agent cannot see your list and you cannot see its.

What was built

A Vue 3 + webedge-db todo app (Better Auth login at todo.webedge.dev) that also exposes a local MCP server, so agents call the same task functions and read/write the same database as the person.

A private todo app with a Vue 3 + Tailwind frontend and a reactive backend, plus a local MCP server that speaks to the same data over authenticated HTTP. When an agent decides work needs recording, it calls a tool and the item shows up live in the human's list; when the human ticks it off, the agent sees it done on the next read.

Main modules and user path

M01

MCP server as a stdio JSON-RPC bridge with six purpose-scoped tools: todo_health, todo_projects, todo_list, todo_create, todo_update, todo_complete, each with prompts that tell the agent when to reach for it

M02

Service-token auth: the MCP process carries a shared secret and a default-user email, and every call posts to the reactive backend's HTTP site routes under that identity so agents never touch user credentials

M03

todo_health as a first-class preflight tool that checks the site is reachable and the token is accepted, so an agent diagnoses a broken deployment instead of silently failing to save

M04

Human-side CRUD in Vue with Better Auth login, projects/lists defaulting to Inbox, priorities, due dates, and list deletion

M05

Deployment split across three domains — Cloudflare Pages frontend and two published backend routes — with guards that force the Todo-specific API and site URLs against stale env values

Architecture and technology decisions

Built with Vue 3, webedge-db, MCP.

Vue 3 + Tailwind on Cloudflare Pages, a self-hosted reactive backend on a VPS behind two published Cloudflare routes, and a dependency-free Node MCP server that talks to the backend's HTTP endpoints with a bearer service token.

Result and lessons

You and an agent work off one task list — the agent can add, update and close tasks, and you see them in the same app.

A small, private tool where the AI and the person share one task list instead of two drifting copies; it is an early MVP, hardened over a few passes on the MCP and creation flow, not a large product.