Finance and Econ Buddy

This is the initial look.
After typing in any financial question, press Ask.
Here is "Show transcript" in action. You can toggle it off as well. Also, if you feel satisfied with the answer, click "Enough got you, Karl
The answer to your question will be read out loud. Though, you can read answer by pressing the "Show Transcript" button

Inspiration

Financial literacy content is usually either too dry to hold attention or too dumbed-down to feel credible. At the same time, tools like Gemini Live and ChatGPT's voice mode showed how much more engaging an idea becomes when it feels like a real conversation with a character, not a wall of text. That combination sparked the idea: what if you could ask history's most famous economists your actual financial questions, and have them answer strictly through their own theoretical lens — animated, speaking out loud, in character? Karl Marx became the first economist to bring to life, both because his worldview is instantly recognizable and because it creates a genuinely interesting contrast when applied to modern questions like "should I invest in Bitcoin?"

What it does

The Econ Oracle lets you type any financial or economic question. An animated Karl Marx appears, visibly "thinks" about your question, then answers it out loud — strictly through his own historical framework (class struggle, capital, exploitation, and so on) — while his mouth animates in sync with his real spoken voice. A "Show transcript" button lets you reveal the text of what he said if you want to read along or re-read it, and a reset button ("Enough, got you Karl") clears everything for the next question.

How we built it

Frontend: Vanilla HTML, CSS, and JavaScript — no frameworks. The character is a real public-domain 1875 photograph of Marx, with a small CSS-driven overlay positioned precisely over his mouth to simulate speech, plus CSS transforms for a "thinking" head tilt and a nodding animation when he responds.
Backend: A lightweight Node.js/Express server that keeps the API key secure and handles two jobs: sending the question to an LLM with a strict persona system prompt, and (originally) generating spoken audio.
AI: Groq's API powers the actual answers, using an open-source large language model locked into a Marx-specific system prompt that constrains every answer to his theoretical framework in 3-4 sentences.
Voice: The browser's built-in Web Speech API reads the answer aloud, tuned with a lower pitch and slightly slower rate for a more fitting "voice."

Challenges we ran into

Finding a genuinely free AI API took several attempts. We tried Anthropic's API (requires prepaid billing with no lasting free tier), Google's Gemini API (also required a funded prepay balance on our account despite being advertised as free), and OpenRouter (whose free models shift availability unpredictably — one we picked got moved to paid-only mid-build). We landed on Groq, which offers a genuinely usable free tier.
Faking realistic lip-sync on a real historical photograph meant pixel-by-pixel manual alignment of a small mouth overlay to match Marx's actual mouth position, redone every time the source image changed (including after removing a background that turned out to be baked into the original file rather than a real transparency layer).
Browser speech synthesis events proved unreliable — the onstart event we initially relied on to trigger animations didn't fire consistently, so we redesigned the flow to trigger all visual feedback immediately rather than waiting on an event that couldn't be trusted.

What we learned

This was a first hackathon project built solo, coming from a background in geography/GIS rather than web development — so a lot of fundamentals were learned along the way: setting up a Node/Express server from scratch, prompt engineering for consistent in-character AI responses, and building animation purely with CSS transforms and transitions. A bigger lesson was learning how differently "free tier" claims from various AI providers actually hold up in practice once you try to use them for real.

What's next for The Econ Oracle

Expanding the roster beyond Marx to include other major economists (Adam Smith, Keynes, Milton Friedman) with a randomized assignment per question
Refining the animation and visual polish for each new character
Adding a clear on-screen disclaimer that responses are an AI-generated interpretation, not verified historical quotes
Exploring a "compare economists" mode where multiple perspectives answer the same question side by side