AgentDocs

Created By

AgentDocsa month ago

An agent-first office suite your AI reads and writes over MCP — Docs, Sheets, Slides, a Database, Drive, and Notion-style Pages. Sign in with Google; free to start.

# productivity

# documents

Overview Content Tools Comments

Overview

/* ---------- HERO ---------- */ .hero{position:relative;padding:64px 0 36px;text-align:center} .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase; color:var(--violet-2);border:1px solid var(--line-2);background:rgba(123,44,191,.06); padding:7px 14px;border-radius:100px;margin-bottom:30px; animation:rise .7s cubic-bezier(.2,.7,.2,1) both; } .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(201,243,29,.18);animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} h1.hero-title{ font-size:clamp(40px,7.5vw,82px);line-height:.98;font-weight:700;letter-spacing:-.035em; margin:0 auto 22px;max-width:13ch; animation:rise .8s cubic-bezier(.2,.7,.2,1) .05s both; } h1.hero-title .grad{ background:linear-gradient(100deg,var(--violet) 12%,var(--pink) 92%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .opening-sub{ font-size:clamp(18px,2.6vw,24px);color:var(--fg);font-weight:500;letter-spacing:-.01em; max-width:48ch;margin:0 auto 30px;line-height:1.4; animation:rise .8s cubic-bezier(.2,.7,.2,1) .1s both; } .subhead{ font-size:clamp(15px,2vw,18px);color:var(--fg-dim);max-width:60ch;margin:0 auto 14px;line-height:1.5; animation:rise .8s cubic-bezier(.2,.7,.2,1) .12s both; } .subhead b{color:var(--fg);font-weight:600} .hero-meta{ font-family:var(--mono);font-size:13px;color:var(--fg-faint);letter-spacing:.02em;margin-bottom:34px; animation:rise .8s cubic-bezier(.2,.7,.2,1) .18s both; } .hero-meta .sep{color:var(--line-2);margin:0 10px} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap; animation:rise .8s cubic-bezier(.2,.7,.2,1) .24s both;} .hero-cta .btn{padding:14px 26px;font-size:15.5px} @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- SECTION SCAFFOLD ---------- */ section{position:relative;z-index:1;padding:72px 0} .sec-head{text-align:center;max-width:62ch;margin:0 auto 52px} .sec-tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-dim);margin-bottom:14px} .sec-title{font-size:clamp(28px,4.4vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.05} .sec-sub{color:var(--fg-dim);font-size:17px;margin-top:16px;line-height:1.55}

/* =================================================================== CENTREPIECE — SIDE BY SIDE RACE =================================================================== / .race-shell{ background:var(--ink-2); border:1px solid var(--line);border-radius:24px;padding:8px; box-shadow:0 24px 60px -40px rgba(30,30,63,.22); } .race-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .race-grid>{min-width:0} .panel{ position:relative;border-radius:18px;padding:24px 24px 22px;overflow:hidden; border:1px solid var(--line);min-height:430px;display:flex;flex-direction:column; } .panel.old{background:radial-gradient(120% 100% at 50% 0,rgba(255,107,107,.05),transparent 55%),var(--ink-2)} .panel.new{background:radial-gradient(120% 100% at 50% 0,rgba(201,243,29,.06),transparent 55%),var(--ink-2)} .panel.new{border-color:rgba(201,243,29,.22)} .p-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px} .p-label{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;letter-spacing:-.01em} .p-sub{font-family:var(--mono);font-size:11px;color:var(--fg-faint);letter-spacing:.02em;margin-top:2px} .tag-chip{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em; padding:4px 9px;border-radius:6px} .tag-old{background:rgba(255,107,107,.12);color:var(--red);border:1px solid rgba(255,107,107,.25)} .tag-new{background:rgba(201,243,29,.12);color:var(--lime);border:1px solid rgba(201,243,29,.28)}

/* the stage: agent ---- pipe ---- doc */ .stage{position:relative;flex:1;margin:22px 0 18px;display:grid; grid-template-columns:64px 1fr 84px;align-items:center;gap:8px;min-height:150px} .node{display:flex;flex-direction:column;align-items:center;gap:7px} .node .glyph{ width:54px;height:54px;border-radius:14px;display:grid;place-items:center; border:1px solid var(--line-2);background:var(--ink-3);position:relative; } .agent .glyph{box-shadow:0 0 0 0 rgba(123,44,191,.4)} .agent.busy .glyph{animation:agentPulse 1.1s ease-in-out infinite} @keyframes agentPulse{0%,100%{box-shadow:0 0 0 0 rgba(123,44,191,.0)}50%{box-shadow:0 0 0 6px rgba(123,44,191,.10)}} .node .glyph svg{width:26px;height:26px} .node .cap{font-family:var(--mono);font-size:9.5px;color:var(--fg-faint);text-transform:uppercase;letter-spacing:.05em}

.doc-old .glyph{border-color:rgba(255,107,107,.3)} .doc-new .glyph{border-color:rgba(201,243,29,.32)}

/* the pipe */ .pipe{position:relative;height:100%;display:flex;align-items:center} .pipe-track{position:relative;width:100%;border-radius:100px;overflow:hidden} .pipe.fat .pipe-track{height:34px;background:rgba(255,107,107,.06);border:1px solid rgba(255,107,107,.16)} .pipe.thin .pipe-track{height:13px;background:rgba(201,243,29,.07);border:1px solid rgba(201,243,29,.20)} .pipe .req{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--mono); font-size:9px;letter-spacing:.04em;color:var(--fg-faint);left:8px;z-index:3;pointer-events:none}

/* data chips travelling down the pipe (doc -> agent, i.e. right to left) / .chip{position:absolute;top:50%;border-radius:4px;transform:translateY(-50%)} .pipe.fat .chip{ height:18px;background:linear-gradient(90deg,rgba(255,107,107,.55),rgba(255,180,84,.5)); border:1px solid rgba(255,107,107,.4); animation:flowFat 4.2s linear infinite; } .pipe.fat .chip.meta{height:10px;background:rgba(255,180,84,.35);border-color:rgba(255,180,84,.4)} .pipe.thin .chip{ height:7px;width:14px;background:linear-gradient(90deg,var(--lime),var(--violet-2)); border:1px solid rgba(201,243,29,.5); animation:flowThin 1.05s linear infinite; } / fat chips: many, wide, slow / .pipe.fat .chip.c1{width:30px;animation-delay:0s} .pipe.fat .chip.c2{width:22px;animation-delay:.5s} .pipe.fat .chip.c3{width:34px;animation-delay:1.0s} .pipe.fat .chip.c4{width:18px;animation-delay:1.6s} .pipe.fat .chip.c5{width:26px;animation-delay:2.1s} .pipe.fat .chip.c6{width:20px;animation-delay:2.7s} .pipe.fat .chip.c7{width:30px;animation-delay:3.3s} .pipe.fat .chip.c8{width:16px;animation-delay:3.8s} @keyframes flowFat{ 0%{right:-12%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{right:96%;opacity:0} } / thin chips: few, small, zip */ .pipe.thin .chip.t1{animation-delay:0s} .pipe.thin .chip.t2{animation-delay:.35s} .pipe.thin .chip.t3{animation-delay:.7s} @keyframes flowThin{ 0%{right:-16%;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{right:92%;opacity:0} }

/* COUNTERS */ .counter{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px} .metric{background:var(--ink-3);border:1px solid var(--line);border-radius:10px;padding:11px 12px;text-align:left} .metric .k{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-faint);margin-bottom:5px} .metric .v{font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums} .panel.old .metric .v{color:var(--red)} .panel.new .metric .v{color:var(--lime)} .metric .v.dim{color:var(--fg-dim)!important}

/* THROUGHPUT — task checklist */ .tasks{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px} .tasks-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px} .tasks-head .lab{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-faint)} .tasks-head .cnt{font-family:var(--mono);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums} .panel.old .cnt{color:var(--red)} .panel.new .cnt{color:var(--lime)} .task-row{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px; color:var(--fg-faint);padding:3px 0;opacity:.35;transition:opacity .3s,color .3s} .task-row.done{opacity:1;color:var(--fg-dim)} .task-row .box{ width:15px;height:15px;border-radius:4px;border:1px solid var(--line-2);flex:none; display:grid;place-items:center;transition:all .25s} .task-row.done .box{border-color:var(--lime);background:rgba(201,243,29,.12)} .panel.old .task-row.done .box{border-color:var(--red);background:rgba(255,107,107,.12)} .task-row .box svg{width:10px;height:10px;opacity:0;transform:scale(.5);transition:.25s} .task-row.done .box svg{opacity:1;transform:scale(1)} .task-row.busy{color:var(--fg-dim)} .spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--red); animation:spin 1s linear infinite;flex:none} .spin.lime{border-top-color:var(--lime)} @keyframes spin{to{transform:rotate(360deg)}}

