282a494aab
VITE_API_BASE_URL is inlined into the public JS bundle at build time, so it is readable by anyone who opens the site. Ignoring it protected nothing and only meant the value had to be remembered and re-passed as --build-arg on every deploy - which is exactly how the bundle ended up pointing at a host that did not exist. Vite reads .env during `npm run build`, so the Docker build now picks the domain up on its own and needs no build arg. Verified: a build with no --build-arg bakes in https://mcp.nearle.ai.in. .env.local stays ignored for local overrides. Nothing secret belongs in a VITE_-prefixed variable - it would be published in the bundle. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Frontend - Kirana AI (React + Vite)
React 19 + Vite + Tailwind CSS v4 single-page app for browsing the catalog,
running semantic search, chatting with the RAG assistant, and (on
/admin) triggering ingestion of new brands.
Full setup steps are in the project documentation (../docs/). This file
is a fast local reference.
Quick start
One command (from the project root)
python run_project.py
Starts the FastAPI backend, waits until /api/health answers, then starts
this Vite dev server - so the API is always up before the UI first calls it.
Use --frontend-only to start just Vite against a backend you're already
running yourself.
Manual
cd frontend
npm install
npm run dev
Open http://localhost:5173 - the Vite dev server proxies /api/* to
http://localhost:8000 automatically (see vite.config.js), so make
sure the backend is running there first (see ../backend/README.md).
Note that Vite binds localhost as IPv6 ([::1]), which browsers handle
fine. Only relevant if you probe it with a tool pinned to IPv4 - use
http://[::1]:5173 there, or pass --host 127.0.0.1.
If your backend runs somewhere else, set VITE_API_BASE_URL in a local
.env file (copy .env.example) instead of relying on the proxy.
Production build
npm run build # outputs to dist/
npm run preview # serve the production build locally to sanity-check it
Pages
/- Browse & Search (sidebar brand/category filters, product grid, semantic search bar) with a toggle to Ask AI, a conversational RAG chat panel that cites which catalog products it used for each answer./admin- Trigger ingestion of a new brand and watch job status.
Structure
src/
├── api/client.js # fetch wrapper for every backend endpoint
├── components/
│ ├── Sidebar.jsx / TopBar.jsx
│ ├── ProductCard.jsx / ProductGrid.jsx / ProductModal.jsx
│ ├── ChatPanel.jsx / ChatMessage.jsx
│ └── Atoms.jsx # Spinner, EmptyState
├── pages/
│ ├── HomePage.jsx
│ └── AdminPage.jsx
├── App.jsx # routes
├── main.jsx
└── index.css # Tailwind v4 theme tokens ("Kirana Ledger" palette)