Note8 Docs

Note8 is a visual feedback widget for web applications. Your users can screenshot, annotate, and point at elements on your page. Then your team (or AI agents) triages and resolves the feedback.

Here's how it works:

1. Install the widget: one script tag or a React provider wrapping your app.
2. Users give feedback: they click the widget button, screenshot or point at an element, add a comment, and submit.
3. Feedback lands in the dashboard, complete with screenshot, annotations, page URL, viewport size, and user-provided metadata.
4. Triage with AI: use the MCP server to let Claude Code or Cursor read, triage, and resolve feedback from your editor.

The fastest way to get started is a single script tag. Add this to any HTML page and the feedback widget appears immediately:

That's it. A floating button appears in the bottom-right corner. Users can click it to open the feedback toolbar, take a screenshot, annotate it with drawing tools, add a comment, and submit. The feedback (annotated screenshot, page URL, viewport dimensions, user agent) gets sent to your dashboard.

Get your project key from the Note8 dashboard. Create an organization, then a project, and you'll see your live and test API keys.

The script tag is the simplest integration method. It loads the widget IIFE from the CDN and auto-initializes with data-* attributes.

The CDN URL supports flexible version pinning. Choose the level of stability you need:

For React apps, install the @note8/react package for component-level control over the widget.

Wrap your app (or a subtree) with FeedbackProvider. It initializes the widget and provides context to child components.

Use useFeedback for direct widget control without the provider pattern. It returns open(), close(), and isReady.

When using FeedbackProvider, access the widget controls from any child component with useFeedbackContext(). Returns the same { open, close } interface.

The full configuration object applies to both the script tag (via data-* attributes) and the programmatic API (via Note8Widget.init()). The React SDK accepts these as props.

For full control without a framework, use the Note8Widget class directly. Available globally as window.Note8Widget when using the IIFE build, or imported from @note8/sdk.

Note8 supports five feedback modes. Each one captures a different level of visual context:

When users choose the annotation feedback type, they get a canvas overlay on top of the screenshot with these drawing tools:

9 colors available: red, orange, yellow, green, blue, purple, pink, black, white

4 stroke widths: 2px, 4px, 6px, 8px. All annotations support undo.

The Note8 dashboard is where you manage your organizations, teams, projects, and feedback.

Organizations are the top-level container. Each org can have multiple teams and projects. Feedback is submitted to a project and can be assigned to a team or individual member.

Every feedback submission goes through a status workflow:

You can assign feedback to team members, add resolution notes, and add comments (from users, AI agents, or the system).

The widget communicates with Note8 via two API endpoints. You can also call these directly for custom integrations.

The screenshot field carries the clean page capture. annotationLayer is a separate transparent PNG containing only the user's drawings — this lets AI agents distinguish annotations from page content. voiceNote is base64-encoded audio (WebM) when the user records a voice note.

Supports query parameters: status, feedbackType, search, page, pageSize. Requires a PAT in the Authorization: Bearer note8_xxx header.

Comment sources: user, ai, or system. Both endpoints require PAT authentication.

All API responses follow a consistent shape:

The feedback submission and validation endpoints authenticate via the projectKey field in the request body. No headers required. The key identifies the project and determines whether feedback goes to the live or test environment. Dashboard API endpoints use session-based authentication or a Personal Access Token (PAT) in the Authorization: Bearer note8_xxx header.

The Note8 MCP server lets AI assistants (Claude Code, Cursor, etc.) read, triage, and resolve feedback directly from your editor using the Model Context Protocol.

A typical AI-assisted triage workflow:

1. list_organizations() to find your org
2. list_projects(org_id) to pick the project
3. list_feedback(project_id, status: "open") to see open feedback
4. get_feedback(feedback_id) to read details + comments
5. get_screenshot(feedback_id) to view the annotated screenshot
6. Fix the issue in code, then: update_feedback(id, status: "resolved", resolution_notes: "...")
7. add_comment(id, comment: "Fixed in v2.1.0")

The Note8 agent daemon is a background process that watches for new feedback and autonomously attempts fixes using your local AI coding agent. It runs on your machine, uses your tokens, and never sends your code to Note8's servers. It ships with a built-in web dashboard for configuration, project linking, and activity monitoring.

The daemon starts a local web server with a dashboard UI. From the dashboard you can authenticate, link projects to local directories, configure schedules, and monitor agent activity — or do it all from the CLI.

The daemon includes a web dashboard at http://localhost:3847 for managing everything visually:

When the daemon links a project, it can spin up a live review site: a preview deployment that merges all approved fixes into a single branch so stakeholders can see the result before anything touches production.

Choose how the agent organizes its work. The default strategy is review-branch. Each fix gets its own branch, and approved fixes are merged into a shared review branch for preview. Override per-project in the dashboard or config file.

You control every aspect of what the agent does, when it runs, and how aggressively it operates. Settings are configured through the agent dashboard or by editing ~/.note8/config.json directly.

Every setting has a global default that applies to all linked projects. Any project can override any setting. Toggle a field from “Default” to “Custom” in the project settings page and set a project-specific value. Clearing the override reverts to the global default.

Control when the agent runs:

Timezone is configurable per-project, so a US team and an EU team can run on different schedules within the same daemon.

Control which AI tools are used and how they behave:

Choose which feedback statuses the agent processes: open, in_progress, resolved, or dismissed. By default only open items are picked up. You can override this globally or per-project. For example, one project might also retry in_progress items while another only handles new ones.

Full configuration reference for ~/.note8/config.json. Every field is optional. The daemon uses sensible defaults.

When the daemon detects a new feedback item:

1. Pull feedback: description, annotated screenshot, voice note, metadata, and page context
2. Create branch: a new git branch named note8/fb-{shortId}
3. Spawn AI agent: your configured coding agent receives the feedback as a prompt with the screenshot
4. Agent works: reads the codebase, identifies relevant files, attempts a fix
5. Commit & report: changes committed to the branch, status logged to the agent dashboard

The daemon ships with built-in protections:

The daemon isn't just for client feedback. Use the Note8 widget on your own site while you develop. Circle small issues (a padding tweak, a broken hover state, a typo) and move on. The daemon picks them up and fixes them in the background while you stay focused on the big feature.

When you're done with the main work, check the agent dashboard. Your small fixes are already sitting there as branches ready to review and merge.

The Note8 VS Code extension puts the feedback workflow in your editor. Triage incoming feedback, approve or reject agent fixes, manage review sites, monitor activity. It connects to the agent daemon on your machine and streams events in real time.

Search for note8 in the VS Code Marketplace and click Install. Or install from the command line:

The extension activates on startup and attempts to connect to the agent daemon automatically. Make sure the daemon is running (note8-agent start) before opening VS Code.

Open the Command Palette (Ctrl+Shift+P) and run note8: Authenticate. Enter your Personal Access Token. It gets stored in your OS keychain via VS Code's SecretStorage API, never in plain text.

The extension adds a Note8 icon to the Activity Bar with three views:

All commands are available via the Command Palette (Ctrl+Shift+P):

The extension shows a status bar item with the connection state and pending feedback count. A spinner appears while an agent is actively working on a fix. Click the status bar item to open the sidebar.

Note8 uses three types of keys for different purposes:

Project API keys (live and test) are generated automatically when you create a project. You can regenerate them at any time from the project settings page in the dashboard. This immediately invalidates the old key.

Personal Access Tokens (PATs) are created in the dashboard under Settings → Access Tokens. Each PAT shows a prefix (note8_ + first 8 chars) for identification. The full token is shown only once at creation time.