Install MarkUp from the Chrome Web Store.

MarkUp is a Chrome extension. It runs in any Chromium-based browser — Chrome, Edge, Brave, or Arc. Safari support is on the roadmap.

Installation steps

1. Click the install link below to open MarkUp’s Chrome Web Store page.
2. Click “Add to Chrome” on the listing page. Chrome will ask for permission to install.
3. Confirm by clicking “Add extension” in the popup.
4. MarkUp installs in seconds. You’ll see the icon appear in your Chrome toolbar.
5. Click the puzzle piece icon to the right of your URL bar, find MarkUp, and click the pin icon next to it. This pins MarkUp to your toolbar so it’s always one click away.

Install MarkUp Now →

What about permissions?

When you install MarkUp, Chrome will tell you it needs permission to “read and change all your data on websites you visit.” That sounds intense — let’s unpack it.

MarkUp works as a universal annotation tool. You activate it on any page you want to annotate — your own site, a client’s site, a public webpage. To do that, MarkUp needs to be allowed to draw its annotation canvas on top of any page you choose. That’s the permission Chrome is describing.

What MarkUp does not do:

• Read your browsing history
• Track which sites you visit
• Send data to any external server
• Run automatically on pages — it only activates when you click the icon
• Store your annotations in the cloud

Everything stays in your browser. Read the full privacy policy for details.

Send your annotations to AI.

This is where MarkUp earns its place. Your annotations become a structured AI brief that any modern AI agent can read.

Copy to clipboard

The fastest path. Works with any AI assistant that accepts pasted images.

In the panel on the right side of your screen:

1. Click “Copy to clipboard.”
2. Two things go to your clipboard automatically:
   • A PNG screenshot of the full webpage with your annotations on it
   • A markdown changelog listing each numbered annotation and its label
3. Open your AI assistant’s chat (Claude.ai, ChatGPT, or your tool of choice).
4. Paste into the chat. Both the image AND the changelog appear together.
5. Send the message with a prompt like: “Implement these changes” or “Tell me how to make these updates in CSS.”

That’s it. The AI now sees what you see, with each change pointed at and labeled.

Using MarkUp with Claude (claude.ai)

Claude reads images natively and parses the markdown changelog. The combined input gives Claude precise context: visual reference + structured request.

Example prompts that work well:

• “Implement these changes in [framework]. Show me the updated code.”
• “What CSS changes would accomplish each of these annotations?”
• “Review this UI feedback and tell me which changes are highest priority.”
• “Group these annotations by which file they’d affect.”

Claude can also tell you if any annotation is unclear and ask clarifying questions before generating code.

Using MarkUp with ChatGPT

ChatGPT reads pasted images and markdown. The workflow is identical to Claude — paste the clipboard contents into a chat, then ask for code or feedback.

ChatGPT-specific tips:

• For best code generation, mention which framework or styling approach the page uses (e.g., “This is a Tailwind CSS page” or “We use vanilla CSS”).
• ChatGPT may ask which library or version you’re on. Have that context ready.

Using MarkUp with GitHub Copilot

Copilot’s chat interface in VS Code accepts image input. Paste the MarkUp clipboard contents into Copilot Chat, then ask for the implementation.

Copilot tip: Have the relevant file open in your editor when you paste. Copilot uses your open file as context, which combined with MarkUp’s annotations gives it everything it needs to generate accurate code.

Using MarkUp with Claude Code (the agentic workflow)

Claude Code is where MarkUp shines. Save annotations to a workspace folder, and Claude Code picks them up automatically — no copy-paste required.

This works because Claude Code can read files from your local file system. Set up a workspace folder MarkUp will save to, point Claude Code at the same folder, and you have a hands-free annotation-to-implementation pipeline.

Setup is in the next section.

Setting up the MarkUp MCP server.

MarkUp Pro’s MCP server lets your AI coding agent — Claude Code, Claude Desktop, Cursor — read your annotations directly, so you skip the copy-paste. It runs on demand via npx; there’s nothing to install. Here’s the two-minute setup.

Don’t have Pro yet? Get a license on the Pricing page → It’s $6/mo or $149 one-time, and one license covers the extension and the MCP server.

The easy way — let your AI set it up

You already work with an AI agent — so let it do the setup. Copy the prompt below, paste it into Claude Code, Cursor, or Claude Desktop, and it’ll walk you through the rest. You’ll only need two things: your license key (from your purchase email) and your MarkUp workspace folder (where the extension saves your annotations). The agent handles the technical part.

I want to install the MarkUp MCP server so you can read my webpage
annotations directly. Please set it up for me — I'm not very technical,
so do the file editing yourself and walk me through anything you need.

Here's what the MarkUp MCP server needs:
- Server name: markup
- Command: npx
- Args: ["-y", "markup-mcp"]
- Two values I'll give you:
  - MARKUP_LICENSE_KEY — my MarkUp Pro license key (from my purchase email)
  - MARKUP_WORKSPACE — the folder the MarkUp browser extension saves my
    annotations to

Please do this, step by step:

1. First, check that Node.js / npx is installed on my machine. If it isn't,
   tell me and help me install it before continuing.

