<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/AppImages/android/android-chrome-512x512.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

  <title>AI Book Writer | BookAI for Outlines, Chapters, and Drafts</title>
  <meta name="description" content="BookAI is an AI book writer that turns one prompt into a book outline, first chapter, and editable draft for fiction or nonfiction." />
  <meta name="keywords" content="AI book writer, book writing AI, AI novel writer, AI book writing software, write a book with AI, AI authoring tool" />
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
  <link rel="canonical" href="https://www.trybookai.com/" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="AI Book Writer | BookAI for Outlines, Chapters, and Drafts" />
  <meta property="og:description" content="BookAI is an AI book writer that turns one prompt into a book outline, first chapter, and editable draft for fiction or nonfiction." />
  <meta property="og:url" content="https://www.trybookai.com/" />
  <meta property="og:image" content="https://www.trybookai.com/og-image.jpg" />
  <meta property="og:site_name" content="BookAI" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="AI Book Writer | BookAI for Outlines, Chapters, and Drafts" />
  <meta name="twitter:description" content="BookAI is an AI book writer that turns one prompt into a book outline, first chapter, and editable draft for fiction or nonfiction." />
  <meta name="twitter:image" content="https://www.trybookai.com/og-image.jpg" />
  <meta name="theme-color" content="#4F46E5" />
  <meta name="application-name" content="BookAI" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-title" content="BookAI" />
  <meta name="msapplication-TileColor" content="#4F46E5" />
  <meta name="msapplication-config" content="/browserconfig.xml" />

  <!-- Standard Favicon -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
  <link rel="mask-icon" href="/AppImages/ios/safari-pinned-tab.svg" color="#4F46E5" />

  <!-- Only keep the highest-value DNS hint -->
  <link rel="dns-prefetch" href="https://vercel-analytics.com" />

  <!-- CRITICAL PATH OPTIMIZATION: Remove fonts from critical path entirely -->
  <!-- Use system fonts initially, load Inter after page render -->
  <noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" />
  </noscript>

  <!-- Non-blocking CSS loading strategy -->
  <script>
    const landingBootPaths = new Set(['/', '/landing/books', '/landing/classic', '/auth']);
    if (landingBootPaths.has(window.location.pathname)) {
      document.documentElement.classList.add('boot-route-landing');
    }

    const currentPath = window.location.pathname;

    const loadInterFont = () => {
      if (landingBootPaths.has(currentPath) || document.getElementById('bookai-inter-font')) {
        return;
      }

      const fontLink = document.createElement('link');
      fontLink.id = 'bookai-inter-font';
      fontLink.rel = 'stylesheet';
      fontLink.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap';
      fontLink.onload = () => {
        document.documentElement.classList.add('font-loaded');
      };
      document.head.appendChild(fontLink);
    };

    const scheduleNonCriticalFonts = () => {
      if ('requestIdleCallback' in window) {
        window.requestIdleCallback(loadInterFont, { timeout: 2500 });
        return;
      }

      window.setTimeout(loadInterFont, 1800);
    };

    window.addEventListener('load', () => {
      scheduleNonCriticalFonts();
    });
  </script>

  <!-- Critical CSS inline -->
  <style>
    /* Essential base styles */
    html {
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      overflow-y: scroll;
      /* Prevent layout shift */
    }

    body {
      margin: 0;
      /* System fonts first - zero latency, then Inter loads progressively */
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background-color: #f9fafb;
      /* Light background to avoid flash */
    }

    /* Progressive font loading - Inter loads after critical path */
    .font-loaded {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    }

    /* Performance optimizations to prevent forced reflows */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    /* Reduce layout thrashing with CSS containment */
    .book-card,
    .image-container,
    .component-item {
      contain: layout style;
    }

    /* Optimize animations to use GPU and avoid reflows */
    .animate-pulse,
    .animate-spin,
    .animate-bounce {
      will-change: transform, opacity;
      transform: translateZ(0);
      /* Force GPU acceleration */
    }

    /* Prevent reflows during transitions */
    .transition-all,
    .transition-transform,
    .transition-opacity {
      will-change: auto;
    }

    /* System font optimization - no web font loading blocking */
    * {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    }

    /* Progressive font enhancement - applies after Inter loads */
    .font-loaded * {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    }

    /* Essential utilities */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    #root {
      min-height: 100vh;
    }

    .boot-shell {
      min-height: 100vh;
      background:
        radial-gradient(circle at top, rgba(96, 165, 250, 0.14), transparent 36%),
        linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
      color: #0f172a;
    }

    .boot-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(203, 213, 225, 0.75);
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(14px);
    }

    .boot-brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .boot-body {
      display: grid;
      grid-template-columns: 1fr;
      min-height: calc(100vh - 76px);
    }

    .boot-sidebar {
      display: none;
      padding: 24px;
      border-right: 1px solid rgba(203, 213, 225, 0.75);
      background: rgba(255, 255, 255, 0.68);
    }

    .boot-main {
      padding: 16px;
    }

    .boot-card {
      padding: 20px;
      border: 1px solid rgba(203, 213, 225, 0.75);
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 24px 80px rgba(15, 23, 42, 0.06);
    }

    .boot-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .boot-dashboard-card {
      padding: 20px;
      border: 1px solid rgba(203, 213, 225, 0.75);
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 24px 80px rgba(15, 23, 42, 0.06);
    }

    .boot-dashboard-split {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .boot-quick-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .boot-list-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .boot-list-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid rgba(203, 213, 225, 0.75);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 18px 44px rgba(15, 23, 42, 0.04);
    }

    .boot-desktop-panel {
      display: none;
    }

    .boot-route-landing .boot-shell {
      background:
        radial-gradient(circle at top, rgba(125, 211, 252, 0.2), transparent 34%),
        linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    }

    .boot-route-landing .boot-body {
      display: block;
    }

    .boot-route-landing .boot-sidebar,
    .boot-route-landing .boot-desktop-panel {
      display: none !important;
    }

    .boot-route-landing .boot-main {
      max-width: 1180px;
      margin: 0 auto;
      padding-top: 40px;
      padding-bottom: 40px;
    }

    .boot-route-landing .boot-card {
      max-width: 760px;
      border-radius: 30px;
    }

    .boot-stack {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .boot-skeleton {
      border-radius: 24px;
      background: linear-gradient(90deg, #eef2f7 25%, #dbe4f0 50%, #eef2f7 75%);
      background-size: 200% 100%;
      animation: boot-shimmer 1.3s linear infinite;
    }

    .boot-pill {
      border-radius: 999px;
    }

    @keyframes boot-shimmer {
      0% {
        background-position: 200% 0;
      }

      100% {
        background-position: -200% 0;
      }
    }

    @media (min-width: 1024px) {
      .boot-body {
        grid-template-columns: 280px minmax(0, 1fr);
      }

      .boot-sidebar {
        display: block;
      }

      .boot-main {
        padding: 24px;
      }

      .boot-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
      }

      .boot-dashboard-split {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      }

      .boot-quick-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .boot-desktop-panel {
        display: block;
      }
    }
  </style>

  <!-- Google Consent Mode disabled to prevent automatic consent popups -->
  <script>
    // Initialize dataLayer for GTM without consent mode
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }

    // Grant all consent by default to prevent popups
    gtag('consent', 'default', {
      'ad_storage': 'granted',
      'analytics_storage': 'granted',
      'functionality_storage': 'granted',
      'personalization_storage': 'granted',
      'security_storage': 'granted',
      'ad_user_data': 'granted',
      'ad_personalization': 'granted'
    });
  </script>

  <!-- Optimized Third-Party Script Loading -->
  <script>
    // Defer all third-party scripts until main app is ready
    const deferredScripts = [];
    let appReady = false;
    let deferredScriptsScheduled = false;
    let deferredScriptsFallbackTimer = null;
    const isLandingBoot = landingBootPaths.has(window.location.pathname);

    const interactionEvents = ['pointerdown', 'keydown', 'touchstart', 'scroll'];

    function scheduleDeferredScripts() {
      if (deferredScriptsScheduled) return;
      deferredScriptsScheduled = true;

      const startDeferredScripts = () => {
        interactionEvents.forEach((eventName) => {
          window.removeEventListener(eventName, startDeferredScripts);
        });

        if (deferredScriptsFallbackTimer) {
          clearTimeout(deferredScriptsFallbackTimer);
        }

        loadDeferredScripts();
      };

      interactionEvents.forEach((eventName) => {
        window.addEventListener(eventName, startDeferredScripts, { passive: true, once: true });
      });

      deferredScriptsFallbackTimer = window.setTimeout(startDeferredScripts, isLandingBoot ? 15000 : 4000);
    }

    // Listen for app ready signal
    window.addEventListener('APP_MOUNTED', function () {
      appReady = true;
      scheduleDeferredScripts();
    });

    // Fallback: still wait until after the first meaningful paint window
    setTimeout(() => {
      if (!appReady) {
        appReady = true;
        scheduleDeferredScripts();
      }
    }, isLandingBoot ? 12000 : 7000);

    function loadDeferredScripts() {
      if (deferredScripts.length > 0) return; // Already loaded

      // Load Google Tag Manager
      setTimeout(() => {
        const gtmId = 'GTM-WMQ2RM89';

        (function (w, d, s, l, i) {
          w[l] = w[l] || []; w[l].push({
            'gtm.start': new Date().getTime(), event: 'gtm.js'
          });
          var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&l=' + l : '';
          j.async = true;
          j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl + '&cb=' + Date.now();
          f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', gtmId);

        deferredScripts.push('gtm');
      }, isLandingBoot ? 1200 : 0);

      // Load Hotjar (if needed)
      setTimeout(() => {
        if (window.location.hostname === 'trybookai.com') {
          (function (h, o, t, j, a, r) {
            h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
            h._hjSettings = { hjid: 3045278, hjsv: 6 };
            a = o.getElementsByTagName('head')[0];
            r = o.createElement('script'); r.async = 1;
            r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
            a.appendChild(r);
          })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
          deferredScripts.push('hotjar');
        }
      }, isLandingBoot ? 7000 : 2000);

      // Load other scripts after main functionality is ready
      setTimeout(() => {
        // Tawk.to chat widget (lowest priority) - only after app is fully loaded
        if (window.location.hostname === 'trybookai.com' || window.location.hostname === 'www.trybookai.com') {
          var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
          (function () {
            var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
            s1.async = true;
            s1.src = 'https://embed.tawk.to/68f8f5765e8743195097c200/1j867tmc7';
            s1.charset = 'UTF-8';
            s1.setAttribute('crossorigin', '*');
            s0.parentNode.insertBefore(s1, s0);
          })();
          deferredScripts.push('tawk');
        }
      }, isLandingBoot ? 11000 : 4500);
    }
  </script>

  <meta name="yandex-verification" content="35a4dafe92315ea8" />

    
    
    <meta http-equiv="pragma" content="no-cache">
    
  
    <meta name="version" content="20260509-1632">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <script type="module" crossorigin src="/assets/main-dk5GtWH2.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-DRC1xoMl.js">
    <link rel="modulepreload" crossorigin href="/assets/react-router-Ds_gSkBr.js">
    <link rel="modulepreload" crossorigin href="/assets/firebase-BXGwIzze.js">
    <link rel="stylesheet" crossorigin href="/assets/main-C3wKkgp7.css">
  <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>

<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WMQ2RM89" height="0" width="0"
      style="display:none;visibility:hidden"></iframe></noscript>

  <div id="root">
    <div aria-hidden="true" class="boot-shell">
      <div class="boot-header">
        <div class="boot-brand">
          <div class="boot-skeleton boot-pill" style="width: 44px; height: 44px;"></div>
          <div style="display:flex;flex-direction:column;gap:8px;">
            <div class="boot-skeleton boot-pill" style="width: 112px; height: 12px;"></div>
            <div class="boot-skeleton boot-pill" style="width: 188px; height: 24px;"></div>
          </div>
        </div>
        <div style="display:flex;gap:12px;">
          <div class="boot-skeleton boot-pill" style="width: 96px; height: 44px;"></div>
          <div class="boot-skeleton boot-pill" style="width: 120px; height: 44px;"></div>
        </div>
      </div>
      <div class="boot-body">
        <aside class="boot-sidebar">
          <div class="boot-stack">
            <div class="boot-skeleton" style="height: 44px;"></div>
            <div style="display:flex;flex-direction:column;gap:8px;">
              <div class="boot-skeleton" style="height: 40px;"></div>
              <div class="boot-skeleton" style="height: 40px;"></div>
              <div class="boot-skeleton" style="height: 40px;"></div>
              <div class="boot-skeleton" style="height: 40px;"></div>
            </div>
            <div class="boot-dashboard-card" style="padding:16px;">
              <div class="boot-stack">
                <div class="boot-skeleton boot-pill" style="width: 96px; height: 12px;"></div>
                <div class="boot-skeleton" style="height: 64px;"></div>
                <div class="boot-skeleton boot-pill" style="width: 108px; height: 32px;"></div>
              </div>
            </div>
            <div class="boot-dashboard-card" style="padding:16px;">
              <div class="boot-stack">
                <div class="boot-skeleton" style="height: 96px;"></div>
                <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;">
                  <div class="boot-skeleton" style="height: 36px;"></div>
                  <div class="boot-skeleton" style="height: 36px;"></div>
                </div>
              </div>
            </div>
          </div>
        </aside>
        <main class="boot-main">
          <div class="boot-stack">
            <div style="display:flex;justify-content:space-between;gap:16px;align-items:flex-end;">
              <div style="display:flex;flex-direction:column;gap:12px;">
                <div class="boot-skeleton boot-pill" style="width: 96px; height: 14px;"></div>
                <div class="boot-skeleton boot-pill" style="width: min(320px, 72vw); height: 36px;"></div>
              </div>
              <div style="display:flex;gap:12px;">
                <div class="boot-skeleton boot-pill" style="width: 88px; height: 44px;"></div>
                <div class="boot-skeleton boot-pill" style="width: 112px; height: 44px;"></div>
              </div>
            </div>
            <section class="boot-dashboard-card">
              <div class="boot-stack">
                <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;">
                  <div class="boot-skeleton boot-pill" style="width:min(260px,72vw);height:40px;"></div>
                  <div class="boot-skeleton boot-pill" style="width:40px;height:40px;"></div>
                </div>
                <div style="display:flex;flex-direction:column;gap:12px;">
                  <div class="boot-skeleton boot-pill" style="width:132px;height:18px;"></div>
                  <div class="boot-skeleton boot-pill" style="width:min(420px,90%);height:40px;"></div>
                  <div class="boot-skeleton boot-pill" style="width:min(320px,72%);height:40px;"></div>
                </div>
                <div class="boot-quick-grid">
                  <div class="boot-skeleton" style="height:162px;"></div>
                  <div class="boot-skeleton" style="height:162px;"></div>
                  <div class="boot-skeleton" style="height:162px;"></div>
                  <div class="boot-skeleton" style="height:162px;"></div>
                </div>
              </div>
            </section>
            <div class="boot-dashboard-split">
              <section>
                <div class="boot-stack">
                  <div style="display:flex;justify-content:space-between;gap:12px;align-items:center;">
                    <div class="boot-skeleton boot-pill" style="width:180px;height:28px;"></div>
                    <div class="boot-skeleton boot-pill" style="width:64px;height:20px;"></div>
                  </div>
                  <div class="boot-list-stack">
                    <div class="boot-list-item">
                      <div class="boot-skeleton" style="width:48px;height:48px;border-radius:12px;flex-shrink:0;"></div>
                      <div style="display:flex;flex:1;min-width:0;flex-direction:column;gap:8px;">
                        <div class="boot-skeleton boot-pill" style="width:68%;height:16px;"></div>
                        <div class="boot-skeleton boot-pill" style="width:46%;height:12px;"></div>
                      </div>
                      <div class="boot-skeleton boot-pill" style="width:20px;height:20px;flex-shrink:0;"></div>
                    </div>
                    <div class="boot-list-item">
                      <div class="boot-skeleton" style="width:48px;height:48px;border-radius:12px;flex-shrink:0;"></div>
                      <div style="display:flex;flex:1;min-width:0;flex-direction:column;gap:8px;">
                        <div class="boot-skeleton boot-pill" style="width:74%;height:16px;"></div>
                        <div class="boot-skeleton boot-pill" style="width:38%;height:12px;"></div>
                      </div>
                      <div class="boot-skeleton boot-pill" style="width:20px;height:20px;flex-shrink:0;"></div>
                    </div>
                    <div class="boot-list-item">
                      <div class="boot-skeleton" style="width:48px;height:48px;border-radius:12px;flex-shrink:0;"></div>
                      <div style="display:flex;flex:1;min-width:0;flex-direction:column;gap:8px;">
                        <div class="boot-skeleton boot-pill" style="width:56%;height:16px;"></div>
                        <div class="boot-skeleton boot-pill" style="width:34%;height:12px;"></div>
                      </div>
                      <div class="boot-skeleton boot-pill" style="width:20px;height:20px;flex-shrink:0;"></div>
                    </div>
                  </div>
                </div>
              </section>
              <aside>
                <div class="boot-stack">
                  <div class="boot-skeleton boot-pill" style="width:140px;height:28px;"></div>
                  <div class="boot-list-item">
                    <div class="boot-skeleton" style="width:56px;height:56px;border-radius:16px;flex-shrink:0;"></div>
                    <div style="display:flex;flex:1;min-width:0;flex-direction:column;gap:8px;">
                      <div class="boot-skeleton boot-pill" style="width:120px;height:16px;"></div>
                      <div class="boot-skeleton boot-pill" style="width:72%;height:12px;"></div>
                    </div>
                  </div>
                  <div class="boot-list-item">
                    <div class="boot-skeleton" style="width:56px;height:56px;border-radius:16px;flex-shrink:0;"></div>
                    <div style="display:flex;flex:1;min-width:0;flex-direction:column;gap:8px;">
                      <div class="boot-skeleton boot-pill" style="width:136px;height:16px;"></div>
                      <div class="boot-skeleton boot-pill" style="width:66%;height:12px;"></div>
                    </div>
                  </div>
                </div>
              </aside>
            </div>
          </div>
        </main>
      </div>
    </div>
  </div>


  <!-- Tawk.to loaded via deferred scripts in head -->

</body>

</html>
