Deploy an Astro Site with OpenClaw

Astro is perfect for content sites that want an AI chat widget. Zero JavaScript by default, add interactivity only where needed.

Why Astro + OpenClaw

• Island architecture: Ship zero JS by default
• Partial hydration: Only the chat widget ships JavaScript
• Content collections: Organize your content with type safety
• Fast by default: Perfect Lighthouse scores

The Chat Island

---
// src/components/ChatWidget.tsx
import { openclaw } from '@/lib/openclaw'
---

<div id="chat-widget" class="hidden">
  <div class="messages"></div>
  <input type="text" placeholder="Ask..." />
</div>

<button onclick="document.getElementById('chat-widget').classList.toggle('hidden')">
  Chat with AI
</button>

<script>
  // Client-side only
  async function send(message: string) {
    const res = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message })
    })
    const data = await res.json()
    // Display response
  }
</script>

Deploy

npm run build
fly launch --no-deploy
fly secrets set OPENAI_API_KEY=sk-...
fly deploy

Vercel Alternative

Astro deploys to Vercel with zero config. Use Vercel for the frontend, Fly.io for OpenClaw.