2. Ask me for my MarkUp Pro license key and my MarkUp workspace folder. If
   I'm unsure of the folder's full path, help me find it — it's the folder
   the MarkUp extension saves annotation files (.png + .md) into.

3. Figure out which MCP client I'm using and find its config:
   - Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json
     (Mac) or %APPDATA%\Claude\claude_desktop_config.json (Windows)
   - Cursor: ~/.cursor/mcp.json
   - Claude Code: use the `claude mcp add` command, or the right config file
   If you're not sure which one I'm using, just ask me.

4. Add a "markup" server to the mcpServers section of my config, using the
   two values I gave you. IMPORTANT: don't remove or overwrite any MCP
   servers I already have — only add this one.

5. Tell me clearly whether I need to restart the app, and how.

6. When it's done, have me test it by asking you: "Read my latest MarkUp
   annotations."

For reference, the finished config entry should look like this (with my real
values filled in):

{
  "mcpServers": {
    "markup": {
      "command": "npx",
      "args": ["-y", "markup-mcp"],
      "env": {
        "MARKUP_WORKSPACE": "<my workspace folder path>",
        "MARKUP_LICENSE_KEY": "<my license key>"
      }
    }
  }
}

Please start by checking Node, then asking me for my license key and
workspace folder.

Works with Claude Code, Cursor, and Claude Desktop. Your key and folder stay between you and your own agent.

Prefer to set it up yourself?

If you’d rather edit your config by hand, here’s the setup:

Step 1 — Add MarkUp to your MCP client config

Add this block to your MCP client’s configuration file (for Claude Desktop, that’s claude_desktop_config.json):

{
  "mcpServers": {
    "markup": {
      "command": "npx",
      "args": ["-y", "markup-mcp"],
      "env": {
        "MARKUP_WORKSPACE": "/absolute/path/to/your/markup/workspace",
        "MARKUP_LICENSE_KEY": "your-license-key"
      }
    }
  }
}

Step 2 — Set two values

• MARKUP_WORKSPACE — the local folder MarkUp saves your annotations to (the workspace folder you pick in the extension’s export settings).
• MARKUP_LICENSE_KEY — the key from your purchase email.

Step 3 — Restart your MCP client

Restart Claude Desktop, Cursor, or whichever client you use, so it picks up the new server.

Step 4 — Try it

In your agent, ask: “Read my latest MarkUp annotations.” It’ll pull your most recent annotated session — the changes, the elements, and the annotated screenshot — ready to implement.

Where’s my workspace folder? Open the MarkUp extension → your workspace folder is shown in the export settings. Point MARKUP_WORKSPACE at that exact path. Need a license? See Pricing →

Common questions and fixes.

If something isn’t working, the answer is probably below. If not, email [email protected] and we’ll help.

MarkUp doesn’t activate when I click the icon

A few things to check:

1. Did you pin the extension? If MarkUp is still hidden behind the Chrome puzzle icon, click the puzzle icon, find MarkUp, and click the pin to keep it visible.
2. Is the page locked? Some Chrome internal pages (chrome://, the Web Store itself, or some Google domains) don’t allow extensions to inject content. Try MarkUp on a regular webpage.
3. Is the extension enabled? Visit chrome://extensions and confirm MarkUp’s toggle is on.

My annotations disappeared when I refreshed the page

This is by design — MarkUp doesn’t store annotations across page reloads. If you need to keep working with the same set of annotations:

• Save them to your workspace folder before refreshing.
• Or copy them to your clipboard before refreshing.

Persistent annotations across page sessions is on the v1.1 roadmap.

Copy to clipboard isn’t working

A few possibilities:

1. Browser permissions: Some browsers prompt for clipboard access on first use. Look for a permission popup near your address bar.
2. Other clipboard managers: Some clipboard manager apps interfere with extension clipboard writes. Try briefly disabling them to test.
3. The page is in incognito: MarkUp doesn’t work in incognito by default. Enable it in chrome://extensions if you need that mode.

Save to workspace asks for folder permission every time

Each Chrome session starts fresh — the browser asks for folder access permission once per session for security reasons. After the first save in a session, subsequent saves to the same workspace happen without prompting.

If you’re being prompted for the same workspace within a single session, your browser may be clearing folder access permissions automatically. Check your browser settings under Site Settings or check if any privacy extensions are clearing permissions.

The toolbar shows up too small / too big

The toolbar size adapts to the page’s zoom level. If you’ve zoomed the page in or out, the toolbar reflects that. Reset the page zoom in your browser to fix.

My AI agent says it can’t see the image

A few things to check:

1. Make sure you pasted both the image AND the markdown changelog. If you only pasted text, the AI doesn’t have the visual reference.
2. Some AI tools require image attachments to be explicitly added (not just pasted). Look for an attach/upload button.
3. The AI may have a file size limit. MarkUp images are typically under 1MB, but if the page is exceptionally large, the screenshot might exceed limits. In that case, scroll to a relevant area before activating MarkUp so the screenshot is more focused.

I have a feature request or a bug to report

Email [email protected]. Include:

• A description of the issue or feature
• The browser and version you’re using (Chrome 120, Edge 121, etc.)
• A screenshot if visual

Or share feedback at markupextension.com/beta — every submission is reviewed and shapes the roadmap.