* feat(pdf-server): Interactive PDF viewer example
PDF viewer with PDF.js featuring:
- Chunked binary loading with progress bar
- Text extraction for AI context
- arXiv paper support (fetch by ID)
- Page navigation with keyboard shortcuts
- Zoom controls (including Ctrl+0 reset)
- Fullscreen mode support
- Horizontal swipe for page changes (disabled when zoomed)
- Page persistence in localStorage
- Text selection via PDF.js TextLayer
- Clickable title link to source URL
- Rounded corners and subtle border styling
* chore: Add pdf-server to screenshot generation list
* refactor(pdf-server): Simplify and generalize PDF loading
- Accept any HTTP(s) URLs instead of ArXiv-only
- Use HTTP Range requests for chunked binary loading
- Remove ArXiv-specific code (arxiv.ts, metadata fetching)
- Remove CLAUDE.md index generation
- Flatten hierarchical folder structure to simple entries list
- Remove dead code: getPdfSummary, httpFileSizes
- Simplify base64 encoding using Buffer
- Simplify chunk extraction using slice()
- Consolidate DEFAULT_PDF_URL constant
The server now works with any PDF URL, not just arXiv papers.
HTTP Range requests stream chunks on-demand when supported.
* feat(pdf-server): Include title and selection in model context
- Add pdfTitle to updateModelContext structuredContent
- Include selection position (text, start, end) when text is selected
- Add debounced selectionchange listener to update context on selection
* fix(pdf-server): Restore default URL in view_pdf schema
The UI needs the default value in the schema to show it properly.
* refactor(pdf-server): Further simplifications
- Remove hard-coded test paths from main()
- Remove unused resources: pdfs://metadata/{pdfId}, pdfs://content/{pdfId}
- Remove unused metadata fields: subject, creator, producer, creationDate, modDate
- Remove unused entry fields: relativePath, estimatedTextSize
- Remove filterEntriesByFolder and folder filter from list_pdfs
- Remove redundant output schema validation (trust typed returns)
- Simplify scanDirectory and createLocalEntry signatures
Total: 1836 → 1666 lines (-170 lines, -9%)
* refactor(pdf-server): Major simplification for didactic focus
Simplified the example to focus on key MCP Apps SDK patterns:
- Chunked data through size-limited tool calls
- Model context updates (page text + selection)
- Display modes (fullscreen vs inline)
- External links (openLink)
Changes:
- Remove local file support (HTTP URLs only)
- Restrict dynamic URLs to arxiv.org for security
- Simplify types: url instead of sourcePath/sourceType
- Simplify indexer: 168 → 44 lines
- Simplify loader: 318 → 171 lines
- Simplify server: 337 → 233 lines
- Fix selection text normalization
- Rewrite README with didactic focus
Total: 1836 → 1236 lines (-33%)
* feat(pdf-server): Add file:// URL support for local files
- Local paths are converted to file:// URLs on startup
- file:// URLs must be in the initial list (strict validation)
- Dynamic URLs still restricted to arxiv.org only
- Updated README with local file examples
* fix(pdf-server): Improve selection detection with logging
- Add logging to selectionchange handler to verify it fires
- Add fallback matching without spaces (TextLayer spans may lack spaces)
- Log selection detection success/failure for debugging
The issue: PDF.js TextLayer renders text as positioned spans without
space characters between them. When selecting across spans:
- pageText has spaces (items joined with ' ')
- sel.toString() may not have spaces
- indexOf fails to match
The fix tries exact match first, then falls back to spaceless matching.
* feat(pdf-server): Format model context as markdown with front matter
Model context now looks like:
```markdown
---
url: https://arxiv.org/pdf/...
page: 5/144
---
Page text with <pdf-selection>selected text</pdf-selection> inline.
```
This is cleaner for the model to parse and includes the source URL.
* refactor(pdf-server): Extract smart truncation helpers
Added two well-designed helpers:
formatPageContent(text, maxLength, selection?)
- Centers truncation window around selection if present
- Adds <truncated-content/> markers at elision points
- Wraps selection in <pdf-selection> tags
- Allocates 60% context before, 40% after for readability
findSelectionInText(pageText, selectedText)
- Tries exact match first
- Falls back to spaceless match for TextLayer quirks
- Returns { start, end } or undefined
Example output with selection:
```
<truncated-content/>
...context before... <pdf-selection>selected text</pdf-selection> ...context after...
<truncated-content/>
```
* fix(pdf-server): Truncate inside selection tags when selection too long
When selection is too large for the budget:
<truncated-content/><pdf-selection><truncated-content/>start...end<truncated-content/></pdf-selection><truncated-content/>
This keeps the selection structure intact while showing beginning and end.
* refactor(pdf-server): Remove unused read_pdf_text, use Attention paper as default
- Remove read_pdf_text tool (viewer extracts text client-side with pdfjs)
- Remove PdfTextChunk and ReadPdfTextInput types
- Remove loadPdfTextChunk from pdf-loader
- Change default PDF to 'Attention Is All You Need' (1706.03762)
- Update README with modest language
* refactor(pdf-server): Simplify to use URL as ID, rename view_pdf to display_pdf
Major simplifications:
- Use URL directly as identifier (no hashing)
- Remove displayName - show elided URL with full URL as tooltip
- Rename view_pdf to display_pdf with better description
- Update all references from pdfId to url
- Simplify storage key and model context
The tool description now explains it displays an interactive viewer in the chat.
* feat(pdf-server): Normalize arxiv URLs to PDF format
arxiv.org/abs/... -> arxiv.org/pdf/...
Applied both at startup and when loading dynamic URLs.
* docs(pdf-server): Add prompt engineering to display_pdf description
* fix(pdf-server): Sharp rendering on retina displays
Account for devicePixelRatio when rendering canvas:
- Scale canvas dimensions by dpr
- Scale context by dpr
- Keep CSS size at logical pixels
* fix(pdf-server): Normalize arxiv URLs in read_pdf_bytes too
* add to e2e spec
* add to e2e spec
* add to e2e spec
* add to e2e spec
* regen
* chore: regenerate package-lock.json and fix hono vulnerability
* docs: add pdf-server screenshot to READMEs
* regen
* ci: add missing examples to pkg-pr-new publish
* ci: add pdf-server to npm publish examples
* Update README.md
* pdf-server: improve tool response text for better model context
* revert unrelated screenshot changes
* pdf-server: dynamically add arxiv URLs in read_pdf_bytes
Fixes 'PDF not found' error when server restarts between display_pdf
(which adds the entry) and read_pdf_bytes (which previously only looked
up existing entries). Now read_pdf_bytes mirrors display_pdf's logic
and dynamically adds arxiv URLs to the index.
136 lines
3.9 KiB
TypeScript
136 lines
3.9 KiB
TypeScript
/**
|
|
* PDF Loader - Loads PDFs and extracts content in chunks
|
|
*
|
|
* Demonstrates:
|
|
* - Chunked data loading with size limits
|
|
* - HTTP Range requests for streaming
|
|
* - Caching for repeated requests
|
|
*/
|
|
import fs from "node:fs/promises";
|
|
import type { PdfEntry, PdfBytesChunk } from "./types.js";
|
|
import { MAX_CHUNK_BYTES } from "./types.js";
|
|
import { isFileUrl } from "./pdf-indexer.js";
|
|
|
|
// Cache for loaded PDFs
|
|
const pdfCache = new Map<string, Uint8Array>();
|
|
|
|
// Lazy-load pdfjs
|
|
let pdfjs: typeof import("pdfjs-dist");
|
|
async function getPdfjs() {
|
|
if (!pdfjs) {
|
|
pdfjs = await import("pdfjs-dist/legacy/build/pdf.mjs");
|
|
}
|
|
return pdfjs;
|
|
}
|
|
|
|
// ============================================================================
|
|
// PDF Data Loading
|
|
// ============================================================================
|
|
|
|
/** Fetch PDF data (with caching) */
|
|
export async function loadPdfData(entry: PdfEntry): Promise<Uint8Array> {
|
|
const cached = pdfCache.get(entry.url);
|
|
if (cached) return cached;
|
|
|
|
console.error(`[loader] Fetching: ${entry.url}`);
|
|
|
|
let data: Uint8Array;
|
|
if (isFileUrl(entry.url)) {
|
|
const filePath = entry.url.replace("file://", "");
|
|
data = new Uint8Array(await fs.readFile(filePath));
|
|
} else {
|
|
const response = await fetch(entry.url);
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch: ${response.status}`);
|
|
}
|
|
data = new Uint8Array(await response.arrayBuffer());
|
|
}
|
|
|
|
pdfCache.set(entry.url, data);
|
|
return data;
|
|
}
|
|
|
|
/** Try HTTP Range request for partial content */
|
|
async function fetchRange(
|
|
url: string,
|
|
start: number,
|
|
end: number,
|
|
): Promise<{ data: Uint8Array; total: number } | null> {
|
|
try {
|
|
const res = await fetch(url, {
|
|
headers: { Range: `bytes=${start}-${end}` },
|
|
});
|
|
if (res.status !== 206) return null;
|
|
|
|
const total = parseInt(
|
|
res.headers.get("Content-Range")?.split("/")[1] || "0",
|
|
);
|
|
return { data: new Uint8Array(await res.arrayBuffer()), total };
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// ============================================================================
|
|
// Chunked Binary Loading (demonstrates size-limited responses)
|
|
// ============================================================================
|
|
|
|
export async function loadPdfBytesChunk(
|
|
entry: PdfEntry,
|
|
offset = 0,
|
|
byteCount = MAX_CHUNK_BYTES,
|
|
): Promise<PdfBytesChunk> {
|
|
// Try Range request first (streaming without full download)
|
|
if (!pdfCache.has(entry.url)) {
|
|
const range = await fetchRange(entry.url, offset, offset + byteCount - 1);
|
|
if (range) {
|
|
return {
|
|
url: entry.url,
|
|
bytes: Buffer.from(range.data).toString("base64"),
|
|
offset,
|
|
byteCount: range.data.length,
|
|
totalBytes: range.total,
|
|
hasMore: offset + range.data.length < range.total,
|
|
};
|
|
}
|
|
}
|
|
|
|
// Fallback: load full PDF and slice
|
|
const data = await loadPdfData(entry);
|
|
const chunk = data.slice(offset, offset + byteCount);
|
|
|
|
return {
|
|
url: entry.url,
|
|
bytes: Buffer.from(chunk).toString("base64"),
|
|
offset,
|
|
byteCount: chunk.length,
|
|
totalBytes: data.length,
|
|
hasMore: offset + chunk.length < data.length,
|
|
};
|
|
}
|
|
|
|
// ============================================================================
|
|
// Metadata Extraction
|
|
// ============================================================================
|
|
|
|
export async function populatePdfMetadata(entry: PdfEntry): Promise<void> {
|
|
try {
|
|
const lib = await getPdfjs();
|
|
const data = await loadPdfData(entry);
|
|
|
|
entry.metadata.fileSizeBytes = data.length;
|
|
|
|
const pdf = await lib.getDocument({ data: new Uint8Array(data) }).promise;
|
|
entry.metadata.pageCount = pdf.numPages;
|
|
|
|
const info = (await pdf.getMetadata()).info as
|
|
| Record<string, unknown>
|
|
| undefined;
|
|
if (info?.Title) entry.metadata.title = String(info.Title);
|
|
if (info?.Author) entry.metadata.author = String(info.Author);
|
|
|
|
await pdf.destroy();
|
|
} catch (err) {
|
|
console.error(`[loader] Metadata error: ${err}`);
|
|
}
|
|
}
|