Skip to content

Conversation

@semikolon
Copy link

Summary

Adds token optimization features inspired by fast-playwright-mcp, addressing concerns raised in #340, #726, and #716.

Changes

Snapshot optimization

Screenshot optimization

  • maxWidth/maxHeight parameters - resizes images maintaining aspect ratio
  • Uses sharp library for image processing

Files changed

  • src/tools/snapshot.ts - added maxLength, selector params
  • src/tools/screenshot.ts - added maxWidth, maxHeight params
  • src/utils/image-processor.ts - new image processing utility
  • src/McpResponse.ts - selector filtering logic
  • src/tools/ToolDefinition.ts - extended SnapshotParams

Token savings

These features allow agents to dramatically reduce context usage on large pages by:

  • Truncating verbose snapshots to a max length
  • Focusing on specific page sections via CSS selector
  • Compressing screenshots before base64 encoding

semikolon and others added 3 commits January 25, 2026 23:51
Inspired by fast-playwright-mcp, this adds foundation for token-efficient
responses:

- Add expectation.ts with schema for controlling response content
  - includeSnapshot, includeConsole, includeNetwork, includeTabs
  - snapshotOptions (selector, maxLength, verbose)
  - imageOptions (quality, maxWidth, maxHeight, format)
  - Tool-specific defaults for optimal token usage

- Add maxLength truncation to SnapshotFormatter
  - Truncates snapshot output with notice when limit exceeded
  - Useful for token efficiency on large pages

- Expose maxLength parameter in take_snapshot tool
  - Users can now limit snapshot size directly

This is Phase 1 of token optimization - the infrastructure layer.
Future phases can integrate the expectation schema into tool handlers
and add image processing utilities.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Document the fork's token optimization features:
- Snapshot truncation via maxLength parameter
- Future enhancement infrastructure (expectation schema)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ation

Phase 2 of token optimization implementation:

Snapshot CSS selector filtering:
- Added `selector` parameter to take_snapshot tool
- Filters snapshot to only include subtree matching CSS selector
- Uses CDP DOM.describeNode to map elements to accessibility nodes
- Falls back to full snapshot with warning if selector doesn't match

Screenshot image resizing:
- Added `maxWidth` and `maxHeight` parameters to take_screenshot
- Images resized maintaining aspect ratio using sharp library
- Logs compression ratio when resizing occurs
- Added sharp as production dependency

Code changes:
- src/utils/image-processor.ts: New utility for image processing
- src/McpResponse.ts: Added #filterSnapshotBySelector private method
- src/tools/screenshot.ts: Integrated image resizing
- src/tools/snapshot.ts: Added selector parameter
- src/tools/ToolDefinition.ts: Extended SnapshotParams with selector

Documentation:
- Updated README with full token optimization documentation
- Added parameter reference table for all optimization options

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@google-cla
Copy link

google-cla bot commented Jan 25, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

semikolon added a commit to semikolon/blobulator that referenced this pull request Jan 25, 2026
- Added "Browser MCP Selection" section with fork recommendation
- Updated comparison table to include CDT Fork column
- Removed outdated "Both: Doesn't exist yet" - it now exists!
- Removed redundant Playwright GPU config (use --autoConnect instead)
- Updated fast-playwright-mcp section to reference the fork

Fork: https://github.com/semikolon/chrome-devtools-mcp
PR: ChromeDevTools/chrome-devtools-mcp#833

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
semikolon and others added 2 commits January 26, 2026 00:30
- Add maxLength truncation tests to snapshotFormatter.test.ts
- Add new image-processor.test.ts with tests for resize and format conversion
- Use sharp to generate valid test images (more reliable than manual PNG bytes)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- maxWidth, maxHeight for take_screenshot
- maxLength, selector for take_snapshot
- Format fixes from prettier

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant