For coding agents Figma-style comments for the web and mobile apps you're building

Pin a note on your app.
Your agent fixes it.

Click anything in your running app, in a browser or on a phone, and say what's wrong. Notato hands the note to your coding agent with a screenshot, the component, and the file and line it was written at. The agent makes the change, commits it, and the pin turns green. Or a developer picks it up from the board.

An animation of the loop: a note is pinned to the checkout page, a coding agent (Claude Code, then Codex, then Gemini CLI) receives it, changes the code, commits, and the pin turns green.

section#loop

From a click to a commit

Every note is an annotation: an element, what you said about it, and screenshots. Nothing is recorded between notes, so there's no analytics and no session replay to worry about.

  1. 1Click it

    Press Alt Shift A and click an element. You can also select text, drag over an area, or Ctrl-click several things at once.

  2. 2Say it

    Write the note. Say if it's a fix, a change, a question, an approval or a request for variants, and how much it matters.

  3. 3Your agent gets it

    The note reaches your coding agent over MCP with the screenshots, the component path, and the file, line and column.

  4. 4It turns green

    The agent acknowledges it, makes the smallest change, commits it on its own and resolves it. One commit per note keeps every undo clean.

What the pin colours mean

  1. 1OpenWaiting for the agent
  2. 1AcknowledgedThe agent has it
  3. 1ResolvedChanged and committed
  4. 1Revert requestedYou changed your mind
  5. 1RevertedThe agent undid that commit

3 Cyan means you picked a variant and the agent is tidying up. A struck-through pin was dismissed.

section#showcase

Things it can do

Each of these is the real behaviour, acted out with the real markup and data shapes. Click around.

Say what you want

Every note can carry an intent, and the agent acts on it. A question gets an answer and no edit.

Intent

AlexThe total doesn't change when I remove an item

ClauderemoveItem never recalculated the total. Fixed in Basket.tsx:44, committed 9e1c0d2 on its own, resolved.

Flip between versions, live

Ask for variants and the agent writes each one into your code. Switch between them in the running page, then keep one.

New season Jersey RoyalsWaxy, nutty, here until July £3.40/kg
promo

What the agent reads

Any note can be written out as Markdown at four levels, for an agent, an issue or a pull request. This is the real renderer's output for the note in the demo above.

Catch a moving target

Pause freezes CSS and Web Animations mid-flight, so you can annotate a frame that only exists for 200ms. The note records how far through each one was.

Added to basket
AltShiftP
Animations: running

Changed your mind?

Ask the agent to undo a change. It knows which files and which commit, because it recorded them when it resolved the note.

Place order · £12.40 1

Resolved by Codex · 3f9c2a1

Made the pay button green and renamed it.

Talk to the agent, or around it

Every reply reaches the agent, even on a note that's already done, with nothing to tag. Send a reply as an aside, or mark a whole note People only, and it stays between people.

Private by default

Passwords are always masked in screenshots. In test and agent mode every input is. Mark anything else private and its pixels and text stay out.

Emailsam@example.com
Passwordhunter2-mash
Loyalty card6411 2280 0193data-notato-mask

Let the agent review it first

The notato-critique skill has the agent open your app in a browser it can drive, use it like a careful reviewer, and file the things that matter most as notes. Then it works through them.

    Reaches inside things

    Same-origin iframes, open shadow roots and portals all work. The note says how to get there.

    iframe#preview >>> my-widget >>> button.pay

    section#apps

    Your phone apps, too

    SDKs for SwiftUI, Jetpack Compose and Views, .NET MAUI, React Native and Flutter put the same toolbar in your iOS and Android apps. Tap an element, write a note, and your agent gets the screenshot and the file and line it was written at, just as it does on the web. Same server, same board, same agent loop.

    SwiftUI and UIKit

    • .notato("ProductRow") marks where a view is written. The compiler fills in the file and line, so there is nothing to keep in step
    • Each note says what VoiceOver would call the element, and brings the app's recent log
    • A Swift package with no dependencies. Leave Notato.start out of a build and it ships nothing
    SwiftUI setup guide
    import Notato
    
    @main
    struct ShopApp: App {
        init() {
            #if DEBUG
            Notato.start(NotatoConfiguration(project: "spudshop-ios"))
            #endif
        }
        var body: some Scene { WindowGroup { RootView() } }
    }

    What your agent gets

    • Phones on any network

      npx notato --tunnel puts the server on your machine behind a dev tunnel that only answers with the device's token. The simulator and emulator use localhost.

    • Notes outlast a bad signal

      A note made while the server can't be reached is kept on the device and sent as soon as it can be.

    • The app's own log

      Recent Logger and os_log messages, logcat warnings, the MAUI app's log, or React Native's and Flutter's warnings and errors come with every note.

    • Private by default

      Password fields are always covered. .notatoMask(), Modifier.notatoMask(), Feedback.Mask and NotatoMask hide anything else, pixels and text.

    • Testers on real devices

      In test mode notes stay on the phone, then go out as a zip through the share sheet, ready for your agent to import.

    • Out of the way

      Drag the bar anywhere, fold it into the potato, or hide it from its menu. Turn Notato on and off from your own settings screen.

    • Sheets, dialogs and lists

      Pick things inside modal pages, sheets, full-screen dialogs and lazy lists. The note says which screen it was on.

    • Nothing in release

      #if DEBUG, a debugImplementation dependency or a Debug-only package ships none of it, and in React Native and Flutter a release build draws only your app.

    section#everywhere

    Any web app, and pages you didn't build

    React and Angular apps get an SDK, and any other app can start the toolbar itself. A page you didn't build gets a bookmark or the Chrome extension, with nothing to install in it. The same server and MCP tools are behind all of them, and behind the phone apps above.

    React 18 and later

    • init edits Vite and Next.js apps for you, in your project's own code style
    • The Vite plugin gives the exact file, line and column, even in a built app
    • Finds the host app in a Module Federation repo, and every module inherits the toolbar
    React setup guide
    import { Notato } from "@notato/react"
    
    {import.meta.env.DEV && (
      <Notato mode="dev" project="spudshop" server="http://localhost:4747" />
    )}

    section#modes

    You, your testers, or an agent

    The same toolbar runs in three modes. What changes is who is annotating and where the notes go.

    dev You, while you build

    Notes go live to a local server on your machine. Your agent reads them over MCP and works through them as they come in.

    <Notato mode="dev" project="spudshop" />

    test Testers, anywhere

    Testers annotate, then choose Download zip in the toolbar's Export menu. They get a zip with every note in order and its screenshots. Hand it to your agent, or post it to a shared server.

    <Notato mode="test" project="spudshop" />

    agent An AI driving the browser

    Playwright, Chrome DevTools or an agent's own browser call the page API. The agent's notes go through the same pipeline as yours, with the steps it took.

    await window.__notato.annotate({ target: "#pay", comment: "No loading state" })

    section#board

    Every project on one board

    The server has its own board, for the developers. One server holds many projects: an inbox for each, a timeline of what was said, and an overview of what's left. Agents and people work the same notes, and it updates as things happen.

    And tell the rest of the team

    Webhooks send each change to Slack, Discord, a Teams workflow, or your own service as signed JSON. Set them up and test them from the board, with a preview of exactly what will be sent.

    section#agents

    Bring your own agent

    Notato is an MCP server and two Agent Skills, so it works with any coding agent that speaks MCP. npx notato init finds the ones you use and sets up each one. Notato never edits your code: the agent does the work.

    • Claude Code

      MCP
      claude mcp add notato -- npx notato dev
      Skills
      .claude/skills/
    • Codex

      MCP
      codex mcp add notato -- npx notato dev
      Skills
      .agents/skills/
    • Cursor

      MCP
      .cursor/mcp.json
      Skills
      .agents/skills/
    • Gemini CLI

      MCP
      .gemini/settings.json
      Skills
      .agents/skills/
    • GitHub Copilot

      MCP
      .vscode/mcp.json
      Skills
      .github/skills/
    • Anything else

      MCP
      Run npx notato dev as a stdio server
      Skills
      Copy .agents/skills/notato

    Pick them yourself with npx notato init --agent codex,cursor, or --agent all. Replies are signed with the agent's own name, and the toolbar says who it is asking: Ask Codex to revert. No agent at all? Notes still land on the board, and webhooks tell your team.

    Set up your agent

    Two skills that teach the loop

    notato

    The loop: make the smallest change, commit each fix on its own with only its own files, resolve with the files and the commit, answer questions without editing, and undo a change when asked.

    notato-critique

    The agent reviews the running app itself, files the five to eight things that matter most, then works through them.

    Call them by name (/notato in Claude Code, $notato in Codex) or just ask: "watch Notato and fix what comes in". A second agent session attaches to the first one's server, and takes over if it goes away.

    MCP · notato
    notato_watch
    Waits for new notes, replies and revert requests, then returns them with screenshots
    notato_list_open
    Open notes, filtered by project, page, severity or intent
    notato_get
    One note at the detail level asked for, screenshots as images
    notato_acknowledge
    Turns the pin amber: the agent has it
    notato_reply
    Writes in the note's thread
    notato_resolve
    Done, with the files and the commit, so it can be undone later
    notato_dismiss
    Closes a note without a change
    notato_variants_ready
    Offers the versions in the code for you to compare
    notato_reverted
    Reports that a change you asked to undo is undone
    notato_import_bundle
    Loads a tester's zip
    notato_annotate
    Asks an open agent-mode page to annotate an element

    section#start

    Four commands to your first green pin

    1. 1
      npm i -D notato @notato/react

      Install the CLI and the React SDK.

    2. 2
      npx notato init

      Adds <Notato /> behind a dev-only guard, then sets up your agents: the MCP server and the skills, for Claude Code, Codex, Cursor, Gemini CLI or Copilot. --revert takes it all back out.

    3. 3
      npm run dev

      Start your app as usual.

    4. 4
      npx notato doctor

      Checks the whole loop, including that a page is connected.

    Building a phone app? Run npx notato, then add the SwiftUI, Android or .NET MAUI SDK with one line at start-up.

    Then, ask your agent

    “watch Notato and fix what comes in”

    section#try

    Try it on this page

    This button loads the real Notato toolbar onto this page. It runs in test mode with no server, so your notes stay in this browser. Open Export and choose Download zip for the zip a tester would send.

    1. Press Alt Shift A, or Annotate in the toolbar at the bottom right
    2. Click anything on this page. A headline, a tile, this list
    3. Write a note and press Ctrl Enter. A numbered pin appears

    Agents, replies, variants and reverts need a server on the other end. On your own machine that's npx notato.