.race-foot{display:flex;align-items:center;justify-content:center;gap:14px; padding:18px 8px 8px;font-family:var(--mono);font-size:12px;color:var(--fg-faint);flex-wrap:wrap} .race-foot b{color:var(--lime);font-weight:700} .timeline{display:flex;align-items:center;gap:10px} .tl-bar{width:160px;height:4px;border-radius:100px;background:var(--line);overflow:hidden;position:relative} .tl-fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--violet),var(--lime)); border-radius:100px;animation:tl 7s linear infinite} @keyframes tl{0%{width:0}100%{width:100%}} .race-note{text-align:center;font-family:var(--mono);font-size:11.5px;color:var(--fg-faint);margin-top:18px} .race-note b{color:var(--fg-dim)}

/* static fallback (reduced motion) */ .rm-only{display:none}

/* =================================================================== APP SHOWCASE — tabbed product suite =================================================================== / .suite{position:relative} / app switcher tabs — styled as unmistakable buttons / .tabs-hint{display:flex;align-items:center;justify-content:center;gap:10px; font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--violet-2); margin-bottom:16px;text-transform:uppercase} .tabs-hint .ar{color:var(--lime);font-weight:700;animation:hintNudge 1.8s ease-in-out infinite} .tabs-hint .ar.r{animation-delay:.9s} @keyframes hintNudge{0%,100%{opacity:.5;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}} .tabs-hint .ar.l{animation-name:hintNudgeL} @keyframes hintNudgeL{0%,100%{opacity:.5;transform:translateX(0)}50%{opacity:1;transform:translateX(-3px)}} .app-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:30px} .app-tab{ position:relative;display:flex;align-items:center;gap:9px;cursor:pointer;font-family:var(--disp); font-weight:700;font-size:14.5px;color:var(--fg);letter-spacing:-.01em; background:linear-gradient(180deg,var(--ink-3),var(--ink-2)); border:1.5px solid var(--line-2);border-radius:100px; padding:11px 20px 11px 13px; box-shadow:0 1px 0 rgba(30,30,63,.06),0 6px 16px -10px rgba(30,30,63,.25); transition:border-color .18s,color .18s,background .18s,transform .12s,box-shadow .2s; -webkit-appearance:none;appearance:none; } .app-tab:hover{color:var(--fg);border-color:var(--violet);transform:translateY(-2px); box-shadow:0 8px 20px -10px rgba(123,44,191,.45)} .app-tab:active{transform:translateY(1px); box-shadow:0 4px 12px -8px rgba(30,30,63,.3)} .app-tab:focus-visible{outline:2px solid var(--violet-2);outline-offset:3px} .app-tab .ic{ width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center; background:var(--ink);border:1px solid var(--line-2);transition:.2s} .app-tab .ic svg{width:15px;height:15px} .app-tab[aria-selected="true"]{color:var(--fg);background:linear-gradient(180deg,#d4fa55,var(--lime)); border-color:var(--lime-dim);transform:translateY(-1px); box-shadow:0 8px 22px -10px rgba(201,243,29,.8)} .app-tab[aria-selected="true"]:hover{transform:translateY(-2px)} .app-tab[aria-selected="true"] .ic{background:rgba(30,30,63,.10);border-color:rgba(30,30,63,.18)} .app-tab[aria-selected="true"] .ic svg{stroke:var(--fg)!important} / active-tab pointer affordance */ .app-tab[aria-selected="true"]::after{ content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%) rotate(45deg); width:10px;height:10px;background:var(--lime);border-right:1.5px solid var(--lime); border-bottom:1.5px solid var(--lime);border-radius:0 0 3px 0}

/* the big stage / .app-stage{ background:var(--ink-2); border:1px solid var(--line);border-radius:24px;padding:8px; box-shadow:0 24px 60px -40px rgba(30,30,63,.22); } .app-panel{display:none} .app-panel.active{display:grid;grid-template-columns:1fr 1.25fr;gap:8px; animation:appIn .45s cubic-bezier(.2,.7,.2,1) both} .app-panel.active>{min-width:0} .app-panel.flip.active{grid-template-columns:1.25fr 1fr} @keyframes appIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* left: the pitch */ .app-pitch{padding:34px 30px;display:flex;flex-direction:column;justify-content:center;gap:0} .app-panel.flip .app-pitch{order:2} .app-pitch .ap-kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono); font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-2);margin-bottom:18px} .app-pitch .ap-kicker .ap-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center; background:var(--ink-3);border:1px solid var(--line-2);flex:none} .app-pitch .ap-kicker .ap-ic svg{width:15px;height:15px} .app-pitch h3{font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.04;margin-bottom:15px} .app-pitch h3 .grad{background:linear-gradient(100deg,var(--violet),var(--pink)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .app-pitch p{color:var(--fg-dim);font-size:15.5px;line-height:1.6;max-width:44ch} .app-pitch p b{color:var(--fg);font-weight:600} .app-feats{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px} .app-feats .ft{font-family:var(--mono);font-size:11px;color:var(--fg-dim); background:var(--ink-3);border:1px solid var(--line);border-radius:7px;padding:5px 10px;letter-spacing:.01em} .app-pitch .ea-mini{display:inline-flex;align-items:center;gap:8px;align-self:flex-start; font-family:var(--disp);font-weight:600;font-size:14px;color:var(--fg); border:1px solid rgba(95,122,14,.45);background:rgba(201,243,29,.12);border-radius:10px; padding:10px 16px;transition:border-color .2s,background .2s,transform .15s;cursor:pointer} .app-pitch .ea-mini:hover{border-color:var(--lime-dim);background:rgba(201,243,29,.22);transform:translateY(-1px)}

/* right: the mockup window */ .app-window{ background:var(--ink-2);border:1px solid var(--line-2);border-radius:18px;overflow:hidden; display:flex;flex-direction:column;min-height:380px;min-width:0;max-width:100%; box-shadow:0 18px 50px -30px rgba(30,30,63,.30)} .app-panel.flip .app-window{order:1} .win-bar{display:flex;align-items:center;gap:9px;padding:11px 14px; border-bottom:1px solid var(--line);background:var(--ink-3)} .win-dots{display:flex;gap:6px} .win-dots i{width:10px;height:10px;border-radius:50%;background:var(--line-2)} .win-dots i:nth-child(1){background:#ff6b6b66} .win-dots i:nth-child(2){background:#ffb45466} .win-dots i:nth-child(3){background:#c6f03c66} .win-title{font-family:var(--mono);font-size:11px;color:var(--fg-faint);display:flex;align-items:center;gap:7px} .win-title .ft{color:var(--fg-dim)} .win-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono); font-size:10px;color:var(--violet-2);background:rgba(123,44,191,.1); border:1px solid rgba(123,44,191,.22);border-radius:100px;padding:3px 9px} .win-live .ld{width:6px;height:6px;border-radius:50%;background:var(--violet-2); box-shadow:0 0 8px var(--violet-2);animation:pulse 1.8s infinite} .win-body{flex:1;padding:18px;overflow:hidden;position:relative}

/* ---- DOCS mock ---- */ .doc-toolbar{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap} .doc-toolbar .tb{font-family:var(--mono);font-size:11px;color:var(--fg-faint); width:26px;height:24px;border-radius:6px;border:1px solid var(--line);background:var(--ink-3); display:grid;place-items:center} .doc-toolbar .tb.b{font-weight:700;color:var(--fg-dim)} .doc-toolbar .tb.i{font-style:italic} .doc-toolbar .sepv{width:1px;background:var(--line);margin:2px 4px} .doc-page{font-family:var(--disp);line-height:1.6} .doc-page .dt{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px} .doc-page .dm{font-family:var(--mono);font-size:11px;color:var(--fg-faint);margin-bottom:18px} .doc-page .dh{font-size:15px;font-weight:700;color:var(--fg);margin:16px 0 8px} .doc-page p{font-size:13.5px;color:var(--fg-dim);margin-bottom:10px} .doc-page p b{color:var(--fg)} .doc-page .hl{background:rgba(201,243,29,.16);color:var(--fg);border-radius:3px;padding:0 2px; box-shadow:inset 0 -1px 0 rgba(201,243,29,.4)} .doc-cursor{display:inline-block;width:2px;height:1.05em;background:var(--violet-2); vertical-align:-2px;margin-left:1px;animation:caret 1.1s steps(1) infinite} @keyframes caret{50%{opacity:0}} .agent-flag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px; color:var(--violet-2);background:rgba(123,44,191,.1);border:1px solid rgba(123,44,191,.25); border-radius:7px;padding:3px 8px;margin-top:6px}

/* ---- SHEETS mock ---- */ .sheet{font-family:var(--mono);font-size:11.5px;border:1px solid var(--line);border-radius:8px;overflow:hidden} .sheet .row{display:grid;grid-template-columns:30px 1.4fr 1fr 1fr .9fr} .sheet .row.head{background:var(--ink-3);color:var(--fg-faint);font-size:10px;letter-spacing:.04em} .sheet .cell{padding:7px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line); color:var(--fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sheet .cell:last-child{border-right:none} .sheet .row:last-child .cell{border-bottom:none} .sheet .gut{color:var(--fg-faint);text-align:center;background:var(--ink-3);font-size:10px} .sheet .cell.num{color:var(--lime);text-align:right;font-variant-numeric:tabular-nums} .sheet .cell.added{background:rgba(201,243,29,.1);color:var(--fg); box-shadow:inset 0 0 0 1px rgba(201,243,29,.4)} .sheet .cell.formula{color:var(--violet-2)} .sheet-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px; font-family:var(--mono);font-size:10.5px;color:var(--fg-faint)} .sheet-foot .tot{color:var(--lime);font-weight:700}

/* ---- SLIDES mock ---- */ .deck{display:flex;flex-direction:column;height:100%;gap:12px} .slide-canvas{flex:1;background:radial-gradient(120% 120% at 80% 0,rgba(123,44,191,.14),transparent 55%), linear-gradient(135deg,var(--ink-3),var(--ink));border:1px solid var(--line-2);border-radius:12px; padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative;min-height:170px} .slide-canvas .pgn{position:absolute;top:12px;right:14px;font-family:var(--mono);font-size:10px;color:var(--fg-faint)} .slide-canvas .sk{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)} .slide-canvas .sttl{font-family:var(--disp);font-weight:700;font-size:clamp(20px,3vw,30px);letter-spacing:-.025em;line-height:1.05} .slide-canvas .sbul{display:flex;flex-direction:column;gap:9px;margin-top:2px} .slide-canvas .sbul span{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--fg-dim)} .slide-canvas .sbul span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none} .filmstrip{display:flex;gap:8px} .thumb{flex:1;aspect-ratio:16/10;border:1px solid var(--line);border-radius:7px;background:var(--ink-3); padding:7px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:border-color .2s} .thumb:hover{border-color:var(--line-2)} .thumb.on{border-color:var(--lime);box-shadow:0 0 0 1px rgba(201,243,29,.3)} .thumb .tl{height:4px;width:70%;border-radius:2px;background:var(--line-2)} .thumb.on .tl{background:var(--lime)} .thumb .tb2{height:3px;width:90%;border-radius:2px;background:var(--line)} .thumb .tb2.s{width:55%}

