I Built an AI Web App That Explains Anything in 4 Different Styles

adarsh v thomas — Wed, 03 Jun 2026 14:01:48 +0000

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

GitHub Repository

https://github.com/adarshvt356/eli5-app

DEV Community: adarsh v thomas

I Built an AI Web App That Explains Anything in 4 Different Styles