> ## Documentation Index
> Fetch the complete documentation index at: https://hub.hcompany.ai/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> H Platform has four products: the Agents API (managed computer-use agents, base URL https://agp.eu.hcompany.ai/api/v2 or https://agp.hcompany.ai/api/v2 for the US), the Models API (OpenAI-compatible Holo vision-language models at https://api.hcompany.ai/v1), HoloDesktop CLI (Holo on the user's own desktop), and HoloTab (a free no-code Chrome extension that runs Holo in the user's browser, with recordable routines and schedules).
> Authenticate with a bearer API key from the HAI_API_KEY environment variable. SDKs: `pip install hai-agents` (Python, `from hai_agents import Client`) and `npm install hai-agents` (TypeScript, `import { HaiAgentsClient } from "hai-agents"`). CLI: `hai`.
> Agents do work in a browser or on a desktop; describe the task as an imperative instruction. To run a task quickly, prefer the pre-built agent `h/web-surfer-flash`. Read results from the session's `latest_answer` after it reaches a terminal status.
> Sessions are the unit of work; wait for a terminal status (completed, failed, timed_out, interrupted) before reading the answer. Use webhooks or the `changes` long-poll endpoint to follow progress.

# HoloTab

> HoloTab is a free Chrome extension that runs Holo in your browser. Describe a task in the side panel, watch it navigate and act, then record routines and put them on a schedule.

export const Cta = ({title, body, primary, secondary}) => <div className="not-prose mt-20 flex flex-col items-center rounded-xl border border-zinc-200 bg-white px-6 py-14 text-center dark:border-zinc-800 dark:bg-zinc-950">
    <h2 className="text-3xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">{title}</h2>
    <p className="mt-3 max-w-xl text-lg leading-7 text-zinc-600 dark:text-zinc-400">{body}</p>
    <div className="mt-8 flex flex-wrap justify-center gap-3">
      <a href={primary[1]} className="cta-primary inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-5 py-3 text-base font-semibold text-white no-underline dark:bg-white dark:text-zinc-900">
        {primary[0]}
        <Icon icon="arrow-right" size={16} color="currentColor" />
      </a>
      {secondary && <a href={secondary[1]} className="outlined card inline-flex items-center gap-3 rounded-lg bg-white p-3 text-base font-medium text-zinc-800 no-underline dark:bg-zinc-900 dark:text-zinc-100">
          <Icon icon={secondary[2]} size={16} color="currentColor" />
          {secondary[0]}
        </a>}
    </div>
  </div>;

export const HolotabFlow = () => {
  const steps = [{
    icon: "download",
    title: "Install",
    you: "Add it from the Chrome Web Store, pin it, sign in.",
    holo: "Opens as a side panel next to any tab."
  }, {
    icon: "play",
    title: "Run a task",
    you: "Type or speak what you want.",
    holo: "Navigates, fills forms, sends messages, and shows its reasoning step by step."
  }, {
    icon: "repeat",
    title: "Put it on autopilot",
    you: "Record a routine once, then schedule it.",
    holo: "Re-runs it daily, weekly, or monthly while Chrome is open."
  }];
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
      {steps.map((s, i) => <div key={s.title} className={`${i > 0 ? "grid gap-4 border-t border-zinc-200 p-5 md:grid-cols-12 dark:border-zinc-800" : "grid gap-4 p-5 md:grid-cols-12"}`}>
          <div className="flex items-center gap-3 md:col-span-4">
            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900">
              <Icon icon={s.icon} size={16} color="currentColor" />
            </span>
            <div>
              <div className="text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">Step {i + 1}</div>
              <div className="text-base font-semibold leading-5 text-zinc-900 dark:text-zinc-100">{s.title}</div>
            </div>
          </div>
          <div className="md:col-span-3">
            <div className="text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">You</div>
            <div className="mt-1 text-sm leading-6 text-zinc-800 dark:text-zinc-200">{s.you}</div>
          </div>
          <div className="md:col-span-5">
            <div className="text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">HoloTab</div>
            <div className="mt-1 text-sm leading-6 text-zinc-600 dark:text-zinc-400">{s.holo}</div>
          </div>
        </div>)}
    </div>;
};

