TABLE OF CONTENTS

DOCUMENTATION

How this.poc.rocks works.

One-pager covering every tool on the site, the MCP server, and how to self-host. Jump around using the table of contents.

Overview

this.poc.rocks is a playground of twenty browser-based tools for creators and developers. Drop a file in, get a file out. No accounts, no uploads, no server-side storage. Most compute happens in your tab via WASM and canvas.

The project exists in three shapes:

WEB APP
Each tool is a Next.js route you can use directly. Works offline after first load.
MCP SERVER
Six tools (convert-image, convert-md-to-pdf, convert-html-to-md, favicon, pdf-split, pdf-combine) are exposed via Model Context Protocol for AI agents.
REST API
The same six tools respond to plain HTTP POSTs if you do not want the MCP overhead.

Go to market

Interactive apps for launch content: mockups, demos, social assets. These live in the browser because they rely on direct manipulation and rich canvases.

Drop a screenshot or image, pick a device frame (phone, laptop, tablet, desktop), and MockUp renders a hero-ready mockup you can download as PNG. Tweak background, shadow, and padding in real-time; all compositing happens on canvas so nothing leaves the browser.

Record your screen in the browser, then edit inline: trim, crop, zoom into moments, and drop click ripple effects on top of cursor events. FFmpeg WASM handles the re-encode client-side so the final MP4 stays private.

Gotcha: First load fetches the 32MB ffmpeg-core.wasm; subsequent visits use the browser cache.

Paste a URL or upload a screenshot and Showcase composes a polished product image with browser chrome, gradient backdrop, and reflection. Good for landing pages, Product Hunt launches, and social cards where you need a single hero image fast.

Upload one image and ReFrame exports it in every standard social aspect ratio (1:1 Instagram, 9:16 Stories, 16:9 YouTube, 4:5 feed, and more), smart-cropped so the subject stays centered. Export as a ZIP.

Feed Semantix a topic and it generates a cluster of SEO-ready long-tail pages with internal linking. Pick a tone, a target audience, and let it brainstorm ideas before committing to full drafts.

Converters

One file in, one file out. These are the tools that also ship as MCP endpoints. An AI agent can call them the same way you drop a file into the browser UI.

Images

One tool for PNG ↔ JPEG ↔ WebP ↔ SVG in any direction. Raster → raster re-encodes via browser canvas with optional resize and quality. Raster → SVG uses ImageTracer with posterize / color / mono modes. SVG → raster rasterizes at any size with optional background. The from/to dropdowns on the page show only supported pairs. Accepts URL params like /convert-image?from=png&to=svg for direct linking.

One source image (square, ideally 512×512+) becomes a full favicon bundle: favicon.ico, 16/32/apple-touch/PWA sizes, site.webmanifest, browserconfig.xml, and a ready-to-paste <head> snippet. Download as ZIP and drop into /public.

Upscale and sharpen images 2×, 3×, or 4× in the browser. Good for rescuing under-sized assets before print or before sending them into a banner template.

Videos

Drop an MP4, MOV or MKV and convert between the three containers. Default path is a fast remux (seconds, lossless) that just swaps the container when the codecs match the target. Falls back to a full H.264 + AAC re-encode when they don't. FFmpeg WASM runs in your browser — the file never uploads.

Upload an MP4 or WebM and extract every frame as a PNG, packaged as a ZIP. Useful for storyboarding, picking thumbnails, or feeding frames into a separate ML pipeline.

Documents

Paste or drop a markdown file. Mermaid code blocks render as live diagrams via headless Chrome, then the whole document becomes a printable A4 PDF. Tables, blockquotes, inline code, and all GFM extensions are supported.

Paste HTML or drop an .html file. Pick heading style (ATX or Setext), bullet marker, code block fencing, then convert to Markdown with live preview. Useful when scraping blog posts, cleaning exports from Notion/Google Docs, or converting release notes.

Drop a PDF. The page grid lets you pick pages individually or by range (`1-3, 5, 8-10`). Choose 'one page per PDF' for a ZIP of singletons, or 'one PDF of selected pages' to extract a continuous subset. Everything runs in your browser. No server touches the file.

