StoryLearn AI

dark mode front page
generating content (zoomed in)
example chapter page with image
unanswered quiz example
answered quiz example

Inspiration

AI study tools and chatbots are generally too open-ended—you have to know what to ask, and the answers are huge blocks of text. We wanted something that takes a topic you're struggling with and turns it into a visual, structured lesson with built-in quizzes, so you actually retain what you learn. We were inspired by how kids’ picture books break down complex ideas using easier-to-understand language and clean visuals, and thought—why not do that for every age group? Learning through visuals isn’t restricted to any age or education level, and having this ease with learning makes it more appealing to all audiences.

What it does

StoryStream first takes a user-inputted topic, such as "How photosynthesis works" or "The history of the printing press", and an education level. It then generates a chapter-by-chapter illustrated lesson, or a “story,” in other words, with AI-generated images tailored to that level of difficulty. After the lesson, it quizzes you with multiple-choice questions to reinforce what you learned, as active recall after learning something is key to retaining the information. Past lessons are saved in a sidebar for easy access, and Redis caching means repeat topics load instantly.

How we built it

For the frontend, we used React, Vite, and TypeScript with a split-screen dashboard—story chapters on the left, generated images on the right, and an interactive quiz at the end. For the Multi-agent backend, we utilized a 3-agent pipeline built with FastAPI and Claude (Anthropic). Agent 1 researches the topic using Browserbase and Stagehand, Agent 2 turns the research into a multi-chapter narrative with images, and Agent 3 generates a targeted quiz. The image generation was done using Claude, and the AI-generated visuals were tailored to each chapter and difficulty level. For caching, Redis stores completed lessons so repeat searches load instantly instead of re-running the full pipeline. Finally, Claude Code was used to scaffold, debug, and iterate on both frontend and backend.

Challenges we ran into

The first challenge we faced was that one of our teammates left our team after the hackathon started. He was initially leading our team and had the most experience, so this was a large setback, as we had to pivot to simpler ideas since we are all beginners in some way. Integrating Stagehand/Browserbase for live web research required debugging environment variables and API configuration under time pressure.

Another challenge we faced was figuring out how we wanted to coordinate the research agents because hallucination was one of the most important issues we wanted to address. We went through several iterations focused on specifically fixing this issue. First, we were planning on using Band to navigate agent-to-agent communication, but we soon realized that with our system, with one researcher, one story creator, and one quiz generator, we did not need to have a concurrent communication pipeline for the different agents. So, we made it a continuous pipeline in our FastAPI backend. Then, after more deliberation, we decided to use Browserbase Stagehand for conducting research and collecting information using Google searches and Wikipedia, with two separate Claude-based agents using that information to create the chapters and images, then the quizzes. This was the most we were able to eliminate the hallucination issue in the project given the time we had, as the generated content was based solely on real, gathered information.

Also, generation could take around 5 minutes end-to-end, especially for the greater levels of difficulty, so we had to design the UX around loading states and use Redis caching to make repeat views instant. Coordinating three agents to pass structured JSON cleanly between each other without schema mismatches was definitely a challenge.

Accomplishments that we're proud of

We were able to create a functional product and gained significant experience with using AI in software development and creating agentic systems. As a team of beginners who lost a key member early on, shipping a working multi-agent app in under 24 hours felt like a real win and learning experience.

What we learned

We learned how multi-agent AI systems work in practice, breaking a complex task into specialized agents that pass structured data between each other. We also learned how to use Claude Code to rapidly build and iterate on a full-stack application. We were also introduced to Redis and learned about caching strategies for expensive AI-generated content, along with how to scope a hackathon project realistically when time and experience are limited.

What's next for StoryLearn AI

If we had more time, we would like to create a database to store and access old lessons rather than the short-term caching we currently have with Redis. We would also like to add a feature to export quiz questions as Quizlet sets. Along with Quizlet sets, it would be beneficial to add more interactive activities beyond quizzes, such as drag-and-drop diagrams and fill-in-the-blank.

In addition, our pipeline currently takes a few minutes to generate lessons, so we would like to optimize it for faster generation while maintaining quality. We would also like to expand our scope and incorporate research papers utilizing the automation provided by Browserbase. And lastly, we would like to deploy the site to production.