SpideyWrite

Overview

SpideyWrite is an end-to-end AI writing assistant I built to remove context switching while working online. Instead of copying text into a separate chatbot tab, users can open the assistant directly on any webpage and instantly proofread, rewrite, summarize, or draft content in place.

What I Built

• Chrome extension UI that works across websites using an isolated Shadow DOM container
• Multiple launch paths: popup, text-selection popover, right-click menu, and keyboard shortcut (Ctrl+M / Command+M)
• Writing modes including proofread, email, summary, report, rewrite, simplify, formalize, and social-content variants
• Follow-up chat with context awareness, conversation memory, and image attachments
• Prompt management with custom prompts, folders, pin/hide controls, and per-mode overrides
• Before/after visual diff for proofreading output
• YouTube transcript capture for study and summarization workflows
• Theme and preference controls persisted with browser storage

Full-Stack Platform

SpideyWrite is backed by a dedicated web platform at spideywrite.com, built with Next.js 14 and TypeScript:

• Supabase Auth for authentication and session handling
• Supabase Postgres for profile, subscription, and usage records
• Stripe checkout and webhook flows for paid tiers
• Dashboard experience for plan status, billing state, and usage visibility
• Secure backend AI proxy route (/api/ai/generate) to keep provider keys server-side

AI and Usage Architecture

• Model support includes DeepSeek, GPT-5 Nano, GPT-5 Mini, GPT-5.2, and GPT-4o mini
• Tier-aware model access and monthly usage caps for FREE, PREMIUM, and ADVANCED
• Guardrails for request rate, input size, and token estimates
• Streaming responses for faster interactive UX inside the extension

Product Screens

SpideyWrite opens instantly on any page with keyboard shortcuts (Ctrl+M on Windows, Command+M on Mac), so users can start writing or asking questions without leaving their workflow.

Users can highlight text and get immediate grammar, spelling, and clarity fixes while preserving their original tone and intent.

For email and messaging workflows, SpideyWrite drafts polished replies in seconds and helps keep communication consistent and professional.

SpideyWrite can pull transcript context from YouTube videos to generate summaries, notes, and platform-ready content directly inside the modal.

The extension combines image input, reusable prompt libraries, live web access with cited outputs, and multiple frontier models in one in-page interface.

Key Engineering Challenges

1. Cross-site compatibility: Injecting a complex UI into arbitrary webpages can create CSS and event conflicts.
   Solution: use Shadow DOM isolation and explicit event-boundary handling.

2. Subscription consistency: Extension behavior needed to always reflect live plan/usage state.
   Solution: centralize entitlement checks in backend APIs and sync cached extension state.

3. API key security: Calling model providers directly from the extension exposed risk.
   Solution: migrate generation calls to server-side routes and enforce authenticated requests.

Links

• Website