prismer-reader

Self-contained, AI-native PDF reader React component — rendering, search, text selection, translation, and AI Q&A. Plain PDFs work out of the box; OCR data unlocks superset features. Configured through one config prop.

Full integration reference: INTEGRATION.md

Integration checklist

| Step | Required | What to do | |------|----------|------------| | Install peers | ✅ | npx install-peerdeps prismer-reader | | Styles | ✅ | import "prismer-reader/styles.css" | | pdf.js worker | ✅ | Copy worker to public/ (see below) | | Client-only | ✅ | "use client" or next/dynamic + ssr: false | | Next.js | recommended | transpilePackages: ["prismer-reader"] | | AI / translate | optional | config.endpoints or config.ai.transport | | OCR superset | optional | config.ocr.load or OCR API |

Install

npm i prismer-reader
npx install-peerdeps prismer-reader

Peers: react, react-dom, react-pdf, pdfjs-dist, zustand, lucide-react.

Quick start

"use client";
import { PDFReader } from "prismer-reader";
import "prismer-reader/styles.css";

export default function Page() {
  return (
    <div style={{ height: "100vh" }}>
      <PDFReader source="https://arxiv.org/pdf/2303.11366v4" />
    </div>
  );
}

source: URL string, arXiv ID string, or { url?, arxivId?, filePath? }.

pdf.js worker (required)

cp node_modules/pdfjs-dist/build/pdf.worker.min.mjs public/pdf.worker.min.mjs

config={{
  assets: {
    workerSrc: "/pdf.worker.min.mjs",
    cMapUrl: "/pdfjs/cmaps/",
    standardFontDataUrl: "/pdfjs/standard_fonts/",
  },
}}

Next.js

import dynamic from "next/dynamic";
import "prismer-reader/styles.css";

const PDFReader = dynamic(
  () => import("prismer-reader").then((m) => m.PDFReader),
  { ssr: false }
);

Add to next.config: transpilePackages: ["prismer-reader"].

Demo OCR (no backend)

import { PDFReader, createMockOCRData } from "prismer-reader";

<PDFReader
  source={{ url: "/paper.pdf", arxivId: "demo" }}
  config={{ ocr: { load: async (id) => createMockOCRData(id) } }}
/>;

Subpath import: prismer-reader/mock-ocr-data.

config at a glance

| Area | Keys | Notes | |------|------|-------| | Endpoints | endpoints.* | AI, translate, client config, OCR base path | | AI | ai.transport, ai.enabled | Override gateway; auto-detect via client config | | Auth | auth.isAuthenticated | Gate AI / library actions | | Adapters | adapters.LibraryBrowser | Inject host pickers; omit → hide entry | | OCR | ocr.load | Return { metadata, ocrResult, detections } or null | | UI | ui.notes, ui.topBar | Feature toggles | | Theme | theme, classNames, labels | Branding / i18n |

Backend needed only for AI, translation, or hosted OCR. See INTEGRATION.md for API contracts and capability model.

Package exports

| Import | Description | |--------|-------------| | prismer-reader | PDFReader + types + helpers | | prismer-reader/styles.css | Component styles | | prismer-reader/mock-ocr-data | createMockOCRData (tree-shake friendly) |

Live demos (LuminPulse monorepo)

| Route | Description | |-------|-------------| | /integrate/reader | External-dev experience (npm package) | | /pkg-reader | Minimal packaged smoke test | | /reader | Full harness (monorepo source) |

Build (monorepo)

npm run build -w prismer-reader
npm run smoke -w prismer-reader