Building AI Reading Club: Features & Behind the Scenes

How can AI make reading more enjoyable? What would an AI-powered reading experience look like? Inspired by a discussion between Andrej Karpathy and Patrick Collison, I built a simple prototype to explore some ideas. (Try it at AiReadingClub.com.) In this write-up, I’ll walk through key features, design considerations, and how it was built.

Exactly, roughly what I tried and mostly failed. I want to highlight some text in the pdf, pull out the highlight, the preceding text of the chapter, maybe the generated summaries of the other chapters, put it all together, attach nearby images if any… there’s a whole design…

— Andrej Karpathy (@karpathy) December 11, 2024

Meet Dewey and its features

At the heart of AI Reading Club is Dewey, your AI reading companion. Dewey is designed to help readers get more out of reading with a few simple features.

Understanding your context. Dewey understands your current context via the text you select or the page you’re on. During discussions, it displays this context you’ve explicitly provided, making it clear what it’s focused on. Behind the scenes, Dewey also retrieves and considers the rest of the book as implicit context—this enriches its understanding of the context and improves its responses.

Dewey understands your context (example from Meditations)

Answering simple queries. With the provided context, Dewey can help clarify the material, explain complex sections, or discuss various perspectives to help you gain deeper insight into the text. The goal is to keep you in flow while reading, instead of having to reread other sections of the book or open a web browser for your queries.

Dewey answers simple queries (example from A History of Science)

Creating quizzes/flashcards. Dewey can also test your knowledge of the selected context. This helps reinforce your learning and improve knowledge retention.

Dewey creates quizzes (example from Beyond Good and Evil)

Recapping the book so far. It can be challenging to resume a book you’ve stopped reading for a while. To help with this, Dewey can summarize the book up to the current page, refreshing your memory and highlighting major themes, characters, and concepts.

Dewey recaps the book (example from Alice’s Adventures in Wonderland)

Revisiting past discussions. Past discussions are indicated by a small icon next to each paragraph. Click on it to review that discussion. Alternatively, browse all discussions in Dewey’s side pane to refresh your memory without repeating interactions.

Revisiting past discussions is easy (example from Alice’s Adventures in Wonderland)

UX design considerations

When building AI Reading Club and Dewey, the primary goal was to create a clean, intuitive experience that enhances reading without distractions. The AI-powered features should be seamless to access while keeping the focus on the text.

Reading pane. The reading pane prioritizes simplicity, presenting the text cleanly with minimal markup. Thus, instead of using conventional highlights to indicate past conversations, I attached less obtrusive “stickies” to the relevant paragraphs. This keeps the text clear while making it easy to access Dewey.

Dewey. The AI-powered features are designed to be available when needed and out of the way when not. Dewey is only called up when you select text or click the Dewey button. We opt for a chat-like interface that displays the context explicitly provided and distinguishes reader input from AI responses.

User input. The goal is to simplify interactions and minimize keystrokes. For common queries, you can click on predefined options to save effort and streamline the process. For more nuanced queries, you can always type your own. This flexibility ensures you get the most out of Dewey regardless of your needs.

Past discussions. I tried to make it easy to revisit past discussions through stickies next to paragraphs and Dewey’s conversation pane. Both methods avoid obscuring the text, ensuring the reading experience remains central.

Building AI Reading Club, Step-by-Step

Defining requirements. To begin, I asked Claude to write the initial product requirements document based on this tweet thread. This provided direction on what the final features looked like. The current app implements the requirements in the must-haves section.

Claude, you are a world-class product manager who brings to life cutting-edge experiences to millions of users worldwide.

Recently, there has been a lot of interest in an AI reading companion, whereby users can read books in their apps and talk to AIs about it. Here are some example tweets of the most recent social media posts about it.

<tweets>
text from tweet thread
</tweets>

We want to create a minimum lovable web app for this reading experience. For the V1, users will not upload their books. Instead, we will seed the library with books from the Gutenberg project. Thus, I want you to focus on the user experience and UI of the web app.

Please list the core features of this web app. Use the Moscow framework. What are the must haves, what are the should haves, what are the could haves and what are the won’t haves.

Designing the UI. With the requirements in hand, I worked with Claude to create SVG wireframes for desktop and mobile. Here’s the prompt to create the initial wireframe.

Thanks Claude! Next, please create a wireframe of how the app should look.

The initial wireframe Claude created was more complex and had each book taking up more space than I preferred.

Initial library wireframe by Claude

Nonetheless, with a little prompting, Claude was able to simplify it to suit my needs.

Can you simplify it for the library screen layout please? We just need a list of books, with the title being the main component of the list and the author and genres being the sub components. Clicking on the title should navigate to the reading screen for the book.

