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

# Relay Documentation

> Everything you need to build dashboards, configure integrations, and run your production with Relay for Mac.

<div data-product-guide-index className="flex w-full flex-col gap-8">
  <div className="flex max-w-[540px] flex-col gap-2 self-center text-center">
    <h1 className="text-[30px] font-semibold leading-9 tracking-tight text-gray-900 dark:text-gray-50">
      Relay Documentation
    </h1>

    <p className="text-balance text-sm leading-relaxed tracking-tight text-gray-600 dark:text-gray-400">
      Build dashboards, connect production tools, and run live workflows confidently with Relay for Mac.
    </p>
  </div>

  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <Card title={<span className="product-guide-feature-card-title">Get Started</span>} icon="rocket" href="/introduction" className="product-guide-feature-card" size={64}>
      <span className="product-guide-feature-card-description">Learn the Relay workflow, set up your first dashboard, and get ready for Live Mode.</span>
    </Card>

    <a href="/dashboards/overview" className="flex flex-col gap-4 rounded-none border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
      <Icon icon="layout-dashboard" color="rgb(var(--primary))" size={18} className="shrink-0" />

      <div className="flex flex-col gap-1">
        <span className="text-base font-semibold text-gray-900 dark:text-gray-50">Building Dashboards</span>

        <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
          Create tiles, add modules, organize tabs, and operate in Live Mode.
        </span>
      </div>
    </a>

    <a href="/integrations/overview" className="flex flex-col gap-4 rounded-none border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
      <Icon icon="plug" color="rgb(var(--primary))" size={18} className="shrink-0" />

      <div className="flex flex-col gap-1">
        <span className="text-base font-semibold text-gray-900 dark:text-gray-50">Integrations</span>

        <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
          Connect Planning Center, ProPresenter, audio consoles, and wireless systems.
        </span>
      </div>
    </a>
  </div>

  <hr className="border-0 border-t border-border" />

  <div className="flex flex-col gap-4">
    <h2 className="text-xl font-semibold leading-normal text-gray-900 dark:text-gray-50">Common tasks</h2>

    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
      <a href="/dashboards/tiles" className="flex flex-col gap-4 rounded-none border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
        <Icon icon="square-dashed" color="rgb(var(--primary))" size={18} className="shrink-0" />

        <div className="flex flex-col gap-1">
          <span className="text-base font-semibold text-gray-900 dark:text-gray-50">Add and arrange tiles</span>

          <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            Place, resize, align, and group tiles on your dashboard canvas.
          </span>
        </div>
      </a>

      <a href="/integrations/planning-center" className="flex flex-col gap-4 rounded-none border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
        <Icon icon="calendar-check" color="rgb(var(--primary))" size={18} className="shrink-0" />

        <div className="flex flex-col gap-1">
          <span className="text-base font-semibold text-gray-900 dark:text-gray-50">Connect Planning Center</span>

          <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            Show plans, assignments, service times, and Services Live on your dashboard.
          </span>
        </div>
      </a>

      <a href="/dashboards/automation" className="flex flex-col gap-4 rounded-none border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
        <Icon icon="workflow" color="rgb(var(--primary))" size={18} className="shrink-0" />

        <div className="flex flex-col gap-1">
          <span className="text-base font-semibold text-gray-900 dark:text-gray-50">Build automations</span>

          <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            Connect triggers, actions, and destinations in Automation View.
          </span>
        </div>
      </a>

      <a href="/protocols/lan-sharing" className="flex flex-col gap-4 rounded-none border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
        <Icon icon="share-2" color="rgb(var(--primary))" size={18} className="shrink-0" />

        <div className="flex flex-col gap-1">
          <span className="text-base font-semibold text-gray-900 dark:text-gray-50">Share over LAN</span>

          <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            Mirror tabs to other Relay clients or share a browser view-only link.
          </span>
        </div>
      </a>

      <a href="/protocols/osc" className="flex flex-col gap-4 rounded-none border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
        <Icon icon="radio" color="rgb(var(--primary))" size={18} className="shrink-0" />

        <div className="flex flex-col gap-1">
          <span className="text-base font-semibold text-gray-900 dark:text-gray-50">Set up OSC</span>

          <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            Receive and send OSC messages for control and automation workflows.
          </span>
        </div>
      </a>

      <a href="/account/beta-features" className="flex flex-col gap-4 rounded-none border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
        <Icon icon="flask-conical" color="rgb(var(--primary))" size={18} className="shrink-0" />

        <div className="flex flex-col gap-1">
          <span className="text-base font-semibold text-gray-900 dark:text-gray-50">Beta workflows</span>

          <span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
            Understand beta-only modules, graph features, diagnostics, and safe testing practices.
          </span>
        </div>
      </a>
    </div>
  </div>
</div>