AI Smart Assistant — 2026
Bengkel AI
Role
Front-End Developer
Stack
A mobile-first web app with a neumorphic UI that uses Claude API (Anthropic) to diagnose vehicle issues and auto-generate WhatsApp invoices, built specifically for MSME auto repair shops.
01 / The Narrative
Mechanics work with their hands, often covered in grease, so software built for an office desk doesn't hold up on their shop floor. Bengkel AI was designed around that reality: a fluid, mobile-first neumorphic interface with touch targets large enough to hit without precision. Underneath, it manages fairly complex client-side state to auto-fill data across screens, running entirely in the browser with no backend at all.
The Challenge
Wiring in Claude API (Claude 3.5 Sonnet) means dealing with payloads that aren't always predictable. The real challenge was keeping the UI stable when the model hallucinates, returns malformed JSON, or cuts its output short, on top of mobile browsers that auto-zoom or force dark mode on input fields uninvited.
The Solution
I built a defensive parsing layer that sanitizes every AI response before it touches the UI, so a bad payload never crashes the app. To make the interface feel like a native app rather than a website, I stacked CSS and meta viewport rules to shut down iOS and Android's auto-zoom and color-inversion behavior for good.
02 / Impact & Highlights
Result
Bengkel AI is live and in daily use at MSME auto shops, where it has cut manual billing time from around 10 minutes down to under 2 minutes per transaction. For a shop owner during peak hours, that difference means serving one more customer instead of turning them away.
Technical Highlights
- 01Direct Claude API integration with strict defensive JSON parsing
- 02Zero runtime crashes even on malformed or truncated AI output
- 03Mobile-first neumorphic UI with iOS/Android zoom and dark-mode overrides disabled
- 04Fully client-side, no backend, loads instantly