OpenWallet

OpenWallet is a web app to look up, compare and get advice on bank cards in Vietnam, live at openwallet.vn. It connects an AI assistant through the MCP protocol, so tools like Claude or ChatGPT can query the card data directly.

Technical overview

• Card data: 300+ cards from 20+ banks in Vietnam
• API response time (Cloudflare Workers at the edge): < 30ms
• Frontend app: Next.js (App Router, SSR/SSG), deployed on Vercel
• API layer: Hono on Cloudflare Workers (api.openwallet.vn)
• MCP layer: Model Context Protocol server (mcp.openwallet.vn)
• Component browser: Storybook 10 (storybook.openwallet.vn)
• Client-side storage: Dexie.js (IndexedDB)
• Analytics: PostHog

Context and principles

Vietnam's credit and debit card market is wide, with hundreds of products and complicated terms for annual fees, cashback conditions and promotions. People often visit dozens of bank websites to compare cards by hand.

OpenWallet is built as an independent tool to look up, compare and get advice on cards. Its core principle is neutral content: the ranking and recommendation logic works objectively and is not influenced by commercial ties or sponsorship from any bank.

A layered codebase

To handle a large amount of data, keep lookups fast and be ready for large language models (LLMs), OpenWallet is split into three layers.

Frontend app

Built on Next.js and Tailwind CSS v4, deployed on Vercel. Rendering combines server-side rendering (SSR) and static site generation (SSG) for the card detail pages, which helps SEO and loads data at build time. Part of the lookup data is kept in the browser through Dexie.js (IndexedDB), so filtering and comparing happen instantly without calling the server again.

API layer

Fully separate from the main web app, served at api.openwallet.vn. Built with Hono on Cloudflare Workers at the edge, it returns card data as JSON with low latency, high load capacity and low infrastructure cost.

MCP layer

The Model Context Protocol layer sits directly on top of the API layer, at mcp.openwallet.vn. It gives AI models a structured data interface to read and query. It is used in two ways: built into Owie Chat (the AI assistant on the site that advises on cards), and open to external AI assistants such as Claude Desktop or ChatGPT, which can connect straight to the OpenWallet database and answer users' questions from real data.

Core features

• Card Directory. Detailed information on over 300 cards from more than 20 banks in Vietnam, including annual fees, cashback limits and sign-up offers.
• Card Match. Users enter their real spending habits, such as shopping, travel and dining. The algorithm ranks the cards that fit best.
• Card Battle. Put any two cards side by side to compare cost, cashback rate and conditions directly.
• Owie Chat. An AI assistant that answers questions about bank cards using OpenWallet data. Free to use, with no account needed.
• OpenWallet MCP Integration. Lets advanced users bring OpenWallet data into their own AI tools.

A consistent interface with Storybook

To keep the design consistent and save time on new features, the project has a component library in Storybook 10 (storybook.openwallet.vn). The story files (*.stories.tsx) sit next to each component's source, so developers can test each button, info card or comparison chart on its own, across many data states, before it goes into a real page.

Outcome

OpenWallet shows how modern Next.js architecture, an edge API on Cloudflare Workers and the MCP protocol can solve a real data problem for consumers in Vietnam. It shows Perxel's ability to build layered web applications that scale and are ready to work with AI tools. The same Cloudflare Workers edge stack was reused for Atlas Robotics.

Footnotes

1. OpenWallet
2. Model Context Protocol