Skip to main content
The current Vision app is no longer a generic image-description demo. It is a calorie tracking app that uses vision AI to analyze meal photos and return structured nutrition data.

​
What Users See

From the user’s point of view, this app is very simple:
  1. take or upload a photo of a meal
  2. let the AI analyze it
  3. see estimated calories and macro breakdowns
  4. review recent analyses and daily progress
That makes it a strong showcase for practical computer-vision UX instead of just “describe this image”.

​
What The App Tracks

The current implementation focuses on:
  • estimated total calories
  • macro breakdowns
  • meal item analysis
  • meal type context
  • recent history
  • a visual daily calorie experience
It is a good example of how to turn raw model output into a product that feels useful to a normal person.

​
What Powers It

Under the hood, the app combines:
  • a vision-capable model for image understanding
  • schema-based structured output
  • object storage for uploaded meal photos
  • Supabase for auth and saved generations
  • the shared credit system
The current tool configuration brands the app as CalorieVision and uses a vision model from the shared AI layer.

​
What You Need

To run the app, you should set up Supabase, Google, and Storage first.

Supabase

Needed for auth, saved analyses, and account data.

Google

Needed for the default vision-model path used by this app.

Storage

Needed for uploaded meal photos.

​
How It Works

Here is the beginner-friendly version of the pipeline:
  1. the user uploads a food photo
  2. the file is stored
  3. the vision API sends the image plus prompt to the selected model
  4. the model returns structured nutrition data
  5. the result is saved so the user can review it later
  6. the UI renders the analysis in a cleaner product format
This is a good example of using AI for a narrow, clear job that normal users can understand immediately.

​
Why This App Is Useful As A Template

Even if you do not want to build a calorie tracker, this app gives you a very useful pattern:
  • upload image
  • run vision analysis
  • force structured output
  • store results
  • show a polished result screen
That pattern can be repurposed for:
  • skincare analysis
  • receipt parsing
  • product identification
  • packaging analysis
  • inspection workflows
  • any “upload image, get structured answer” product

​
Files To Customize

If you want to turn this into your own vision app, start with:
  • app/(apps)/vision/toolConfig.ts
  • app/(apps)/vision/prompt.ts
  • app/(apps)/vision/schema.ts
  • app/(apps)/vision/components/*
The prompt and schema define what the AI returns. The components define how that data feels in the product.

​
Important Reminder

This app is a product demo, not medical advice. The calorie and macro estimates should be treated as approximate AI outputs, not clinically reliable nutrition measurements.