/* ---- DATABASE mock (reuse + scope) ---- */ .ndb{width:100%;border-collapse:collapse;font-family:var(--disp);font-size:12px} .ndb th{text-align:left;color:var(--fg-faint);font-weight:500;padding:6px 10px 9px; border-bottom:1px solid var(--line);font-size:11px;white-space:nowrap} .ndb th .ti{display:inline-flex;align-items:center;gap:6px} .ndb th .ti svg{width:13px;height:13px;opacity:.7} .ndb td{padding:9px 10px;border-bottom:1px solid var(--line); color:var(--fg);white-space:nowrap;vertical-align:middle} .ndb tr:last-child td{border-bottom:none} .ndb tr.added td{background:rgba(201,243,29,.06)} .ndb .nm{font-weight:600;color:var(--fg);display:flex;align-items:center;gap:8px;font-size:12.5px} .ndb .nm .pg{width:15px;height:15px;flex:none;opacity:.55} .pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500; padding:4px 10px;border-radius:100px;line-height:1;letter-spacing:.01em} .pill .pd{width:6px;height:6px;border-radius:50%;flex:none} .pill.done{background:rgba(201,243,29,.13);color:var(--lime)} .pill.done .pd{background:var(--lime)} .pill.prog{background:rgba(123,44,191,.16);color:var(--violet-2)} .pill.prog .pd{background:var(--violet-2)} .pill.todo{background:rgba(255,180,84,.13);color:var(--amber)} .pill.todo .pd{background:var(--amber)} .pill.block{background:rgba(255,107,107,.13);color:var(--red)} .pill.block .pd{background:var(--red)} .seltag{display:inline-block;font-size:11px;padding:3px 9px;border-radius:6px;line-height:1.3;color:var(--fg-dim)} .seltag.t1{background:rgba(123,44,191,.14);color:var(--violet-2)} .seltag.t2{background:rgba(201,243,29,.12);color:var(--lime-dim)} .seltag.t3{background:rgba(255,180,84,.13);color:var(--amber)} .own{display:inline-flex;align-items:center;gap:7px;color:var(--fg-dim);font-size:11.5px} .own .av{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center; font-size:10px;font-weight:700;color:#0a0b0f;font-family:var(--disp)} .ndb .dt{font-family:var(--mono);font-size:11px;color:var(--fg-faint)} .db-views{display:flex;gap:7px;margin-bottom:14px;font-family:var(--mono);font-size:10.5px} .db-views .vw{color:var(--fg-faint);padding:4px 9px;border-radius:7px;display:inline-flex;align-items:center;gap:6px} .db-views .vw.on{color:var(--fg);background:var(--ink-3);border:1px solid var(--line)} .db-views .vw svg{width:12px;height:12px}

/* ---- DRIVE mock ---- */ .drive{display:grid;grid-template-columns:repeat(3,1fr);gap:11px} .file{background:var(--ink-3);border:1px solid var(--line);border-radius:10px;padding:13px 12px; display:flex;flex-direction:column;gap:9px;align-items:flex-start;transition:border-color .2s,transform .2s} .file:hover{border-color:var(--line-2);transform:translateY(-2px)} .file .fi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center; font-family:var(--mono);font-size:10px;font-weight:700} .file .fn{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--fg);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:100%} .file .fm{font-family:var(--mono);font-size:10px;color:var(--fg-faint);display:flex;align-items:center;gap:6px} .file .fm .fav{width:14px;height:14px;border-radius:50%;display:grid;place-items:center; font-size:7.5px;font-weight:700;color:#0a0b0f} .drive-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; font-family:var(--mono);font-size:11px;color:var(--fg-faint)} .drive-head .crumb{color:var(--fg-dim)} .drive-head .crumb b{color:var(--fg)} .drive-head .cnt{color:var(--fg-faint)}

/* ---- PAGES mock (nested tree + linked db) ---- */ .pages-mock{display:grid;grid-template-columns:.85fr 1.15fr;gap:14px;align-items:start;min-width:0} .page-tree{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--ink-3);min-width:0} .pt-row{display:flex;align-items:center;gap:7px;font-family:var(--disp);font-size:12.5px;color:var(--fg-dim); padding:6px 8px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pt-row .pt-ic{font-size:10px;color:var(--fg-faint);width:10px;flex:none} .pt-row .pt-pg{width:14px;height:14px;flex:none;opacity:.55;color:var(--fg-faint)} .pt-row.lvl1{padding-left:20px} .pt-row.lvl2{padding-left:34px} .pt-row.on{background:rgba(255,0,110,.08);color:var(--fg);font-weight:600} .pt-row.on .pt-pg{opacity:.85;color:var(--pink)} .page-link{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--ink-2);min-width:0} .page-link .pl-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px; color:var(--violet-2);margin-bottom:12px;letter-spacing:.01em} .page-link .pl-head svg{width:14px;height:14px;flex:none} .pl-row{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:7px; border-bottom:1px solid var(--line)} .pl-row:last-of-type{border-bottom:none} .pl-row.added{background:rgba(201,243,29,.06)} .pl-row .pl-t{font-size:12.5px;color:var(--fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .page-link .agent-flag{margin-top:10px}

/* ---------- HOW YOU USE IT ---------- / .useit{background:linear-gradient(180deg,rgba(123,44,191,.05),transparent);border:1px solid var(--line); border-radius:20px;padding:38px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center} .useit>{min-width:0} .useit h3{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.12;margin-bottom:16px} .useit p{color:var(--fg-dim);font-size:16px;line-height:1.6} .useit p b{color:var(--fg)} .chatmock{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:16px;font-size:13.5px;display:flex;flex-direction:column;gap:11px} .bubble{padding:11px 14px;border-radius:13px;line-height:1.45;max-width:92%} .bubble.user{align-self:flex-end;background:var(--violet);color:#fff;font-weight:500;border-bottom-right-radius:4px} .bubble.ai{align-self:flex-start;background:var(--ink-3);border:1px solid var(--line);border-bottom-left-radius:4px} .bubble.ai .tool{font-family:var(--mono);font-size:11px;color:var(--lime);display:flex;align-items:center;gap:7px;margin-bottom:6px} .bubble.ai .tool .d{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}

/* ---------- BRIDGE ---------- */ .bridge{position:relative;background: radial-gradient(120% 140% at 100% 0,rgba(123,44,191,.13),transparent 55%), var(--ink-2); border:1px solid var(--line-2);border-radius:20px;padding:34px 38px;overflow:hidden} .bridge-inner{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center} .bridge .bt{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-2);margin-bottom:13px} .bridge h3{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.025em;margin-bottom:13px;line-height:1.1} .bridge p{color:var(--fg-dim);font-size:15.5px;max-width:54ch;line-height:1.55} .bridge p .ro{color:var(--lime);font-weight:600} .flowmap{display:flex;align-items:center;gap:13px;font-family:var(--mono);font-size:11px} .fm-box{padding:11px 13px;border-radius:11px;border:1px solid var(--line);background:var(--ink-3);text-align:center;line-height:1.4;color:var(--fg-dim)} .fm-box .big{display:block;font-weight:700;font-size:13px;color:var(--fg);margin-bottom:2px} .fm-box.cheap{border-color:rgba(201,243,29,.3);background:rgba(201,243,29,.05)} .fm-box.cheap .big{color:var(--lime)} .fm-arrow{color:var(--violet-2);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9px} .fm-arrow svg{width:30px;height:14px}

/* ---------- CTA STRIP ---------- */ .finale{text-align:center;padding:46px 36px;background: radial-gradient(80% 120% at 50% 0,rgba(201,243,29,.08),transparent 60%),var(--ink-2); border:1px solid var(--line);border-radius:22px} .finale h2{font-size:clamp(28px,4.5vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:18px} .finale h2 .grad{background:linear-gradient(100deg,var(--violet),var(--pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .finale p{color:var(--fg-dim);font-size:17px;max-width:50ch;margin:0 auto 28px} .finale .hero-cta .btn{padding:15px 30px;font-size:16px}

/* ---------- CONNECTOR (ADD TO CLAUDE) ---------- / .connect-shell{ background:linear-gradient(180deg,rgba(201,243,29,.10),var(--ink-2)); border:1px solid rgba(123,44,191,.22);border-radius:24px;padding:38px; box-shadow:0 24px 60px -40px rgba(30,30,63,.22); display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center; } .connect-shell>{min-width:0} .connect-left h3{font-size:clamp(24px,3.2vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin-bottom:14px} .connect-left h3 .grad{background:linear-gradient(100deg,var(--violet),var(--pink)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .connect-left p{color:var(--fg-dim);font-size:15.5px;line-height:1.6;max-width:46ch;margin-bottom:20px} .connect-left p b{color:var(--fg);font-weight:600} /* the URL pill + copy / .url-pill{display:flex;align-items:stretch;gap:0;border:1px solid var(--line-2);border-radius:12px; overflow:hidden;background:var(--ink-3);max-width:440px;width:100%;margin-bottom:18px} .url-pill .u{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:13px 15px; font-family:var(--mono);font-size:13.5px;color:var(--fg);overflow:auto;white-space:nowrap;word-break:break-all} .url-pill #connector-url{min-width:0} .url-pill .u .lk{color:var(--lime);flex:none} .url-pill .u .lk svg{width:15px;height:15px;display:block} .url-pill .copy{ font-family:var(--disp);font-weight:700;font-size:13.5px;cursor:pointer;flex:none; border:none;border-left:1px solid var(--line-2);background:var(--lime);color:#0a0b0f; padding:0 20px;transition:background .18s,transform .1s} .url-pill .copy:hover{background:#d4fa55} .url-pill .copy:active{transform:translateY(1px)} .connect-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .connect-cta .btn{padding:13px 24px;font-size:15px} .connect-cta .same{font-family:var(--mono);font-size:11.5px;color:var(--fg-faint);letter-spacing:.01em;line-height:1.5;max-width:40ch} .connect-cta .same b{color:var(--fg-dim)} / right: numbered steps card */ .connect-steps{background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:26px 28px} .connect-steps .cs-head{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--violet-2);margin-bottom:20px} .connect-steps .cs-head .ld{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)} .cstep{display:flex;gap:15px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)} .cstep:last-child{border-bottom:none;padding-bottom:0} .cstep:first-child{padding-top:0} .cstep .n{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center; font-family:var(--mono);font-weight:700;font-size:14px;color:var(--lime); background:rgba(201,243,29,.1);border:1px solid rgba(201,243,29,.3)} .cstep .ct{font-size:14.5px;color:var(--fg-dim);line-height:1.5} .cstep .ct b{color:var(--fg);font-weight:600} .cstep .ct code{font-family:var(--mono);font-size:12.5px;color:var(--violet-2); background:rgba(123,44,191,.1);border:1px solid rgba(123,44,191,.2);border-radius:5px;padding:1px 6px; word-break:break-all;overflow-wrap:anywhere} .cstep .ct{min-width:0} .connect-tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px} .connect-tools .tl{font-family:var(--mono);font-size:10.5px;color:var(--fg-dim); background:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:4px 9px} @media(max-width:880px){ .connect-shell{grid-template-columns:1fr;gap:28px;padding:28px} }

/* ---------- EARLY-ACCESS FORM ---------- / .ea-form{max-width:480px;margin:0 auto;position:relative} .ea-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .ea-input{ flex:1;min-width:220px;font-family:var(--disp);font-size:15.5px;color:var(--fg); background:var(--ink-2);border:1px solid var(--line-2);border-radius:12px; padding:14px 16px;transition:border-color .2s,box-shadow .2s,background .2s;outline:none; } .ea-input::placeholder{color:var(--fg-faint)} .ea-input:focus{border-color:var(--lime);background:rgba(201,243,29,.04); box-shadow:0 0 0 3px rgba(201,243,29,.12)} .ea-form .btn-primary{padding:14px 26px;font-size:15.5px;white-space:nowrap;border:1px solid transparent} .ea-note{font-family:var(--mono);font-size:11.5px;color:var(--fg-faint);margin-top:13px;letter-spacing:.01em} .ea-success{ display:none;align-items:center;justify-content:center;gap:11px; background:rgba(201,243,29,.07);border:1px solid rgba(201,243,29,.28); border-radius:14px;padding:16px 22px;color:var(--fg);font-size:15.5px;font-weight:500; animation:rise .5s cubic-bezier(.2,.7,.2,1) both; } .ea-success.show{display:flex} .ea-form.done .ea-row,.ea-form.done .ea-note{display:none} .ea-success .tick{ width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--lime);box-shadow:0 0 0 4px rgba(201,243,29,.14)} .ea-success .tick svg{width:14px;height:14px} .ea-success b{font-weight:700} .ea-err{display:none;margin-top:11px;font-family:var(--mono);font-size:12px;color:var(--red)} .ea-err.show{display:block} / mid-page CTA band */ .cta-band{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap; margin-top:42px;padding:22px 26px;border:1px dashed var(--line-2);border-radius:16px; background:linear-gradient(180deg,rgba(201,243,29,.04),transparent);text-align:center} .cta-band .cb-txt{font-size:15px;color:var(--fg-dim)} .cta-band .cb-txt b{color:var(--fg);font-weight:600} .cta-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px; letter-spacing:.04em;color:var(--violet-2);border:1px solid var(--line-2); background:rgba(123,44,191,.06);padding:7px 13px;border-radius:100px;margin-bottom:18px; cursor:pointer;transition:border-color .2s,background .2s,transform .15s} .cta-badge:hover{border-color:var(--violet-2);background:rgba(123,44,191,.1);transform:translateY(-1px)} .cta-badge .pd{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}

/* ---------- STASH FAMILY ---------- */ .family{position:relative;z-index:1;margin-top:80px;border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(123,44,191,.04),transparent);padding:34px 0} .family-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .family-lbl{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-2);white-space:nowrap} .family-pills{display:flex;gap:14px;flex-wrap:wrap} .fam{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:12px; padding:13px 16px;background:var(--ink-2);min-width:175px;text-decoration:none; transition:border-color .2s,transform .2s,box-shadow .25s} a.fam:hover{border-color:rgba(201,243,29,.4);transform:translateY(-2px);box-shadow:0 10px 28px -12px rgba(201,243,29,.4)} .fam .fn{font-weight:700;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;color:var(--fg);flex-wrap:wrap} .fam .fn .fdot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);flex:none} .fam .fd{font-size:12.5px;color:var(--fg-dim)} .fam.here{border-color:rgba(201,243,29,.35);background:radial-gradient(120% 100% at 50% 0,rgba(201,243,29,.08),transparent 60%),var(--ink-2)} .fam .me{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--lime); border:1px solid rgba(201,243,29,.35);border-radius:100px;padding:2px 8px;margin-left:auto} @media(max-width:680px){.fam{min-width:0;flex:1}}

/* ---------- FOOTER ---------- */ footer{position:relative;z-index:1;border-top:1px solid var(--line);margin-top:0;padding:40px 0 56px} .foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start} .foot-note{font-size:13.5px;color:var(--fg-faint);max-width:52ch;line-height:1.6} .foot-note b{color:var(--fg-dim)} .foot-meta{font-family:var(--mono);font-size:11.5px;color:var(--fg-faint);text-align:right;line-height:1.9} .foot-meta a:hover{color:var(--lime)}

