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

1. Add to basket

   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. FixChangeQuestionToo cramped on a phone

   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. ● notato_watch⎿ 1 note from Alexsrc/Basket.tsx:44:9

   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. 13f9c2a1

   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.

Only need testers to send you notes, without accounts? npx notato serve is a smaller shared server that uses project tokens. See Testers and servers.

Every part is MIT licensed: the SDKs, the command line, the servers and the board. Nothing here needs an account with us or a subscription.

Tool connections use your own provider credentials. Check each one against the real service before you rely on it.

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.

import Notato

@main
struct ShopApp: App {
    init() {
        #if DEBUG
        Notato.start(NotatoConfiguration(project: "spudshop-ios"))
        #endif
    }
    var body: some Scene { WindowGroup { RootView() } }
}

dependencies {
    debugImplementation("dev.notato:notato-compose:0.3.0")
}

class ShopApp : Application() {
    override fun onCreate() {
        super.onCreate()
        Notato.start(this, NotatoConfig(project = "spudshop-android"))
    }
}

using Notato.Maui;

var builder = MauiApp.CreateBuilder();
builder.UseMauiApp<App>();
#if DEBUG
builder.UseNotato(options => options.Project = "spudshop-app");
#endif

import { Notato } from "@notato/react-native"
import { expoStorage } from "@notato/react-native/expo"

export default function App() {
  return (
    <Notato project="spudshop-rn" storage={expoStorage}>
      <Navigation />
    </Notato>
  )
}

import 'package:notato/notato.dart';

void main() {
  runApp(const Notato(project: 'spudshop-flutter', child: ShopApp()));
}

• 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.

• ✻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.