Skip to content
Sightmap

Quickstart (React)

For React Router 7 apps. Five steps to a populated .sightmap/ directory you can commit.

1. Install

Section titled “1. Install”
Terminal window
pnpm add @sightmap/react @sightmap/sightmap

@sightmap/sightmap is a peer dep — install it alongside.

2. Mark a few components

Section titled “2. Mark a few components”

Add data-sightmap="..." to the JSX elements you want named. Stable names, not implementation details.

export function FlightSearch() {
  return (
    <form data-sightmap="FlightSearchForm">
      <input data-sightmap="DepartureDatePicker" />
      <button data-sightmap="SearchButton">Search</button>
    </form>
  );
}

You don’t need to mark everything up front — start with the components an agent will need to act on or reason about.

3. Run codegen

Section titled “3. Run codegen”
Terminal window
pnpm sightmap-react gen

gen walks your React Router config, AST-scans your source for data-sightmap attributes, and writes feature-scoped YAML files to .sightmap/ — one per top-level route. Re-run any time routes or selectors change. Agent-authored fields (memory, intent, requests) are preserved.

.sightmap/
  flight-search.yaml   # codegen-scaffolded, agent-curated
  shared.yaml          # cross-route components

4. Mount the provider

Section titled “4. Mount the provider”
import { SightmapProvider } from "@sightmap/react";


export function App() {
  return (
    <SightmapProvider runtimeIntrospection="dev">
      <YourApp />
    </SightmapProvider>
  );
}

The provider loads the merged sightmap and installs window.__SIGHTMAP__ for browser-driving agents to introspect. Optional but recommended: add the Vite dev plugin for the /__sightmap__/sightmap.json endpoint.

5. Let an agent fill in the rest

Section titled “5. Let an agent fill in the rest”

Open one of the generated YAML files. The structural fields (name, route, selectors) are populated; the agent-authored fields land as commented TODO blocks. Hand the file to your coding agent — or run the Claude Code plugin — and ask it to fill in memory, intent, and requests from what it knows about the running app.

Next

Section titled “Next”