* 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.
250 lines
6.9 KiB
TypeScript
250 lines
6.9 KiB
TypeScript
/**
|
|
* PDF MCP Server - Didactic Example
|
|
*
|
|
* Demonstrates:
|
|
* - Chunked data through size-limited tool responses
|
|
* - Model context updates (current page text + selection)
|
|
* - Display modes: fullscreen with scrolling vs inline with resize
|
|
* - External link opening (openLink)
|
|
*/
|
|
import {
|
|
registerAppResource,
|
|
registerAppTool,
|
|
RESOURCE_MIME_TYPE,
|
|
} from "@modelcontextprotocol/ext-apps/server";
|
|
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
|
|
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
|
|
import type {
|
|
CallToolResult,
|
|
ReadResourceResult,
|
|
} from "@modelcontextprotocol/sdk/types.js";
|
|
import fs from "node:fs/promises";
|
|
import path from "node:path";
|
|
import { z } from "zod";
|
|
|
|
import {
|
|
buildPdfIndex,
|
|
findEntryByUrl,
|
|
createEntry,
|
|
isArxivUrl,
|
|
isFileUrl,
|
|
toFileUrl,
|
|
normalizeArxivUrl,
|
|
} from "./src/pdf-indexer.js";
|
|
import { loadPdfBytesChunk, populatePdfMetadata } from "./src/pdf-loader.js";
|
|
import {
|
|
ReadPdfBytesInputSchema,
|
|
PdfBytesChunkSchema,
|
|
type PdfIndex,
|
|
} from "./src/types.js";
|
|
import { startServer } from "./server-utils.js";
|
|
|
|
const DIST_DIR = path.join(import.meta.dirname, "dist");
|
|
const RESOURCE_URI = "ui://pdf-viewer/mcp-app.html";
|
|
const DEFAULT_PDF = "https://arxiv.org/pdf/1706.03762"; // Attention Is All You Need
|
|
|
|
let pdfIndex: PdfIndex | null = null;
|
|
|
|
export function createServer(): McpServer {
|
|
const server = new McpServer({ name: "PDF Server", version: "1.0.0" });
|
|
|
|
// Tool: list_pdfs
|
|
server.tool(
|
|
"list_pdfs",
|
|
"List indexed PDFs",
|
|
{},
|
|
async (): Promise<CallToolResult> => {
|
|
if (!pdfIndex) throw new Error("Not initialized");
|
|
return {
|
|
content: [
|
|
{ type: "text", text: JSON.stringify(pdfIndex.entries, null, 2) },
|
|
],
|
|
structuredContent: { entries: pdfIndex.entries },
|
|
};
|
|
},
|
|
);
|
|
|
|
// Tool: read_pdf_bytes (app-only) - Chunked binary loading
|
|
registerAppTool(
|
|
server,
|
|
"read_pdf_bytes",
|
|
{
|
|
title: "Read PDF Bytes",
|
|
description: "Load binary data in chunks",
|
|
inputSchema: ReadPdfBytesInputSchema.shape,
|
|
outputSchema: PdfBytesChunkSchema,
|
|
_meta: { ui: { visibility: ["app"] } },
|
|
},
|
|
async (args: unknown): Promise<CallToolResult> => {
|
|
if (!pdfIndex) throw new Error("Not initialized");
|
|
const {
|
|
url: rawUrl,
|
|
offset,
|
|
byteCount,
|
|
} = ReadPdfBytesInputSchema.parse(args);
|
|
const url = isArxivUrl(rawUrl) ? normalizeArxivUrl(rawUrl) : rawUrl;
|
|
let entry = findEntryByUrl(pdfIndex, url);
|
|
|
|
// Dynamically add arxiv URLs (handles server restart between display_pdf and read_pdf_bytes)
|
|
if (!entry) {
|
|
if (isFileUrl(url)) {
|
|
throw new Error("File URLs must be in the initial list");
|
|
}
|
|
if (!isArxivUrl(url)) {
|
|
throw new Error(`PDF not found: ${url}`);
|
|
}
|
|
entry = createEntry(url);
|
|
await populatePdfMetadata(entry);
|
|
pdfIndex.entries.push(entry);
|
|
}
|
|
|
|
const chunk = await loadPdfBytesChunk(entry, offset, byteCount);
|
|
return {
|
|
content: [
|
|
{
|
|
type: "text",
|
|
text: `${chunk.byteCount} bytes at ${chunk.offset}/${chunk.totalBytes}`,
|
|
},
|
|
],
|
|
structuredContent: chunk,
|
|
};
|
|
},
|
|
);
|
|
|
|
// Tool: display_pdf - Interactive viewer with UI
|
|
registerAppTool(
|
|
server,
|
|
"display_pdf",
|
|
{
|
|
title: "Display PDF",
|
|
description: `Display an interactive PDF viewer in the chat.
|
|
|
|
Use this tool when the user asks to view, display, read, or open a PDF. Accepts:
|
|
- URLs from list_pdfs (preloaded PDFs)
|
|
- Any arxiv.org URL (loaded dynamically)
|
|
|
|
The viewer supports zoom, navigation, text selection, and fullscreen mode.`,
|
|
inputSchema: {
|
|
url: z
|
|
.string()
|
|
.default(DEFAULT_PDF)
|
|
.describe("PDF URL (arxiv.org for dynamic loading)"),
|
|
page: z.number().min(1).default(1).describe("Initial page"),
|
|
},
|
|
outputSchema: z.object({
|
|
url: z.string(),
|
|
title: z.string().optional(),
|
|
pageCount: z.number(),
|
|
initialPage: z.number(),
|
|
}),
|
|
_meta: { ui: { resourceUri: RESOURCE_URI } },
|
|
},
|
|
async ({ url: rawUrl, page }): Promise<CallToolResult> => {
|
|
if (!pdfIndex) throw new Error("Not initialized");
|
|
|
|
// Normalize arxiv URLs to PDF format
|
|
const url = isArxivUrl(rawUrl) ? normalizeArxivUrl(rawUrl) : rawUrl;
|
|
|
|
let entry = findEntryByUrl(pdfIndex, url);
|
|
|
|
if (!entry) {
|
|
if (isFileUrl(url)) {
|
|
throw new Error("File URLs must be in the initial list");
|
|
}
|
|
if (!isArxivUrl(url)) {
|
|
throw new Error(`Only arxiv.org URLs can be loaded dynamically`);
|
|
}
|
|
|
|
entry = createEntry(url);
|
|
await populatePdfMetadata(entry);
|
|
pdfIndex.entries.push(entry);
|
|
}
|
|
|
|
const result = {
|
|
url: entry.url,
|
|
title: entry.metadata.title,
|
|
pageCount: entry.metadata.pageCount,
|
|
initialPage: Math.min(page, entry.metadata.pageCount),
|
|
};
|
|
|
|
return {
|
|
content: [
|
|
{
|
|
type: "text",
|
|
text: `Displaying interactive PDF viewer${entry.metadata.title ? ` for "${entry.metadata.title}"` : ""} (${entry.url}, ${entry.metadata.pageCount} pages)`,
|
|
},
|
|
],
|
|
structuredContent: result,
|
|
};
|
|
},
|
|
);
|
|
|
|
// Resource: UI HTML
|
|
registerAppResource(
|
|
server,
|
|
RESOURCE_URI,
|
|
RESOURCE_URI,
|
|
{ mimeType: RESOURCE_MIME_TYPE },
|
|
async (): Promise<ReadResourceResult> => {
|
|
const html = await fs.readFile(
|
|
path.join(DIST_DIR, "mcp-app.html"),
|
|
"utf-8",
|
|
);
|
|
return {
|
|
contents: [
|
|
{ uri: RESOURCE_URI, mimeType: RESOURCE_MIME_TYPE, text: html },
|
|
],
|
|
};
|
|
},
|
|
);
|
|
|
|
return server;
|
|
}
|
|
|
|
// CLI
|
|
function parseArgs(): { urls: string[]; stdio: boolean } {
|
|
const args = process.argv.slice(2);
|
|
const urls: string[] = [];
|
|
let stdio = false;
|
|
|
|
for (const arg of args) {
|
|
if (arg === "--stdio") {
|
|
stdio = true;
|
|
} else if (!arg.startsWith("-")) {
|
|
// Convert local paths to file:// URLs, normalize arxiv URLs
|
|
let url = arg;
|
|
if (
|
|
!arg.startsWith("http://") &&
|
|
!arg.startsWith("https://") &&
|
|
!arg.startsWith("file://")
|
|
) {
|
|
url = toFileUrl(arg);
|
|
} else if (isArxivUrl(arg)) {
|
|
url = normalizeArxivUrl(arg);
|
|
}
|
|
urls.push(url);
|
|
}
|
|
}
|
|
|
|
return { urls: urls.length > 0 ? urls : [DEFAULT_PDF], stdio };
|
|
}
|
|
|
|
async function main() {
|
|
const { urls, stdio } = parseArgs();
|
|
|
|
console.error(`[pdf-server] Initializing with ${urls.length} PDF(s)...`);
|
|
pdfIndex = await buildPdfIndex(urls);
|
|
console.error(`[pdf-server] Ready`);
|
|
|
|
if (stdio) {
|
|
await createServer().connect(new StdioServerTransport());
|
|
} else {
|
|
const port = parseInt(process.env.PORT ?? "3001", 10);
|
|
await startServer(createServer, { port, name: "PDF Server" });
|
|
}
|
|
}
|
|
|
|
main().catch((e) => {
|
|
console.error(e);
|
|
process.exit(1);
|
|
});
|