> ## 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.

# Agents API

> Launch your first computer-use agent.

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 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 Architecture = () => {
  const stroke = {
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.75,
    strokeLinecap: "round",
    strokeLinejoin: "round"
  };
  const S = c => ({
    className: c,
    ...stroke
  });
  const icons = {
    user: c => <svg viewBox="0 0 24 24" {...S(c)}><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>,
    code: c => <svg viewBox="0 0 24 24" {...S(c)}><path d="m16 18 6-6-6-6" /><path d="m8 6-6 6 6 6" /></svg>,
    terminal: c => <svg viewBox="0 0 24 24" {...S(c)}><path d="m4 17 6-6-6-6M12 19h8" /></svg>,
    agent: c => <svg viewBox="0 0 24 24" {...S(c)}><path d="M12 8V4H8" /><rect width="16" height="12" x="4" y="8" rx="2" /><path d="M2 14h2M20 14h2M15 13v2M9 13v2" /></svg>,
    env: c => <svg viewBox="0 0 24 24" {...S(c)}><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></svg>,
    model: c => <svg viewBox="0 0 24 24" {...S(c)}><rect width="16" height="16" x="4" y="4" rx="2" /><rect width="6" height="6" x="9" y="9" rx="1" /><path d="M15 2v2M15 20v2M2 15h2M2 9h2M20 15h2M20 9h2M9 2v2M9 20v2" /></svg>,
    instructions: c => <svg viewBox="0 0 24 24" {...S(c)}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>,
    skills: c => <svg viewBox="0 0 24 24" {...S(c)}><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" /></svg>,
    subagents: c => <svg viewBox="0 0 24 24" {...S(c)}><circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98" /></svg>,
    cloud: c => <svg viewBox="0 0 24 24" {...S(c)}><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" /></svg>,
    browser: c => <svg viewBox="0 0 24 24" {...S(c)}><rect x="2" y="4" width="20" height="16" rx="2" /><path d="M2 8h20M6 4v4M10 4v4" /></svg>,
    desktop: c => <svg viewBox="0 0 24 24" {...S(c)}><rect width="20" height="14" x="2" y="3" rx="2" /><path d="M8 21h8M12 17v4" /></svg>,
    vault: c => <svg viewBox="0 0 24 24" {...S(c)}><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
  };
  const Card = ({icon, title, sub, children, className = ""}) => <div className={className}>
      <div className="flex h-full flex-col rounded-xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
        <div className="flex items-center gap-2.5">
          <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200">{icon("h-5 w-5")}</span>
          <div>
            <div className="whitespace-nowrap text-base font-semibold leading-6 text-zinc-900 dark:text-zinc-100">{title}</div>
            {sub && <div className="whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">{sub}</div>}
          </div>
        </div>
        {children}
      </div>
    </div>;
  const Row = ({k, label}) => <div className="flex items-center gap-3 whitespace-nowrap text-[15px] text-zinc-600 dark:text-zinc-400">
      <span className="flex shrink-0 text-zinc-400 dark:text-zinc-500">{icons[k]("h-4 w-4")}</span>
      <span>{label}</span>
    </div>;
  const Arrow = ({top, bottom, dir = "right"}) => <div className="flex flex-col items-stretch justify-center gap-1 px-3 text-center text-xs leading-4 text-zinc-500 dark:text-zinc-400">
      {top && <span className="whitespace-nowrap">{top}</span>}
      <div className={`${dir === "left" ? "flex flex-row-reverse items-center text-zinc-400 dark:text-zinc-600" : "flex items-center text-zinc-400 dark:text-zinc-600"}`}>
        <span className="h-px flex-1 bg-current" />
        <svg className="-ml-px h-3 w-2 shrink-0" viewBox="0 0 8 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={dir === "left" ? {
    transform: "scaleX(-1)",
    marginLeft: 0,
    marginRight: -1
  } : undefined}>
          <path d="M1 1.5 6 6l-5 4.5" />
        </svg>
      </div>
      {bottom && <span className="whitespace-nowrap">{bottom}</span>}
    </div>;
  return <div className="not-prose my-8 overflow-x-auto">
      <div className="flex min-w-[900px] items-stretch">
        <Card icon={icons.user} title="You" sub="define, launch, steer" className="shrink-0 self-center">
          <div className="mt-5 flex flex-col gap-2.5">
            <Row k="browser" label="Platform" />
            <Row k="code" label="SDK" />
            <Row k="terminal" label="CLI, MCP" />
          </div>
        </Card>

        <div className="flex w-[150px] shrink-0 flex-col justify-center gap-6">
          <Arrow top="task" />
          <Arrow bottom="progress, result" dir="left" />
        </div>

        <div className="flex-1 rounded-2xl border border-dashed border-zinc-300 p-5 dark:border-zinc-700">
          <div className="mb-4 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Session</div>

          <div className="flex items-stretch">
            <Card icon={icons.agent} title="Agent" sub="what to do" className="flex-1">
              <div className="mt-5 flex flex-col gap-2.5">
                <Row k="model" label="Holo model" />
                <Row k="instructions" label="Instructions" />
                <Row k="skills" label="Skills" />
                <Row k="subagents" label="Subagents" />
              </div>
            </Card>

            <div className="flex w-[150px] shrink-0 flex-col justify-center gap-6">
              <Arrow top="actions" />
              <Arrow bottom="observations" dir="left" />
            </div>

            <Card icon={icons.env} title="Environment" sub="where it acts" className="flex-1">
              <div className="mt-5 flex flex-col gap-2.5">
                <Row k="cloud" label="Cloud browser" />
                <Row k="browser" label="Your browser" />
                <Row k="desktop" label="Your desktop" />
                <Row k="vault" label="Vault for logins" />
              </div>
            </Card>
          </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 />;

