Clarify

• 

  Landing Screen

• 

  Explanation

• 

  Learning Roadmap

• 

  Quiz

• 

  Metaphors

Inspiration

The inspiration for Clarify came from a personal experience: trying to answer the endless stream of "why" and "how" questions from my curious 8-year-old son. I found myself constantly adjusting my explanations—simplifying complex topics without being condescending, using analogies he could understand, but also wanting to plant seeds for deeper understanding as he grows. This daily challenge highlighted a universal problem: educational resources typically target a single level of understanding, either overwhelming learners or failing to challenge them. I realized that a tool that could dynamically adjust explanations to match exactly where someone is in their learning journey would be invaluable not just for parents, but for anyone seeking to understand complex topics.

What it does

Clarify uses Perplexity's Sonar AI to transform complex topics into understandable explanations at five different levels of complexity. With a simple slider, users can adjust explanations from a 5-year-old's perspective all the way up to expert level. Beyond just explanations, Clarify builds structured learning paths for deeper exploration, creates interactive quizzes to test understanding, and generates tailored metaphors to help visualize difficult concepts. It's a complete learning companion that adapts to your needs. It provides direct links to recommended books, videos, articles, and courses from our learning paths, with complexity-appropriate recommendations.

How we built it

We built Clarify as a React application that interfaces with Perplexity's Sonar AI. The frontend uses React components for the input section, complexity controls, explanation output, and feature sections. We implemented a slider that dynamically adjusts the complexity level of explanations from 1-5, with carefully designed prompts that instruct the AI on how to format content for each level.

The application uses specialized API functions to generate different types of content—explanations, learning paths, quizzes, and metaphors—each with carefully crafted prompts that produce consistent, high-quality results. We used React Markdown to properly render the formatted content returned by the AI and added CSS styling to create an intuitive, accessible interface.

Challenges we ran into

One of our biggest challenges was crafting effective prompts that would produce consistent, well-structured responses from the AI across different types of topics. Initial results varied widely in quality and format, requiring several iterations of prompt engineering to get reliable outputs.

We also faced technical challenges with JSON parsing when handling the API responses. The AI sometimes returned content that wasn't perfectly structured JSON, requiring us to implement robust error handling and fallback mechanisms to extract the useful data..

Designing an interface that worked seamlessly across different complexity levels was another challenge. We needed to ensure that the UI remained intuitive and accommodating for users of all backgrounds, from children to experts, without feeling childish or intimidating to either extreme.

Accomplishments that we're proud of

We're particularly proud of our complexity slider implementation. Creating a system that can take any complex topic and explain it at five distinct levels of understanding is a significant achievement. We're also proud of the learning path feature, which doesn't just explain a topic but builds a progressive curriculum that guides users from foundational concepts to advanced understanding. It provides direct links to books, videos, articles, and courses from our learning paths, with complexity-appropriate recommendations. The metaphor generation feature also exceeded our expectations—it creates surprisingly insightful and creative comparisons that help make abstract concepts tangible.

This transforms Clarify from just an explanation tool into a comprehensive learning platform.

What we learned

Through building Clarify, we gained deep insights into prompt engineering and how to communicate effectively with AI models to get consistent, well-structured responses. We learned how to balance technical implementation with user experience design, creating a tool that's both powerful and accessible.

We also discovered the importance of error handling and fallback mechanisms when working with AI-generated content. Building resilient systems that can gracefully handle unexpected outputs was a valuable lesson.

What's next for Clarify

We have several exciting features planned for Clarify's future:

Visual Explanations: Integrating image generation to create visual aids alongside text explanations
Voice Mode: Adding text-to-speech functionality for auditory learners
User Accounts: Allowing users to save their favorite explanations and track their learning progress
Topic Relationships: Showing connections between related concepts to build a knowledge graph
Mobile App: Developing native mobile applications for on-the-go learning
We're also exploring how it can help teachers provide personalized explanations for students at different levels.

Our ultimate goal is to make complex knowledge accessible to everyone, regardless of their background or current understanding.

Built With

• perplexity
• react.js