I Built an AI Web App That Explains Anything in 4 Different Styles
As a recent Information Technology graduate, I wanted to build a project that combined web development, AI, and user experience. The result was ELI5 AI, an AI explanation tool that can explain code snippets, error messages, articles, and technical concepts in multiple styles depending on the user's level of understanding.
Many AI tools provide a single explanation. However, beginners and experienced developers often need different levels of detail. I wanted to create a tool that could adapt its explanations based on the user's needs and make learning easier.
What ELI5 AI Does
ELI5 AI allows users to paste:
Code snippets
Error messages
Technical concepts
Articles and text content
The application then generates explanations in four different modes:
ELI5
Explains the topic using very simple language, as if teaching a five-year-old.
Beginner
Introduces basic technical concepts without overwhelming the user.
Technical
Provides a detailed explanation using proper terminology and deeper technical insights.
Analogy
Uses real-world comparisons and examples to explain difficult concepts.
The application also includes a Compare Mode, which displays all four explanation styles side by side.
Tech Stack
The project was built using:
React
Vite
Groq API
Supabase
Vercel
React
React was used to build the user interface and manage application state.
Groq API
The Groq API powers the AI responses. Different prompts are used to generate explanations in each mode.
Supabase
Supabase is used to store explanation history and manage data persistence.
Vercel
The application is deployed on Vercel, which provides fast and simple deployment for React applications.
The Most Interesting Part: Prompt Engineering
One of the most challenging parts of the project was prompt engineering.
Simply asking an AI model to "explain this" often produces similar responses. To create meaningful differences between the four modes, I had to design prompts that guided the model toward different audiences.
For example:
ELI5 focuses on simple language and avoids technical jargon.
Beginner introduces technical terms gradually.
Technical mode prioritizes accuracy and detail.
Analogy mode relies on comparisons with everyday situations.
This process taught me a lot about how prompt engineering can influence the quality and style of AI-generated content.
The Challenge of Making ELI5 and Analogy Different
At first, the ELI5 and Analogy responses felt very similar.
Both modes attempted to simplify information, which sometimes resulted in nearly identical explanations.
To solve this problem:
ELI5 was designed to focus on simplicity and clarity.
Analogy mode was designed to explain concepts through comparisons and storytelling.
This created a much clearer distinction between the two explanation styles.
Learning SEO Through a Real Project
While building ELI5 AI, I also used the project to learn practical SEO.
Instead of only studying SEO concepts, I implemented them on a live website.
Some of the improvements included:
Meta tags and descriptions
Open Graph tags
Structured data (Schema.org)
robots.txt
sitemap.xml
Semantic HTML headings
ARIA accessibility labels
Google Search Console setup
Working on a real project helped me understand how technical SEO works in practice.
What I Learned
This project taught me several valuable skills:
Building React applications
Integrating AI APIs
Prompt engineering
Working with Supabase
Deploying applications with Vercel
Technical SEO fundamentals
Performance analysis using Lighthouse
Most importantly, it showed me how AI can be used to make technical concepts easier to understand for different audiences.
Live Demo
https://eli5-app-one.vercel.app