Arin - Your AI Expense Tracker

Experience the future of expense tracking with AI-powered generative UI

Arin is an intelligent expense tracking application that uses conversational AI to help you manage finances effortlessly. Simply chat with Arin, snap photos of bills, and get instant insights - all powered by cutting-edge generative UI technology.

ARIN.mp4

✨ What Makes Arin Special

Generative UI Powered by Tambo - Arin doesn't just respond with text. It generates dynamic, interactive interfaces on-the-fly based on your questions. Ask about spending trends, and Arin creates custom charts. Need to update a budget? Interactive forms appear right in the conversation.

AI That Understands Context - Using Tambo's context helpers, Arin knows your expenses, budgets, goals, and preferences. Every response is personalized and actionable.

Snap and Track - Take a photo of any receipt. AI-powered image detection automatically extracts amounts, categories, and dates.

MCP Integration - Connect to external services like Amazon shopping history and financial datasets through Model Context Protocol.

Tech Stack

• Tambo AI - Generative UI React SDK for AI-driven interfaces
• Next.js - React framework with App Router
• Supabase - Database and authentication
• TypeScript - Type-safe development
• Tailwind CSS & Shadcn UI - Styling
• Zustand - State management

Tambo Features Used

Generative Components

Dynamic UI components created by AI in real-time based on conversation context:

• Custom expense charts and visualizations
• Budget progress indicators
• Spending summaries
• Category breakdowns

Interactive Components

Pre-built components that AI can update and control:

• Expense tables with filters
• Budget cards with real-time updates
• Monthly budget selectors
• Recurring expense managers

Context Helpers

Provide Arin with real-time data access:

• Expenses, budgets, and recurring expenses
• User profile and preferences
• Yearly savings goals
• Theme settings
• Date/time awareness
• Arin's personality traits

Custom Tools

Enable Arin to take actions:

• Create and update expenses & recurring expenses
• Manage budgets
• Set yearly savings goals
• Update monthly budgets
• Fetch Amazon product data
• Fetch Realtime Stocks and Finance News

Custom UI Elements

• Modified message components with custom styling
• Tailored chat thread design
• Interactive forms and inputs within messages
• Responsive data visualizations

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm/pnpm
• A Tambo API key
• Supabase project (for database)

1. Clone and Install

git clone <your-repo-url>
cd arin
npm install
# or
pnpm install

2. Environment Setup

Create a .env.local file:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NEXT_PUBLIC_SITE_URL=http://localhost:3000

3. Database Setup

Run Supabase migrations to set up the database schema:

# Initialize Supabase (if not done)
npx supabase init

# Link to your project
npx supabase link --project-ref your-project-ref

# Push migrations
npx supabase db push

4. Configure Tambo API Key

You have two options:

Option A: In the App

1. Run the app: npm run dev
2. Sign in with Google
3. Go to Settings page
4. Enter your Tambo API key in the "Tambo API Key" section
5. Refresh the page

Option B: In Code (Recommended) Edit app/layout.tsx and replace the default API key with yours. *Recommended because then you can utilize the Amazon MCP server as well.

5. Setup MCP Servers (Optional but Recommended)

ARIN uses two Model Context Protocol (MCP) servers to extend its AI capabilities:

1. Financial Datasets MCP Server

Provides real-time stock market data, financial metrics, and investment tracking.

• Server URL: https://mcp.financialdatasets.ai/api
• Server Key: financialdatasets
• Custom Header: X-API-KEY (Get your free API key at financialdatasets.ai)
• Features:
  • Real-time stock prices
  • Company financial metrics
  • Historical price data
  • Market news and trends

Setup:

1. Sign up at Financial Datasets to get your API key
2. Add the MCP server in Tambo Dashboard → Settings → MCP Servers
3. Configure custom header with your API key

Documentation: https://docs.financialdatasets.ai/mcp-server

---

2. Amazon Product Scraper MCP Server (via Apify)

Enables AI to fetch product information for expense categorization and price tracking.

• Server URL: https://mcp.apify.com/?tools=actors,junglee/free-amazon-product-scraper
• Server Key: jungleeamazonscraper
• Authentication: Bearer token (Get from Apify)
• Custom Header: Authorization: Bearer apify_...
• Features:
  • Product price lookup
  • Product details extraction
  • Multi-marketplace support
  • Automated expense categorization based on Amazon data

Setup:

1. Create free account at Apify.com
2. Get your API token from Account Settings
3. Add MCP server in Tambo Dashboard with Authorization header
4. Format: Bearer <your-apify-token>

Documentation: https://mcp.apify.com

⚠️ AWS Amplify Deployment Issue: If deploying to AWS Amplify with Next.js 16.1+, you may encounter symlink bundling errors with MCP servers. See this workaround for resolution. Try adding this server when you clone the project locally. It can break the production.

---

Adding MCP Servers to ARIN

1. Navigate to Tambo Dashboard
2. Select your ARIN project
3. Go to Settings → MCP Servers
4. Click Add MCP Server
5. Fill in the server details as shown above
6. Add custom headers for authentication
7. Click Save and test the connection

Note: Both MCP servers work with free-tier accounts and require no OAuth setup. Skip this step if you only want core expense tracking features.

6. Run the Application

npm run dev

Visit http://localhost:3000 and start chatting with Arin!

How to Use

Basic Commands

• "Show my expenses this month"
• "Add expense: $50 for groceries"
• "What's my budget status?"
• "Set a budget of $500 for food"

AI Vision

• Click the camera icon to snap a receipt
• Arin automatically extracts and categorizes the expense

Interactive Features

• Update budgets directly in the chat
• Filter expenses by date, category, or amount
• Visualize spending with AI-generated charts
• Track recurring expenses

Key Features

• Conversational Expense Tracking - Natural language interface
• Bill Detection - Snap photos, AI extracts data
• Smart Budgeting - Set and track budgets with AI insights
• Recurring Expenses - Auto-tracking for subscriptions
• Yearly Savings Goals - Set targets and track progress
• Real-time Insights - Interactive charts and visualizations
• Multi-currency Support - Track in your preferred currency
• Dark/Light Theme - Adaptable interface
• Google Authentication - Secure sign-in

Project Structure

arin/
├── app/                          # Next.js app directory
│   ├── (protected)/             # Protected routes (require auth)
│   │   ├── home/               # Main chat interface with Arin
│   │   ├── expenses/           # Expense management
│   │   ├── budgets/            # Budget tracking
│   │   └── settings/           # User settings
│   └── auth/                   # Authentication
├── components/
│   ├── tambo/                  # Tambo generative & interactive components
│   ├── expenses/               # Expense-related UI
│   ├── budgets/                # Budget management UI
│   └── insights/               # Visualization components
├── lib/
│   ├── tambo.ts                # Tambo component registry
│   ├── tambo-tools.ts          # Custom tools for AI
│   ├── tambo-context-helpers.ts # Context providers
│   └── supabase/               # Database client
├── hooks/                       # Custom React hooks
├── store/                       # Zustand state management
└── types/                       # TypeScript definitions

Learn More

• Tambo AI Documentation
• Next.js Documentation
• Supabase Documentation

Preview: