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

# webAI DevCenter

> Intelligence as a property of your device and a resource of your network: not a service from the cloud.

<div style={{ backgroundColor: 'var(--home-bg)', minHeight: '100vh' }}>
  <div style={{ position: 'relative', overflow: 'hidden', minHeight: '20rem', display: 'flex', alignItems: 'flex-end', padding: '2rem 2rem 4rem' }}>
    <img
      src="https://mintcdn.com/webai/-1h_d9K2SD4cqnnY/images/home-page-images/Cube.png?fit=max&auto=format&n=-1h_d9K2SD4cqnnY&q=85&s=e38eaddb7770c234899132b0579012dd"
      alt="webAI"
      style={{
  position: 'absolute',
  right: 0,
  top: 0,
  width: '80%',
  height: '100%',
  objectFit: 'contain',
  objectPosition: 'right center',
  opacity: 'var(--home-hero-opacity)',
  transform: 'scale(1.6)',
  transformOrigin: 'right center',
  pointerEvents: 'none',
}}
      width="4039"
      height="3393"
      data-path="images/home-page-images/Cube.png"
    />

    <div style={{ position: 'relative', zIndex: 1, maxWidth: '64rem', width: '100%', margin: '0 auto', padding: '0 1.5rem' }}>
      <h1 style={{ fontSize: '3rem', fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.03em', color: 'var(--home-text)', margin: '0 0 1.25rem' }}>
        Welcome to<br />the webAI DevCenter
      </h1>

      <p style={{ fontSize: '1.125rem', maxWidth: '36rem', lineHeight: 1.6, color: 'var(--home-text)', margin: 0 }}>
        Intelligence as a property of your device and a resource of your network, not a service from the cloud.
      </p>

      <div style={{ marginTop: '1.5rem', maxWidth: '36rem' }}>
        <Info title="Get the app">
          [Join the waitlist](https://www.webai.com/waitlist) to download webAI.
        </Info>
      </div>
    </div>
  </div>

  <div style={{ maxWidth: '64rem', margin: '0 auto', padding: '0 1.5rem 4rem' }}>
    <h2 style={{ fontSize: '1.75rem', fontWeight: 600, textAlign: 'left', marginTop: '2.5rem', marginBottom: '1.5rem', letterSpacing: '-0.02em', color: 'var(--home-text)' }}>Explore</h2>

    <CardGroup cols={3}>
      <Card title="Documentation" icon="book" href="/getting-started/introduction">
        Learn about webAI, features, built-in apps, architecture, and core concepts.
      </Card>

      <Card title="Quickstart" icon="bolt" href="/quickstart/general/overview">
        Five task-focused walkthroughs to get productive with webAI in minutes.
      </Card>

      <Card title="System Requirements" icon="laptop" href="/getting-started/system-requirements">
        Check macOS requirements and install webAI on your Mac.
      </Card>
    </CardGroup>

    <CardGroup cols={2}>
      <Card title="Changelog" icon="clock-rotate-left" href="/changelogs/webai_changelog">
        See what's new, latest updates, features, and fixes.
      </Card>

      <Card title="Support" icon="life-ring" href="/support/support">
        Get help, report issues, and connect with the webAI team.
      </Card>
    </CardGroup>
  </div>

  <div style={{ borderTop: '1px solid var(--home-border)', padding: '3rem 2rem 2rem', maxWidth: '64rem', margin: '0 auto' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '16rem 1fr', gap: '1rem' }}>
      <div>
        <div className="hidden dark:block" role="img" aria-label="webAI" style={{ width: '8rem', height: '1.75rem', backgroundImage: 'url(https://mintcdn.com/webai/-1h_d9K2SD4cqnnY/logo/webai_light.svg?fit=max&auto=format&n=-1h_d9K2SD4cqnnY&q=85&s=e530babe15a33f9c647b344d87c4eca2)', backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }} />

        <div className="block dark:hidden" role="img" aria-label="webAI" style={{ width: '8rem', height: '1.75rem', backgroundImage: 'url(https://mintcdn.com/webai/-1h_d9K2SD4cqnnY/logo/webai_dark.svg?fit=max&auto=format&n=-1h_d9K2SD4cqnnY&q=85&s=a2a199403c78b602b4c6cea2075859cd)', backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }} />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '2rem' }}>
        <div>
          <p style={{ fontWeight: 600, marginBottom: '0.75rem', color: 'var(--home-text)', fontSize: '0.875rem' }}>Product</p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            <a href="/getting-started/introduction" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>Introduction</a>
            <a href="/using-webai/personas" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>Personas</a>
            <a href="/using-webai/spaces" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>Spaces</a>
          </div>
        </div>

        <div>
          <p style={{ fontWeight: 600, marginBottom: '0.75rem', color: 'var(--home-text)', fontSize: '0.875rem' }}>Resources</p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            <a href="/getting-started/introduction" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>Documentation</a>
            <a href="/changelogs/webai_changelog" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>Changelog</a>
            <a href="/support/support" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>Support</a>
          </div>
        </div>

        <div>
          <p style={{ fontWeight: 600, marginBottom: '0.75rem', color: 'var(--home-text)', fontSize: '0.875rem' }}>Company</p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            <a href="https://www.webai.com/careers" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>Careers</a>
            <a href="https://www.webai.com/privacy" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>Privacy</a>
            <a href="https://www.webai.com/terms" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>Terms</a>
            <a href="https://www.webai.com/end-user-license-agreement" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>License Agreement</a>
          </div>
        </div>

        <div>
          <p style={{ fontWeight: 600, marginBottom: '0.75rem', color: 'var(--home-text)', fontSize: '0.875rem' }}>Social</p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            <a href="https://www.linkedin.com/company/webai-official/" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>LinkedIn ↗</a>
            <a href="https://x.com/thewebai" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>X (Twitter) ↗</a>
            <a href="https://www.youtube.com/@webAI-Official" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>YouTube ↗</a>
            <a href="https://community.webai.com/" style={{ color: 'var(--home-text-muted)', textDecoration: 'none', fontSize: '0.875rem' }}>Community ↗</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div style={{ borderTop: '1px solid var(--home-border)', padding: '2rem', maxWidth: '64rem', margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    <p style={{ color: 'var(--home-text-muted)', fontSize: '0.8125rem', margin: 0 }}>© 2026 webAI</p>

    <div
      ref={(el) => {
if (!el || el.dataset.init) return;
el.dataset.init = '1';
const root = document.documentElement;
const isDark = () => root.classList.contains('dark');
const sunBtn = el.querySelector('[data-mode="light"]');
const moonBtn = el.querySelector('[data-mode="dark"]');
const update = () => {
  sunBtn.style.color = isDark() ? 'var(--home-text-muted)' : 'var(--home-text)';
  moonBtn.style.color = isDark() ? 'var(--home-text)' : 'var(--home-text-muted)';
};
const setTheme = (mode) => {
  root.classList.toggle('dark', mode === 'dark');
  root.classList.toggle('light', mode === 'light');
  localStorage.setItem('theme', mode);
  update();
};
sunBtn.addEventListener('click', () => setTheme('light'));
moonBtn.addEventListener('click', () => setTheme('dark'));
update();
const obs = new MutationObserver(update);
obs.observe(root, { attributes: true, attributeFilter: ['class'] });
}}
      className="home-theme-toggle"
    >
      <button data-mode="light" aria-label="Light mode" style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', padding: '0.375rem', transition: 'color 0.15s ease' }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
        </svg>
      </button>

      <button data-mode="dark" aria-label="Dark mode" style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', padding: '0.375rem', transition: 'color 0.15s ease' }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
        </svg>
      </button>
    </div>
  </div>
</div>
