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

# The Builder

> The visual surface where a non-technical owner composes pages, defines data, sets up auth and payments, and publishes to a subdomain — without writing code.

export const PageMeta = ({audience, readingTime, prereqs, level}) => {
  const items = [audience && ({
    key: "audience",
    label: "AUDIENCE",
    value: audience
  }), readingTime && ({
    key: "time",
    label: "READ",
    value: readingTime
  }), level && ({
    key: "level",
    label: "LEVEL",
    value: level
  }), prereqs && prereqs.length > 0 && ({
    key: "prereqs",
    label: "PREREQS",
    value: prereqs.join(" · ")
  })].filter(Boolean);
  if (items.length === 0) return null;
  return <div className="gv-page-meta" role="group" aria-label="Page metadata">
      {items.map(item => <div className="gv-page-meta__item" key={item.key}>
          <span className="gv-page-meta__label">{item.label}</span>
          <span className="gv-page-meta__value">{item.value}</span>
        </div>)}
    </div>;
};

export const CTABanner = ({eyebrow, headline, subhead, ctaLabel, ctaHref, secondaryCtaLabel, secondaryCtaHref}) => <section className="gv-cta">
    <div className="gv-cta__copy">
      {eyebrow && <Eyebrow label={eyebrow} />}
      <h2 className="gv-cta__headline">{headline}</h2>
      {subhead && <p className="gv-cta__subhead">{subhead}</p>}
    </div>
    <div className="gv-cta__actions">
      {ctaLabel && ctaHref && <a className="gv-cta__button" href={ctaHref}>
          {ctaLabel}
        </a>}
      {secondaryCtaLabel && secondaryCtaHref && <a className="gv-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>
  </section>;

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 NumberedStep = ({n, title, children}) => <li className="gv-step">
    <span className="gv-step__index">{n}</span>
    <div className="gv-step__body">
      <h3 className="gv-step__title">{title}</h3>
      <div className="gv-step__content">{children}</div>
    </div>
  </li>;

export const NumberedSteps = ({children}) => <ol className="gv-steps">{children}</ol>;

export const ArrowItem = ({children}) => <li className="gv-arrow-item">
    <span className="gv-arrow-item__arrow" aria-hidden="true">{"↳︎"}</span>
    <span className="gv-arrow-item__content">{children}</span>
  </li>;

export const ArrowList = ({children}) => <ul className="gv-arrow-list">{children}</ul>;

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="BUILDER" title="Compose your app visually" subtitle="Drag-drop pages, define your data, and ship to your own subdomain." ctaLabel="Open the Builder" ctaHref="https://console.gavai.app" secondaryCtaLabel="See what you can build" secondaryCtaHref="#what-you-can-build" />

<PageMeta audience="Workspace owners" readingTime="5 min" level="No-code" />

By the end of this page you will know what the Builder is, what you can build inside it, the six steps it walks you through from sign-in to a published app, and when you need a developer's help (most of the time, you don't). The Builder is the visual surface that wraps every other concept in these docs — pages, capabilities, schema — behind point-and-click controls. Everything in the rest of this section is also available from the Builder; you do not need to choose between visual and code.

The Builder is the no-code entry point into gavAI. Authentication, isolation, payments, and audit logs are part of the platform runtime — the Builder configures them rather than asking you to implement them. For how this entry point compares to the MCP server and the REST API, see [Who this is for](/mission).

## What the Builder is

The Builder is a web app at [console.gavai.app](https://console.gavai.app) for building your business app without writing code. Sign in, drag and drop pages together, configure your data tables, set up authentication and payments, preview your app, then publish it to your own subdomain — all from one place.

## What you can build

<ArrowList>
  <ArrowItem>A customer portal where clients log in and manage their account.</ArrowItem>
  <ArrowItem>A public landing page with sign-up and payment flows.</ArrowItem>
  <ArrowItem>An internal dashboard your team uses to track orders, customers, or tasks.</ArrowItem>
  <ArrowItem>A sign-up flow with Stripe-powered payment collection built in.</ArrowItem>
</ArrowList>

## How it works

<NumberedSteps>
  <NumberedStep n="01" title="Sign in">
    Go to [console.gavai.app](https://console.gavai.app) and sign in with your email and password or via SSO. Each workspace has its own user pool, so your team members sign in to the same account.
  </NumberedStep>

  <NumberedStep n="02" title="Drag-drop PageBlocks">
    Build pages by dragging blocks onto the canvas. Blocks include NavShell, Hero, FeaturesGrid, Form, Table, DetailPanel, KanbanBoard, and more. Each block is a complete UI section — no layout code needed.
  </NumberedStep>

  <NumberedStep n="03" title="Configure blocks">
    Click any block to bind it to your data and actions. For example: show a customers list, allow a click to open a detail view, and wire a button to send an email — all through point-and-click configuration.
  </NumberedStep>

  <NumberedStep n="04" title="Define tables and fields">
    Open the schema designer to create tables and add fields using form controls. You do not write SQL. gavAI validates all data against your schema automatically.
  </NumberedStep>

  <NumberedStep n="05" title="Set up auth and payments">
    Use configuration panels to enable email sign-up for your users and add your Stripe key to accept payments. gavAI handles the infrastructure for you.
  </NumberedStep>

  <NumberedStep n="06" title="Preview and publish">
    Test your app inside the Builder before anyone else sees it. When you're ready, deploy to your live subdomain with one click.
  </NumberedStep>
</NumberedSteps>

## What you get without writing code

<ArrowList>
  <ArrowItem>Authentication — email/password sign-up and login for your users.</ArrowItem>
  <ArrowItem>Data storage — a dedicated database for your tables and records.</ArrowItem>
  <ArrowItem>Payments — Stripe-powered checkout and plan management.</ArrowItem>
  <ArrowItem>Email — send transactional messages to your customers.</ArrowItem>
  <ArrowItem>File uploads — let users attach and store files.</ArrowItem>
  <ArrowItem>Workflow automation — trigger actions when data changes.</ArrowItem>
  <ArrowItem>A customer-branded app running at your own subdomain.</ArrowItem>
</ArrowList>

## When to bring a developer in

Most of the time you won't need one. If you want to integrate gavAI from an external app, automate publishing from CI, or extend the platform with custom capabilities, point your developer at the API reference linked below.

<CTABanner eyebrow="GET STARTED" headline="Open the Builder and build your first page." subhead="Or hand the API reference to your developer if you want code-driven integration." ctaLabel="Go to console" ctaHref="https://console.gavai.app" secondaryCtaLabel="API reference" secondaryCtaHref="/api-reference/introduction" />

## Related

<Columns cols={2}>
  <BrandCard eyebrow="UI MODEL" title="PageBlocks" href="/concepts/pageblocks" icon="layout-grid">
    The block model the Builder canvas writes to.
  </BrandCard>

  <BrandCard eyebrow="REFERENCE" title="API introduction" href="/api-reference/introduction" icon="code">
    For your developer — the REST API that powers the Builder.
  </BrandCard>
</Columns>