+
+ {doc.label}.md
+
+
+
+
+ {/* Rendered markdown */}
+
+
+
+ + Get running in 5 steps +
++ The setup wizard handles API keys, webhook registration, and first-run validation. +
+ +-
+ {STEPS.map(({ n, title, cmd }) => (
+
-
+ + {n} ++++
{title}
++++ {cmd} +++++
+ ))}
+
+
+
+
+ Debug dashboard
+
+ Visit{' '}
+ http://localhost:5173{' '}
+ after npm run dev to open the debug dashboard — agents, memory, automations, and connections.
+
+
+ + What you'll need +
++ All free-tier friendly. The setup wizard will prompt you for each key. +
+ +
+
+
+
+
+ | Service | +Why | +Free? | +Discount | +
|---|---|---|---|
| + + {service} + + | +{why} | +{free} | +{discount} | +
+ {/* Sidebar — desktop */}
+
+
+ {/* Mobile top tab bar */}
+
+
+
+ )
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add website/components/DocsLayout.tsx
+git commit -m "feat(website): add DocsLayout with IntersectionObserver sidebar"
+```
+
+---
+
+## Task 17: Docs page
+
+**Files:**
+- Create: `website/app/docs/page.tsx`
+
+- [ ] **Step 1: Create `website/app/docs/page.tsx`**
+
+```tsx
+import type { Metadata } from 'next'
+import { getAllDocs } from '@/lib/docs'
+import { Navbar } from '@/components/Navbar'
+import { Footer } from '@/components/Footer'
+import { DocsLayout } from '@/components/DocsLayout'
+import { DocSection } from '@/components/DocSection'
+
+export const metadata: Metadata = {
+ title: 'Docs',
+ description: 'Full documentation for Boop Agent — architecture, integrations, contributing guide, and changelog.',
+}
+
+export default async function DocsPage() {
+ const docs = await getAllDocs()
+
+ return (
+ <>
+
+
+
+ {/* Content area */}
+
+ {docs.map(({ id, label }) => (
+
+ ))}
+
+
+ {children}
+
+
+
+ ),
+ { width: 1200, height: 630 }
+ )
+}
diff --git a/website/app/page.tsx b/website/app/page.tsx
new file mode 100644
index 00000000..098ef9ac
--- /dev/null
+++ b/website/app/page.tsx
@@ -0,0 +1,23 @@
+import { Navbar } from '@/components/Navbar'
+import { Hero } from '@/components/Hero'
+import { ArchitectureBlock } from '@/components/ArchitectureBlock'
+import { FeaturesGrid } from '@/components/FeaturesGrid'
+import { QuickstartBlock } from '@/components/QuickstartBlock'
+import { PrerequisitesTable } from '@/components/PrerequisitesTable'
+import { Footer } from '@/components/Footer'
+
+export default function HomePage() {
+ return (
+ <>
+ 🐶
+
+ Boop Agent
+
+
+ A proactive iMessage-based agent built on the Claude Agent SDK
+
+
+ github.com/raroque/boop-agent
+
+
+
+ + How it works +
++ A clean separation between receiving messages, deciding what to do, and doing the work. +
+ + {/* Architecture diagram */} +
+
+
+ {/* Component cards */}
+
+ {COMPONENTS.map(({ icon: Icon, title, description }) => (
+
+
+
+ ))}
+
+
+ {title}
+{description}
+
+
+ {doc.label}.md
+
+
+
+
+ {/* Rendered markdown */}
+
+
+ {/* Sidebar — desktop */}
+
+
+ {/* Mobile top tab bar */}
+
+
+
+ )
+}
diff --git a/website/components/FeaturesGrid.tsx b/website/components/FeaturesGrid.tsx
new file mode 100644
index 00000000..76a56aee
--- /dev/null
+++ b/website/components/FeaturesGrid.tsx
@@ -0,0 +1,107 @@
+import {
+ MessageSquare,
+ Terminal,
+ GitBranch,
+ Shield,
+ Layers,
+ Search,
+ RefreshCw,
+ Clock,
+ Send,
+ Heart,
+ Plug,
+ LayoutDashboard,
+} from 'lucide-react'
+
+const FEATURES = [
+ {
+ icon: MessageSquare,
+ title: 'iMessage in / out',
+ description: 'Receive and reply via iMessage with typing indicators and webhook deduplication.',
+ },
+ {
+ icon: Terminal,
+ title: 'Sendblue CLI',
+ description: 'Auto-registers the inbound webhook on every restart — no manual re-pasting after ngrok URL rotation.',
+ },
+ {
+ icon: GitBranch,
+ title: 'Dispatcher + workers',
+ description: 'A lean interaction agent spawns focused sub-agents that do the actual work.',
+ },
+ {
+ icon: Shield,
+ title: 'Pure dispatcher',
+ description: 'Web access, files, and integrations are denied to the interaction agent — sub-agents only.',
+ },
+ {
+ icon: Layers,
+ title: 'Tiered memory',
+ description: 'Short, long, and permanent tiers with post-turn extraction, decay, and cleaning.',
+ },
+ {
+ icon: Search,
+ title: 'Vector search',
+ description: 'Semantic recall with Voyage or OpenAI embeddings — falls back to substring without a key.',
+ },
+ {
+ icon: RefreshCw,
+ title: 'Memory consolidation',
+ description: 'Daily 3-phase adversarial pipeline (proposer → adversary → judge) that merges duplicates and prunes noise.',
+ },
+ {
+ icon: Clock,
+ title: 'Automations',
+ description: 'Schedule recurring work from a text ("every morning at 8 summarize my calendar") and receive results via iMessage.',
+ },
+ {
+ icon: Send,
+ title: 'Draft-and-send',
+ description: 'Any external action stages a draft first — the agent only commits when you confirm.',
+ },
+ {
+ icon: Heart,
+ title: 'Heartbeat + retry',
+ description: 'Stuck agents auto-fail with timeout detection. Retry directly from the debug dashboard.',
+ },
+ {
+ icon: Plug,
+ title: 'Composio integrations',
+ description: 'One API key unlocks 1000+ toolkits. Gmail, Slack, GitHub, Linear, Notion, and more — OAuth handled.',
+ },
+ {
+ icon: LayoutDashboard,
+ title: 'Debug dashboard',
+ description: 'React + Vite dashboard with spend, tokens, agent timelines, memory graph, automations, and connections.',
+ },
+]
+
+export function FeaturesGrid() {
+ return (
+
+
+
+ {/* Content area */}
+
+ {docs.map(({ id, label }) => (
+
+ ))}
+
+
+ {children}
+
+
+
+ + Everything you need +
++ A full personal agent stack — not just a chatbot. +
+ +
+ {FEATURES.map(({ icon: Icon, title, description }) => (
+
+
+
+ ))}
+
+
+ {title}
+{description}
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+
+ {/* Headline */}
+
+ + Your new best friend{' '} + {/* eslint-disable-next-line @next/next/no-img-element */} + +
+ + {/* Subtitle */} ++ A proactive iMessage-based agent built on the Claude Agent SDK. Multi-agent + architecture, robust memory, automations, and 1000+ integrations. +
+ + {/* CTAs */} + + + {/* Stat pills */} +
+ {[
+ '43 stars',
+ '11 forks',
+ 'MIT License',
+ 'Built on Claude Agent SDK',
+ ].map((stat) => (
+
+ {stat}
+
+ ))}
+
+
+ {FALLBACK}
+
+ )
+ }
+
+ return (
+
+ )
+}
diff --git a/website/components/Navbar.tsx b/website/components/Navbar.tsx
new file mode 100644
index 00000000..636c2655
--- /dev/null
+++ b/website/components/Navbar.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import { Github, Youtube, Menu, X } from 'lucide-react'
+
+export function Navbar() {
+ const [open, setOpen] = useState(false)
+
+ return (
+
+
+ )}
+
+ setOpen(false)}
+ >
+ Docs
+
+ setOpen(false)}
+ >
+ Quick start
+
+ setOpen(false)}
+ >
+
+
+
+ + What you'll need +
++ All free-tier friendly. The setup wizard will prompt you for each key. +
+ +
+
+
+
+
+ | Service | +Why | +Free? | +Discount | +
|---|---|---|---|
| + + {service} + + | +{why} | +{free} | +{discount} | +
+
+ + Get running in 5 steps +
++ The setup wizard handles API keys, webhook registration, and first-run validation. +
+ +-
+ {STEPS.map(({ n, title, cmd }) => (
+
-
+ + {n} ++++
{title}
++++ {cmd} +++++
+ ))}
+
+
+
+
+ Debug dashboard
+
+ Visit{' '}
+ http://localhost:5173{' '}
+ after npm run dev to open the debug dashboard — agents, memory, automations, and connections.
+