Skip to content
cd ../projects
In ProgressNext.jsClaude APITailwind CSSZod

Question Box

AI-powered Q&A tool that turns any question into visual, interactive explanations.

$ cat story.md

Built this for 10-15 minute daily learning sessions. Kids ask questions like 'Why is the sky blue?' and instead of a wall of text, they get labeled diagrams, step-by-step breakdowns, and quizzes to check understanding.

The key insight from json-render: constrain AI output to a vocabulary of components you define. Claude can only generate what we've built renderers for. Safe, predictable, visual.

Phase 1 is a personal instance with Claude + Serper search. Phase 2 (if needed) makes providers pluggable so others can use OpenAI, Ollama, etc.

$ git status

Phase 1 built: 6 components, Claude integration, Serper search, chat UI. Ready for testing with API keys.

$ ls ./components

Explanation Component
Diagram Component
StepByStep Component
Comparison Component
Quiz Component
Summary Component
Chat UI
Search Integration
Pluggable Providers
  • -Structured output from LLMs (JSON generation)
  • -Component-constrained AI rendering
  • -Search augmentation for current events
  • -Building for kids (age-appropriate UX)

?Add streaming for progressive rendering?

?Worth adding the actual json-render library or keep it simple?