Your First Annotation

Now that Pointa is installed and connected to your AI tool, let's create your first annotation and see AI implement it.

Prerequisites

Before starting, make sure:

  • Chrome extension is installed
  • MCP is configured in your AI tool
  • You have a localhost development server running (e.g., http://localhost:3000)

Step 1: Open Your Development Page

Navigate to your localhost development server in Chrome. Pointa only works on local development URLs like:

  • http://localhost:3000
  • http://127.0.0.1:8080
  • http://myapp.local

Step 2: Activate Pointa

Click the Pointa extension icon in your Chrome toolbar. The Pointa sidebar will slide in from the right side of the page.

The sidebar shows:

  • Server connection status (green = connected)
  • Feature buttons (Annotate, Design, Bug, Performance)
  • List of existing annotations (if any)

Pointa sidebar in its initial state

Step 3: Create an Annotation

  1. Click the Annotate button in the sidebar (or click anywhere on the page)
  2. Hover over elements - you'll see them highlight as you move
  3. Click on the element you want to annotate

Hovering over an element with annotation highlight

  1. A comment modal appears - type your feedback or instructions

    Example comments:

    • "Make this button blue"
    • "Add padding to this section"
    • "Change the font size to 18px"
    • "Move this below the header"

  2. Click Submit to save the annotation

Annotation comment modal with feedback entered

Step 4: See the Annotation Badge

After submitting, you'll see:

  • A numbered badge appears on the annotated element
  • The annotation appears in the sidebar under "Active"

Element with annotation badge and sidebar showing the annotation

The badge shows which elements have pending feedback. You can click any badge to view or edit the annotation.

Step 5: Let AI Implement

Now switch to your AI coding tool (Cursor, Claude Code, etc.) and ask it to implement your annotations.

Example prompts:

  • "Implement the Pointa annotations"
  • "Please work on the pending annotations from Pointa"
  • "Check Pointa for any feedback and implement it"

AI tool with prompt to implement annotations

Your AI will:

  1. Use the read_annotations MCP tool to fetch your feedback
  2. Find the relevant code files
  3. Make the requested changes
  4. Mark the annotation as "in-review"

Step 6: Review and Complete

After AI implements the changes:

  1. Refresh your development page to see the updates
  2. Check if the implementation matches your expectations
  3. In the Pointa sidebar, the annotation moves to "To Review" tab

If the changes look good:

  • Click the checkmark to mark as Done

If you need adjustments:

  • Add a follow-up comment with additional feedback
  • AI will see your new message and iterate

Annotation in To Review status with options to complete or add follow-up

Understanding Annotation Status

Status Meaning Location in Sidebar
Pending Waiting for AI to implement "Active" tab
In Review AI completed work, ready for your review "To Review" tab
Done Manually marked complete by you Archived

Tips for Effective Annotations

Be Specific

Instead of "make this better", try:

  • "Increase padding to 24px"
  • "Change background color to #f5f5f5"
  • "Make font weight bold"

Use Design Terms

AI understands CSS and design terminology:

  • "Add a subtle box-shadow"
  • "Center this horizontally"
  • "Add 1rem gap between items"

Reference Other Elements

You can mention other parts of the page:

  • "Make this match the header style"
  • "Use the same color as the primary button"

Add Multiple Annotations

You can add several annotations before asking AI to implement. AI will read and implement all pending annotations.

What's Next?

Now that you've created your first annotation, explore more features: