|
| 1 | +import type { Metadata } from 'next'; |
| 2 | +import { TopNav } from '@/components/TopNav'; |
| 3 | +import { Footer } from '@/components/Footer'; |
| 4 | +import { FeatureSection } from '@/components/FeatureSection'; |
| 5 | +import { HostSkillsVisual } from '@/components/ui/HostSkillsVisual'; |
| 6 | +import { Button } from '@/components/ui/Button'; |
| 7 | +import { LucideIcon } from '@/components/ui/LucideIcon'; |
| 8 | +import { |
| 9 | + FocusContextVisual, |
| 10 | + MemoryTimelineVisual, |
| 11 | + SoulVisual, |
| 12 | + EvolutionVisual, |
| 13 | + WorkspaceVisual, |
| 14 | + ModelSwapVisual, |
| 15 | +} from '@/components/ui/agent/AgentVisuals'; |
| 16 | +import { GITHUB_URL, SITE_URL } from '@/lib/version'; |
| 17 | +import styles from './page.module.css'; |
| 18 | + |
| 19 | +export const metadata: Metadata = { |
| 20 | + title: 'Dao Agent — A browser-native AI that lives next to your tabs.', |
| 21 | + description: |
| 22 | + 'Dao Agent is the AI built into Dao Browser. Focus-aware context, long-term memory, switchable souls, host-based skills, sandboxed workspace, self-evolution, and no vendor lock-in.', |
| 23 | + alternates: { |
| 24 | + canonical: `${SITE_URL}/agent`, |
| 25 | + }, |
| 26 | + openGraph: { |
| 27 | + title: 'Dao Agent — AI built into the browser.', |
| 28 | + description: |
| 29 | + 'Focus-aware context, long-term memory, switchable souls, host-based skills, sandboxed workspace, self-evolution. Bring your own model.', |
| 30 | + url: `${SITE_URL}/agent`, |
| 31 | + siteName: 'Dao Browser', |
| 32 | + type: 'website', |
| 33 | + }, |
| 34 | +}; |
| 35 | + |
| 36 | +export default function AgentPage() { |
| 37 | + return ( |
| 38 | + <> |
| 39 | + <TopNav /> |
| 40 | + <main> |
| 41 | + {/* -------- Hero -------- */} |
| 42 | + <section id="top" className={styles.hero}> |
| 43 | + <div className={styles.eyebrow}>DAO AGENT</div> |
| 44 | + <h1 className={styles.h1}> |
| 45 | + A browser-native AI that learns you, on your terms. |
| 46 | + </h1> |
| 47 | + <p className={styles.subtitle}> |
| 48 | + Focus-aware context, long-term memory, switchable souls, per-host |
| 49 | + skills, a sandboxed workspace, self-evolution — and the model |
| 50 | + choice stays yours. |
| 51 | + </p> |
| 52 | + |
| 53 | + <div className={styles.heroPillRow}> |
| 54 | + <span className={styles.heroPill}> |
| 55 | + <LucideIcon name="scan-eye" size={13} /> Focus context |
| 56 | + </span> |
| 57 | + <span className={styles.heroPill}> |
| 58 | + <LucideIcon name="brain" size={13} /> Long-term memory |
| 59 | + </span> |
| 60 | + <span className={styles.heroPill}> |
| 61 | + <LucideIcon name="heart" size={13} /> A soul of its own |
| 62 | + </span> |
| 63 | + <span className={styles.heroPill}> |
| 64 | + <LucideIcon name="repeat" size={13} /> Self-evolution |
| 65 | + </span> |
| 66 | + <span className={styles.heroPill}> |
| 67 | + <LucideIcon name="globe" size={13} /> Host-based skills |
| 68 | + </span> |
| 69 | + <span className={styles.heroPill}> |
| 70 | + <LucideIcon name="folder" size={13} /> Workspace |
| 71 | + </span> |
| 72 | + <span className={styles.heroPill}> |
| 73 | + <LucideIcon name="lock-open" size={13} /> Your API · your data |
| 74 | + </span> |
| 75 | + </div> |
| 76 | + |
| 77 | + <nav className={styles.toc} aria-label="Page sections"> |
| 78 | + <a className={styles.tocLink} href="#focus">Focus</a> |
| 79 | + <a className={styles.tocLink} href="#memory">Memory</a> |
| 80 | + <a className={styles.tocLink} href="#soul">Soul</a> |
| 81 | + <a className={styles.tocLink} href="#evolution">Evolution</a> |
| 82 | + <a className={styles.tocLink} href="#skills">Skills</a> |
| 83 | + <a className={styles.tocLink} href="#workspace">Workspace</a> |
| 84 | + <a className={styles.tocLink} href="#models">Models</a> |
| 85 | + </nav> |
| 86 | + </section> |
| 87 | + |
| 88 | + {/* -------- 01 Focus context -------- */} |
| 89 | + <FeatureSection |
| 90 | + id="focus" |
| 91 | + eyebrow="01 / FOCUS CONTEXT" |
| 92 | + heading="It already knows what you're looking at." |
| 93 | + body="Every prompt to Dao Agent carries the page you're on and what you've selected — automatically, no copy-paste. Ask a follow-up question and the agent answers about this paragraph, this code block, this video timestamp. The browser is the context." |
| 94 | + bullets={[ |
| 95 | + { icon: 'scan-eye', label: 'Current page + DOM snapshot' }, |
| 96 | + { icon: 'mouse-pointer-2', label: 'Highlighted selection auto-attached' }, |
| 97 | + { icon: 'target', label: 'No context-pasting, no tab-juggling' }, |
| 98 | + ]} |
| 99 | + customVisual={<FocusContextVisual />} |
| 100 | + mockupSide="right" |
| 101 | + /> |
| 102 | + |
| 103 | + {/* -------- 02 Long-term memory -------- */} |
| 104 | + <FeatureSection |
| 105 | + id="memory" |
| 106 | + eyebrow="02 / LONG-TERM MEMORY" |
| 107 | + heading="Tell it once. It remembers." |
| 108 | + body="Facts you share — your role, your preferences, the projects you're shipping — become structured memory entries the agent loads on every turn. No prompt rewriting between sessions. The memory is local, inspectable, and yours to edit." |
| 109 | + bullets={[ |
| 110 | + { icon: 'brain', label: 'Typed memory: user · project · feedback · reference' }, |
| 111 | + { icon: 'file-text', label: 'Stored as readable Markdown' }, |
| 112 | + { icon: 'shield-check', label: 'Lives on your machine, not in the cloud' }, |
| 113 | + ]} |
| 114 | + customVisual={<MemoryTimelineVisual />} |
| 115 | + mockupSide="left" |
| 116 | + /> |
| 117 | + |
| 118 | + {/* -------- 03 Soul -------- */} |
| 119 | + <FeatureSection |
| 120 | + id="soul" |
| 121 | + eyebrow="03 / SOUL" |
| 122 | + heading="One assistant. Yours. For the long run." |
| 123 | + body="Dao Agent isn't a row of role-bots you switch between — it's a single companion that grows into you. Its soul is the slow accumulation of how you speak, what you care about, what you can't stand. The same secretary every morning, sharper every month. You shape it; it stays." |
| 124 | + bullets={[ |
| 125 | + { icon: 'heart', label: 'One identity, refined over months — not a costume rack' }, |
| 126 | + { icon: 'sliders-horizontal', label: 'Voice, principles, taboos, the things it should remember to ask' }, |
| 127 | + { icon: 'code', label: 'Soul is a plain file you can read, edit, version, back up' }, |
| 128 | + ]} |
| 129 | + customVisual={<SoulVisual />} |
| 130 | + mockupSide="right" |
| 131 | + /> |
| 132 | + |
| 133 | + {/* -------- 04 Self-evolution -------- */} |
| 134 | + <FeatureSection |
| 135 | + id="evolution" |
| 136 | + eyebrow="04 / SELF-EVOLUTION" |
| 137 | + heading="It gets better the more you use it." |
| 138 | + body="After meaningful interactions, the agent reflects on what worked and what didn't — and rewrites its own memory, prunes stale references, sharpens its soul. You can review every change before it lands. Nothing learns silently." |
| 139 | + bullets={[ |
| 140 | + { icon: 'repeat', label: 'Reflect → propose → diff → accept' }, |
| 141 | + { icon: 'refresh-cw', label: 'Memory & soul updates as readable diffs' }, |
| 142 | + { icon: 'eye', label: 'Audit log: every learned fact has a source' }, |
| 143 | + ]} |
| 144 | + customVisual={<EvolutionVisual />} |
| 145 | + mockupSide="left" |
| 146 | + /> |
| 147 | + |
| 148 | + {/* -------- 05 Host-based skills -------- */} |
| 149 | + <FeatureSection |
| 150 | + id="skills" |
| 151 | + eyebrow="05 / HOST-BASED SKILLS" |
| 152 | + heading="Skills tuned to where you are — taught in plain conversation." |
| 153 | + body="“Next time I'm on GitHub, summarize the PR diff for me.” That's it — the agent turns the request into a reusable skill, scoped to that one host, and brings it back the next time you land on the domain. Skills are scoped, so you can keep hundreds without bloating the prompt: only the ones relevant to the page you're on get loaded into context." |
| 154 | + bullets={[ |
| 155 | + { icon: 'sparkles', label: 'Create skills by asking — no scripting required' }, |
| 156 | + { icon: 'globe', label: 'Per-host scope: only what matters here loads' }, |
| 157 | + { icon: 'layers', label: 'Hundreds of skills, zero context bloat' }, |
| 158 | + { icon: 'zap', label: 'Hot-loaded the moment you land on the domain' }, |
| 159 | + ]} |
| 160 | + customVisual={<HostSkillsVisual />} |
| 161 | + mockupSide="right" |
| 162 | + /> |
| 163 | + |
| 164 | + {/* -------- 06 Workspace -------- */} |
| 165 | + <FeatureSection |
| 166 | + id="workspace" |
| 167 | + eyebrow="06 / WORKSPACE" |
| 168 | + heading="A sandboxed scratch disk for the agent." |
| 169 | + body="The agent has a quota-bounded, path-normalized workspace of its own — for notes, scrapes, scripts, saved souls. Read, write, list. It cannot escape that root or touch the rest of your filesystem. V4A diffs make every file change reversible." |
| 170 | + bullets={[ |
| 171 | + { icon: 'folder', label: 'Path-normalized · escape-proof' }, |
| 172 | + { icon: 'file-text', label: 'Read / write / list, V4A patch format' }, |
| 173 | + { icon: 'layers', label: 'Quota-bounded — no surprise disk usage' }, |
| 174 | + ]} |
| 175 | + customVisual={<WorkspaceVisual />} |
| 176 | + mockupSide="left" |
| 177 | + /> |
| 178 | + |
| 179 | + {/* -------- 07 Your API, your data -------- */} |
| 180 | + <FeatureSection |
| 181 | + id="models" |
| 182 | + eyebrow="07 / YOUR API, YOUR DATA" |
| 183 | + heading="Your model. Your key. Your data." |
| 184 | + body="Dao Agent talks to anything that speaks the OpenAI-compatible API: Claude, GPT, Gemini, DeepSeek, Qwen, your local Ollama. The endpoint and key live in your config — not in a Dao account. Every memory, every soul, every workspace byte is a file on your disk that you can read, edit, back up, or delete. No middleman, no telemetry, no lock-in." |
| 185 | + bullets={[ |
| 186 | + { icon: 'cpu', label: 'OpenAI-compatible — plug in any vendor' }, |
| 187 | + { icon: 'lock-open', label: 'Your API key stays on your machine' }, |
| 188 | + { icon: 'shield-check', label: 'Memory & souls are local files you own' }, |
| 189 | + { icon: 'repeat', label: 'Swap providers without rewriting anything' }, |
| 190 | + ]} |
| 191 | + customVisual={<ModelSwapVisual />} |
| 192 | + mockupSide="right" |
| 193 | + /> |
| 194 | + |
| 195 | + {/* -------- Closing CTA -------- */} |
| 196 | + <section className={styles.cta}> |
| 197 | + <h2 className={styles.ctaHeading}>Try Dao Agent.</h2> |
| 198 | + <p className={styles.ctaBody}> |
| 199 | + It ships inside Dao Browser — no separate install, no extra |
| 200 | + account. Open the sidebar, pick a soul, plug in a key. |
| 201 | + </p> |
| 202 | + <div className={styles.ctaActions}> |
| 203 | + <Button variant="primary" disabled> |
| 204 | + <LucideIcon name="clock" size={16} aria-hidden /> |
| 205 | + Coming Soon |
| 206 | + </Button> |
| 207 | + <Button href={GITHUB_URL} variant="ghost" external> |
| 208 | + <LucideIcon name="star" size={16} aria-hidden /> |
| 209 | + Star on GitHub |
| 210 | + </Button> |
| 211 | + </div> |
| 212 | + </section> |
| 213 | + </main> |
| 214 | + <Footer /> |
| 215 | + </> |
| 216 | + ); |
| 217 | +} |
0 commit comments