Foundational Requirements

⭐ CRITICAL REQUIREMENT

Before implementing any BiModal optimizations, interfaces must meet foundational requirements that ensure agents can access content in the first place. This is the infrastructure layer upon which all other optimizations depend.

FR-1: Initial Payload Accessibility

All content intended for agent consumption MUST be present in the initial HTTP response from the server.

Agents cannot be assumed to:

  • Execute JavaScript
  • Render client-side frameworks (React, Vue, Angular, etc.)
  • Wait for asynchronous content loading
  • Process dynamic imports or code splitting

The Validation Test

The simplest and most reliable test for FR-1 compliance:

# Test your site
$ curl -s https://yoursite.com

# Does it return real content or just <div id="root"></div>?

Pass Criteria ✅

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Your Site</title>
  <!-- metadata -->
</head>
<body>
  <header role="banner">
    <nav aria-label="Main navigation">
      <!-- Actual navigation content visible here -->
    </nav>
  </header>
  <main role="main">
    <h1>Welcome to Your Site</h1>
    <p>This content is visible to both humans and agents</p>
  </main>
  <footer role="contentinfo">
    <!-- Footer content -->
  </footer>
</body>
</html>

Fail Criteria ❌

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Your Site</title>
</head>
<body>
  <div id="root"></div>
  <script src="/static/js/bundle.js"></script>
</body>
</html>

Why This Matters

Even the most sophisticated semantic structure, perfect ARIA implementation, and comprehensive structured data are meaningless if agents cannot access the DOM containing them.

🚨 Real-World Impact

A website can follow every other BiModal principle perfectly—semantic HTML, ARIA roles, structured data, agent-specific attributes—but if it uses client-side rendering without mitigation, it remains completely invisible to approximately 80% of AI agents.

Technical Context

Understanding how agents interact with web pages:

👤 Human Browser Flow

  1. 1. Browser requests HTML
  2. 2. Browser receives HTML
  3. 3. Browser parses HTML
  4. 4. Browser executes JavaScript
  5. 5. React/Vue/Angular renders to DOM
  6. 6. User sees fully interactive page

🤖 AI Agent Flow

  1. 1. Agent requests HTML (simple HTTP GET)
  2. 2. Agent receives HTML
  3. 3. Agent parses HTML
  4. 4. Agent STOPS HERE (no JS execution)
  5. 5. N/A
  6. 6. Agent sees only initial HTML

If your content requires steps 4-5 of the human flow, agents will never see it.

Compliance Levels

✅ Fully Compliant (Level 0: Infrastructure Ready)

  • • All content in initial server response
  • • JavaScript enhances but doesn't control core content
  • • Semantic HTML structure present before JS execution

⚠️ Partially Compliant

  • • Some content in initial payload
  • • Critical features require JavaScript
  • • Needs mitigation strategies

❌ Non-Compliant

  • • Empty <div id="root"></div> in initial response
  • • All content rendered client-side
  • • Agents see blank page

Common Violations

❌ Client-Side Only Applications

  • Create React App (default configuration)
  • Vue CLI (without SSR)
  • Angular CLI (without SSR)
  • Plain React/Vue/Svelte SPAs
  • Bolt.new generated apps (default)

✅ Compliant Approaches

  • Next.js with SSR/SSG
  • Nuxt with SSR
  • Astro (static by default)
  • SvelteKit with SSR
  • Remix (SSR-first)
  • Traditional server-rendered apps (PHP, Rails, Django, etc.)

Testing Methods

Method 1: curl Test (Recommended)

curl -s https://yoursite.com | grep -E '<(main|nav|h1|article)'

# Should see semantic elements with content

Method 2: Disable JavaScript

  1. Open DevTools (F12)
  2. Settings → Debugger → Disable JavaScript
  3. Reload page
  4. Can you still see and read content?

Method 3: View Page Source

  1. Right-click → View Page Source (Ctrl+U)
  2. Look for actual content in HTML
  3. If you see <div id="root"></div> only, you fail FR-1

Method 4: Automated Validator (Coming Soon)

npx @bimodal/validator https://yoursite.com

Next Steps

Once you've validated FR-1 compliance:

✅ Passed FR-1?

Proceed to Core Principles

❌ Failed FR-1?

See Rendering Strategies for fixes

⚠️ Partial compliance?

Review CSR Mitigation strategies

⚠️ CRITICAL

Do not skip FR-1. All other BiModal optimizations depend on this foundation. Building semantic structure, ARIA, and structured data on a client-rendered app is like building a house on sand—no matter how perfect the construction, the foundation will fail.

← Quick StartRendering Strategies →