/* ---------- RESPONSIVE ---------- */ @media(max-width:880px){ .race-grid{grid-template-columns:1fr} .app-panel.active,.app-panel.flip.active{grid-template-columns:1fr} .app-panel.flip .app-pitch{order:1} .app-panel.flip .app-window{order:2} .app-pitch{padding:28px 22px 8px} .app-window{min-height:0} .useit{grid-template-columns:1fr;padding:28px} .bridge-inner{grid-template-columns:1fr;gap:24px} .nav-links{display:none} } @media(max-width:520px){ .win-body{padding:14px} .app-tab{font-size:13px;padding:8px 12px 8px 9px} .app-tab .ic{width:22px;height:22px} .doc-page .dt{font-size:20px} .ndb{font-size:11px} .ndb td,.ndb th{padding:7px 7px} .win-body:has(.ndb){overflow-x:auto} .drive{grid-template-columns:repeat(2,1fr)} .sheet{font-size:10.5px} .sheet .cell{padding:6px 7px} } @media(max-width:560px){ .wrap{padding:0 18px} nav{padding:20px 18px} .nav-cta .btn-ghost{display:none} .counter{grid-template-columns:1fr 1fr 1fr;gap:6px} .metric{padding:9px 8px} .metric .v{font-size:15px} .flowmap{flex-wrap:wrap;justify-content:center} .foot-meta{text-align:left} }

/* ============ REDUCED MOTION FALLBACK ============ / @media(prefers-reduced-motion:reduce){ ,::before,::after{animation:none!important;transition:none!important} .eyebrow,h1.hero-title,.subhead,.hero-meta,.hero-cta{opacity:1!important;transform:none!important} .chip{display:none!important} .spin{display:none!important} .tl-fill{width:100%!important} .rm-only{display:inline!important} .rm-hide{display:none!important} /* show end-state: all old tasks NOT done except 1, all new done */ .panel.old .task-row{opacity:.4;color:var(--fg-faint)} .panel.old .task-row:first-child{opacity:1;color:var(--fg-dim)} .panel.old .task-row:first-child .box{border-color:var(--red);background:rgba(255,107,107,.12)} .panel.old .task-row:first-child .box svg{opacity:1;transform:none} .panel.new .task-row{opacity:1;color:var(--fg-dim)} .panel.new .task-row .box{border-color:var(--lime);background:rgba(201,243,29,.12)} .panel.new .task-row .box svg{opacity:1;transform:none} .pipe.fat .pipe-track::after{content:"";position:absolute;inset:0; background:repeating-linear-gradient(90deg,rgba(255,107,107,.4) 0 18px,transparent 18px 24px)} .pipe.thin .pipe-track::after{content:"";position:absolute;left:0;width:18%;top:0;bottom:0; background:linear-gradient(90deg,var(--lime),var(--violet-2))} }

A new sibling of Stash · built for the personal AI agent era

A real office suite,
built for the personal AI agent era.

Docs, Sheets, Slides, Database, Drive and Pages — proper apps your agents read and write natively. Cheap, fast, agent-first.

Add AgentDocs to Claude See the difference ↓

Every surface your agent needs

Six real apps your agent actually uses.

Docs, Sheets, Slides, Database, Drive and Pages — each with an agent co-editing live. Pick one.

<!-- APP SWITCHER -->
<div class="tabs-hint"><span class="ar l">←</span> click to explore the apps <span class="ar r">→</span></div>
<div class="app-tabs" role="tablist" aria-label="AgentDocs apps">
  <button class="app-tab" role="tab" aria-selected="true" aria-controls="app-docs" data-app="docs">
    <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="#5F7A0E" stroke-width="1.8"><path d="M6 2h9l3 3v17H6z"/><path d="M15 2v3h3"/><path d="M9 11h6M9 14h6M9 17h3"/></svg></span>Docs</button>
  <button class="app-tab" role="tab" aria-selected="false" aria-controls="app-sheets" data-app="sheets">
    <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="#7B2CBF" stroke-width="1.8"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M3 14h18M9 4v16M15 4v16"/></svg></span>Sheets</button>
  <button class="app-tab" role="tab" aria-selected="false" aria-controls="app-slides" data-app="slides">
    <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="#5F7A0E" stroke-width="1.8"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M9 21h6M12 17v4"/></svg></span>Slides</button>
  <button class="app-tab" role="tab" aria-selected="false" aria-controls="app-database" data-app="database">
    <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="#B86A00" stroke-width="1.8"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg></span>Database</button>
  <button class="app-tab" role="tab" aria-selected="false" aria-controls="app-drive" data-app="drive">
    <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="#7B2CBF" stroke-width="1.8"><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg></span>Drive</button>
  <button class="app-tab" role="tab" aria-selected="false" aria-controls="app-pages" data-app="pages">
    <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="#FF006E" stroke-width="1.8"><rect x="6" y="3" width="13" height="17" rx="2"/><path d="M3 6v13a2 2 0 002 2h11"/><path d="M9 8h7M9 12h7M9 16h4"/></svg></span>Pages</button>
</div>

