Bookly: An Immersive AI Conversational Platform Bringing Literary Characters to Life

Core Functionality & Technical Complexity

Bookly is a fully functional conversational AI platform that transforms static literary characters into interactive, voice-enabled companions using real-time bidirectional AI conversations. The system orchestrates complex voice AI pipelines—ElevenLabs Conversational AI agents with unique personality configurations, low-latency WebSocket connections, and context-aware character responses—into a seamless interface that makes classic literature accessible through natural dialogue. The core engine handles precise session management, ensuring only one active conversation at a time, while dynamically matching character voices based on age and gender profiles to create authentic, immersive interactions.

Working Prototype Stability

The platform is production-ready with a seamless “TikTok-style” vertical feed, utilizing efficient scroll-snap behavior and viewport-based rendering to ensure smooth navigation between stories. It features robust conversation state management, automatic session cleanup when switching characters, and optimized WebSocket handling to maintain perfect synchronization between user speech input and character voice responses. The system gracefully handles connection errors, provides real-time status feedback, and ensures secure API key management through server-side token generation.

Innovation & Creativity

Bookly breaks boundaries by reimagining the relationship between readers and literature. It rejects passive consumption in favor of active dialogue. The innovation lies in transforming one-way narratives into two-way conversations: characters from classic books become interactive companions with distinct personalities, speaking styles, and contextual awareness. By combining the addictive UX of short-form video discovery with the depth of literary characters, Bookly turns reading into a social, conversational experience, using AI to bridge the gap between the written word and human connection.

Real-World Impact

This project addresses the global decline in deep reading engagement by meeting users where they are—through conversation. By making literary characters accessible as interactive companions, Bookly lowers the barrier to entry for classic and modern literature. It transforms the intimidating act of approaching a novel into an instant, personal connection with beloved characters, potentially revitalizing interest in literature through conversational immersion. Users don’t just read about Harry Potter—they talk to him. They don’t just observe Elizabeth Bennet—they engage with her wit directly.

Theme Alignment - Bringing Static Content to Life

• Characters → Living Conversations: ElevenLabs Conversational AI agents transform static character descriptions into dynamic, personality-driven dialogue partners that respond contextually to user input.
• Silent Pages → Voice Interaction: Real-time bidirectional voice conversations turn one-way narratives into interactive experiences, where users can ask questions, explore character motivations, and engage in natural dialogue.
• Library Search → Discovery Feed: The vertical scrolling interface transforms the traditional library browsing experience into an algorithmic feed, surfacing stories and characters based on visual engagement and curiosity.
• Reading → Dialogue: The platform shifts the paradigm from passive reading to active conversation, making literature accessible through the universal medium of spoken dialogue.

Technologies & Tools Used

• Frontend: Next.js 16 (App Router), React, TypeScript
• Conversational AI: ElevenLabs Conversational AI SDK for real-time bidirectional voice conversations
• Voice Processing: ElevenLabs API for agent configuration, voice matching, and WebSocket-based audio streaming
• State Management: React Hooks for conversation state, character selection, and UI state management
• UI Components: Tailwind CSS for responsive, cinematic styling with film grain effects
• Data Handling: TypeScript interfaces for character profiles, story metadata, and voice mapping configurations
• Security: Server-side API routes for secure token generation, keeping API keys protected from client exposure
• Optimization: Scroll-snap CSS for smooth feed navigation, efficient component lifecycle management for conversation cleanup

Links

• Video: Demo walkthrough
• Production: Live application
• GitHub: Source code repository

Our project starts from scratch.

Video (not Youtube): https://www.loom.com/share/520f536f4bad4b719e61d60405178c6a