Fina - AI Powered Financial App

日常の支出入力にかかる手間を極限まで削減するために設計された、自然言語処理・マルチモーダル入力・自動支出分析を融合させたAIネイティブな家計簿ダッシュボード。

Fina Intelligence Hub Dashboard

概要 (Overview)

従来の家計簿アプリが挫折しやすい最大の理由は、取引入力の手作業が煩雑で継続が困難な点にあります。Fina は、ユーザーワークフローの中心に生成AIを直接配置することで、この課題を根本から再構築しました。複雑なフォームやドロップダウンを手動で操作する代わりに、日常的な言葉で入力または発話するだけで（例：「ベーカリーで昼食代5万ルピア」）、AIが内容を抽出・分類し、リアルタイムにデータベースへと反映します。

WPU AI Appsコースで得た知見をもとに開発された本プロジェクトは、単なるプロンプトラッパーにとどまらず、ツール呼び出し（Function Calling）、マルチモーダル処理、およびエージェント指向のワークフローをNext.jsフルスタックアプリケーションへと組み込んでいます。

主な機能 (Key Features)

1. 自然言語・マルチモーダル支出トラッキング

自然言語パース: 会話形式のテキスト入力や音声メモから収入・支出を直接記録。
Gemini Function Calling: 非構造化文字列から金額、カテゴリ、取引先、日時などの構造化パラメータを正確に抽出。
マルチモーダル入力対応: レシート画像や領収書写真からの自動支出データ読み取りに対応。

2. 生成AIによるインサイト分析と可視化

対話型インテリジェンスハブ: 日常言語での質問（例：「今月の支出カテゴリの内訳」）に対して即座に財務データを分析。
動的グラフ生成: RechartsとLLMスキーマ検証を連携させ、カテゴリ別支出円グラフ、トレンド推移、キャッシュフロー比較を動的描画。
アドバイザリー機能: 支出傾向をもとにした改善提案や使いすぎ防止のアドバイスを提示。

3. エージェント型ファイナンシャルウィザード

ガイド付き予算設定: 月次上限設定や貯蓄目標の設計を段階的に支援する対話型エージェント。
自律的ツール実行: ユーザーに代わってSupabaseに対する複数ステップのクエリを実行。

システムアーキテクチャ (System Architecture)

ユーザー入力 (音声 / テキスト / 画像)
                │
                ▼
     Next.js 16 (React 19) App Router
                │
     ┌──────────┴──────────┐
     ▼                     ▼
Gemini API 2.5         Supabase DB & Auth
(@google/genai)        (PostgreSQL + マイグレーション)
Function Calling           │
     │                     ▼
     └──────────────► TanStack Query Cache
                           │
                           ▼
               Recharts & 動的UIダッシュボード

フロントエンド & 実行環境: Next.js 16およびReact 19 App Routerを採用し、SSRとリアクティブなクライアントコンポーネントで軽快な動作を実現。
AIコア: 公式Google GenAI SDK（@google/genai）を用い、Gemini APIによるファンクションコーリングとマルチモーダル解析を実行。
データベース: Supabase PostgreSQLを使用し、明示的なマイグレーションスクリプトでウォレット、カテゴリ、取引台帳を管理。
状態管理 & UI: TanStack Queryによるクライアントキャッシュ管理、Radix UIおよびTailwind CSS v4による洗練されたインターフェース。

使用技術 (Tech Stack)

フレームワーク: Next.js 16, React 19 (App Router)
AIエンジン: Google Gemini API (@google/genai), Function Calling, Multimodal
データベース: Supabase (PostgreSQL)
データフェッチ: TanStack Query (React Query)
フォーム・検証: React Hook Form, Zod
スタイリング・UI: Tailwind CSS v4, Radix UI, Lucide Icons
データ可視化: Recharts