# How to Vibe Code Your Own Glasp (and Stop Paying for It)

> Social web & PDF highlighter and AI knowledge-management platform

- Site: https://glasp.co
- Category: Productivity & Knowledge Management
- Platforms: Web app, Browser extension, iOS app, Android app
- Verdict: **Solid side project** (62/100 vibecodeable)
- Estimated effort: 3-4 weeks of focused development

## Verdict

You can build a personal clone of the core highlighter, library, and AI RAG chat, but cross-browser DOM text anchoring under layout changes will test your patience.

Replicating the core loop—highlighting text via a browser extension, saving it to a database, and chatting with an AI over your personal archive—is a satisfying weekend project that scales into a solid side project. However, production-grade text anchoring on arbitrary websites using fuzzy selector heuristics requires substantial edge-case debugging. The social discovery feed and community network effects cannot be cloned, but a personal private vault is entirely within reach.

### What you can't replicate

- The 1,000,000+ active user community and social knowledge graph
- Organic third-party integrations and ecosystem mindshare
- Existing public highlight repository of millions of notes

## What it does

Glasp is a social web and PDF highlighter, reading tool, and AI knowledge-management platform that allows users to capture content across the web, Kindle, and YouTube, organize it into a personal library, and interact with it using an AI memory and MCP connectors.

### Core features

- Cross-browser highlighting extension (Chrome, Safari, Edge)
- DOM text selection anchoring and sidebar UI injection
- YouTube video transcript fetching and timestamp clipping
- Centralized personal library with tagging and author organization
- RAG-based AI chat and memory grounded in user highlights
- MCP (Model Context Protocol) server connector for Claude and ChatGPT
- Bi-directional exports to Notion, Obsidian, and Markdown

## The business

### Pricing

- Free: Free
- Pro: $12.50/mo
- Unlimited: $30/mo

Founded 2021.
Team size: 1-10.

## The hard parts

- Maintaining robust text-highlight anchoring across arbitrary, dynamically updating web pages without breaking target DOMs
- Building a cross-browser extension manifest v3 architecture that syncs state seamlessly with a cloud backend
- Orchestrating vector chunking, embedding generation, and semantic RAG search across heterogeneous content types (web, PDF, YouTube transcripts)

## How to vibe code Glasp

### Prerequisites

- Node.js (free): Required for running the Next.js web dashboard and extension build tools.
- GitHub (free): Source control and deployment pipeline integration.
- Anthropic API key (pay-as-you-go): Powers the AI summaries, highlight chat, and MCP server features.

### Recommended AI tools

- Claude Code: Primary agentic coding agent for scaffolding the full-stack extension and web dashboard.
- Cursor: Ideal code editor for fine-tuning extension popup UI components and DOM injection scripts.

### Stack

- Frontend: Next.js with Tailwind CSS and browser extension content scripts
- Backend: Next.js Server Actions and API routes
- Database: Turso (SQLite at the edge with vector embeddings)
- Auth: better-auth
- Payments: none
- Other: Anthropic API for RAG chat, Model Context Protocol (MCP) SDK

### Hosting

- Vercel (Hosting the Next.js web application and API endpoints): $0/mo
- Turso (Serverless SQLite database storage for highlights and embeddings): $0/mo

### Build guide

1. **Scaffold Next.js Dashboard and Database Schema** — Initialize the Next.js project with Tailwind CSS, configure Turso database with vector support, and set up better-auth for secure user authentication.

```
Create a new Next.js project with Tailwind CSS and TypeScript. Set up Turso database connectivity using Drizzle ORM or native libSQL. Define database schemas for users, highlights (id, user_id, url, title, selected_text, note, xpath_start, xpath_end, created_at), tags, and vector embeddings for semantic search. Implement better-auth for email/password and session management. Ensure all environment variables are documented in a .env.example file.
```

2. **Build Browser Extension Scaffolding and Content Script** — Develop a Manifest V3 browser extension structure with a background service worker and content script capable of listening for text selections and rendering highlight tooltips.

```
Scaffold a Chrome extension using Manifest V3 inside an extensions/ directory within the Next.js repository. Create a background worker that handles authentication tokens and API syncing with the Next.js backend. Write a content script that listens for 'mouseup' text selection events on arbitrary web pages, calculates DOM XPath coordinates for the selected text, and injects a floating highlight action button near the cursor.
```

3. **Implement DOM Highlighting and Visual Restoration** — Enable highlighting persistence by re-injecting and rendering stored highlights when a user revisits a previously highlighted URL.

```
Enhance the extension content script to fetch stored highlights for the current page URL from the Next.js backend upon page load. Implement robust DOM traversal logic using XPath ranges or text-fragment anchor selectors to wrap saved highlight spans in CSS background colors. Add click handlers to highlight spans that open an annotation popover showing associated user notes.
```

4. **Develop Web Library Dashboard and Tag Organization** — Build the web app dashboard where users can view, filter, search, and manage their saved highlights and notes across all captured web pages.

```
Create a dashboard page in Next.js (/library) displaying a masonry or list view of all user highlights grouped by article and author. Implement full-text search and tag filtering using server actions against Turso. Add inline note editing and deletion capabilities with optimistic UI updates.
```

5. **Integrate AI RAG Chat and Summarization** — Implement vector embedding generation on highlight creation and build an AI chat interface grounded in the user's personal knowledge base.

```
Set up an ingestion pipeline that generates vector embeddings for new highlights using an embedding model and stores them in Turso. Build an AI chat API route using the Anthropic API that performs semantic search over the user's highlights to construct a RAG context window. Implement a clean chat UI sidebar on the dashboard allowing users to query their personal knowledge base.
```

6. **Build MCP Server Connector and Export Features** — Create an MCP server endpoint that allows external AI clients like Claude desktop to query the user's highlights, alongside Markdown and JSON export options.

```
Implement an MCP (Model Context Protocol) server route in Next.js that exposes tools for searching and retrieving user highlights securely via authenticated API keys. Add export endpoints that format user highlights into clean Markdown, JSON, or Notion-compatible block structures for easy note-taking app syncing.
```

### Cost vs paying

**Starting costs (one-time):**

- AI Coding Assistant Subscription: $20
- Total: $20 one-time

**Ongoing costs (monthly):**

- Vercel & Turso Hobby Tiers: $0/mo
- Anthropic API Usage: ~$3-5/mo
- Total: ~$4/mo

- Paying for the SaaS instead: $12.50/mo (Pro)
- Build time: 25-35 hours
- AI tool credits: $20 (Claude Code / Cursor)
- Break-even: 1 month of Pro subscription

## Sources

- [Glasp Official Website](https://glasp.co)