SiteLens · Visual Selector

Turn Clicks Into Structured Web Data

Embed an interactive webpage selector in your React app. Let users choose exactly what they need, then receive reusable locators for extraction through the SiteLens API.

Install from npm Get a SiteLens API key Explore Targeted Extraction

Interactive demo

Sample data

The left side is the VisualSelector component. The panel titled Your Application Receives is this demonstration, not the component. The preview is a recorded sample of a catalog page we publish. It does not use an API key and it does not send capture requests.

Loading the Visual Selector demo…

Use it in your React app

The npm package is free to install. React 19 is required. A SiteLens account and API key are required for live API use. Your backend handles authentication. The browser never sees the key.

npm install @sitelensapi/visual-select

import { useState } from "react";
import {
  VisualSelector,
  buildCaptureRequestFromTargets,
  type VisualNamedTarget,
  type VisualPreviewMeta,
} from "@sitelensapi/visual-select";
import "@sitelensapi/visual-select/styles.css";

export function Picker(props: { preview: VisualPreviewMeta | null; pageUrl: string }) {
  const [targets, setTargets] = useState<VisualNamedTarget[]>([]);
  const body = buildCaptureRequestFromTargets(props.pageUrl, targets);

  return (
    <div style={{ width: "100%", maxWidth: 1200 }}>
      <VisualSelector
        preview={props.preview}
        targets={targets}
        onTargetsChange={setTargets}
        resolvePoint={async ({ previewId, point }) => {
          const response = await fetch("/api/sitelens/visual/resolve", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ previewId, point }),
          });
          if (!response.ok) throw new Error(await response.text());
          return response.json();
        }}
        describeTarget={async ({ previewId, description }) => {
          const response = await fetch("/api/sitelens/visual/describe", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ previewId, description }),
          });
          if (!response.ok) throw new Error(await response.text());
          return response.json();
        }}
        style={{ width: "100%" }}
        viewportMaxHeight="70vh"
      />
      <pre>{JSON.stringify(body, null, 2)}</pre>
    </div>
  );
}

Import VisualSelector and styles.css.
Pass the preview your server already requested.
Provide resolvePoint. Add describeTarget when you want description search.
Read confirmed targets from onTargetsChange.
Set style and viewportMaxHeight to fit the component in your layout.