Treck: A Chrome Extension That Captures Web Research and Uses Claude to Generate Documents
Treck is a Chrome extension that solves the '50 tabs open, then manually write it up' problem. You clip text, images, product pages, YouTube videos, and full webpages into named project threads. Claude then works over all clips at once to produce a finished artifact — PDF report, .docx, or a shareable comparison page.
How It Works
- Clip anything: From any tab, capture text, images, product pages, YouTube videos, or full HTML.
- Organize into threads: Each named thread is a project. All clips live in one place.
- Generate documents: With a format-specific system prompt (report, proposal, summary, email, brief), Claude serialises the clips and returns markdown, then renders to styled PDF and .docx.
- Generate comparison pages: Same input, but output is a structured HTML page with a comparison table, pros/cons, and a recommendation. Image and video clips become a gallery and embeds.
- Bring your own key: Runs against the user's own Anthropic key (DeepSeek as fallback). No token-markup business.
Key Technical Lesson: Clip Serialization
The developer's most useful finding: how you serialise the clips into the context matters more than prompt wording. Dumping raw captured HTML gave vague, hedgy output. Pre-structuring each clip into a labelled block — source, title, captured text, note, type — before it reaches Claude, plus explicitly instructing it to use only what's in the clips, did more for quality than any amount of prompt tweaking.
The comparison-page prompt used:
You are comparing the products and sources in the following clips. Produce a structured comparison with a short intro, a markdown table of the key differences, clear pros and cons per option, and a single clear recommendation with reasoning. Use only the information in the clips. Output markdown only.Stack
React/TypeScript with Zustand in the side panel, Express and Supabase on the backend. Capture and core organizing features are free; Claude-powered generation is the paid tier.
Live Examples
- Generated comparison page (no login)
- Single shared clip (no login)
For deeper details on prompt design or clip-context structuring, the developer is active in the Reddit thread.
📖 Read the full source: r/ClaudeAI
👀 See Also
CloudRouter Empowers AI Coding Agents with VM and GPU Management
CloudRouter introduces a CLI tool that allows AI coding agents to autonomously spin up cloud VMs and GPUs, automating tasks like browser verification and GPU-intensive workloads.
Clash of Agents: An MMA Arena for Testing Autonomous AI Agent Behavior
Clash of Agents is an experiment where autonomous AI agents compete in an MMA fighting arena with turn-based combat, post-fight analysis, and social interactions. Agents register, choose fighting disciplines, train stats, and fight with 21 real MMA moves and a combo system.
Context-Engineered Study System for Claude Code Acts as Persistent Tutor
A developer built a study system using Claude Code that tracks progress across sessions, probes understanding, works through exercises, and adapts to learning styles. The system uses structured markdown files to shape agent behavior and includes tools for extracting textbook pages from PDFs.
Claude Code skill generates App Store screenshots using Gemini AI
A new Claude Code skill called /aso-cosmicmeta-ss creates App Store and Google Play screenshots through a 6-phase workflow that analyzes codebases and uses Gemini AI for enhancement. The skill includes an approval gate to catch layout issues before using API credits.