<div class="app-stage">

  <!-- DOCS -->
  <div class="app-panel active" id="app-docs" role="tabpanel">
    <div class="app-pitch">
      <span class="ap-kicker"><span class="ap-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#5F7A0E" stroke-width="1.8"><path d="M6 2h9l3 3v17H6z"/><path d="M15 2v3h3"/></svg></span>AgentDocs · Docs</span>
      <h3>Documents that <span class="grad">write themselves</span></h3>
      <p>A clean writing surface backed by plain <b>Markdown</b> — so it diffs and merges like code. Your agent drafts and edits inline while you watch.</p>
      <div class="app-feats"><span class="ft">markdown native</span><span class="ft">live co-editing</span><span class="ft">version history</span></div>
      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <a href="#early" class="ea-mini" data-ea-focus>Get early access →</a>
        <a href="/features/docs/" class="ea-mini">Learn more →</a>
      </div>
    </div>
    <div class="app-window">
      <div class="win-bar">
        <span class="win-dots"><i></i><i></i><i></i></span>
        <span class="win-title">Q3-launch-plan<span class="ft">.md</span></span>
        <span class="win-live"><span class="ld"></span>agent editing</span>
      </div>
      <div class="win-body">
        <div class="doc-toolbar">
          <span class="tb b">B</span><span class="tb i">I</span><span class="tb">H</span>
          <span class="sepv"></span><span class="tb">•</span><span class="tb">"</span><span class="tb">&lt;&gt;</span>
        </div>
        <div class="doc-page">
          <div class="dt">Q3 Launch Plan</div>
          <div class="dm">Owner @growth · updated just now</div>
          <div class="dh">Goals</div>
          <p>Ship to <b>twelve design partners</b> and book <span class="hl">five reference calls</span> before quarter-end.</p>
          <div class="dh">This week</div>
          <p>Lock the demo script, finalise pricing, and brief the partner cohort<span class="doc-cursor"></span></p>
          <span class="agent-flag">✨ Claude added "This week" · 2 lines</span>
        </div>
      </div>
    </div>
  </div>

  <!-- SHEETS -->
  <div class="app-panel flip" id="app-sheets" role="tabpanel" hidden>
    <div class="app-pitch">
      <span class="ap-kicker"><span class="ap-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#7B2CBF" stroke-width="1.8"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M9 4v16"/></svg></span>AgentDocs · Sheets</span>
      <h3>Spreadsheets your agent <span class="grad">just queries</span></h3>
      <p>A familiar grid <b>powered by Stash</b>. Agents read and write rows in plain language, and every cell they touch lights up.</p>
      <div class="app-feats"><span class="ft">CSV native</span><span class="ft">formulas</span><span class="ft">agent-added cells</span></div>
      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <a href="#early" class="ea-mini" data-ea-focus>Get early access →</a>
        <a href="/features/sheets/" class="ea-mini">Learn more →</a>
      </div>
    </div>
    <div class="app-window">
      <div class="win-bar">
        <span class="win-dots"><i></i><i></i><i></i></span>
        <span class="win-title">pipeline<span class="ft">.sheet</span></span>
        <span class="win-live"><span class="ld"></span>+1 row by agent</span>
      </div>
      <div class="win-body">
        <div class="sheet">
          <div class="row head"><span class="cell gut"></span><span class="cell">Deal</span><span class="cell">Stage</span><span class="cell">Owner</span><span class="cell">£ Value</span></div>
          <div class="row"><span class="cell gut">1</span><span class="cell">Northwind</span><span class="cell">Demo</span><span class="cell">Maya</span><span class="cell num">4,200</span></div>
          <div class="row"><span class="cell gut">2</span><span class="cell">Acme</span><span class="cell">Trial</span><span class="cell">Jonah</span><span class="cell num">9,800</span></div>
          <div class="row"><span class="cell gut">3</span><span class="cell added">Lumen</span><span class="cell added">Won</span><span class="cell added">Priya</span><span class="cell num added">12,000</span></div>
          <div class="row"><span class="cell gut">4</span><span class="cell">Vela</span><span class="cell">Lead</span><span class="cell">Dev</span><span class="cell num">2,100</span></div>
          <div class="row"><span class="cell gut">5</span><span class="cell formula">=Total</span><span class="cell"></span><span class="cell"></span><span class="cell num formula">28,100</span></div>
        </div>
        <div class="sheet-foot"><span>4 rows · agent synced</span><span>Won this Q: <span class="tot">£12,000</span></span></div>
      </div>
    </div>
  </div>

  <!-- SLIDES -->
  <div class="app-panel" id="app-slides" role="tabpanel" hidden>
    <div class="app-pitch">
      <span class="ap-kicker"><span class="ap-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#5F7A0E" stroke-width="1.8"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M9 21h6"/></svg></span>AgentDocs · Slides</span>
      <h3>Decks from a <span class="grad">prompt</span></h3>
      <p>Author in Markdown, render to a real slide canvas. Your agent builds the whole deck and you flick through the filmstrip to tune it.</p>
      <div class="app-feats"><span class="ft">markdown → slides</span><span class="ft">live preview</span><span class="ft">filmstrip</span></div>
      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <a href="#early" class="ea-mini" data-ea-focus>Get early access →</a>
        <a href="/features/slides/" class="ea-mini">Learn more →</a>
      </div>
    </div>
    <div class="app-window">
      <div class="win-bar">
        <span class="win-dots"><i></i><i></i><i></i></span>
        <span class="win-title">q3-review<span class="ft">.deck</span></span>
        <span class="win-live"><span class="ld"></span>4 slides</span>
      </div>
      <div class="win-body">
        <div class="deck">
          <div class="slide-canvas">
            <span class="pgn">02 / 04</span>
            <span class="sk">The agent-era stack</span>
            <span class="sttl">Cheaper, faster, agent-first</span>
            <div class="sbul"><span>Read-optimised by default</span><span>Git history underneath</span><span>A fraction of Office's cost</span></div>
          </div>
          <div class="filmstrip">
            <div class="thumb"><div class="tl"></div><div class="tb2"></div><div class="tb2 s"></div></div>
            <div class="thumb on"><div class="tl"></div><div class="tb2"></div><div class="tb2 s"></div></div>
            <div class="thumb"><div class="tl"></div><div class="tb2"></div><div class="tb2 s"></div></div>
            <div class="thumb"><div class="tl"></div><div class="tb2"></div><div class="tb2 s"></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- DATABASE -->
  <div class="app-panel flip" id="app-database" role="tabpanel" hidden>
    <div class="app-pitch">
      <span class="ap-kicker"><span class="ap-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#B86A00" stroke-width="1.8"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5"/></svg></span>AgentDocs · Database</span>
      <h3>A database that feels <span class="grad">friendly</span></h3>
      <p>Statuses, owners, tags and views — a table that feels familiar, with <b>a real structured database underneath</b> so agents query it at speed.</p>
      <div class="app-feats"><span class="ft">status pills</span><span class="ft">owners &amp; views</span><span class="ft">powered by Stash</span></div>
      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <a href="#early" class="ea-mini" data-ea-focus>Get early access →</a>
        <a href="/features/database/" class="ea-mini">Learn more →</a>
      </div>
    </div>
    <div class="app-window">
      <div class="win-bar">
        <span class="win-dots"><i></i><i></i><i></i></span>
        <span class="win-title">projects<span class="ft">.db</span></span>
        <span class="win-live"><span class="ld"></span>agent updated status</span>
      </div>
      <div class="win-body">
        <div class="db-views">
          <span class="vw on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>Table</span>
          <span class="vw"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="5" height="16"/><rect x="10" y="4" width="5" height="10"/><rect x="17" y="4" width="4" height="13"/></svg>Board</span>
          <span class="vw"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>Calendar</span>
        </div>
        <table class="ndb">
          <thead>
            <tr>
              <th><span class="ti"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h10"/></svg>Name</span></th>
              <th><span class="ti"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/></svg>Status</span></th>
              <th><span class="ti"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="3.4"/><path d="M5 20a7 7 0 0114 0"/></svg>Owner</span></th>
              <th><span class="ti"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 9h16M9 3v4M15 3v4"/></svg>Due</span></th>
              <th><span class="ti"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 8l4-4h11a2 2 0 012 2v12a2 2 0 01-2 2H7l-4-4z"/></svg>Area</span></th>
            </tr>
          </thead>
          <tbody>
            <tr class="added">
              <td><span class="nm"><svg class="pg" viewBox="0 0 24 24" fill="none" stroke="var(--fg-faint)" stroke-width="1.7"><path d="M6 2h9l3 3v17H6z"/><path d="M15 2v3h3"/></svg>Launch GA</span></td>
              <td><span class="pill prog"><span class="pd"></span>In progress</span></td>
              <td><span class="own"><span class="av" style="background:var(--lime)">M</span>Maya</span></td>
              <td class="dt">Sep 12</td>
              <td><span class="seltag t1">Launch</span></td>
            </tr>
            <tr>
              <td><span class="nm"><svg class="pg" viewBox="0 0 24 24" fill="none" stroke="var(--fg-faint)" stroke-width="1.7"><path d="M6 2h9l3 3v17H6z"/><path d="M15 2v3h3"/></svg>Cut read cost</span></td>
              <td><span class="pill done"><span class="pd"></span>Done</span></td>
              <td><span class="own"><span class="av" style="background:var(--violet-2)">J</span>Jonah</span></td>
              <td class="dt">Aug 30</td>
              <td><span class="seltag t2">Infra</span></td>
            </tr>
            <tr>
              <td><span class="nm"><svg class="pg" viewBox="0 0 24 24" fill="none" stroke="var(--fg-faint)" stroke-width="1.7"><path d="M6 2h9l3 3v17H6z"/><path d="M15 2v3h3"/></svg>Design-partner demos</span></td>
              <td><span class="pill todo"><span class="pd"></span>To do</span></td>
              <td><span class="own"><span class="av" style="background:var(--amber)">P</span>Priya</span></td>
              <td class="dt">Sep 04</td>
              <td><span class="seltag t1">Launch</span></td>
            </tr>
            <tr>
              <td><span class="nm"><svg class="pg" viewBox="0 0 24 24" fill="none" stroke="var(--fg-faint)" stroke-width="1.7"><path d="M6 2h9l3 3v17H6z"/><path d="M15 2v3h3"/></svg>Eval harness</span></td>
              <td><span class="pill block"><span class="pd"></span>Blocked</span></td>
              <td><span class="own"><span class="av" style="background:var(--lime)">D</span>Dev</span></td>
              <td class="dt">Sep 18</td>
              <td><span class="seltag t3">Research</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- DRIVE -->
  <div class="app-panel" id="app-drive" role="tabpanel" hidden>
    <div class="app-pitch">
      <span class="ap-kicker"><span class="ap-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#7B2CBF" stroke-width="1.8"><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg></span>AgentDocs · Drive</span>
      <h3>The window <span class="grad">humans open</span></h3>
      <p>One clean grid of everything — every doc, sheet, deck and database, with type, owner and last edit. Glance, share a link, sanity-check.</p>
      <div class="app-feats"><span class="ft">file grid</span><span class="ft">owners</span><span class="ft">share links</span></div>
      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <a href="#early" class="ea-mini" data-ea-focus>Get early access →</a>
        <a href="/features/drive/" class="ea-mini">Learn more →</a>
      </div>
    </div>
    <div class="app-window">
      <div class="win-bar">
        <span class="win-dots"><i></i><i></i><i></i></span>
        <span class="win-title">My Workspace</span>
        <span class="win-live"><span class="ld"></span>2 edited just now</span>
      </div>
      <div class="win-body">
        <div class="drive-head"><span class="crumb">Workspace / <b>Q3</b></span><span class="cnt">6 files</span></div>
        <div class="drive">
          <div class="file"><span class="fi" style="background:rgba(201,243,29,.22);color:#5F7A0E">MD</span><span class="fn">Q3 Launch Plan</span><span class="fm"><span class="fav" style="background:var(--lime)">M</span>2m ago</span></div>
          <div class="file"><span class="fi" style="background:rgba(123,44,191,.14);color:#7B2CBF">SHT</span><span class="fn">pipeline</span><span class="fm"><span class="fav" style="background:var(--violet-2)">J</span>just now</span></div>
          <div class="file"><span class="fi" style="background:rgba(184,106,0,.14);color:#B86A00">DB</span><span class="fn">projects</span><span class="fm"><span class="fav" style="background:var(--amber)">P</span>1h ago</span></div>
          <div class="file"><span class="fi" style="background:rgba(201,243,29,.22);color:#5F7A0E">DEK</span><span class="fn">q3-review</span><span class="fm"><span class="fav" style="background:var(--lime)">D</span>3h ago</span></div>
          <div class="file"><span class="fi" style="background:rgba(123,44,191,.14);color:#7B2CBF">CSV</span><span class="fn">budget</span><span class="fm"><span class="fav" style="background:var(--violet-2)">M</span>yesterday</span></div>
          <div class="file"><span class="fi" style="background:rgba(201,243,29,.22);color:#5F7A0E">MD</span><span class="fn">meeting-notes</span><span class="fm"><span class="fav" style="background:var(--amber)">J</span>yesterday</span></div>
        </div>
      </div>
    </div>
  </div>

  <!-- PAGES -->
  <div class="app-panel flip" id="app-pages" role="tabpanel" hidden>
    <div class="app-pitch">
      <span class="ap-kicker"><span class="ap-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#FF006E" stroke-width="1.8"><rect x="6" y="3" width="13" height="17" rx="2"/><path d="M3 6v13a2 2 0 002 2h11"/></svg></span>AgentDocs · Pages</span>
      <h3>A real <span class="grad">wiki</span>, kept current by your agent</h3>
      <p>Nested pages and linked databases in one workspace your agents read and write — <b>no per-seat fees</b>. Your agent keeps it current while you read.</p>
      <div class="app-feats"><span class="ft">nested pages</span><span class="ft">linked databases</span><span class="ft">no per-seat fees</span></div>
      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <a href="#early" class="ea-mini" data-ea-focus>Get early access →</a>
        <a href="/features/pages/" class="ea-mini">Learn more →</a>
      </div>
    </div>
    <div class="app-window">
      <div class="win-bar">
        <span class="win-dots"><i></i><i></i><i></i></span>
        <span class="win-title">Company Wiki<span class="ft"> / Onboarding</span></span>
        <span class="win-live"><span class="ld"></span>agent linked a db</span>
      </div>
      <div class="win-body">
        <div class="pages-mock">
          <div class="page-tree">
            <div class="pt-row lvl0"><span class="pt-ic">▾</span><svg class="pt-pg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 2h9l3 3v17H6z"/><path d="M15 2v3h3"/></svg>Company Wiki</div>
            <div class="pt-row lvl1"><span class="pt-ic">▾</span><svg class="pt-pg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 2h9l3 3v17H6z"/><path d="M15 2v3h3"/></svg>Engineering</div>
            <div class="pt-row lvl2 on"><span class="pt-ic">▸</span><svg class="pt-pg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 2h9l3 3v17H6z"/><path d="M15 2v3h3"/></svg>Onboarding</div>
            <div class="pt-row lvl1"><span class="pt-ic">▸</span><svg class="pt-pg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 2h9l3 3v17H6z"/><path d="M15 2v3h3"/></svg>Design</div>
            <div class="pt-row lvl0"><span class="pt-ic">▸</span><svg class="pt-pg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 2h9l3 3v17H6z"/><path d="M15 2v3h3"/></svg>People &amp; Ops</div>
          </div>
          <div class="page-link">
            <div class="pl-head"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5"/></svg>Linked database · Checklist</div>
            <div class="pl-row"><span class="pill done"><span class="pd"></span>Done</span><span class="pl-t">Laptop &amp; access</span></div>
            <div class="pl-row added"><span class="pill prog"><span class="pd"></span>In progress</span><span class="pl-t">Repo walkthrough</span></div>
            <div class="pl-row"><span class="pill todo"><span class="pd"></span>To do</span><span class="pl-t">First PR shipped</span></div>
            <span class="agent-flag">✨ Claude linked the Checklist database</span>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="cta-band">
  <span class="cb-txt">Six apps, one workspace your agents already speak. <b>Be first in.</b></span>
  <a href="#early" class="btn btn-primary" data-ea-focus>Get early access →</a>
