A new way to work with AI on interfaces

Click on UI elements, create threads, attach screenshots and audio. While you keep reviewing the interface, your AI agent works in parallel — picking up threads, commenting, and resolving issues without interrupting your flow.

myapp.com/dashboard
Your Application
SpecLens
SpecLens
Element
Browse
Threads
btn.submit
Button text should say "Confirm"
pending
header.logo
Logo too small on mobile
resolved
form.email
Add validation for empty field
pending
How It Works

A continuous loop between humans and AI, centered on your actual interface.

myapp.com/dashboard
Your Application
SpecLens
SpecLens
Threads
btn.submit
Button text should say "Confirm"
pending
Button text should say "Confirm"
🖼 screenshot.png
🎤
"The submit button label is confusing, please change it to Confirm"
SpecLens
Threads
btn.submit
pending
User
Button text should say "Confirm"
Claude AI
Done. Changed button label from "Submit" to "Confirm" in dashboard.tsx
✓ Marked as resolved
Thread Resolved
Step 1

Activate the Overlay

Toggle the SpecLens switch in any app with the script installed. Every element with a data-spec-id becomes clickable. You can also use Ctrl+Shift+S.

Step 2

Click on Any Element

Click the element you want to discuss. SpecLens identifies it by its spec ID and highlights it with the amber outline.

Step 3

Create a Thread

Write your annotation. Describe the issue, request a change, or ask a question. Each thread is tied to that specific UI element.

Step 4

Attach Screenshots & Audio

Attach a screenshot directly from the overlay. Record audio that gets auto-transcribed by AI. Your agent sees images, transcriptions, and text — full context.

Step 5

AI Works in Parallel

While you keep reviewing the interface, your AI agent picks up pending threads. It comments before and after each change, keeping the conversation alive. You don't need to stop your flow.

Step 6

Thread Resolved

The AI comments its resolution on the thread and marks it as resolved. You see the green checkmark. The conversation stays as a record of what was discussed and done.

Two pieces, one workflow

SpecLens has two sides: one for your app, one for your AI.

For Your App

Add the overlay to any web application with a single script tag.

  • One script tag, zero dependencies
  • Works with React, Vue, vanilla, anything
  • Toggle with Ctrl+Shift+S
  • Threads, audio recording, file attachments
  • Dark theme, non-invasive overlay
🤖

For Your AI

Give your AI agent a prompt and API access. It handles the rest.

  • Pull all pending threads via API
  • Read full conversation history
  • View attached images and audio transcriptions
  • Post comments and resolutions
  • Mark threads as resolved
Get Started

Two steps to close the loop between your team and your AI.

Add the Overlay

1

Add this script tag to any page. Set your app ID, screen name, and token.

<script src="https://speclens.did.lu/overlay/spec-lens.js" data-app="your-app" data-screen="dashboard" data-token="your-token"></script>

Then add data-spec-id="element.name" to elements you want to annotate.

Give Your AI the Instructions

2

Add this to your AI agent's system prompt or Claude preferences. It tells the agent how to consume and resolve threads.

### SpecLens (Visual UI Annotations) ## Threads are ongoing work items. Comment on them as you work. 1. Check pending threads: GET https://speclens.did.lu/api/pending Returns all unresolved threads grouped by app. 2. Read a full thread: GET https://speclens.did.lu/api/threads/{id} Returns thread + all comments + attachments. 3. Comment on the thread BEFORE starting work: POST https://speclens.did.lu/api/threads/{id}/comments Body: {"text": "Starting work on this...", "author": "claude", "author_type": "ai"} 4. Comment AFTER completing work: POST https://speclens.did.lu/api/threads/{id}/comments Body: {"text": "Done. Changed X to Y.", "author": "claude", "author_type": "ai"} 5. Mark resolved when the thread is fully addressed: PATCH https://speclens.did.lu/api/threads/{id} Body: {"status": "resolved", "resolution": "summary"} ## Auth: include header X-Spec-Token: YOUR_TOKEN ## Always comment before AND after making changes. ## Threads are conversations — keep them updated.
API Reference

Thread-centric API. Auth via X-Spec-Token header.

Threads
GET/api/:app/:screen/threadsList threads for a screen
POST/api/:app/:screen/threadsCreate thread + first comment
GET/api/threads/:idFull thread with comments & attachments
PATCH/api/threads/:idUpdate status / resolution
POST/api/threads/:id/commentsAdd reply to thread
POST/api/threads/bulk-updateBulk update thread statuses
GET/api/pendingAll pending threads (global)
Upload & Transcription
POST/api/uploadUpload file to storage
POST/api/transcribeUpload audio + Whisper transcription
Apps
GET/api/appsList registered apps
POST/api/appsRegister new app
PATCH/api/apps/:idUpdate app metadata
GET/api/:app/statsStats by thread status
System Status
Checking...