Drop multiple PDFs. Reorder them by dragging or using the up/down arrows, remove any you don't want, then combine into a single PDF. First-page thumbnails help you confirm the order before merging.

Drop a PDF, pick pages and DPI (72 to 600), optionally enable transparent background. Download as a ZIP of PNGs or individually. 600 DPI at 50+ pages can be heavy; the UI warns before you commit.

Drop a PDF and get Markdown with best-effort heading, list, and paragraph inference based on font-size heuristics. Split view shows raw MD on one side and rendered preview on the other. Complex layouts (multi-column, tables, figures) don't convert cleanly; the warning at the top is honest about that.

Drop a PDF, get an editable .docx. Font-size heuristics detect headings; everything else becomes body paragraphs. Images, tables, and complex layouts don't transfer. Think of this as 'text rescue' for re-editing, not a high-fidelity conversion.

Graphics pipeline

A three-stage pipeline for building motion graphics: optimize assets, stage the scene, compile to animation layers.

SVG optimizer with quality presets. Drop a messy SVG (from Figma, Illustrator, or a random download) and SaVaGE strips metadata, rounds paths, and collapses groups with an SVGO pipeline tuned for web delivery.

Stage pre-animation artwork: position atoms (text, counters, bullets, badges, progress bars) on a canvas, time them on a 0–1 scale, and preview. Exports a configuration that ANIM8 can render.

Takes a PreANIM8 config and produces a motion layer: compiled atoms and molecules rendered into an AnimationLayer[] you can drop into CenterStage or export on its own.

MCP Integration

Six tools: convert-image, convert-md-to-pdf, convert-html-to-md, favicon, pdf-split, pdf-combine. They are served by a Cloudflare Worker mounted at this.poc.rocks/api/*. Use them from Claude Code, from a custom Node agent, or from plain curl.

Register with Claude Code

Drop this into your project's .mcp.json:

{
  "mcpServers": {
    "thispocrocks": {
      "type": "http",
      "url": "https://this.poc.rocks/api/mcp"
    }
  }
}

Restart Claude Code. A prompt like “convert logo.png to SVG” will route to the MCP automatically.

REST API

Every MCP tool also has a REST mirror for scripts that do not speak JSON-RPC:

curl -X POST https://this.poc.rocks/api/convert-md-to-pdf \
  -H "Content-Type: application/json" \
  -d '{"markdown":"# Hello\n\nWorld"}' \
  --output out.pdf

JSON-RPC

For custom agents, speak MCP directly over HTTP. The transport is stateless Streamable HTTP.

fetch("https://this.poc.rocks/api/mcp", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    jsonrpc: "2.0",
    id: 1,
    method: "tools/call",
    params: {
      name: "convert",
      arguments: { imageUrl: "https://example.com/logo.png" }
    }
  })
})

For the full MCP landing page with live status and tool list, see /mcp.

Architecture

  • Static export. Next.js App Router with output: 'export'. No server runtime. Every route ships as HTML + client JS.
  • Cloudflare Pages. The static bundle is served from Pages with wrangler pages deploy.
  • MCP on Workers. The MCP server is a separate Worker using Browser Rendering (headless Chrome for md2pdf's mermaid diagrams) and R2 for artifact storage.
  • Mermaid WASM on R2. Mermaid dependencies are hosted on R2 with COEP/CORP headers, so the renderer loads them with SharedArrayBuffer available.
  • FFmpeg WASM. CenterStage uses @ffmpeg/ffmpeg + a self-contained worker under /ffmpeg/. The service worker skips that path so COEP headers survive.

Self-host

The repo is a pnpm workspace. Clone, install, build, deploy:

git clone https://github.com/dennisfurrer/sharpgen this-poc-rocks
cd this-poc-rocks
pnpm install
pnpm build
wrangler pages deploy ./out --project-name your-project

For local development: pnpm dev. To type-check before deploy: pnpm exec tsc --noEmit. The MCP Worker lives in a separate package under tools/utils-worker/ with its own wrangler.toml.