export const Journey = ({stages}) => <div className="not-prose mt-6">
    {stages.map(([title, links, blurb], i) => <div key={title} className="relative flex gap-5 pb-8 last:pb-0">
        {i < stages.length - 1 && <div className="absolute w-px bg-zinc-200 dark:bg-zinc-800" style={{
  left: 15,
  top: 32,
  bottom: 0
}} />}
        <div className="relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-zinc-300 bg-white text-sm font-semibold text-zinc-700 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200">
          {i + 1}
        </div>
        <div className="min-w-0 flex-1">
          <div className="pt-1 text-lg font-semibold text-zinc-900 dark:text-zinc-100">{title}</div>
          {blurb && <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{blurb}</p>}
          <div className="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {links.map(([label, href, icon]) => <a key={href} href={href} className="outlined card flex items-center gap-3 rounded-lg bg-white px-4 py-3 text-sm font-medium text-zinc-800 no-underline dark:bg-zinc-950 dark:text-zinc-200">
                <Icon icon={icon} size={15} color="currentColor" />
                {label}
              </a>)}
          </div>
        </div>
      </div>)}
  </div>;

export const YouTube = ({id, title}) => <iframe className="aspect-video w-full rounded-xl border-0" src={`https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1`} title={title} loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen />;

<Frame>
  <YouTube id="kSi9JS2l0Ww" title="HoloTab. Let your browser do the work." />
</Frame>

HoloTab lives in a Chrome side panel. It takes a screenshot of the active tab, decides the next click or keystroke, and does it, the same way you would. No API integrations, no setup, no code.

## How it works

<HolotabFlow />

## What people use it for

<CardGroup cols={2}>
  <Card title="Inbox manager" icon="envelope">
    Summarize unread emails and draft replies in your tone for approval.
  </Card>

  <Card title="Restaurant concierge" icon="utensils">
    Find a table, book it, and add the details to your calendar and WhatsApp.
  </Card>

  <Card title="Travel planner" icon="plane">
    Compare flights and hotels and build a day-by-day itinerary within budget.
  </Card>

  <Card title="Marketplace reseller" icon="tag">
    Research prices and draft listings for your items on eBay and Vinted.
  </Card>
</CardGroup>

## Start here

<Journey
  stages={[
["Get started", [
  ["Quickstart", "/holotab/quickstart", "rocket"],
  ["Write good prompts", "/holotab/quickstart#write-good-prompts", "pen"],
], "Install, run a first task, and learn what a good prompt looks like."],
["Automate", [
  ["Routines", "/holotab/routines-and-schedules#routines", "repeat"],
  ["Schedules", "/holotab/routines-and-schedules#schedules", "calendar"],
  ["Voice input", "/holotab/routines-and-schedules#voice-input", "microphone"],
], "Show HoloTab a task once, then let it run on its own."],
["Stay in control", [
  ["Autonomy modes", "/holotab/autonomy-and-safety#autonomy-modes", "sliders"],
  ["What HoloTab can see", "/holotab/autonomy-and-safety#what-holotab-sees-and-sends", "eye"],
  ["Prompt injection", "/holotab/autonomy-and-safety#prompt-injection", "shield-halved"],
]],
]}
/>

## FAQ

<AccordionGroup>
  <Accordion title="Is HoloTab free?">
    Yes. Install it from the [Chrome Web Store](https://chromewebstore.google.com/detail/holotab/hlaoiikljjgcjdhkakedfngifaopbcop) and sign in. HoloTab is a public research preview.
  </Accordion>

  <Accordion title="How is HoloTab different from AI browsers like Comet, or from OpenClaw?">
    HoloTab is an extension inside the Chrome you already use; Comet is a separate Chromium browser, and OpenClaw is a self-hosted assistant stack. HoloTab focuses on getting tasks done and repeating them: click, type, navigate, record routines, schedule them, with no site APIs and nothing to host.
  </Accordion>

  <Accordion title="Can I use the model behind HoloTab in my own product?">
    Yes. HoloTab runs on Holo3 and Holo3.1. The same models are available through the [Models API](/models-api/introduction), and the open-weight sizes run locally with [HoloDesktop CLI](/holo-desktop-cli/introduction).
  </Accordion>
</AccordionGroup>

Still stuck? Write to [support@hcompany.ai](mailto:support@hcompany.ai).

<Cta title="Try HoloTab" body="Free on the Chrome Web Store. Install, sign in, and run your first task in under five minutes." primary={["Add to Chrome", "https://chromewebstore.google.com/detail/holotab/hlaoiikljjgcjdhkakedfngifaopbcop"]} secondary={["Read the quickstart", "/holotab/quickstart", "rocket"]} />