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

# Welcome to gavAI

> Documentation for the gavAI platform. Build and ship a SaaS product through a visual builder, an MCP server for AI agents, or a typed REST API.

export const Path = ({icon, title, href, children}) => <a className="gv-choose-path__card" href={href}>
    {icon && <span className="gv-choose-path__icon" aria-hidden="true">
        <Icon icon={icon} />
      </span>}
    <h4 className="gv-choose-path__title">{title}</h4>
    {children && <p className="gv-choose-path__body">{children}</p>}
    <svg className="gv-choose-path__arrow" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <line x1="7" y1="17" x2="17" y2="7" />
      <polyline points="7 7 17 7 17 17" />
    </svg>
  </a>;

export const ChoosePath = ({eyebrow = "CHOOSE YOUR PATH", label, children}) => <section className="gv-choose-path">
    <div className="gv-choose-path__header">
      <Eyebrow label={eyebrow} />
      {label && <h3 className="gv-choose-path__label">{label}</h3>}
    </div>
    <div className="gv-choose-path__grid">{children}</div>
  </section>;

export const Eyebrow = ({label, tone = "default"}) => <div className={`gv-eyebrow gv-eyebrow--${tone}`}>
    <span className="gv-eyebrow__bar" aria-hidden="true" />
    <span className="gv-eyebrow__label">{label}</span>
  </div>;

export const BrandCard = ({eyebrow, title, href, icon, badge, cta, featured = false, horizontal = false, children}) => {
  const classes = ["gv-card", featured && "gv-card--featured", horizontal && "gv-card--horizontal"].filter(Boolean).join(" ");
  const inner = <>
      {icon && <span className="gv-card__icon" aria-hidden="true">
          <Icon icon={icon} />
        </span>}
      <div className="gv-card__main">
        {(eyebrow || badge) && <div className="gv-card__meta">
            {eyebrow && <Eyebrow label={eyebrow} tone="muted" />}
            {badge && <span className="gv-card__badge">{badge}</span>}
          </div>}
        <h3 className="gv-card__title">{title}</h3>
        {children && <div className="gv-card__body">{children}</div>}
        {cta && <span className="gv-card__cta">
            {cta}
            <svg className="gv-card__cta-arrow" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <line x1="7" y1="17" x2="17" y2="7" />
              <polyline points="7 7 17 7 17 17" />
            </svg>
          </span>}
      </div>
    </>;
  return href ? <a className={classes} href={href}>
      {inner}
    </a> : <div className={classes}>{inner}</div>;
};

export const BrandHero = ({eyebrow, title, subtitle, badge, ctaLabel, ctaHref, secondaryCtaLabel, secondaryCtaHref}) => <header className="gv-hero">
    {(eyebrow || badge) && <div className="gv-hero__meta">
        {eyebrow && <Eyebrow label={eyebrow} />}
        {badge && <span className="gv-hero__badge">{badge}</span>}
      </div>}
    <h1 className="gv-hero__title">{title}</h1>
    {subtitle && <p className="gv-hero__subtitle">{subtitle}</p>}
    {(ctaLabel || secondaryCtaLabel) && <div className="gv-hero__cta-row">
        {ctaLabel && ctaHref && <a className="gv-hero__cta" href={ctaHref}>
            {ctaLabel}
          </a>}
        {secondaryCtaLabel && secondaryCtaHref && <a className="gv-hero__cta-secondary" href={secondaryCtaHref}>
            {secondaryCtaLabel}
            <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <line x1="7" y1="17" x2="17" y2="7" />
              <polyline points="7 7 17 7 17 17" />
            </svg>
          </a>}
      </div>}
  </header>;

<BrandHero eyebrow="PLATFORM" title="Build production SaaS apps three ways" subtitle="Drag blocks in a visual builder, connect an AI agent through MCP, or call the REST API from code. The same app can be authored through any of the three." ctaLabel="Read the overview" ctaHref="/mission" secondaryCtaLabel="Open the console" secondaryCtaHref="https://console.gavai.app" />

<ChoosePath label="Pick an entry point">
  <Path icon="wand-magic-sparkles" title="The Builder" href="https://console.gavai.app">
    Drag blocks onto a canvas, configure data and capabilities through forms, publish to your subdomain.
  </Path>

  <Path icon="sparkles" title="MCP for AI agents" href="/mcp/overview">
    Connect an MCP-aware client (Claude Desktop, Cursor). The agent composes pages and schema; you review and ship.
  </Path>

  <Path icon="code" title="REST API or SDK" href="/quickstart">
    Get a test API key and call `api.gavai.app/v1` from your own code in five minutes.
  </Path>
</ChoosePath>

## The shape of the platform

A gavAI app is three things, and the rest of the docs are detail on top of them:

* **Pages** — screens assembled from composable blocks (a hero, a form, a table, a payment button). Compose them visually in the Builder, as JSON through the API, or through an AI agent driving the MCP server. Pages are what your end-users see.
* **Capabilities** — typed runtime actions a page can invoke: send an email, collect a payment, store a file, query data, run an AI agent. Providers are configured per workspace, so swapping providers does not require rewriting pages.
* **A managed runtime** — every workspace runs in isolation on its own subdomain with its own database. Multi-tenancy, auth, billing, audit logs, and deploys are handled by the platform.

If the vocabulary is new, [core concepts](/concepts/overview) covers each piece. If it's familiar, the [quickstart](/quickstart) is faster.

## Where to go next

<Columns cols={2}>
  <BrandCard eyebrow="OVERVIEW" title="Who this is for" href="/mission" icon="compass" cta="Read first" featured>
    Audiences (non-technical, AI-assisted, developer), what the platform handles, what production-grade means in concrete terms.
  </BrandCard>

  <BrandCard eyebrow="CONCEPTS" title="How gavAI works" href="/concepts/how-it-works" icon="map" cta="Read the architecture">
    Three parties (end-user / workspace owner / gavAI), request flow end-to-end, and the role-vs-vendor model.
  </BrandCard>

  <BrandCard eyebrow="QUICKSTART" title="First API call in 5 minutes" href="/quickstart" icon="rocket" cta="Start the quickstart">
    Get a test API key and call `GET /v1/me`. The shortest path to confirming auth works.
  </BrandCard>

  <BrandCard eyebrow="BUILDER" title="The visual builder" href="/concepts/builder-ux" icon="wand-magic-sparkles" cta="Builder walkthrough">
    Six steps from sign-in to a published app. No code required.
  </BrandCard>

  <BrandCard eyebrow="MCP" title="MCP for AI agents" href="/mcp/overview" icon="sparkles" cta="Connect an agent">
    Two MCP servers — one for the Builder, one for the public API. Scoped credentials, typed tool surface.
  </BrandCard>

  <BrandCard eyebrow="API REFERENCE" title="REST API reference" href="/api-reference/introduction" icon="code" cta="Browse endpoints">
    Every endpoint, scope, and error code for `api.gavai.app/v1`. Typed SDK at [@gavai/sdk](/sdks/overview).
  </BrandCard>
</Columns>