OpenWallet

OpenWallet là một web app tra cứu, so sánh và tư vấn thẻ ngân hàng tại Việt Nam, hiện vận hành tại openwallet.vn. Dự án tích hợp AI Assistant qua giao thức MCP, cho phép các công cụ như Claude hay ChatGPT truy vấn trực tiếp dữ liệu thẻ.

Chỉ số kỹ thuật và tổng quan

• Số lượng dữ liệu thẻ: 300+ thẻ từ 20+ ngân hàng tại Việt Nam
• Thời gian phản hồi API (Cloudflare Workers tại Edge): < 30ms
• Hạ tầng Frontend App: Next.js (App Router, SSR/SSG), triển khai trên Vercel
• Hạ tầng API Layer: Hono framework trên Cloudflare Workers (api.openwallet.vn)
• Hạ tầng MCP Layer: Model Context Protocol Server (mcp.openwallet.vn)
• Component browser: Storybook 10 (storybook.openwallet.vn)
• Lưu trữ dữ liệu phía client: Dexie.js (IndexedDB)
• Đo lường và phân tích: PostHog Analytics

Bối cảnh và nguyên tắc vận hành

Thị trường thẻ tín dụng và thẻ ghi nợ tại Việt Nam rất đa dạng với hàng trăm sản phẩm cùng các điều khoản phức tạp về phí thường niên, điều kiện hoàn tiền (cashback) và chương trình ưu đãi. Người tiêu dùng thường phải truy cập hàng chục trang web ngân hàng khác nhau để tự so sánh.

OpenWallet được xây dựng như một công cụ tra cứu, so sánh và tư vấn độc lập. Điểm cốt lõi trong mô hình của OpenWallet là tính trung lập về nội dung: thuật toán xếp hạng và gợi ý thẻ hoạt động khách quan, không bị chi phối bởi quan hệ thương mại hay tài trợ từ bất kỳ ngân hàng nào.

Kiến trúc mã nguồn nhiều lớp

Để xử lý khối lượng dữ liệu lớn, đảm bảo tốc độ truy xuất nhanh và sẵn sàng kết nối với các mô hình ngôn ngữ lớn (LLM), OpenWallet được phân tách thành ba lớp chuyên biệt.

Lớp giao diện (Frontend App)

Xây dựng trên Next.js và Tailwind CSS v4, triển khai trên Vercel. Cơ chế render kết hợp Server-Side Rendering (SSR) và Static Site Generation (SSG) cho các trang chi tiết thẻ, tối ưu SEO và nạp dữ liệu ngay từ bước build. Dữ liệu tra cứu được lưu một phần ở bộ nhớ trình duyệt qua Dexie.js (IndexedDB), giúp thao tác lọc và so sánh diễn ra ngay lập tức mà không cần gọi lại server liên tục.

Lớp dữ liệu (API Layer)

Tách biệt hoàn toàn khỏi ứng dụng web chính, giao tiếp qua địa chỉ api.openwallet.vn. Xây dựng bằng Hono framework chạy trực tiếp trên Cloudflare Workers ở mạng lưới Edge, cung cấp dữ liệu thẻ dạng JSON với độ trễ thấp, khả năng chịu tải cao và chi phí vận hành hạ tầng tối ưu.

Lớp giao tiếp AI (MCP Layer)

Lớp giao thức Model Context Protocol xây dựng trực tiếp trên Lớp API, vận hành tại mcp.openwallet.vn. Lớp này cung cấp giao diện dữ liệu có cấu trúc dành riêng cho các mô hình AI đọc và truy xuất. Ứng dụng thực tế gồm hai hướng: tích hợp trực tiếp vào Owie Chat (trợ lý AI tư vấn thẻ ngay trên website), và cho phép các AI Assistant bên ngoài như Claude Desktop hay ChatGPT kết nối thẳng vào cơ sở dữ liệu của OpenWallet để trả lời câu hỏi của người dùng dựa trên dữ liệu thực tế.

Bộ tính năng cốt lõi

• Card Directory. Tra cứu thông tin chi tiết của hơn 300 dòng thẻ từ hơn 20 ngân hàng tại Việt Nam, gồm phí thường niên, hạn mức hoàn tiền và ưu đãi mở thẻ.
• Card Match. Người dùng nhập thói quen chi tiêu thực tế như mua sắm, du lịch, ăn uống. Thuật toán phân tích và xếp hạng các dòng thẻ phù hợp nhất.
• Card Battle. Đặt hai thẻ bất kỳ lên bàn cân để so sánh trực diện về chi phí, tỷ lệ hoàn tiền và điều kiện áp dụng.
• Owie Chat. Trợ lý AI trả lời các thắc mắc về thẻ ngân hàng dựa trên dữ liệu từ OpenWallet, sử dụng miễn phí và không yêu cầu đăng ký tài khoản.
• OpenWallet MCP Integration. Cho phép người dùng nâng cao tích hợp dữ liệu OpenWallet vào các công cụ AI cá nhân.

Chuẩn hóa giao diện với Storybook

Để đảm bảo tính nhất quán về thiết kế và tiết kiệm thời gian phát triển tính năng mới, dự án xây dựng hệ thống component library qua Storybook 10 (storybook.openwallet.vn). Các file câu chuyện (*.stories.tsx) được đặt ngay bên cạnh mã nguồn của từng component, giúp team lập trình kiểm thử độc lập giao diện của từng nút bấm, thẻ thông tin hay biểu đồ so sánh trên nhiều trạng thái dữ liệu trước khi ghép vào trang chính thức.

Kết quả

OpenWallet cho thấy cách kết hợp kiến trúc web hiện đại với Next.js, hạ tầng Edge API trên Cloudflare Workers và giao thức MCP để giải quyết một bài toán dữ liệu thực tế cho người tiêu dùng Việt Nam. Dự án thể hiện năng lực của Perxel khi xây dựng các hệ thống ứng dụng web nhiều lớp, có khả năng mở rộng và sẵn sàng tích hợp với công cụ AI. Stack Cloudflare Workers tại Edge cũng được Perxel dùng lại cho Atlas Robotics.

Footnotes

1. OpenWallet
2. Model Context Protocol