Skyvern/docs/index.mdx

---
title: Skyvern Documentation
description: Skyvern is an AI-powered browser automation platform. Describe tasks in plain English and Skyvern opens a real browser, reads the page visually, and completes the task using tasks, workflows, and the API or SDK.
slug: /
mode: custom
---

<div className="sk-page">

{/* ===== HERO ===== */}

<div className="sk-hero">
  <div className="sk-hero-inner">
    <div className="sk-hero-left">
      <div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "12px" }}>
        <p className="sk-mono sk-label" style={{ margin: "0" }}>DOCUMENTATION</p>
        <a href="/docs/changelog" className="sk-version-badge">v1.0.22 — latest</a>
      </div>
      <h1 className="sk-hero-title">
        Automate any<br />browser workflow<br /><span className="sk-hero-accent">with AI.</span>
      </h1>
      <p className="sk-hero-sub">
        Describe what you want in plain English. Skyvern opens a real browser, reads the page visually, and completes the task.
      </p>
      <div className="sk-hero-actions">
        <a href="/docs/getting-started/quickstart" className="sk-btn-primary">Get started with the API →</a>
        <a href="/docs/cloud/getting-started/overview" className="sk-btn-secondary">Use the dashboard</a>
      </div>
    </div>
    <div className="sk-hero-right">
      <div className="sk-terminal">
        <div className="sk-terminal-bar">
          <span className="sk-dot sk-dot-red"></span>
          <span className="sk-dot sk-dot-yellow"></span>
          <span className="sk-dot sk-dot-green"></span>
          <span className="sk-terminal-title">skyvern.log</span>
        </div>
        <div className="sk-terminal-body">
          <p className="sk-mono">> Initializing browser session...</p>
          <p className="sk-mono sk-t-teal">> Navigating to target URL... [OK]</p>
          <p className="sk-mono sk-t-teal">> Analyzing page with vision... [OK]</p>
          <p className="sk-mono">> Planning actions...</p>
          <p className="sk-mono sk-t-orange">→ ACTIONS_PLANNED: 4</p>
          <p className="sk-mono">> Executing: fill_form</p>
          <p className="sk-mono">> Executing: click_submit</p>
          <p className="sk-mono sk-t-teal">> Task completed successfully</p>
          <p className="sk-mono sk-t-muted">→ DURATION: 3.2s</p>
          <p className="sk-mono">> READY<span className="sk-cursor">▊</span></p>
        </div>
      </div>
    </div>
  </div>
</div>

{/* ===== BENTO GRID — 3 PERSONA LANES ===== */}

<div className="sk-bento-row sk-bento-3col">
  <div className="sk-bento-cell">
    <p className="sk-mono sk-label">01 — NO CODE</p>
    <h3 className="sk-cell-title">Automate without code</h3>
    <p className="sk-cell-desc">Use the dashboard to run tasks and build workflows visually.</p>
    <div className="sk-cell-links">
      <a href="/docs/cloud/getting-started/overview" className="sk-cell-link">Dashboard overview <span className="sk-arrow">↗</span></a>
      <a href="/docs/cloud/getting-started/run-your-first-task" className="sk-cell-link">Run your first task <span className="sk-arrow">↗</span></a>
      <a href="/docs/cloud/building-workflows/build-a-workflow" className="sk-cell-link">Build a workflow <span className="sk-arrow">↗</span></a>
      <a href="/docs/integrations/zapier" className="sk-cell-link">Connect to Zapier <span className="sk-arrow">↗</span></a>
    </div>
  </div>
  <div className="sk-bento-cell">
    <p className="sk-mono sk-label">02 — API</p>
    <h3 className="sk-cell-title">Build with the API</h3>
    <p className="sk-cell-desc">Integrate browser automation into your product with Python, TypeScript, or REST.</p>
    <div className="sk-cell-links">
      <a href="/docs/getting-started/quickstart" className="sk-cell-link">API quickstart <span className="sk-arrow">↗</span></a>
      <a href="/docs/sdk-reference/overview" className="sk-cell-link">Python SDK <span className="sk-arrow">↗</span></a>
      <a href="/docs/ts-sdk-reference/overview" className="sk-cell-link">TypeScript SDK <span className="sk-arrow">↗</span></a>
      <a href="/docs/api-reference" className="sk-cell-link">API reference <span className="sk-arrow">↗</span></a>
    </div>
  </div>
  <div className="sk-bento-cell">
    <p className="sk-mono sk-label">03 — SELF-HOST</p>
    <h3 className="sk-cell-title">Self-host</h3>
    <p className="sk-cell-desc">Run Skyvern on your own infrastructure with your own LLM keys.</p>
    <div className="sk-cell-links">
      <a href="/docs/self-hosted/overview" className="sk-cell-link">Deployment overview <span className="sk-arrow">↗</span></a>
      <a href="/docs/self-hosted/docker" className="sk-cell-link">Docker setup <span className="sk-arrow">↗</span></a>
      <a href="/docs/self-hosted/llm-configuration" className="sk-cell-link">LLM configuration <span className="sk-arrow">↗</span></a>
      <a href="/docs/self-hosted/kubernetes" className="sk-cell-link">Kubernetes <span className="sk-arrow">↗</span></a>
    </div>
  </div>
</div>

{/* ===== BENTO GRID — 2 COL: HOW IT WORKS + CONCEPTS ===== */}

<div className="sk-bento-row sk-bento-2col">
  <a href="/docs/getting-started/introduction" className="sk-bento-cell sk-bento-cell-link">
    <p className="sk-mono sk-label">ARCHITECTURE</p>
    <h3 className="sk-cell-title">How Skyvern works</h3>
    <p className="sk-cell-desc">The agent loop, Planner-Agent-Validator architecture, and what happens under the hood when you run a task.</p>
    <span className="sk-mono sk-arrow-lg">↗</span>
  </a>
  <a href="/docs/getting-started/core-concepts" className="sk-bento-cell sk-bento-cell-link">
    <p className="sk-mono sk-label">REFERENCE</p>
    <h3 className="sk-cell-title">Core concepts</h3>
    <p className="sk-cell-desc">Tasks, workflows, blocks, runs, credentials, browser sessions, and engines.</p>
    <span className="sk-mono sk-arrow-lg">↗</span>
  </a>
</div>

{/* ===== BENTO GRID — 4 COL: USE CASES ===== */}

<p className="sk-mono sk-label" style={{ marginBottom: "24px", marginTop: "32px" }}>USE CASES</p>

<div className="sk-bento-row sk-bento-4col">
  <a href="/docs/cookbooks/bulk-invoice-downloader" className="sk-bento-cell sk-bento-cell-link sk-bento-cell-sm sk-usecase-teal">
    <span className="sk-usecase-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><polyline points="9 15 12 18 15 15"/></svg>
    </span>
    <h4 className="sk-cell-title-sm">Download invoices</h4>
    <p className="sk-cell-desc-sm">Log into vendor portals, find invoices, download PDFs.</p>
    <span className="sk-mono sk-arrow-sm">↗</span>
  </a>
  <a href="/docs/cookbooks/job-application-filler" className="sk-bento-cell sk-bento-cell-link sk-bento-cell-sm sk-usecase-orange">
    <span className="sk-usecase-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
    </span>
    <h4 className="sk-cell-title-sm">Fill forms at scale</h4>
    <p className="sk-cell-desc-sm">Submit applications, registrations, and compliance forms.</p>
    <span className="sk-mono sk-arrow-sm">↗</span>
  </a>
  <a href="/docs/running-automations/extract-structured-data" className="sk-bento-cell sk-bento-cell-link sk-bento-cell-sm sk-usecase-teal">
    <span className="sk-usecase-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
    </span>
    <h4 className="sk-cell-title-sm">Extract data</h4>
    <p className="sk-cell-desc-sm">Pull structured data from any site without an API.</p>
    <span className="sk-mono sk-arrow-sm">↗</span>
  </a>
  <a href="/docs/cookbooks/healthcare-portal-data" className="sk-bento-cell sk-bento-cell-link sk-bento-cell-sm sk-usecase-orange">
    <span className="sk-usecase-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
    </span>
    <h4 className="sk-cell-title-sm">Healthcare portals</h4>
    <p className="sk-cell-desc-sm">Extract patient demographics and billing from EHR portals.</p>
    <span className="sk-mono sk-arrow-sm">↗</span>
  </a>
</div>

<div className="sk-bento-row sk-bento-4col">
  <a href="/docs/multi-step-automations/build-a-workflow" className="sk-bento-cell sk-bento-cell-link sk-bento-cell-sm sk-usecase-orange">
    <span className="sk-usecase-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
    </span>
    <h4 className="sk-cell-title-sm">E-commerce purchasing</h4>
    <p className="sk-cell-desc-sm">Search products, add to cart, and complete purchases on any store.</p>
    <span className="sk-mono sk-arrow-sm">↗</span>
  </a>
  <a href="/docs/running-automations/run-a-task" className="sk-bento-cell sk-bento-cell-link sk-bento-cell-sm sk-usecase-teal">
    <span className="sk-usecase-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/><path d="M9 9h1"/><path d="M9 13h1"/><path d="M9 17h1"/></svg>
    </span>
    <h4 className="sk-cell-title-sm">Government forms</h4>
    <p className="sk-cell-desc-sm">Navigate complex government websites to register accounts or file forms.</p>
    <span className="sk-mono sk-arrow-sm">↗</span>
  </a>
  <a href="/docs/multi-step-automations/workflow-blocks-reference" className="sk-bento-cell sk-bento-cell-link sk-bento-cell-sm sk-usecase-orange">
    <span className="sk-usecase-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
    </span>
    <h4 className="sk-cell-title-sm">Insurance quotes</h4>
    <p className="sk-cell-desc-sm">Fill multi-step quote forms across providers in any language.</p>
    <span className="sk-mono sk-arrow-sm">↗</span>
  </a>
  <a href="/docs/cookbooks/job-application-filler" className="sk-bento-cell sk-bento-cell-link sk-bento-cell-sm sk-usecase-teal">
    <span className="sk-usecase-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
    </span>
    <h4 className="sk-cell-title-sm">Job applications</h4>
    <p className="sk-cell-desc-sm">Auto-fill and submit applications on Lever, Greenhouse, and more.</p>
    <span className="sk-mono sk-arrow-sm">↗</span>
  </a>
</div>

{/* ===== FOOTER CTA ===== */}

<div className="sk-footer-cta">
  <div className="sk-footer-cta-inner">
    <p className="sk-footer-cta-text">
      <span className="sk-mono" style={{ color: "var(--sk-blue)", marginRight: "8px" }}>●</span>
      Open source · <img src="https://img.shields.io/github/stars/Skyvern-AI/skyvern?style=social" alt="GitHub stars" style={{ display: "inline", height: "1.2em", verticalAlign: "middle" }} />
    </p>
    <div className="sk-footer-cta-links">
      <a href="https://github.com/Skyvern-AI/skyvern" className="sk-footer-link">GitHub ↗</a>
      <a href="https://discord.gg/skyvern" className="sk-footer-link">Discord ↗</a>
    </div>
  </div>
</div>

</div>