</div>

Live now · self-serve

Add AgentDocs to Claude in 30 seconds

Paste one connector URL, sign in with Google, and your agent can create and edit docs, sheets, slides and databases over MCP. No install, no card.

https://getagentdocs.com/mcp

Add to Claude — full steps → Same Google sign-in as Stash — one account, two products. Built on Stash.

  <div class="connect-steps">
    <div class="cs-head"><span class="ld"></span> Three steps</div>
    <div class="cstep">
      <span class="n">1</span>
      <span class="ct">In Claude desktop or claude.ai, open <code>Settings → Connectors → Add custom</code>.</span>
    </div>
    <div class="cstep">
      <span class="n">2</span>
      <span class="ct">Paste <code>https://getagentdocs.com/mcp</code> and save.</span>
    </div>
    <div class="cstep">
      <span class="n">3</span>
      <span class="ct"><b>Sign in with Google</b> when Claude prompts you. Any Google account works — same account as Stash, no invite needed.</span>
    </div>
    <div class="connect-tools">
      <span class="tl">doc</span><span class="tl">sheet</span><span class="tl">pres</span><span class="tl">database</span><span class="tl">list</span><span class="tl">note</span><span class="tl">open</span><span class="tl">update</span><span class="tl">remove</span><span class="tl">find</span>
    </div>
  </div>
</div>

Same agent · same clock

Your agent on the old suites vs. your agent on AgentDocs

Open a heavy doc and the agent pays for the whole payload — formatting, metadata, history. AgentDocs hands it a lean, read-optimised copy instead. Same ten seconds, watch the difference.

