A lightweight AI-powered browser overlay that gives you instant definitions, context, and answers — right on the page you're reading. No tab-switching, no copy-paste.
Live Demo: slim-screen.vercel.app
Highlight any text on any webpage and SlimScreen instantly surfaces an AI-powered explanation in a minimal overlay. It works as a bookmarklet — one click installs it into your browser bar and it runs on any site.
- Struggling to understand a dense article? Highlight a sentence and get plain-English context.
- Reading a technical doc? Get instant definitions without leaving the page.
- Want to save key insights? One-click copy or save to session history.
| Layer | Technology |
|---|---|
| Frontend | Vanilla JavaScript, HTML/CSS |
| AI Integration | OpenAI API (GPT) via serverless API route |
| Backend / API | Node.js serverless functions (Vercel) |
| Deployment | Vercel (CI/CD from GitHub) |
| Delivery | Browser bookmarklet (zero-install) |
| Dependencies | node-fetch, abort-controller |
- Instant AI Definitions — Highlight any text to get a concise AI-generated explanation
- Seamless Chat Overlay — Appears on your current page, no new tab opened
- One-Click Save & Copy — Save conversation or copy response to clipboard
- Privacy First — No data stored server-side; session clears on toggle
- Device Versatile — Works on desktop, tablet, and mobile via bookmarklet
- Serverless Architecture — API calls routed through Vercel edge functions to protect keys
# 1. Clone the repo
git clone https://github.com/n02448428/SlimScreen.git
cd SlimScreen
# 2. Install dependencies
npm install
# 3. Set your environment variable
echo "OPENAI_API_KEY=your_key_here" > .env
# 4. Run the dev server
npm run dev
# 5. Open index.html in your browser or use the bookmarklet from lexi_bookmarklet.jsSlimScreen/
├── api/ # Vercel serverless API route (proxies OpenAI calls)
├── index.html # Main UI and overlay interface
├── slimscreen.js # Core overlay logic and event handling
├── lexi_bookmarklet.js # Minified bookmarklet for one-click install
├── color_ui_design.md # UI/UX design notes
└── database_design.md # Architecture planning docs
- Multi-language support
- Persistent session history (local storage)
- Chrome Extension version (in progress)
- Custom AI persona / tone settings
- Summary mode for full-page digest
I wanted a research tool that stayed out of my way. Every existing solution required switching tabs or copy-pasting into a separate chat window. SlimScreen brings the AI to the content, not the other way around. Built and deployed solo end-to-end.
Built by Dmitry Markelov — AI engineer based in Carlsbad, CA