Talking AI 🔊

Overview

Talking AI is a sophisticated Chrome Extension designed to bridge the gap between static web content and interactive learning. Built with React 19 and TypeScript, it leverages browser speech synthesis and LLM integration to allow users to listen to articles, explain complex jargon, and interact with text selections through a seamless, floating interface.

Description

Reading long-form content can be exhausting. Talking AI provides a modern solution by transforming any webpage into an accessible audio experience. Whether you need a quick summary of a technical paragraph or want the entire page read aloud while you multi-task, this extension provides a high-performance, low-latency toolkit powered by AI. 🚀

Features

• 🔊 Text-to-Speech (TTS): Instant natural voice synthesis for any selected text or full webpage.
• 🧠 AI-Powered Explanations: Integration with OpenRouter to simplify complex topics into digestible language.
• 🖱️ Contextual Floating UI: An intuitive action button that appears exactly where you select text.
• ⚙️ Deep Customization: Adjust playback speed, select different voice profiles, and define custom AI system prompts.
• 🎨 Modern Design: A clean, accessible interface built with Tailwind CSS 4 and Radix UI primitives.
• 📄 PDF Support: Works seamlessly on both standard web pages and local PDF files opened in the browser.

Technologies Used

Category	Technology
Frontend Framework	React 19
Language	TypeScript
Styling	Tailwind CSS 4
UI Components	Radix UI
Build Tool	Vite
Icons	Lucide React
State/Routing	React Router

Getting Started

Installation

Follow these steps to set up the project for development or to load it into your browser:

1. Clone the Repository

   git clone https://github.com/Ddilibe/talking-ai.git
   cd talking-ai

2. Install Dependencies

   npm install

3. Build the Project Since this is a Chrome Extension, it must be compiled into a build directory.

   npm run build

4. Load into Chrome

   • Open Chrome and navigate to chrome://extensions/.
   • Enable Developer mode (toggle in the top right).
   • Click Load unpacked.
   • Select the build folder generated in your project directory.

Usage

Using the Floating Control

1. Navigate to any website.
2. Highlight a sentence or paragraph.
3. A small floating speaker icon will appear near your cursor.
4. Click the icon to hear the text read aloud immediately.

Using the Popup Menu

• Click the extension icon in your browser toolbar to open the main dashboard.
• Read Page Aloud: Scans the document and begins sequential playback.
• Explain Selection: Uses the AI model configured in your settings to describe the highlighted text.
• Settings: Click the gear icon to enter your API key and customize the AI's "personality" or playback speed.

Configuration

To enable AI explanations, you must provide an API key:

1. Open the extension Settings.
2. Paste your Open Router API Key.
3. Select your preferred model (e.g., GPT-4o or GPT-3.5-Turbo).
4. Save settings. Your key is stored locally and never leaves your browser environment.

Extension Architecture

• Content Scripts: Injected into pages to handle DOM selection events and speech synthesis.
• Popup UI: A React application providing the primary interface.
• Message Passing: Uses chrome.runtime and chrome.tabs APIs to communicate between the UI and the active web page.

Author

• Dilibe - GitHub Profile
• Let's connect on LinkedIn or Twitter.

---

talking-ai