A **computer-use agent** sees the screen and decides what to click, type, and scroll. Use it when the work lives behind a user interface with no API to call. The Agents API runs these agents for you: describe the work, and H provisions a browser or desktop, runs a [Holo](https://hcompany.ai/holo3.1)-powered agent that carries it out, and streams progress and the result back through a [session](/agents-api/sessions/overview) your app can watch, steer, and stop. Everything below is available two ways: from the [platform](https://platform.hcompany.ai/?product=computeruseagents\&source=docs) UI, where you build agents and launch sessions without writing code, and from the SDKs, CLI, and REST API.

<Architecture />

## Building blocks

| Concept                                          | What it is                                                                                                                                                               |
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [Agent](/agents-api/agents/overview)             | A reusable configuration: environments, skills, model, and instructions. Reference a [pre-built agent](/agents-api/agents/overview#pre-built-agents) or create your own. |
| [Environment](/agents-api/environments/overview) | The surface the agent sees and acts on: a browser (cloud or local) or a local desktop.                                                                                   |
| [Session](/agents-api/sessions/overview)         | A single run of an agent against a task, with a lifecycle you can steer.                                                                                                 |
| [Skill](/agents-api/skills/overview)             | An optional, reusable instruction fragment the agent loads on demand.                                                                                                    |

## See it in action

Ask for a specific vinyl on Amazon and the agent searches, opens the listing, and adds it to the cart, screenshot by screenshot.

<Frame>
  <YouTube id="JFdSHV0p0dE" title="Computer-use Agents: Add to Cart" />
</Frame>

## From idea to production

Follow the lifecycle or jump to what you need.

<Journey
  stages={[
["Get started", [
  ["Quickstart", "/agents-api/quickstart", "rocket"],
  ["Get API key", "https://platform.hcompany.ai/settings/api-keys?product=computeruseagents&source=docs", "key"],
  ["SDKs and CLI", "/agents-api/sdks", "code"],
  ["Pick a pre-built agent", "/agents-api/agents/overview#pre-built-agents", "robot"],
]],
["Build", [
  ["Configure the browser", "/agents-api/browser/configuration", "window-maximize"],
  ["Custom tools", "/agents-api/custom-tools", "wrench"],
  ["Structured output", "/agents-api/structured-output", "brackets-curly"],
  ["Subagents", "/agents-api/multi-agent", "sitemap"],
  ["Vaults and 2FA", "/agents-api/vaults/overview", "key"],
  ["Browser profiles", "/agents-api/browser/profiles", "user"],
]],
["Observe and integrate", [
  ["Watch and steer", "/agents-api/observe-and-steer", "display"],
  ["Drive your own browser", "/agents-api/browser/local-control", "laptop"],
  ["Control your own desktop", "/agents-api/desktop/local-control", "desktop"],
  ["Run agents over MCP", "/agents-api/mcp", "plug"],
  ["Coding assistants", "/agents-api/coding-skills", "code-branch"],
  ["n8n", "/agents-api/n8n", "share-nodes"],
]],
["Operate", [
  ["Webhooks", "/agents-api/webhooks/overview", "bell"],
  ["Schedules", "/agents-api/schedules/overview", "calendar"],
  ["Plans and limits", "/agents-api/plans-and-limits", "credit-card"],
  ["Errors", "/agents-api/errors", "triangle-exclamation"],
  ["Changelog", "/agents-api/changelog", "clock-rotate-left"],
]],
]}
/>

<Cta title="Try it without code" body="Build an agent, start a session, and watch it live from the platform. Same agents and sessions as the API, so anything you set up there works from your code too." primary={["Log in to the platform", "https://platform.hcompany.ai/?product=computeruseagents&source=docs"]} secondary={["Read the quickstart", "/agents-api/quickstart", "bolt"]} />