The bar add-item form could only pick an existing file, so adding a bottle meant taking a photo first and then hunting for it. The scan flow already had a working camera; this reuses that CameraCapture component rather than adding a second implementation. The change is in DrinkImageUpload, which the bar form, the drink form and the drink detail view all share, so all three gain the camera. Falls back to a file input with capture="environment" when getUserMedia is unavailable - it needs a secure context, so it is absent when the app is reached over plain http on the LAN. Also sets type="button" on CameraCapture's controls. They previously had no type, which defaults to submit, so capturing a photo inside the bar item form would have submitted the form. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
AI Gateway (Switchboard)
All AI features — menu scanning, label identification, drink search, the bartender
and the recommendation engine — go through Switchboard,
an OpenAI-compatible gateway that routes each request to the best available model.
The app never pins a model id; it always sends switchboard/auto and lets the gateway
choose, then logs which model answered and what it cost.
Setup:
- Set
SWITCHBOARD_BASE_URLin your env file (defaults tohttp://192.168.2.11:8787/v1). - Mint an API key in the Switchboard UI under Settings → API keys.
- Add that key in the app under Settings → AI Gateway.
Per-feature routing (cost/quality levers, token budgets, timeouts) lives in
src/lib/ai/routing.ts. Note that a Switchboard key carries its own routing defaults,
so the app sets category and prefer_free explicitly on every request rather than
inheriting whatever the key was minted for.
Migrating from the old Claude/OpenAI integration
Earlier versions stored a per-user Anthropic or OpenAI key. Those rows are ignored at runtime and the Settings page offers to remove them, so no migration is required. To clear them in bulk instead:
DELETE FROM "UserApiKey" WHERE provider IN ('claude','openai');
DELETE FROM "SearchCache" WHERE provider IN ('claude','openai');
UPDATE "UserPreference" SET "defaultProvider" = NULL;
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.