• 

  the dashboard

• 

  landing page

Haven: Devpost Submission Story

Copy and paste the markdown below directly into the "Story" section of your Devpost project page.

💡 Inspiration

When it comes to personal finance apps, users face a massive compromise. You either manually enter every transaction by hand, or you hand over your secure banking credentials to a third-party server via aggregators like Plaid. We believe AI can solve this friction, but sending sensitive bank statements to an external AI backend is a massive privacy risk. Most people simply refuse to do it.

We built Haven to solve this using a zero-backend architecture powered by the WebMCP protocol. We were inspired by the idea that the frontend browser itself is powerful enough to be the entire application.

⚙️ What it does

Haven is a completely client-side, React-based financial dashboard. There is no database. All state is securely persisted right in the browser's local storage. By opening Haven inside a WebMCP-enabled environment (like the ChatGPT desktop app), the frontend instantly registers custom WebMCP tools (add_transaction, set_net_worth) directly to window.modelContext.

Users simply paste their raw, messy bank statements into the chat. The AI extracts the entities and executes our client-side WebMCP tools, instantly updating the React context state. Transactions appear, monthly spend calculates, and net worth dynamically updates—all without a single byte of financial data ever hitting a backend server.

🛠️ How we built it

We built Haven using a modern stack focused entirely on the client side:

• Frontend: React (Vite) + TypeScript for type-safe components.
• Styling: TailwindCSS and Lucide Icons for a senior-grade, premium aesthetic that avoids the generic "AI dashboard" cliches.
• State Management: React Context API paired with custom useLocalStorage hooks to ensure data persistence across sessions.
• WebMCP Integration: We built a custom useWebMCP hook that intelligently polls for window.modelContext and registers strict, JSON-schema-typed tools (add_transaction, set_net_worth). When the agent triggers these tools, they directly manipulate the React Context state, bypassing the need for any API routes.
• Deployment: Vercel (configured with vercel.json for SPA routing, ensuring deep links work perfectly inside the ChatGPT in-app browser).

⚠️ Challenges we ran into

The biggest challenge was bridging the gap between an external AI environment and our React application state. Initially, we explored building a Chrome Extension to inject the tools, but modern browser security policies (and a desire for a frictionless user experience) pushed us to rely on native WebMCP support.

We also had to solve a race condition where the React app would load faster than the host environment could inject window.modelContext. We solved this by writing a resilient polling mechanism that waits for the context to become available before registering the schemas. Lastly, configuring Vercel to correctly route SPA traffic inside the ChatGPT embedded browser required some deep-dive debugging into routing rules.

🏆 Accomplishments that we're proud of

1. True Zero-Backend Architecture: We proved that you do not need a heavy server-side MCP protocol to build highly ambitious, agent-native applications.
2. Absolute Privacy: We created a powerful AI financial advisor with zero privacy risk.
3. Execution & Polish: We strictly adhered to the hackathon judging criteria, delivering a premium UX that feels like a production-ready product.

📚 What we learned

We learned the immense power of Client-Side MCP. Before this project, we assumed LLM integration required API keys, cloud functions, and backend tool execution. WebMCP flipped our mental model upside down. Learning to trust the client environment and exposing typed JSON schemas directly to the browser DOM opened our eyes to a whole new paradigm of privacy-first AI apps.

🚀 What's next for Haven

Our next steps are to expand the WebMCP tool registry to include:

• analyze_spending_trends: Allowing the AI to read the local historical data arrays and output insights.
• CSV Parsing Tools: Enabling the agent to natively ingest full CSV exports from major banks entirely client-side.
• Cross-Device Sync: Exploring encrypted peer-to-peer sync (like WebRTC) so users can share their local dashboard across devices without a central database.

Built With

• localstorage
• react
• typescript
• webmcp