Updated library wireframe by Claude

Over several iterations, we shaped the UI for the library, reading pane, and AI assistant pane. Along the way, we learned that we needed two separate views, one for the library and another for the reading view, and updated the product requirements accordingly.

An early iteration which had library (left), reading pane (center), and AI assistant (right)

Designing the database schema. With the requirements and UI somewhat clarified, I asked Claude to design the data layer.

Thank you! Next, can you create the database design please?

• what are the tables that we need?
• what are their purposes?
• what are their relationships?

The initial proposal was fairly complex, with multiple tables for books, genres, reading progress, user preference, AI conversations, and more. On hindsight, this was probably due to my prompt mentioning “tables” and “relationships”. Again, I prompted Claude to simplify the schema into a single table that contained all the essential metadata.

That seems really complicated. We just need a single table, books, which has all metadata on title, author, genre, text of the book, etc.

(reading progress will just be a simple calculation based on the book’s current text divided by the book length).

Also, can you suggest how to store the book text in the database please? What type of database can store it?

Defining tasks. With all the above done, it was time to create a task breakdown. Here’s how I prompted Claude to generate the list of tasks to implement the must-have features, mapping each task to its associated requirement and feature.

Thank you Claude. Next, we need to create the task list to create the must-haves of this web app. Could you list the tasks that need to be done, as well as the associated requirement and feature please?

Building the UI. With the working documents done, the next task was to build a skeleton UI. For this, I turned to v0.dev and started by creating a new project with the must-have requirements as the project instructions. While I had plenty more documentation (e.g., full requirements, database design, UI, task list), I decided to keep it simple and see how v0 would surprise me with a different opinion or design.

Here’s how I asked v0 to help bootstrap a simple skeleton for the app.

v0, you are a world class frontend designer and developer. We are designing and building an app to help people read more, and more effectively. The app should have two screens:

Library Screen: Shows a list of books with basic metadata
Reading Screen: Shows the content of the book with clean, beautiful reading experience It should also have an AI assistant feature on the reading screen, where users can highlight a section to pull up the AI assistant, or click on a button. The AI assistant should be hidden away until called.

First, create the Library screen. It should be aesthetically pleasing in a simple list view.

Surprisingly, v0’s initial implementation of the library screen was clunky and took up a lot of screen real estate per book.

Initial library screen by v0

Nonetheless, getting v0 to simplify the design by including an SVG wireframe (see above) that Claude and I previously crafted was straightforward. This back-and-forth continued for several iterations, including the creation of seed data to test features like navigation, scrolling, calling up Dewey, and more.

We don’t need each book’s card to take up so much space. We just want a simple list, like this provided SVG.

Developing the app. With a working UI, I migrated the code to Cursor for the rest of the development. Here, I integrated the UI with the database and relevant API providers. Additional feature requirements and designs (e.g., database design) were also defined and implemented directly in Cursor. For example, the ability to revisit past messages was not part of the initial requirements.

Here’s what AI Reading Club is built on:

• Next.js: React framework that handles both frontend web client and backend server.
• Supabase: PostgreSQL database with user-friendly interface; was easy to get started with and had excellent documentation
• API providers (Anthropic, Gemini, OpenAI): Leading AI providers. Gemini Flash is the default option for Dewey due to its long context length and generous free tier.
• Railway: Easy deployment, scaling, and logging via railway up.

• • •

Given more time (read: longer vacation), I would add the following to AI Reading Club:

• Voice input (and optional voice output) for a more hands-free experience
• Easier context selection, such as allowing readers to indicate specific chapters via natural language or a table of contents
• For fiction, interactive elements like family trees for complex character relationships or timelines for key plot events. Nonetheless, this will require more care to ensure faithfulness with the book and prevent hallucinations and spoilers.

If you’ve tried AI Reading Club, I’d love your feedback and feature ideas, and thoughts on how AI can help you get more out of reading. Please comment below or DM me!

Thanks to Xinyi Yang, Era Qian, Will Diamond, Debjit Mohapatra, and Chip Huyen for providing early feedback and suggestions.

If you found this useful, please cite this write-up as:

Yan, Ziyou. (Jan 2025). Building AI Reading Club: Features & Behind the Scenes. eugeneyan.com.
https://eugeneyan.com/writing/aireadingclub/.

or

@article{yan2025dewey,
  title   = {Building AI Reading Club: Features & Behind the Scenes},
  author  = {Yan, Ziyou},
  journal = {eugeneyan.com},
  year    = {2025},
  month   = {Jan},
  url     = {https://eugeneyan.com/writing/aireadingclub/}
}

Share on: