Your electronics companion. Ask anything about circuits, components, microcontrollers, and maker hardware — get instant visual answers. Try it here
The Vision
Clitronic turns natural language questions into rich, animated UI cards. It's not a chatbot — it's a dynamic UI engine for electronics.
Ask "What resistor for a red LED on 5V?" and get a calculation card with the formula, inputs, and result. Ask "Compare Arduino Uno vs Raspberry Pi Pico" and get a side-by-side comparison. Ask "Show me what a breadboard looks like" and get a real photo with attribution.
10 Visual Components
| Component | Use Case |
|---|---|
| Spec Card | Specs and features of a component |
| Comparison Card | Side-by-side qualitative comparison |
| Explanation Card | How something works, key concepts |
| Image Block | Real product photos or circuit diagrams |
| Recommendation Card | What to buy or use |
| Troubleshooting Card | Debug steps for broken circuits |
| Calculation Card | Formulas with inputs and results |
| Pinout Card | IC pin layouts with color-coded types |
| Chart Card | Numeric comparisons as bar charts |
| Wiring Card | Step-by-step wiring instructions |
Stack
- Frontend: Next.js 16 (App Router) + React 19 + Tailwind CSS 4
- LLM: OpenAI
gpt-4o-miniwith structured JSON output - Image Search: Brave Search API + Wikimedia Commons fallback
- Design: Dark-only, Apple/Tesla-inspired, animation-first
No database. No auth. No persistence. Fast and stateless.
Key Learnings
1. Structured output unlocks rich UI
By having the LLM return structured JSON instead of freeform text, each response maps directly to a specific visual component — calculations get calculation cards, comparisons get comparison tables, and so on.
2. Context matters more than formulas
Anyone can calculate resistance. The real value is knowing why you need a pull-up resistor, or when to use a flyback diode. AI excels at contextual explanations.
3. Animation-first design
Every card animates in with staggered timing, making the experience feel alive rather than static. Small polish details compound into a premium feel.
Quick Start
git clone https://github.com/sergiopesch/clitronic.git
cd clitronic
npm install
Create .env.local:
OPENAI_API_KEY=your_key_here
BRAVE_API_KEY=your_key_here # optional, upgrades image search
npm run dev