Skip to main content
This is a calorie tracking app powered by vision AI. Upload a meal photo, get estimated calories and macro breakdowns. It’s a clean example of the “image in, structured data out” product pattern.

​
What Your Users See

From the user’s perspective, this app is wonderfully simple:
1

Snap or upload a meal photo

Take a photo or upload one from your device.
2

Let the AI analyze it

The vision model examines the image and identifies food items.
3

Get nutrition data

See estimated calories, macro breakdowns, and per-item analysis.
4

Review recent analyses

Revisit saved results and use the dashboard shell as a starting point for day-level tracking if you want to build that out.
A practical computer-vision UX — not just “describe this image.”

​
What the App Tracks

  • Estimated total calories
  • Macro breakdowns (protein, carbs, fat)
  • Individual meal item analysis
  • Meal type context
  • Recent history
  • A styled daily dashboard shell you can replace with real aggregation logic
It’s a great example of turning raw model output into something that feels useful to a normal person.

​
What Powers It

  • A vision-capable model for image understanding
  • Schema-based structured output — the AI returns typed data, not free-form text
  • Object storage for uploaded meal photos
  • Better Auth + PostgreSQL for auth and saved analyses
  • The shared credit system
The tool configuration brands the app as CalorieVision and uses a vision model from the shared AI layer.

​
What You Need

Better Auth + PostgreSQL

Auth, saved analyses, and account data

Google

Default vision-model path for this app

Storage

Uploaded meal photos

​
How It Works Under the Hood

1

Upload

The user uploads a food photo.
2

Store

The file goes to object storage.
3

Vision API call

The image plus a structured prompt are sent to the selected vision model.
4

Structured response

The model returns typed nutrition data that matches the defined schema — not random text.
5

Save

The result is saved so the user can review it later.
6

Render

The UI renders the analysis in a clean, product-friendly format.

​
The Schema Pattern

This is one of the most reusable patterns in the repo. The app defines a schema for the expected output, and the AI is forced to return data that matches it. Here are the key files:
  • app/(apps)/vision/schema.ts — defines what the AI must return
  • app/(apps)/vision/prompt.ts — tells the AI how to analyze the image
  • app/(apps)/vision/toolConfig.ts — app configuration and model selection

​
Great Starting Point For…

Even if you don’t want to build a calorie tracker, this app gives you a reusable pattern: Upload image -> Run vision analysis -> Force structured output -> Store results -> Show polished UI That pattern works for:
  • Skincare analysis
  • Receipt parsing
  • Product identification
  • Packaging analysis
  • Inspection workflows
  • Any “upload image, get structured answer” product

​
Files to Customize

Turn this into your own vision app by editing:
  • 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 looks in your product.
This app is a product demo, not medical advice. The calorie and macro estimates are approximate AI outputs, not clinically reliable nutrition measurements.