Agent-native visual feedback

Comment on the page.
The agent fixes the code .

Anyone clicks an element on your preview and leaves feedback. Every comment captures the exact DOM context, so your AI coding agent reads it, edits the source, and resolves the thread. No screenshots. No "which button?".

See how it works

app.yourproduct.com/preview

1 button.cta-primary

Resolved

Sara · Design

This CTA should read "Start free" and use the brand purple, not blue.

Claude Code

Updated Hero.tsx — label now "Start free", variant set to purple. Marking resolved.

Works with your agent

The loop

From click to resolved

Feedback stops being a screenshot in a Slack thread and becomes a task your agent can actually close.

Embed the widget

One script tag on any preview, staging, or demo. Also ships as React and Vue components. No app rebuild, no reviewer login.

Reviewers click & comment

Anyone points at a real element and leaves a threaded comment. Pins appear inline. Everything syncs live over the room.

The agent reads the context

Over MCP or the CLI, your coding agent pulls the full thread — selector path, quoted text, component metadata — and jumps to the source file.

Fix & resolve

The agent edits the code, replies with a summary, and marks the thread resolved. Reviewers watch it update in real time.

The MagicComment widget embedded on a live page — click any element and a numbered pin marks the feedback

One thread

Three participants

Humans and agents work the same thread, in real time, without stepping on each other.

Reviewers

PM · Design · QA · Clients

Point at any element and type. No account, no screenshots, no "which button?". Pins land exactly where the feedback belongs.

Operators

Product owners · Leads

Triage every thread in one cross-project inbox. Move each from Open → Discussed → Resolved, reply directly, and never lose a piece of feedback.

AI agents

Claude Code · Codex · Cursor · Gemini

Read, reply, and resolve threads over MCP or CLI. Every reply is attributed by agent name, so the audit trail stays honest.

Agent-native

Feedback that knows where the code lives

Every comment is captured as machine-readable context — enough for an agent to jump straight to the source file instead of guessing from a screenshot.

Target page URL
CSS selector path
Element tag & attributes
Quoted text & surrounding copy
Geometry snapshot
Framework component metadata

MCP server

Your agent reads and closes threads with a handful of tools:

list_comment_threadsget_comment_threadlist_review_pagesreply_to_comment_threadresolve_comment_threadget_install_command

CLI context packs

Export open threads into a ready-to-run pack — brief.md, threads.json, resolved context, and agent prompts. Reviewer text is safely fenced as untrusted input.

An open comment thread carrying the selector path and quoted DOM context, with replies from reviewers and the agent

Install in minutes

Embed anywhere

A script tag on your preview, a component in your app, or an MCP entry in your agent. Pick one.

<script
  src="https://cdn.jsdelivr.net/npm/@magic-comment/widget/dist/magic-comment.global.js"
  data-project-id="my-project"
  data-server-url="wss://comments.example.com"
  data-api-key="pk_live_..."
  data-review-id="preview"
></script>

import { MagicComment } from '@magic-comment/widget/react'

export function Preview() {
  return (
    <MagicComment
      projectId="my-project"
      serverUrl="wss://comments.example.com"
      apiKey="pk_live_..."
      reviewId="preview"
    />
  )
}

{
  "mcpServers": {
    "magic-comment": {
      "command": "npx",
      "args": ["-y", "@magic-comment/mcp"],
      "env": { "MAGIC_COMMENT_API_KEY": "sk_live_..." }
    }
  }
}

Vue component and vanilla bundle also available.

Stay on top of it

One inbox for every thread

The dashboard rolls every project into a single inbox. Filter by status, reply as an operator, and move threads through their lifecycle. Email and Slack keep the right people looped in.

Open Discussed Resolved

The MagicComment dashboard inbox — every project's threads in one list with status filters and operator replies

Built for teams

Safe to point at your app

Magic-link auth

No passwords. Rate-limited sign-in by email and IP.

Scoped keys

Publishable pk_ keys for the browser, secret sk_ keys for agents and servers.

Origin allowlists

Lock a widget to your exact domains. Empty means open, non-empty means strict.

Untrusted by default

Reviewer text is fenced as untrusted input inside every agent prompt and context pack.

Your infrastructure

Collab server, control plane, and Postgres — self-hostable, real-time on your own stack.

Notifications you control

Per-project email and Slack alerts, debounced so one thread never spams the channel.

Pricing

Start free

Scale up when you add projects and teammates.

Free

$0 forever

For a single app and a solo reviewer.

1 project
1 seat
Unlimited comment threads
MCP + CLI access

Questions

What is Magic Comment?

Agent-native visual feedback for web apps. Reviewers click any element on your preview and leave a threaded comment. Every comment carries the exact DOM context, so your AI coding agent can read it, edit the source, and resolve the thread.

How is this different from BugHerd or Marker.io?

Classic tools capture a screenshot and a note for a human to interpret. Magic Comment captures machine-readable context — selector path, quoted text, component metadata — and exposes it over MCP and a CLI so your coding agent resolves the feedback directly, not just files it.

Which agents does it work with?

Any MCP client — Claude Code, OpenAI Codex, Cursor, Gemini, and more — plus a CLI that fits any workflow. Replies are attributed to the detected agent (Claude Code, Codex, Gemini, Qwen, Grok, DeepSeek, Llama).

How do I install it?

Drop in one script tag with your project id and publishable key, or use the React or Vue component. For agents, add the MCP server to your client config, or run the CLI with a secret key.

Do reviewers need an account?

No. Reviewers comment right on the page through the embedded widget. Accounts are only for the dashboard, where operators triage threads and manage the workspace.

Where can I use it?

Any web app — preview deploys, staging, internal demos, or production. The widget mounts via script tag, bundled import, React, or Vue.

Is it secure?

Yes. Magic-link auth, publishable keys scoped to a project, secret keys scoped to a workspace, per-project origin allowlists, and reviewer feedback treated as untrusted and fenced inside every agent prompt.

Can I self-host?

Yes. Magic Comment is three services plus a shared Postgres. Real-time collaboration runs on Hocuspocus/Yjs and can live entirely on your own infrastructure.

What does it cost?

Free to start with one project. Pro and Team plans unlock more projects, seats, and workspace controls. Join the waitlist for early access.

Who's behind Magic Comment?

Donux, a product studio that has shipped 80+ B2B SaaS products. Magic Comment was built alongside Magic Team and is now available on its own.