<div class="race-shell">
  <div class="race-grid">

    <!-- ===== OLD WAY ===== -->
    <div class="panel old">
      <div class="p-head">
        <div>
          <div class="p-label">
            <svg viewBox="0 0 24 24" fill="none" stroke="#E03131" stroke-width="2" width="17" height="17"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/></svg>
            The old way
          </div>
          <div class="p-sub">Agent → heavy office doc</div>
        </div>
        <span class="tag-chip tag-old">heavy · slow</span>
      </div>

      <div class="stage">
        <div class="node agent busy" id="agentOld">
          <div class="glyph">
            <svg viewBox="0 0 24 24" fill="none" stroke="#7B2CBF" stroke-width="1.8"><rect x="4" y="8" width="16" height="11" rx="3"/><circle cx="9" cy="13.5" r="1.4" fill="#7B2CBF" stroke="none"/><circle cx="15" cy="13.5" r="1.4" fill="#7B2CBF" stroke="none"/><path d="M12 8V4M9 4h6"/></svg>
          </div>
          <div class="cap">agent</div>
        </div>

        <div class="pipe fat">
          <div class="pipe-track">
            <span class="req">⟵ 24,300-token payload</span>
            <span class="chip c1"></span><span class="chip meta c2"></span><span class="chip c3"></span>
            <span class="chip meta c4"></span><span class="chip c5"></span><span class="chip c6 meta"></span>
            <span class="chip c7"></span><span class="chip c8 meta"></span>
          </div>
        </div>

        <div class="node doc-old">
          <div class="glyph">
            <svg viewBox="0 0 24 24" fill="none" stroke="#E03131" stroke-width="1.6"><path d="M6 2h8l4 4v16H6z"/><path d="M14 2v4h4"/><path d="M9 11h6M9 14h6M9 17h4"/></svg>
          </div>
          <div class="cap">heavy doc</div>
        </div>
      </div>

      <div class="counter">
        <div class="metric"><div class="k">Tokens</div><div class="v" id="tokOld">0</div></div>
        <div class="metric"><div class="k">Time</div><div class="v" id="secOld">0.0s</div></div>
        <div class="metric"><div class="k">Cost</div><div class="v" id="costOld">$0.00</div></div>
      </div>

      <div class="tasks">
        <div class="tasks-head"><span class="lab">Work done</span><span class="cnt" id="doneOld">0 / 5 tasks</span></div>
        <div id="tasksOld">
          <div class="task-row" data-i="0"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="#E03131" stroke-width="3"><path d="M5 12l5 5L20 6"/></svg></span><span class="busyslot"></span>Summarise the pipeline sheet</div>
          <div class="task-row" data-i="1"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="#E03131" stroke-width="3"><path d="M5 12l5 5L20 6"/></svg></span>Draft the weekly update</div>
          <div class="task-row" data-i="2"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="#E03131" stroke-width="3"><path d="M5 12l5 5L20 6"/></svg></span>Reconcile the roadmap</div>
          <div class="task-row" data-i="3"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="#E03131" stroke-width="3"><path d="M5 12l5 5L20 6"/></svg></span>Tidy the meeting notes</div>
          <div class="task-row" data-i="4"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="#E03131" stroke-width="3"><path d="M5 12l5 5L20 6"/></svg></span>Update the OKR table</div>
        </div>
      </div>
    </div>

    <!-- ===== AGENTDOCS ===== -->
    <div class="panel new">
      <div class="p-head">
        <div>
          <div class="p-label">
            <svg viewBox="0 0 24 24" fill="none" stroke="#5F7A0E" stroke-width="2" width="17" height="17"><path d="M13 2L4 14h6l-1 8 9-12h-6z"/></svg>
            AgentDocs
          </div>
          <div class="p-sub">Agent → lean stash doc</div>
        </div>
        <span class="tag-chip tag-new">light · fast</span>
      </div>

      <div class="stage">
        <div class="node agent busy" id="agentNew">
          <div class="glyph">
            <svg viewBox="0 0 24 24" fill="none" stroke="#7B2CBF" stroke-width="1.8"><rect x="4" y="8" width="16" height="11" rx="3"/><circle cx="9" cy="13.5" r="1.4" fill="#7B2CBF" stroke="none"/><circle cx="15" cy="13.5" r="1.4" fill="#7B2CBF" stroke="none"/><path d="M12 8V4M9 4h6"/></svg>
          </div>
          <div class="cap">agent</div>
        </div>

        <div class="pipe thin">
          <div class="pipe-track">
            <span class="chip t1"></span><span class="chip t2"></span><span class="chip t3"></span>
          </div>
        </div>

        <div class="node doc-new">
          <div class="glyph">
            <svg viewBox="0 0 24 24" fill="none" stroke="#5F7A0E" stroke-width="1.6"><path d="M6 2h12v20H6z"/><path d="M9 7h6M9 11h6M9 15h3"/></svg>
          </div>
          <div class="cap">stash doc</div>
        </div>
      </div>

      <div class="counter">
        <div class="metric"><div class="k">Tokens</div><div class="v" id="tokNew">0</div></div>
        <div class="metric"><div class="k">Time</div><div class="v" id="secNew">0.0s</div></div>
        <div class="metric"><div class="k">Cost</div><div class="v" id="costNew">$0.00</div></div>
      </div>

      <div class="tasks">
        <div class="tasks-head"><span class="lab">Work done</span><span class="cnt" id="doneNew">0 / 5 tasks</span></div>
        <div id="tasksNew">
          <div class="task-row" data-i="0"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="#5F7A0E" stroke-width="3"><path d="M5 12l5 5L20 6"/></svg></span>Summarise the pipeline sheet</div>
          <div class="task-row" data-i="1"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="#5F7A0E" stroke-width="3"><path d="M5 12l5 5L20 6"/></svg></span>Draft the weekly update</div>
          <div class="task-row" data-i="2"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="#5F7A0E" stroke-width="3"><path d="M5 12l5 5L20 6"/></svg></span>Reconcile the roadmap</div>
          <div class="task-row" data-i="3"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="#5F7A0E" stroke-width="3"><path d="M5 12l5 5L20 6"/></svg></span>Tidy the meeting notes</div>
          <div class="task-row" data-i="4"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="#5F7A0E" stroke-width="3"><path d="M5 12l5 5L20 6"/></svg></span>Update the OKR table</div>
        </div>
      </div>
    </div>

  </div>

  <div class="race-foot">
    <div class="timeline"><span>10s</span><span class="tl-bar"><span class="tl-fill"></span></span></div>
    <span>·</span>
    <span class="rm-hide">AgentDocs clears <b>5×</b> the work while the old stack is still loading one doc</span>
    <span class="rm-only">End state: old stack finishes 1 task · AgentDocs finishes 5 — same clock.</span>
  </div>
</div>
<p class="race-note">Numbers are illustrative. <b>Early tests suggest</b> large token and latency savings on retrieval-style work; we won't publish a headline percentage until we have a clean, apples-to-apples eval per source type.</p>

<div class="cta-band">
  <span class="cb-txt">Want your agents on the fast lane? <b>Get early access.</b></span>
  <a href="#early" class="btn btn-primary" data-ea-focus>Get early access →</a>
</div>

How you actually use it

You work through your agent.
The Drive view is for humans to glance.

No doc to format, no grid to wrestle. You ask Claude or ChatGPT; it reads and writes over MCP with file locking and version history, so nothing gets clobbered. The Drive view is just where humans glance in.

Add Lumen to the pipeline as “won”, £12k, and update the Q3 OKR table.

agentdocs · sheets.write · 1,900 tok · 0.3s

Done. Added Lumen → won (£12,000) to pipeline and bumped “Revenue won” in q3-okrs. Locked both files during the edit; committed as v34.

It's live — add it to Claude now

Or just get
launch updates.

Add the connector to start now, or leave your email and we'll ping you as we open the preview. Pricing may change, cancel anytime.

  <form class='ea-form' id='early-access' method='POST' name='agentdocs-early-access'>
    <input type="hidden" name="form-name" value="agentdocs-early-access">
    <p hidden><label>Don't fill this in <input name="bot-field"></label></p>
    <div class="ea-row">
      <input class="ea-input" type="email" name="email" id="ea-email" placeholder="you@company.com" required autocomplete="email">
      <button type="submit" class="btn btn-primary">Get early access →</button>
    </div>
    <p class="ea-note">No spam. One email when your invite is ready.</p>
    <p class="ea-err" id="ea-err">Something went wrong — please try again, or email hello@dancourse.co.uk.</p>
  </form>
  <div class="ea-success" id="ea-success" role="status" aria-live="polite">
    <span class="tick"><svg viewBox="0 0 24 24" fill="none" stroke="#0a0b0f" stroke-width="3"><path d="M5 12l5 5L20 6"/></svg></span>
    <span>You're on the list. <b>We'll be in touch</b> as we open the preview.</span>
  </div>
</div>

Part of the Stash family

Stash the token-light store

AgentDocs you're here the office suite for the agent era

Server Config

{
  "mcpServers": {
    "agentdocs": {
      "url": "https://getagentdocs.com/mcp"
    }
  }
}

Recommend Servers

TraeBuild with Free GPT-4.1 & Claude 3.7. Fully MCP-Ready.

MCP AdvisorMCP Advisor & Installation - Use the right MCP server for your needs

Visual Studio Code - Open Source ("Code - OSS")Visual Studio Code

CursorThe AI Code Editor

MiniMax MCPOfficial MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.

Jina AI MCP ToolsA Model Context Protocol (MCP) server that integrates with Jina AI Search Foundation APIs.

EdgeOne Pages MCPAn MCP service designed for deploying HTML content to EdgeOne Pages and obtaining an accessible public URL.

Playwright McpPlaywright MCP server

DeepChatYour AI Partner on Desktop

BlenderBlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.

Zhipu Web SearchZhipu Web Search MCP Server is a search engine specifically designed for large models. It integrates four search engines, allowing users to flexibly compare and switch between them. Building upon the web crawling and ranking capabilities of traditional search engines, it enhances intent recognition capabilities, returning results more suitable for large model processing (such as webpage titles, URLs, summaries, site names, site icons, etc.). This helps AI applications achieve "dynamic knowledge acquisition" and "precise scenario adaptation" capabilities.

RedisA Model Context Protocol server that provides access to Redis databases. This server enables LLMs to interact with Redis key-value stores through a set of standardized tools.

Y GuiA web-based graphical interface for AI chat interactions with support for multiple AI models and MCP (Model Context Protocol) servers.

Tavily Mcp

Howtocook Mcp基于Anduin2017 / HowToCook （程序员在家做饭指南）的mcp server，帮你推荐菜谱、规划膳食，解决“今天吃什么“的世纪难题； Based on Anduin2017/HowToCook (Programmer's Guide to Cooking at Home), MCP Server helps you recommend recipes, plan meals, and solve the century old problem of "what to eat today"

AiimagemultistyleA Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.

ChatWiseThe second fastest AI chatbot™

Baidu Map百度地图核心API现已全面兼容MCP协议，是国内首家兼容MCP协议的地图服务商。

WindsurfThe new purpose-built IDE to harness magic

Serper MCP ServerA Serper MCP Server

Amap Maps高德地图官方 MCP Server