Notato docs

Set Notato up in your app and your coding agent, then see everything it can do.

Pin a note on your running app. Your coding agent picks it up and fixes it.

Notato puts a small toolbar in the web or mobile app you are building. Click an element (or tap one on a phone), say what is wrong, and the note reaches your coding agent over MCP with a screenshot, the component, and the file and line it was written at. The agent makes the change, commits it, and the pin on the page turns green. It works with Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and any other MCP client, and a board shows every note and its thread to the people working on it.

Screenshots prefer WebP when it is smaller. Compatible servers receive one full image plus crop coordinates, generate the compressed crop and tiny inbox thumbnail once, and serve each view at the size needed. The board loads diagnostics on demand. Screenshot storage and compatibility.

Every piece of feedback is an annotation: an element, a note and screenshots. Nothing is recorded between annotations, so it is a feedback loop for building, not analytics or session replay.

Mode	Who annotates	Where it goes
dev	The developer	Live to a local server, read by your coding agent over MCP
test	A tester	A zip bundle, or posted to a shared server
agent	An AI agent driving the app	Same as test, plus the steps the agent took

Feedback is private by default in Dev mode. Your notes sync to the server but only you and your agent can see them. Share a note with the project when you want a teammate or shared agent to pick it up. Test mode starts Shared and groups live feedback into review sessions, with a focus and conversation for the agent. Offline packaging remains available. In the board, All accessible means your own notes plus project-shared feedback, never every teammate's private notes. The team feedback guide explains the scope and grouping model.

Web apps

React appsVite or Next.js: one command adds the toolbar behind a dev-only guard and sets up your coding agent.Angular appsAngular 19 and later: provideNotato() in the app config, and nothing in production builds.Any page and the Chrome extensionPut the toolbar on any web page with a bookmark, a script tag or the browser extension.

Mobile apps

SwiftUIiOS 17 and later, as a Swift package with native WebP compression.AndroidJetpack Compose and Views on Android 7 and later, with nothing to mark..NET MAUIiOS, Android and Mac Catalyst on .NET 10 and later.React NativeExpo or bare, on the New Architecture: wrap the app, tap a view, and the note has its component and file.FlutteriOS, Android, macOS and the web: wrap the app, tap a widget, and the note has its file and line.Real phonesA dev tunnel, so a phone on any network reaches the server on your machine.

Agents and teams

Your coding agentRun it with one command, then connect Claude Code, Codex, Cursor, Gemini CLI, Copilot or any MCP client: the tools, what the agent gets and critique.AspireAddNotato() in an Aspire app host runs the board and MCP with your apps, and switches Notato on in each of them.Testers, servers and webhooksDev feedback stays private by default, while named Test sessions share focused feedback with a team.Self-hostingRun the full server with Docker Compose, or on your own Postgres, storage and email.

Reference

Everything it doesIntents, variants, the board, Markdown export and screenshots, in full.Building on NotatoExtend the server and board with your own storage, accounts and screens.Known limitsWhat Notato does not do yet, and what has not been tried.