-
-
Dashboard
-
Transactions
-
Accounts
-
Goals
-
Budgets
-
Cashflow
-
Portfolio
-
AI Agent Webmcp tools, financial health
Inspiration
Every time I talk to an AI about money, I start from scratch. What's your income? What are your savings? What do you spend on rent? The data exists across multiple apps I use, but AI agents have no way to read it. I eventually end up describing my own financial situation to a system again and again. And there's no real way to keep this updated since it keeps changing month to month.
WebMCP felt like the right answer. A page that exposes its data as tools, discoverable by any agent that browses it, with no API keys and no configuration. The question was: what domain actually needs this? Finance felt obvious. The data is structured, the stakes are high enough that you want an agent doing the heavy lifting, and the cross-domain use cases (property, mortgages, tax) are real and immediate. Building this for the WebMCP Challenge felt like a good forcing function to see how far that idea could go.
What it does
FinSnap is a personal finance dashboard that exposes your complete financial picture as 19 WebMCP tools. Net worth, cash flow, goals, portfolio, budget status, recurring charges, financial health score, cash flow forecasting, and safe-to-spend calculations.
Any WebMCP-compatible AI agent browsing the page gets immediate, structured access to all of it. No setup. The agent browses to FinSnap and the tools are just there.
The cross-domain case is where it gets interesting. Ask about property affordability or mortgage capacity, and the agent reads six months of real transaction data and answers with specificity that a generic prompt can't match. Ask it to set a goal, and it writes directly back to the page. The human and the agent are working on the same interface at the same time.
How I built it
Next.js 16 App Router with a synchronous WebMCP shim injected in <head>. The shim handles two environments: ChatGPT's in-app browser (which provides document.modelContext natively) and Chrome with chrome://flags/#enable-webmcp-testing enabled.
Financial data lives in IndexedDB via the idb library across six stores: accounts, transactions, categories, goals, portfolio, and settings. This is a prototype approach that demonstrates the tool interface without requiring live bank connections. In production, you would replace it with open banking APIs or CSV import; the 19 tools stay identical.
A significant part of the build was designing the tool set itself. What does an agent actually need to answer real financial questions? That thinking led to the planning category: get_financial_briefing bundles six sub-queries into one call so an agent gets a full picture upfront; calculate_safe_to_spend runs the budget arithmetic across all categories; forecast_cashflow projects forward from six-month averages with trend adjustment. Agents can call these directly and get a useful answer.
The 19 tools are split across three categories:
- Read: net worth, accounts, transactions, spending by category, cash flow, portfolio, recurring charges, health score, goals, budget status
- Write: set goal, categorise transaction, import transactions, reconcile balance, delete goal, set budget
- Planning: financial briefing (full picture in one call), cash flow forecast, safe-to-spend
Deployed on Vercel via GitHub CI/CD.
Challenges
Designing a coherent financial picture. The demo data had to tell a believable story: a person with realistic goals, a plausible portfolio, spending patterns that produced meaningful cash flow trends. Getting six months of transactions, account balances, portfolio holdings, and goal progress to all be internally consistent took real planning. A number that looks right in isolation (a CommSec balance, a savings rate) can immediately contradict something else if you have not mapped the whole picture first.
Shim execution order. Next.js Script component defers execution by default. The WebMCP shim needs to run synchronously before the page renders so document.modelContext exists when the agent first checks for it. Solved by injecting via dangerouslySetInnerHTML directly in the root layout.
Double-encoded JSON. Chrome's native WebMCP flag serialises tool call arguments differently from ChatGPT's implementation. The shim handles both code paths.
Suspense boundaries. Next.js production builds require useSearchParams() to be wrapped in a Suspense boundary. Caught this at build time rather than in development.
What I learned
The zero-setup discovery model works differently from other AI integration patterns. The agent browses the page and the tools are available. No key exchange, no prior configuration. That changes what kinds of apps make sense to build on WebMCP.
Finance works well here because the data is already structured and the agent can compute things (cash flow forecasting, health scoring, safe-to-spend) that would take a human meaningful time to work out manually. What surprised me was how much of the useful work sits in the planning tools rather than the raw reads. An agent that can call get_financial_briefing and immediately reason over a complete picture is more useful than one that has to assemble the same picture from ten separate calls.
What's next
The right write pattern for financial data is: agent proposes, human commits. The agent should draft a change into a staging area, the human reviews actual figures, and a commit step applies it. This is especially important in finance where you want a human seeing real numbers before anything changes.
Real bank connections via open banking APIs or CSV import replace the seeded IndexedDB. The tool interface stays identical.
An ask_human tool where the agent surfaces a question in the FinSnap UI and waits for a response. The agent sees you are 90% through your dining budget with two weeks left and asks whether to adjust. That kind of back-and-forth is where the collaboration gets interesting.
As the WebMCP ecosystem matures, dedicated domain agents (property search, mortgage calculators, tax tools) could each expose their own WebMCP tools. FinSnap becomes the financial node they all read first. You explain your financial situation once, and every agent that needs it reads it from here. That is the version of personal finance AI that actually fits how people live.
Log in or sign up for Devpost to join the conversation.