Browser Agent Guide

Browser Agent Integration Guide

FastAiZip /ai/image/compress is a browser page for Browser agents, not a traditional upload API. It is best suited to workflows that can open pages, execute JavaScript, and inspect DOM output.

Open Compression Page

Overview

What this page is really meant to solve

The goal of this page is not to present FastAiZip as a generic API platform. It is to explain that the current integration model is best suited to Browser agents. In practice that means the caller needs to open pages, execute JavaScript, wait for DOM state changes, and read structured output. If a workflow can do that, it can integrate browser-local compression without building a separate upload backend.

If a caller can only send HTTP requests and expects a conventional JSON response, this path is not the right match. Making that limitation explicit helps avoid the wrong implementation assumptions while speeding up integration for Browser agents that actually fit the page-driven model.

Recommended Flow

01
Open /ai/image/compress.
02
For a quick acceptance check, start with /ai/image/compress?sample=tiny-png&quality=80&output=webp.
03
For a more visual built-in demo, try /ai/image/compress?sample=tiny-emoji&quality=80&output=webp.
04
Use query for smaller images and URL hash for larger payloads to avoid request-length limits.
05
If needed, paste a data URL or raw base64 into the image field, then set quality and output.
06
Wait until data-ai-compress-status becomes done or error.
07
Read data-ai-compress-result-json or data-ai-compress-output once finished.

Copy-Ready Acceptance Snippet

After opening /ai/image/compress?sample=tiny-png&quality=80&output=webp, paste the snippet below into the browser console to get a pass/fail report.

(() => {
  const selectors = {
    status: "[data-ai-compress-status]",
    error: "[data-ai-compress-error]",
    sample: "[data-ai-compress-sample]",
    resultJson: "[data-ai-compress-result-json]",
    output: "[data-ai-compress-output]",
  };

  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
  const readText = (selector) => document.querySelector(selector)?.textContent?.trim() ?? "";
  const readValue = (selector) =>
    document.querySelector(selector) instanceof HTMLTextAreaElement
      ? document.querySelector(selector).value
      : "";
  const readStatus = () =>
    document.querySelector(selectors.status)?.getAttribute("data-ai-compress-status") ?? "";
  const readSample = () =>
    document.querySelector(selectors.sample)?.getAttribute("data-ai-compress-sample") ?? "none";

  async function run() {
    const startedAt = Date.now();
    let status = readStatus();

    while (status !== "done" && status !== "error" && Date.now() - startedAt < 20000) {
      await wait(250);
      status = readStatus();
    }

    const resultJson = readValue(selectors.resultJson);
    const output = readValue(selectors.output);
    const error = readText(selectors.error);
    const sample = readSample();

    let parsedResult = null;
    try {
      parsedResult = resultJson ? JSON.parse(resultJson) : null;
    } catch {
      parsedResult = null;
    }

    const report = {
      ok:
        status === "done" &&
        Boolean(resultJson) &&
        Boolean(output) &&
        output.startsWith("data:image/"),
      status,
      sample,
      hasResultJson: Boolean(resultJson),
      hasOutputDataUrl: Boolean(output),
      outputLooksLikeImageDataUrl: output.startsWith("data:image/"),
      savedPercent: parsedResult?.savedPercent ?? null,
      outputFormat: parsedResult?.outputFormat ?? null,
      error,
    };

    console.table(report);
    console.log("FastAiZip Browser agent acceptance report:", report);
    return report;
  }

  return run();
})();

Stable Selectors

Image Input

[data-ai-compress-image-input]

Quality Slider

[data-ai-compress-quality-input]

Output Format

[data-ai-compress-output-format-input]

MIME Input

[data-ai-compress-mime-input]

Filename Input

[data-ai-compress-filename-input]

Submit Button

[data-ai-compress-submit]

Status

[data-ai-compress-status]

Sample Source

[data-ai-compress-sample]

Error Text

[data-ai-compress-error]

Structured Result

[data-ai-compress-result-json]

Output Data URL

[data-ai-compress-output]

Protocol JSON

[data-ai-compress-agent-protocol-json]

What this page is really meant to solve

Recommended Flow

Open /ai/image/compress.

For a quick acceptance check, start with /ai/image/compress?sample=tiny-png&quality=80&output=webp.

For a more visual built-in demo, try /ai/image/compress?sample=tiny-emoji&quality=80&output=webp.

Use query for smaller images and URL hash for larger payloads to avoid request-length limits.

If needed, paste a data URL or raw base64 into the image field, then set quality and output.

Wait until data-ai-compress-status becomes done or error.

Read data-ai-compress-result-json or data-ai-compress-output once finished.

(() => { const selectors = { status: "[data-ai-compress-status]", error: "[data-ai-compress-error]", sample: "[data-ai-compress-sample]", resultJson: "[data-ai-compress-result-json]", output: "[data-ai-compress-output]", }; const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); const readText = (selector) => document.querySelector(selector)?.textContent?.trim() ?? ""; const readValue = (selector) => document.querySelector(selector) instanceof HTMLTextAreaElement ? document.querySelector(selector).value : ""; const readStatus = () => document.querySelector(selectors.status)?.getAttribute("data-ai-compress-status") ?? ""; const readSample = () => document.querySelector(selectors.sample)?.getAttribute("data-ai-compress-sample") ?? "none"; async function run() { const startedAt = Date.now(); let status = readStatus(); while (status !== "done" && status !== "error" && Date.now() - startedAt < 20000) { await wait(250); status = readStatus(); } const resultJson = readValue(selectors.resultJson); const output = readValue(selectors.output); const error = readText(selectors.error); const sample = readSample(); let parsedResult = null; try { parsedResult = resultJson ? JSON.parse(resultJson) : null; } catch { parsedResult = null; } const report = { ok: status === "done" && Boolean(resultJson) && Boolean(output) && output.startsWith("data:image/"), status, sample, hasResultJson: Boolean(resultJson), hasOutputDataUrl: Boolean(output), outputLooksLikeImageDataUrl: output.startsWith("data:image/"), savedPercent: parsedResult?.savedPercent ?? null, outputFormat: parsedResult?.outputFormat ?? null, error, }; console.table(report); console.log("FastAiZip Browser agent acceptance report:", report); return report; } return run(); })();