Inspiration
We were inspired by how frequently charts appear across websites such as finance dashboards, analytics platforms, and online reports, yet understanding them often requires prior experience or manual interpretation. While browsing these sites, we noticed that charts usually present data visually but rarely explain what the trends or patterns actually mean, which can be confusing for beginners or non-experts. We wanted to explore whether an AI model could help bridge this gap by providing simple, natural-language explanations for charts directly on the webpage.
At the same time, we were interested in learning how to build browser extensions and how large language models can be integrated into real-world applications. This combination led to the idea of ChartBuddy, a lightweight Chrome extension that brings AI-powered chart explanations directly next to charts users are already viewing.
What We Learned
Through this project, we learned how to design and develop a Chrome extension using content scripts, background scripts, and custom UI components. We also gained hands-on experience integrating the Gemini 3 API and learned how large language models can reason over unstructured text and context rather than relying on structured data alone. Additionally, we learned how to design prompts that guide the model to produce helpful and relevant explanations.
How We Built the Project
ChartBuddy is built using JavaScript, HTML, and CSS with the Chrome Extensions API. The content script allows users to select a chart on a webpage and extracts available contextual information such as nearby text, headings, and metadata. This information is sent to a background script, which communicates with the Gemini 3 API. The AI-generated explanation is then displayed in a side panel within the browser, allowing users to view insights without leaving the page.
Challenges we ran into
One of the main challenges was reliably extracting meaningful information from charts, especially those rendered dynamically or without accessible data points. Instead of directly parsing chart values, we focused on leveraging surrounding webpage context and Gemini 3’s reasoning capabilities. Balancing technical limitations with clear and useful explanations was a key learning experience throughout the project.
Log in or sign up for Devpost to join the conversation.