Personal Ledger: Fictional WebMCP Demo

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Personal Ledger: Fictional WebMCP Demo

Inspiration

Personal finance tools often ask for more trust than a demo should. We wanted a small ledger that demonstrates WebMCP agent actions while keeping the boundary obvious: every record is synthetic, state is session-only, and no account or external integration is needed.

What it does

Personal Ledger presents Northstar Household's fictional cash-flow summary, transaction filters, and category and budget views. Three narrowly scoped WebMCP tools let an agent read the summary, list demo transactions, or create a fictional draft entry. A person can review the draft before it is added to the in-memory session.

How we built it

The demo is a Sites/Vinext-compatible React and TypeScript app with no database, authentication, cookies, analytics, telemetry, or network connectors. It uses a small in-memory store and document.modelContext.registerTool with strict schemas.

What we learned

WebMCP feels safest when tool contracts are explicit and reversible. We tested invalid inputs, state transitions, mobile layout, privacy boundaries, and tool behavior with a focused evaluation harness.

Challenges

The challenge was making the flow useful without implying real financial advice or handling real money. The final demo keeps the interface realistic enough to explore while remaining synthetic and local by design.

What's next

A production product would need authentication, durable storage, and a separate security review. Those capabilities are intentionally out of scope for this public-safe demo.

Built With

• react
• typescript
• vinext
• webmcp