# Tweak · Full Reference

> Commercial website review platform. Chrome extension, on-site embed, hosted hub, and MCP for developers.

## What is Tweak?

Tweak is a proprietary platform for annotating live web pages. Developers sign in with GitHub to create reviews, configure embeds, and connect AI agents via MCP. Reviewers open share links or use the embed to view drawings, comments, highlights, and arrows on the real page — no extension required on their side.

Tweak is built for design teams, QA engineers, product managers, agencies, and anyone who needs structured visual feedback on web content with clear developer handoff.

## Plans

- **Free:** 1 active review, up to 3 team seats — extension, embed, share links, MCP
- **Pro:** 10 active reviews, up to 10 team seats — higher limits, priority support
- Details: https://tweak.page/pricing · Billing: support@tweak.page

## Core Features

### Drawing Tools
Freehand drawing, shapes, arrows, and lines. Users can mark up any page with precision using a floating toolbar. Stroke colors and widths are customizable.

### Persistence on a review

When someone saves or updates a shared review, annotations are stored via HTTPS. Anyone with the link sees the same persisted snapshot when they open it again (async handoff is the default workflow).

### Shareable Links
One click generates a share link. Anyone who opens the link sees the annotated page in their browser. No extension or account required to view. The link loads the original webpage with annotations overlaid.

### Threaded Comments
Users can pin comments to any spot on the page. Comments support threaded replies, making it easy to have contextual conversations directly on the webpage rather than in external tools like Slack or email.

### Inspector
Point at any element on a page and Tweak captures the CSS selector, computed dimensions, and a markdown block formatted for AI coding agents. Designed as the bridge between visual feedback and AI-driven code edits — the user points, the agent gets enough context to act.

### Multi-Inspect
Select multiple elements in one pass to bulk-handoff a UI region to an AI agent. Each selected element contributes a selector and snippet to the combined prompt.

### Measure
Pixel-precise distance and dimension measurement directly on any rendered page. Drag from any point to any other; Tweak reports width, height, and distance in CSS pixels.

### Area
Drag to capture a rectangular region of a page and attach a note. The captured frame travels with the share link as a first-class annotation.

### Quick Grab
Hold the Alt key to temporarily arm element capture without switching tools — release to revert. Lets users move fluidly between annotating and inspecting.

### Developer sign-in
Developers authenticate with GitHub at tweak.page to create reviews, manage teams, and use MCP. Reviewers on share links do not need accounts.

### Works on Any Website
Tweak works on any webpage without exceptions. The extension and embed inject a transparent canvas overlay on top of the page content.

### Proprietary hosted product
Tweak is operated as proprietary SaaS at tweak.page. It is not open source and is not self-hostable. Contact legal@tweak.page for enterprise licensing.

## AI Coding Agent Integration (MCP)

Tweak hosts MCP at https://tweak.page/mcp (HTTP transport + GitHub OAuth). When a designer or PM annotates a page, the agent receives structured issues: list, search, acknowledge, assign, reply, resolve, or dismiss. Changes persist through the same HTTPS API as the web app. No cookies or tokens in mcp.json.

Install in Claude Code:

    claude mcp add tweak --transport http https://tweak.page/mcp -s user

Cursor / VS Code: add to mcp.json:

    { "mcpServers": { "tweak": { "url": "https://tweak.page/mcp" } } }

Then paste your review URL in agent chat (https://tweak.page/s/abc123). Complete GitHub OAuth on first tool call.

Prefer tweak_list_issues, tweak_switch_review, tweak_resolve_issue over deprecated annotation aliases.

- Setup: https://tweak.page/docs/mcp-setup

## Technical Architecture

- **Frontend:** Preact with Preact Signals for state management, Tailwind CSS for styling
- **Extension framework:** WXT (Web Extension Tools)
- **Backend:** Cloudflare Workers with Hono framework
- **Database:** Cloudflare D1 (SQLite)
- **Persistence:** HTTPS JSON API to Cloudflare D1 (SQLite)
- **Storage:** Cloudflare R2 for OG images
- **Agent bridge:** MCP server (tweak-mcp) for AI coding agent integration
- **Build:** Bun workspaces, Turborepo, Vite

## How It Works

1. Sign in at tweak.page with GitHub (developers) or install the Chrome extension
2. Create a review and open the page under review, or add the embed snippet to staging
3. Use the floating toolbar to draw, add shapes, arrows, or pin comments
4. Share a link or send the embed URL to clients and reviewers
5. Optional: connect MCP so AI coding agents process comments as a work queue
6. Shared reviews autosave to the server; reopen the link to load the latest snapshot

## Use Cases

- **Design review:** Annotate mockups or staging sites with visual feedback
- **QA and bug reporting:** Circle bugs, add arrows, and describe issues in context
- **AI-driven dev loop:** Inspect broken UI, hand the selector and prompt to a coding agent, watch the fix land
- **Async code review:** Annotate a deployed page; the agent processes comments as a work queue via MCP
- **Content review:** Highlight text, suggest edits, and comment on live articles
- **Client feedback:** Share annotated pages with clients who don't need any tools installed
- **Education:** Teachers can annotate web resources for students
- **Research:** Highlight and comment on academic papers or articles

## Frequently Asked Questions

Q: Does the other person need the extension installed?
A: No. Anyone can view annotations via the share link. No install required. The share link loads the original page with annotations overlaid in a web app.

Q: What does Tweak cost?
A: Free and Pro plans are listed at tweak.page/pricing. Contact support@tweak.page for Pro billing.

Q: Is Tweak open source?
A: No. Proprietary software at tweak.page. Contact legal@tweak.page for licensing.

Q: Does it work on any website?
A: Yes, Tweak works on any webpage. The extension and embed inject a transparent overlay on top of any page content.

Q: Can multiple people annotate at the same time?
A: Shared reviews autosave over HTTPS. Reopen the link or embed to load the latest snapshot; most teams still work asynchronously via MCP or the hosted hub.

Q: What browsers are supported?
A: Tweak works on Chrome and Chromium-based browsers (Edge, Brave, Arc, etc.).

Q: What is the inspector tool?
A: Point at any element on a page and Tweak captures its CSS selector, computed dimensions, and a markdown block formatted for AI coding agents. Paste the prompt into Claude Code or another agent and it has the context needed to make the edit.

Q: Can I hand annotations to an AI coding agent?
A: Yes. Install hosted Tweak MCP (https://tweak.page/docs/mcp-setup), paste your review link in agent chat, and use tweak_list_issues / tweak_resolve_issue.

## Links

- Website: https://tweak.page
- Pricing: https://tweak.page/pricing
- Chrome Web Store: https://chromewebstore.google.com/detail/tweak/fnfobegjifomgobgilaemihpcpidjamc
- MCP setup: https://tweak.page/docs/mcp-setup
- Privacy Policy: https://tweak.page/privacy
- Support: support@tweak.page
- Legal: legal@tweak.page
- Security: security@tweak.page

## Contact

Email: support@tweak.page