This is a submission for the Heroku "Back to School" AI Challenge
What I Built
TalkToMyTabs - An AI-powered Chrome extension that solves the "save but never read" syndrome that plagues every student's learning journey.
We've all been there: You find an amazing research paper, a crucial tutorial, or an insightful article. You bookmark it thinking "I'll read this later"... but later never comes. Your bookmarks become a graveyard of good intentions.
TalkToMyTabs transforms this broken workflow into an active learning system:
🧠 Smart Article Simplification
- Automatically simplifies and saves articles when you bookmark them
- Three simplification levels (Low/Mid/High) based on your comprehension needs
- Preserves core concepts while making content digestible
📚 Force-Fed Learning (in a good way!)
- Saved articles appear as cards every time you open a new tab
- One-minute quick-read versions that maintain the essence
- To-do style checkboxes create a sense of accomplishment
- Arrow navigation for seamless article-to-article reading flow
💬 Context-Aware AI Assistant
- Side panel chat that understands the current webpage
- Ask questions, get clarifications, or dive deeper into topics
- Perfect for research and study sessions
♿ Accessibility First
- OpenDyslexic font support for students with dyslexia
- Four reading themes (Default, Cream Paper, Dark Mode, Sepia)
- Customizable spacing (line, letter, word) for optimal readability
- Makes ANY website accessible, not just saved articles
Category
Primary: Student Success
Secondary: Crazy Creative
This tool directly addresses student learning challenges through innovative AI integration and a creative solution to the universal "bookmark but never read" problem.
Demo
🔗 GitHub Repository: https://github.com/jacksonkasi1/TalkToMyTabs
🎥 Demo Video:
🚀 Install: https://github.com/jacksonkasi1/TalkToMyTabs/releases
- Available as a Chrome extension soon...
Screenshots
Clean, distraction-free article dashboard replacing your new tab
Context-aware chat about any webpage
Beautiful reading experience with accessibility features
How I Used Heroku AI
Heroku Managed Inference and Agents
The extension leverages two key Heroku AI capabilities:
1. Heroku Agents API with Tools
Used for intelligent content conversion with the html_to_markdown tool:
export const convertHtmlToMarkdown = async (url: string): Promise<string> => {
const response = await runAgent(
[
{
role: 'user',
content: `Convert this webpage to markdown: ${url}`
}
],
[
{
type: 'heroku_tool',
name: 'html_to_markdown',
runtime_params: {}
}
]
)
return response.choices[0]?.message?.content || ''
}
2. Heroku Managed Inference (Chat Completions)
Powers the core AI features through multiple specialized agents:
- Simplification Agent: Takes complex academic/technical content and adjusts readability based on user-selected level (Low/Mid/High)
- Insights Extraction Agent: Identifies and extracts 3-5 key takeaways from articles
- Chat Assistant Agent: Maintains webpage context for intelligent Q&A
// Article simplification using Heroku Managed Inference
const response = await axios.post<ArticleGenerationResponse>(
`${config.url}/v1/chat/completions`,
{
model: config.model, // User-configurable model
messages: [
{
role: 'system',
content: systemPrompt // Simplification instructions
},
{
role: 'user',
content: userPrompt // Article content
}
],
temperature: 0.7,
max_tokens: 2000
}
)
The beauty is in the configurable model system - users can choose any Heroku-managed model (GPT-4, Claude, Llama, etc.) based on their needs and budget. For the demo, I'm using GPT-OSS for maximum cost-effectiveness while maintaining quality.
Technical Implementation
Architecture Overview
Chrome Extension (Plasmo + TypeScript)
├── Content Script (Floating action button)
├── Side Panel (AI Chat Interface)
├── New Tab (Article Dashboard)
└── Background Service Worker
└── Heroku AI API
├── Agents API (/v1/agents/heroku)
├── Chat Completions (/v1/chat/completions)
└── Configurable Model System
Key Technical Innovations
- Flexible Agent Architecture
export interface HerokuTool {
type: 'heroku_tool'
name: string
runtime_params?: Record<string, any>
}
export const runAgent = async (
messages: ChatMessage[],
tools?: HerokuTool[],
options?: Partial<AgentRequest>
): Promise<AgentResponse> => {
const response = await axios.post<AgentResponse>(
`${ENV.INFERENCE_URL}/v1/agents/heroku`,
{
model: ENV.INFERENCE_MODEL_ID,
messages,
tools,
temperature: 0.7,
max_tokens: 2000,
...options
}
)
return response.data
}
-
Smart Content Processing Pipeline
- Extract webpage content → Convert to Markdown (via Heroku Tools) → Simplify (via Managed Inference) → Store locally
- Each step optimized for student comprehension
-
Token-Aware Processing
- Estimates tokens before processing to prevent API limits
- Shows warnings for large documents
- Chunks content intelligently for optimal processing
-
Offline-First Storage
- Uses Chrome Storage API for instant access
- Articles available even without internet
- Syncs across devices
-
Real-time Theme Synchronization
- Themes persist across all extension contexts
- Updates instantly using Chrome Storage listeners
Accessibility Implementation
/* Dynamic font and spacing adjustments */
body[data-dyslexic="true"] {
font-family: 'OpenDyslexic', sans-serif;
letter-spacing: var(--letter-spacing);
word-spacing: var(--word-spacing);
line-height: var(--line-height);
}
Challenges Solved
1. The "Read Later" Problem
Instead of articles disappearing into bookmark folders, they're front and center every time you open a tab - but in a digestible, simplified format that takes just 1-2 minutes to read.
2. Context Switching
The side panel chat maintains context as you browse, eliminating the need to copy-paste content into separate AI tools.
3. Accessibility Barriers
Many educational websites aren't accessible. This extension makes ANY website readable for students with dyslexia or reading difficulties.
4. Information Overload
Academic papers and technical documentation can be overwhelming. The three-tier simplification system lets students gradually build understanding.
User-Centric Features
- Configurable AI Models: Students can choose models based on their budget and needs
- Sound Feedback: Subtle audio cues for actions (mark as done, delete)
- Keyboard Navigation: Full keyboard support in reading mode (arrows, escape, shortcuts)
- Progressive Enhancement: Works even without AI features as a basic read-later tool
- Privacy First: All processing happens through user's own API keys
Key Innovations & Impact
This isn't just another AI wrapper - it's a complete rethinking of how students interact with online content:
- Real Problem, Real Solution: Addresses the universal student problem of content hoarding without consumption
- Heroku AI Showcase: Demonstrates sophisticated use of both Heroku Agents API (with tools) and Managed Inference
- Accessibility Champion: Makes the entire web more accessible for students with learning differences
- Forced Productivity: Cleverly uses new tab real estate to encourage actual reading
- Student Budget Friendly: Uses GPT-OSS model to keep costs minimal, with option to upgrade
- Complete Learning System: From content discovery to comprehension to retention
The extension transforms passive content saving into active learning, making it perfect for students preparing for exams, conducting research, or simply trying to stay on top of their reading list.
Impact for Students
- Time Saved: 1-2 minute summaries instead of 15-20 minute articles
- Better Retention: Simplified content is easier to remember
- Reduced Anxiety: No more bookmark guilt - articles get read automatically
- Improved Accessibility: Students with dyslexia can finally read ANY website comfortably
- Enhanced Understanding: AI chat provides instant clarification on complex topics
Team: Solo submission by @jacksonkasi
Built with 💙 for students who save everything but read nothing
Top comments (0)