thomas/droidclaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4848587f0c3b57b218656953609de5a2104644f5
droidclaw/site/index.html
Sanju Sivalingam 158fe68bf9 Make groq the default provider, ollama as alternative 
Groq (free tier, API key) is the primary setup path.
Ollama (local, no key) shown as secondary option.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-16 13:48:47 +05:30

1013 lines
54 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>droidclaw - ai agent for android</title>
<meta name="description" content="turn old android phones into ai agents. give it a goal in plain english - it figures out what to tap, type, and swipe.">
<meta name="author" content="unitedby.ai">
<meta name="theme-color" content="#000000">
<meta name="color-scheme" content="dark">
<meta name="robots" content="index, follow">
<!-- open graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="droidclaw - ai agent for android">
<meta property="og:description" content="turn old android phones into ai agents. give it a goal in plain english - it figures out what to tap, type, and swipe.">
<meta property="og:url" content="https://droidclaw.ai">
<meta property="og:site_name" content="droidclaw">
<!-- twitter card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="droidclaw - ai agent for android">
<meta name="twitter:description" content="turn old android phones into ai agents. give it a goal in plain english - it figures out what to tap, type, and swipe.">
<link rel="canonical" href="https://droidclaw.ai">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap" rel="stylesheet">
<script defer src="https://track.thisux.com/script.js" data-website-id="b48faade-b8b9-4f2c-b8bc-9a5699639e47"></script>
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.3.0/dist/iconify-icon.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--text: #ededed;
--text-secondary: #a1a1a1;
--text-muted: #555;
--bg: #000;
--bg-elevated: #0a0a0a;
--bg-card: #111;
--border: #222;
--border-hover: #333;
--accent: #3291ff;
--accent-soft: rgba(50, 145, 255, 0.08);
--accent-border: rgba(50, 145, 255, 0.15);
--green: #50e3c2;
--yellow: #f5a623;
--red: #ee0000;
--cyan: #22d3ee;
--purple: #a855f7;
--orange: #f97316;
--pink: #ec4899;
--amber: #fbbf24;
--indigo: #818cf8;
--coral: #f97066;
--lime: #a3e635;
--highlight: #c8c8c8;
--radius: 12px;
--max-w: 960px;
--max-w-narrow: 680px;
}
html { scroll-behavior: smooth; }
body {
font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.6;
font-size: 15px;
-webkit-font-smoothing: antialiased;
}
/* ─── nav ─── */
nav {
position: sticky; top: 0; z-index: 100;
background: rgba(0,0,0,.8);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
}
nav .inner {
max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
display: flex; align-items: center; justify-content: space-between; height: 56px;
}
nav .logo { font-weight: 700; font-size: 17px; color: var(--text); text-decoration: none; letter-spacing: -.5px; }
nav .logo span { color: var(--text-muted); font-weight: 400; font-size: 13px; margin-left: 8px; }
nav .links { display: flex; gap: 20px; align-items: center; }
nav .links a { color: var(--text-secondary); text-decoration: none; font-size: 13px; transition: color .15s; }
nav .links a:hover { color: var(--text); }
nav .links a.gh-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--text); color: var(--bg); font-weight: 600; font-size: 13px;
padding: 6px 14px; border-radius: 6px; text-decoration: none; transition: opacity .15s;
}
nav .links a.gh-btn:hover { opacity: .85; color: var(--bg); text-decoration: none; }
.menu-toggle {
display: none; background: none; border: 1px solid var(--border); border-radius: 6px;
color: var(--text); padding: 6px 8px; cursor: pointer; line-height: 0;
}
/* ─── layout ─── */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 24px; }
section { padding: 80px 0; }
.section-divider { height: 1px; background: var(--border); max-width: var(--max-w); margin: 0 auto; }
/* ─── typography ─── */
h1 { font-size: 48px; font-weight: 700; letter-spacing: -1.5px; line-height: 1.15; }
h2 { font-size: 28px; font-weight: 700; letter-spacing: -.75px; line-height: 1.3; }
h3 { font-size: 16px; font-weight: 600; }
p { color: var(--text-secondary); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.section-label {
font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.section-label iconify-icon { font-size: 16px; }
.section-desc { font-size: 16px; line-height: 1.7; color: var(--text-secondary); margin-top: 12px; max-width: 560px; }
/* ─── hero ─── */
.hero {
padding: 100px 0 80px; text-align: center;
position: relative; overflow: hidden;
}
.hero::before {
content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
width: 600px; height: 400px; border-radius: 50%;
background: radial-gradient(ellipse, rgba(50,145,255,.08) 0%, transparent 70%);
pointer-events: none;
}
.hero .badge {
display: inline-flex; align-items: center; gap: 6px;
background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border);
font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 20px; margin-bottom: 24px;
}
.hero h1 { margin: 0 auto 20px; max-width: 600px; }
.hero h1 .glow { color: var(--accent); }
.hero .subtitle {
font-size: 17px; line-height: 1.75; color: var(--text-secondary);
max-width: 520px; margin: 0 auto 32px;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
display: inline-flex; align-items: center; gap: 8px;
background: var(--text); color: var(--bg); font-weight: 600; font-size: 14px;
padding: 10px 22px; border-radius: 8px; text-decoration: none; transition: opacity .15s;
}
.btn-primary:hover { opacity: .85; text-decoration: none; }
.btn-secondary {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; color: var(--text-secondary); font-weight: 500; font-size: 14px;
padding: 10px 22px; border-radius: 8px; border: 1px solid var(--border);
text-decoration: none; transition: all .15s;
}
.btn-secondary:hover { border-color: var(--border-hover); color: var(--text); text-decoration: none; }
/* ─── terminal demo ─── */
.terminal {
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; margin-top: 48px; max-width: 600px; margin-left: auto; margin-right: auto;
text-align: left;
}
.terminal-bar {
display: flex; align-items: center; gap: 8px; padding: 12px 16px;
background: rgba(255,255,255,.03); border-bottom: 1px solid var(--border);
}
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-dot.r { background: #ff5f57; }
.terminal-dot.y { background: #febc2e; }
.terminal-dot.g { background: #28c840; }
.terminal-title { font-size: 11px; color: var(--text-muted); margin-left: auto; margin-right: auto; }
.terminal pre {
margin: 0; border: none; border-radius: 0; padding: 20px;
font-size: 13px; line-height: 1.65; color: var(--text-secondary); background: transparent;
}
.terminal pre .prompt { color: var(--green); }
.terminal pre .dim { color: var(--text-muted); }
.terminal pre .hl { color: var(--text); }
/* ─── how it works: horizontal pipeline ─── */
.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 32px; }
.pipeline-step {
background: var(--bg-elevated); padding: 24px 20px; position: relative;
border: 1px solid var(--border); transition: border-color .2s;
}
.pipeline-step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.pipeline-step:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.pipeline-step:hover { border-color: var(--border-hover); }
.pipeline-step iconify-icon { font-size: 24px; margin-bottom: 12px; display: block; width: fit-content; }
.pipeline-step h3 { margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.pipeline-step p { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 0; }
/* ─── three modes: tabbed cards ─── */
.mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.mode-card {
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
padding: 24px; display: flex; flex-direction: column; transition: border-color .2s; min-width: 0; overflow: hidden;
}
.mode-card:hover { border-color: var(--border-hover); }
.mode-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mode-card-header iconify-icon { font-size: 22px; }
.mode-card-header h3 { font-size: 15px; margin: 0; }
.mode-card > p { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.55; flex-grow: 1; }
.mode-card pre {
margin: 0; font-size: 12px; padding: 14px; line-height: 1.5;
background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 8px;
}
.mode-card .tag {
display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px;
margin-bottom: 12px;
}
.tag-ai { background: rgba(50,145,255,.1); color: var(--accent); }
.tag-fast { background: rgba(80,227,194,.1); color: var(--green); }
.tag-simple { background: rgba(245,166,35,.1); color: var(--yellow); }
/* comparison inline */
.compare-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px;
}
.compare-card {
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
}
.compare-card h3 { font-size: 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.compare-card h3 iconify-icon { font-size: 18px; }
.compare-list { list-style: none; }
.compare-list li { font-size: 13px; color: var(--text-muted); padding: 3px 0; display: flex; align-items: baseline; gap: 8px; }
.compare-list li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; margin-top: 6px; }
/* ─── possibilities: bento grid ─── */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.bento-card {
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
padding: 28px; transition: border-color .2s; min-width: 0; overflow: hidden;
}
.bento-card:hover { border-color: var(--border-hover); }
.bento-card.wide { grid-column: 1 / -1; }
.bento-card iconify-icon.bento-icon { font-size: 28px; margin-bottom: 16px; display: block; width: fit-content; }
.bento-card h3 { font-size: 16px; margin-bottom: 8px; }
.bento-card p { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.65; }
.bento-card pre {
margin: 16px 0 0; font-size: 12.5px; padding: 14px; line-height: 1.5;
background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 8px;
}
/* ─── use cases: compact grid ─── */
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.usecase-card {
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
padding: 20px; transition: border-color .2s;
}
.usecase-card:hover { border-color: var(--border-hover); }
.usecase-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.usecase-card-header iconify-icon { font-size: 20px; }
.usecase-card-header h3 { font-size: 14px; font-weight: 600; margin: 0; }
.usecase-card ul { list-style: none; }
.usecase-card li { font-size: 13px; color: var(--text-muted); padding: 3px 0; line-height: 1.5; }
/* ─── limitations: 3 columns ─── */
.limits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.limit-col {
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
padding: 24px;
}
.limit-col h3 { font-size: 14px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.limit-col h3 iconify-icon { font-size: 18px; }
.limit-col ul { list-style: none; }
.limit-col li { font-size: 13px; color: var(--text-muted); padding: 4px 0; line-height: 1.5; }
/* ─── getting started: vertical stepper ─── */
.stepper { margin-top: 32px; position: relative; padding-left: 40px; }
.stepper::before {
content: ''; position: absolute; left: 15px; top: 12px; bottom: 12px;
width: 1px; background: var(--border);
}
.stepper-step { position: relative; margin-bottom: 36px; }
.stepper-step:last-child { margin-bottom: 0; }
.stepper-num {
position: absolute; left: -40px; top: 0;
width: 30px; height: 30px; border-radius: 50%;
background: var(--bg-card); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; color: var(--text);
}
.stepper-step h3 { font-size: 15px; margin-bottom: 8px; }
.stepper-step p { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }
.stepper-step pre {
font-size: 12.5px; padding: 14px; line-height: 1.5; margin: 0;
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
}
.stepper-step table { margin-top: 12px; }
/* ─── examples: collapsible ─── */
.examples-header { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; }
.examples-header h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.examples-header h3 iconify-icon { font-size: 18px; }
details {
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
margin-bottom: 8px; transition: border-color .2s;
}
details:hover { border-color: var(--border-hover); }
details[open] { border-color: var(--border-hover); }
summary {
padding: 14px 20px; cursor: pointer; font-size: 14px; font-weight: 500;
display: flex; align-items: center; gap: 10px; list-style: none;
color: var(--text); user-select: none;
}
summary::-webkit-details-marker { display: none; }
summary::before { display: none; }
summary iconify-icon.cat-icon { font-size: 18px; }
summary .chevron {
margin-left: auto; transition: transform .2s; color: var(--text-muted); font-size: 16px;
}
details[open] summary .chevron { transform: rotate(90deg); }
summary .count { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.details-body { padding: 0 20px 16px; }
.example-links { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
.example-links li { font-size: 13px; padding: 3px 0; }
.example-links a { color: var(--accent); }
.example-links .desc { color: var(--text-muted); }
/* ─── tables ─── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); }
th { font-weight: 600; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
td { color: var(--text-secondary); }
/* ─── code ─── */
pre {
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
padding: 16px; overflow-x: auto;
font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
font-size: 13px; line-height: 1.6; color: var(--text-secondary);
}
/* ─── copy button ─── */
.copyable { position: relative; }
.copy-btn {
position: absolute; top: 8px; right: 8px;
background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 6px;
color: var(--text-muted); cursor: pointer; padding: 5px 7px; line-height: 0;
transition: all .15s; opacity: 0;
}
.copyable:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255,255,255,.1); color: var(--text-secondary); border-color: var(--border-hover); }
.copy-btn.copied { color: var(--green); border-color: rgba(80,227,194,.3); background: rgba(80,227,194,.08); opacity: 1; }
code {
font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
font-size: 13px; background: var(--bg-elevated); padding: 2px 6px; border-radius: 4px;
border: 1px solid var(--border);
}
/* ─── source: compact ─── */
.source-section {
background: var(--bg-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding: 48px 0;
}
.source-grid { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: start; }
.source-grid h2 { margin: 0; white-space: nowrap; }
.source-grid pre { margin: 0; font-size: 12.5px; }
/* ─── footer ─── */
footer { padding: 32px 0; text-align: center; color: var(--text-muted); font-size: 13px; }
footer a { color: var(--text-secondary); }
/* ─── mobile ─── */
@media (max-width: 768px) {
h1 { font-size: 32px; }
h2 { font-size: 24px; }
section { padding: 56px 0; }
.hero { padding: 64px 0 56px; }
.pipeline { grid-template-columns: 1fr 1fr; gap: 8px; }
.pipeline-step:first-child { border-radius: var(--radius) 0 0 0; }
.pipeline-step:last-child { border-radius: 0 0 var(--radius) 0; }
.pipeline-step:nth-child(2) { border-radius: 0 var(--radius) 0 0; }
.pipeline-step:nth-child(3) { border-radius: 0 0 0 var(--radius); }
.mode-cards { grid-template-columns: 1fr; }
.bento { grid-template-columns: 1fr; }
.usecase-grid { grid-template-columns: 1fr; }
.limits-grid { grid-template-columns: 1fr; }
.compare-row { grid-template-columns: 1fr; }
.example-links { grid-template-columns: 1fr; }
.source-grid { grid-template-columns: 1fr; gap: 16px; }
.terminal { margin-top: 32px; }
.menu-toggle { display: block; }
nav .links {
display: none; position: absolute; top: 56px; left: 0; right: 0;
background: rgba(0,0,0,.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
flex-direction: column; padding: 16px 24px; gap: 12px;
}
nav .links.open { display: flex; }
nav .links a { font-size: 14px; padding: 4px 0; }
nav .links { align-items: center; }
nav .links a.gh-btn { align-self: center; }
}
</style>
</head>
<body>
<!-- ─── nav ─── -->
<nav>
<div class="inner">
<a href="#" class="logo">droidclaw</a>
<button class="menu-toggle" onclick="document.querySelector('.links').classList.toggle('open')" aria-label="Menu">
<iconify-icon icon="ph:list-duotone" width="20" height="20"></iconify-icon>
</button>
<div class="links">
<a href="#how-it-works" onclick="this.parentElement.classList.remove('open')">how it works</a>
<a href="#possibilities" onclick="this.parentElement.classList.remove('open')">possibilities</a>
<a href="#getting-started" onclick="this.parentElement.classList.remove('open')">setup</a>
<a href="https://github.com/unitedbyai/droidclaw" class="gh-btn">
<iconify-icon icon="ph:github-logo-duotone" width="16" height="16"></iconify-icon> GitHub
</a>
</div>
</div>
</nav>
<!-- ─── hero ─── -->
<section class="hero">
<div class="wrap">
<div class="badge"><iconify-icon icon="ph:flask-duotone" width="14" height="14" style="color:var(--amber)"></iconify-icon> experimental</div>
<h1>turn old phones into<br><span class="glow">ai agents</span></h1>
<p class="subtitle">
give it a goal in plain english. it reads the screen, thinks about what to do,
taps and types via adb, and repeats until the job is done.
</p>
<div class="hero-actions">
<a href="#getting-started" class="btn-primary">
<iconify-icon icon="ph:rocket-launch-duotone" width="16" height="16"></iconify-icon> get started
</a>
<a href="https://github.com/unitedbyai/droidclaw" class="btn-secondary">
<iconify-icon icon="ph:github-logo-duotone" width="16" height="16"></iconify-icon> view source
</a>
</div>
<div class="terminal">
<div class="terminal-bar">
<span class="terminal-dot r"></span>
<span class="terminal-dot y"></span>
<span class="terminal-dot g"></span>
<span class="terminal-title">droidclaw</span>
</div>
<pre><span class="prompt">$</span> bun run src/kernel.ts
<span class="dim">enter your goal:</span> <span class="hl">open youtube and search for "lofi hip hop"</span>
<span class="dim">--- step 1/30 ---</span>
<span class="hl">think:</span> i'm on the home screen. launching youtube.
<span class="hl">action:</span> launch <span class="dim">(842ms)</span>
<span class="dim">--- step 2/30 ---</span>
<span class="hl">think:</span> youtube is open. tapping search icon.
<span class="hl">action:</span> tap <span class="dim">(623ms)</span>
<span class="dim">--- step 3/30 ---</span>
<span class="hl">think:</span> search field focused.
<span class="hl">action:</span> type "lofi hip hop" <span class="dim">(501ms)</span>
<span class="dim">--- step 4/30 ---</span>
<span class="hl">action:</span> enter <span class="dim">(389ms)</span>
<span class="dim">--- step 5/30 ---</span>
<span class="hl">think:</span> search results showing. done.
<span class="hl">action:</span> done <span class="dim">(412ms)</span></pre>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ─── how it works ─── -->
<section id="how-it-works">
<div class="wrap">
<div class="section-label" style="color:var(--orange)"><iconify-icon icon="ph:gear-six-duotone"></iconify-icon> how it works</div>
<h2>perceive, reason, act, adapt</h2>
<p class="section-desc">every step is a loop. dump the accessibility tree, filter interactive elements, send to an llm, execute the action, repeat.</p>
<div class="pipeline">
<div class="pipeline-step">
<iconify-icon icon="ph:eye-duotone" style="color:var(--cyan)"></iconify-icon>
<h3>1. perceive</h3>
<p>captures the screen via <code>uiautomator dump</code> and parses the accessibility xml into tappable elements with coordinates and state.</p>
</div>
<div class="pipeline-step">
<iconify-icon icon="ph:brain-duotone" style="color:var(--purple)"></iconify-icon>
<h3>2. reason</h3>
<p>sends screen state + goal to an llm. the model returns think, plan, action - it explains its reasoning before acting.</p>
</div>
<div class="pipeline-step">
<iconify-icon icon="ph:cursor-click-duotone" style="color:var(--green)"></iconify-icon>
<h3>3. act</h3>
<p>executes the chosen action via adb - tap, type, swipe, launch, press back. 22 actions available.</p>
</div>
<div class="pipeline-step">
<iconify-icon icon="ph:arrows-clockwise-duotone" style="color:var(--orange)"></iconify-icon>
<h3>4. adapt</h3>
<p>if screen doesn't change for 3 steps, stuck recovery kicks in. empty accessibility tree falls back to screenshots.</p>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ─── three modes ─── -->
<section id="modes">
<div class="wrap">
<div class="section-label" style="color:var(--indigo)"><iconify-icon icon="ph:stack-duotone"></iconify-icon> three modes</div>
<h2>interactive, workflows, or flows</h2>
<p class="section-desc">type a goal, chain goals across apps with ai, or run deterministic steps with no llm calls.</p>
<div class="mode-cards">
<div class="mode-card">
<div class="mode-card-header">
<iconify-icon icon="ph:terminal-window-duotone" style="color:var(--green)"></iconify-icon>
<h3>interactive</h3>
</div>
<span class="tag tag-simple">just type</span>
<p>run it and describe what you want. the agent figures out the rest.</p>
<pre>$ bun run src/kernel.ts
enter your goal: send "running
late, 10 mins" to Mom on whatsapp</pre>
</div>
<div class="mode-card">
<div class="mode-card-header">
<iconify-icon icon="ph:file-code-duotone" style="color:var(--accent)"></iconify-icon>
<h3>workflows</h3>
</div>
<span class="tag tag-ai">ai-powered &middot; json</span>
<p>chain goals across multiple apps. natural language steps, the llm navigates.</p>
<pre>{
"name": "weather to whatsapp",
"steps": [
{ "app": "com.google...",
"goal": "search chennai weather" },
{ "goal": "share to Sanju" }
]
}</pre>
</div>
<div class="mode-card">
<div class="mode-card-header">
<iconify-icon icon="ph:play-duotone" style="color:var(--lime)"></iconify-icon>
<h3>flows</h3>
</div>
<span class="tag tag-fast">instant &middot; yaml</span>
<p>fixed taps and types. no llm, instant execution. for repeatable tasks.</p>
<pre>appId: com.whatsapp
name: Send WhatsApp Message
---
- launchApp
- tap: "Contact Name"
- type: "hello from droidclaw"
- tap: "Send"</pre>
</div>
</div>
<div class="compare-row">
<div class="compare-card">
<h3><iconify-icon icon="ph:file-code-duotone" style="color:var(--accent)"></iconify-icon> workflows</h3>
<ul class="compare-list">
<li>json format, uses ai</li>
<li>handles ui changes and popups</li>
<li>slower (llm calls each step)</li>
<li>best for complex multi-app tasks</li>
</ul>
</div>
<div class="compare-card">
<h3><iconify-icon icon="ph:play-duotone" style="color:var(--lime)"></iconify-icon> flows</h3>
<ul class="compare-list">
<li>yaml format, no ai needed</li>
<li>breaks if ui changes</li>
<li>instant execution</li>
<li>best for simple repeatable tasks</li>
</ul>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ─── possibilities ─── -->
<section id="possibilities">
<div class="wrap">
<div class="section-label" style="color:var(--amber)"><iconify-icon icon="ph:lightning-duotone"></iconify-icon> possibilities</div>
<h2>what you can build with this</h2>
<p class="section-desc">delegate to on-device ai apps, control phones remotely, turn old devices into always-on agents.</p>
<div class="bento">
<div class="bento-card wide">
<iconify-icon class="bento-icon" icon="ph:robot-duotone" style="color:var(--purple)"></iconify-icon>
<h3>delegate to ai apps on-device</h3>
<p>open <strong style="color:var(--highlight)">google's ai mode</strong>, ask a question, grab the answer, forward it to <strong style="color:var(--highlight)">whatsapp</strong>. or ask <strong style="color:var(--highlight)">chatgpt</strong> something and share the response to <strong style="color:var(--highlight)">slack</strong>. the agent uses apps on your phone as tools - <strong style="color:var(--highlight)">no api keys</strong> for those services needed.</p>
</div>
<div class="bento-card">
<iconify-icon class="bento-icon" icon="ph:globe-duotone" style="color:var(--cyan)"></iconify-icon>
<h3>remote control with tailscale</h3>
<p>install <strong style="color:var(--highlight)">tailscale</strong> on phone + laptop. connect <strong style="color:var(--highlight)">adb over the tailnet</strong>. your phone is now a <strong style="color:var(--highlight)">remote agent</strong> - control it from anywhere. run workflows from a <strong style="color:var(--highlight)">cron job</strong> at 8am every morning.</p>
<pre># from anywhere:
adb connect &lt;phone-tailscale-ip&gt;:5555
bun run src/kernel.ts --workflow morning.json</pre>
</div>
<div class="bento-card">
<iconify-icon class="bento-icon" icon="ph:device-mobile-duotone" style="color:var(--coral)"></iconify-icon>
<h3>old phones, always on</h3>
<p>that android in a drawer can now send <strong style="color:var(--highlight)">standups to slack</strong>, check <strong style="color:var(--highlight)">flight prices</strong>, digest <strong style="color:var(--highlight)">telegram channels</strong>, forward <strong style="color:var(--highlight)">weather to whatsapp</strong>. it runs apps that <strong style="color:var(--highlight)">don't have apis</strong>.</p>
</div>
<div class="bento-card wide">
<iconify-icon class="bento-icon" icon="ph:sparkle-duotone" style="color:var(--amber)"></iconify-icon>
<h3>automation with ai intelligence</h3>
<p>unlike predefined button flows, the agent <strong style="color:var(--highlight)">actually thinks</strong>. if a button moves, a popup appears, or the layout changes - <strong style="color:var(--highlight)">it adapts</strong>. it reads the screen, <strong style="color:var(--highlight)">understands context</strong>, and <strong style="color:var(--highlight)">makes decisions</strong>.</p>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ─── use cases ─── -->
<section id="use-cases">
<div class="wrap">
<div class="section-label" style="color:var(--green)"><iconify-icon icon="ph:list-checks-duotone"></iconify-icon> use cases</div>
<h2>things it can do right now</h2>
<p class="section-desc">across any app installed on the device.</p>
<div class="usecase-grid">
<div class="usecase-card">
<div class="usecase-card-header">
<iconify-icon icon="ph:chat-circle-dots-duotone" style="color:var(--green)"></iconify-icon>
<h3>messaging</h3>
</div>
<ul>
<li>send <strong style="color:var(--highlight)">whatsapp</strong> to saved or unsaved numbers</li>
<li>reply to latest <strong style="color:var(--highlight)">sms</strong></li>
<li>compose emails via <strong style="color:var(--highlight)">gmail</strong></li>
<li><strong style="color:var(--highlight)">telegram</strong> messages to groups</li>
<li>post standups to <strong style="color:var(--highlight)">slack</strong></li>
<li>broadcast to <strong style="color:var(--highlight)">multiple contacts</strong></li>
</ul>
</div>
<div class="usecase-card">
<div class="usecase-card-header">
<iconify-icon icon="ph:magnifying-glass-duotone" style="color:var(--cyan)"></iconify-icon>
<h3>research</h3>
</div>
<ul>
<li>search <strong style="color:var(--highlight)">google</strong>, collect results</li>
<li>ask <strong style="color:var(--highlight)">chatgpt / gemini</strong>, grab answer</li>
<li>check <strong style="color:var(--highlight)">weather, stocks, flights</strong></li>
<li>compare <strong style="color:var(--highlight)">prices</strong> across apps</li>
<li>translate via <strong style="color:var(--highlight)">google translate</strong></li>
<li>compile <strong style="color:var(--highlight)">multi-source digests</strong></li>
</ul>
</div>
<div class="usecase-card">
<div class="usecase-card-header">
<iconify-icon icon="ph:share-network-duotone" style="color:var(--purple)"></iconify-icon>
<h3>social</h3>
</div>
<ul>
<li>post to <strong style="color:var(--highlight)">instagram, twitter/x</strong></li>
<li><strong style="color:var(--highlight)">like and comment</strong> on posts</li>
<li>check <strong style="color:var(--highlight)">engagement metrics</strong></li>
<li>save <strong style="color:var(--highlight)">youtube</strong> to watch later</li>
<li>follow / unfollow accounts</li>
<li>check <strong style="color:var(--highlight)">linkedin</strong> notifications</li>
</ul>
</div>
<div class="usecase-card">
<div class="usecase-card-header">
<iconify-icon icon="ph:briefcase-duotone" style="color:var(--indigo)"></iconify-icon>
<h3>productivity</h3>
</div>
<ul>
<li><strong style="color:var(--highlight)">morning briefing</strong> across apps</li>
<li>create <strong style="color:var(--highlight)">calendar events</strong></li>
<li>capture notes in <strong style="color:var(--highlight)">google keep</strong></li>
<li>check <strong style="color:var(--highlight)">github</strong> pull requests</li>
<li>set <strong style="color:var(--highlight)">alarms and reminders</strong></li>
<li>triage <strong style="color:var(--highlight)">notifications</strong></li>
</ul>
</div>
<div class="usecase-card">
<div class="usecase-card-header">
<iconify-icon icon="ph:heart-duotone" style="color:var(--pink)"></iconify-icon>
<h3>lifestyle</h3>
</div>
<ul>
<li>order food from <strong style="color:var(--highlight)">delivery apps</strong></li>
<li>book an <strong style="color:var(--highlight)">uber</strong> ride</li>
<li>play songs on <strong style="color:var(--highlight)">spotify</strong></li>
<li>check commute on <strong style="color:var(--highlight)">maps</strong></li>
<li>log <strong style="color:var(--highlight)">workouts</strong>, track expenses</li>
<li>toggle <strong style="color:var(--highlight)">do not disturb</strong></li>
</ul>
</div>
<div class="usecase-card">
<div class="usecase-card-header">
<iconify-icon icon="ph:gear-duotone" style="color:var(--orange)"></iconify-icon>
<h3>device control</h3>
</div>
<ul>
<li>toggle <strong style="color:var(--highlight)">wifi, bluetooth, airplane</strong></li>
<li>adjust <strong style="color:var(--highlight)">brightness, volume</strong></li>
<li><strong style="color:var(--highlight)">force stop</strong> or clear cache</li>
<li>grant/revoke <strong style="color:var(--highlight)">permissions</strong></li>
<li><strong style="color:var(--highlight)">install/uninstall</strong> apps</li>
<li>run any <strong style="color:var(--highlight)">adb shell</strong> command</li>
</ul>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ─── capabilities & limitations ─── -->
<section id="limitations">
<div class="wrap">
<div class="section-label" style="color:var(--accent)"><iconify-icon icon="ph:info-duotone"></iconify-icon> honest take</div>
<h2>what works and what doesn't</h2>
<p class="section-desc">22 actions + 6 multi-step skills. here's the reality.</p>
<div class="limits-grid">
<div class="limit-col">
<h3><iconify-icon icon="ph:check-circle-duotone" style="color:var(--green)"></iconify-icon> works well</h3>
<ul>
<li><strong style="color:var(--highlight)">native android apps</strong> with standard ui</li>
<li><strong style="color:var(--highlight)">multi-app workflows</strong> that chain goals</li>
<li>device settings via <strong style="color:var(--highlight)">shell commands</strong></li>
<li><strong style="color:var(--highlight)">text input</strong>, navigation, taps</li>
<li><strong style="color:var(--highlight)">stuck detection</strong> + recovery</li>
<li><strong style="color:var(--highlight)">vision fallback</strong> for empty trees</li>
</ul>
</div>
<div class="limit-col">
<h3><iconify-icon icon="ph:warning-duotone" style="color:var(--yellow)"></iconify-icon> unreliable</h3>
<ul>
<li><strong style="color:var(--highlight)">flutter, react native</strong>, games</li>
<li><strong style="color:var(--highlight)">webviews</strong> (incomplete tree)</li>
<li><strong style="color:var(--highlight)">drag & drop</strong>, multi-finger</li>
<li><strong style="color:var(--highlight)">notification</strong> interaction</li>
<li><strong style="color:var(--highlight)">clipboard</strong> on android 12+</li>
<li><strong style="color:var(--highlight)">captchas</strong> and bot detection</li>
</ul>
</div>
<div class="limit-col">
<h3><iconify-icon icon="ph:x-circle-duotone" style="color:var(--red)"></iconify-icon> can't do</h3>
<ul>
<li><strong style="color:var(--highlight)">banking apps</strong> (FLAG_SECURE)</li>
<li><strong style="color:var(--highlight)">biometrics</strong> (fingerprint, face)</li>
<li>bypass <strong style="color:var(--highlight)">encrypted lock screen</strong></li>
<li>access other apps' <strong style="color:var(--highlight)">private data</strong></li>
<li><strong style="color:var(--highlight)">audio or camera</strong> streams</li>
<li><strong style="color:var(--highlight)">pinch-to-zoom</strong> gestures</li>
</ul>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ─── getting started ─── -->
<section id="getting-started">
<div class="wrap-narrow">
<div class="section-label" style="color:var(--coral)"><iconify-icon icon="ph:rocket-launch-duotone"></iconify-icon> setup</div>
<h2>getting started</h2>
<div class="stepper">
<div class="stepper-step">
<span class="stepper-num">1</span>
<h3>install</h3>
<p>one command. installs bun and adb if missing, clones the repo, sets up .env.</p>
<div class="copyable">
<pre>curl -fsSL https://droidclaw.ai/install.sh | sh</pre>
<button class="copy-btn" onclick="copyCode(this)" aria-label="Copy to clipboard">
<iconify-icon icon="ph:copy-duotone" width="16" height="16"></iconify-icon>
</button>
</div>
<p style="margin-top: 16px;">or do it manually:</p>
<pre><span class="dim"># install adb</span>
brew install android-platform-tools
<span class="dim"># install bun (required — npm/node won't work)</span>
curl -fsSL https://bun.sh/install | bash
<span class="dim"># clone and setup</span>
git clone https://github.com/unitedbyai/droidclaw.git
cd droidclaw && bun install
cp .env.example .env</pre>
</div>
<div class="stepper-step">
<span class="stepper-num">2</span>
<h3>configure an llm provider</h3>
<p>edit <code>.env</code> - fastest way to start is groq (free tier):</p>
<pre>LLM_PROVIDER=groq
GROQ_API_KEY=gsk_your_key_here
# or run fully local with ollama (no api key)
# ollama pull llama3.2
# LLM_PROVIDER=ollama</pre>
<table>
<thead><tr><th>provider</th><th>cost</th><th>vision</th><th>notes</th></tr></thead>
<tbody>
<tr><td>groq</td><td>free</td><td>no</td><td>fastest to start</td></tr>
<tr><td>ollama</td><td>free (local)</td><td>yes*</td><td>no api key, runs on your machine</td></tr>
<tr><td>openrouter</td><td>per token</td><td>yes</td><td>200+ models</td></tr>
<tr><td>openai</td><td>per token</td><td>yes</td><td>gpt-4o</td></tr>
<tr><td>bedrock</td><td>per token</td><td>yes</td><td>claude on aws</td></tr>
</tbody>
</table>
</div>
<div class="stepper-step">
<span class="stepper-num">3</span>
<h3>connect your phone</h3>
<p>enable usb debugging in developer options, plug in via usb.</p>
<pre>adb devices # should show your device
cd droidclaw && bun run src/kernel.ts</pre>
</div>
<div class="stepper-step">
<span class="stepper-num">4</span>
<h3>tune (optional)</h3>
<table>
<thead><tr><th>key</th><th>default</th><th>what</th></tr></thead>
<tbody>
<tr><td>MAX_STEPS</td><td>30</td><td>steps before giving up</td></tr>
<tr><td>STEP_DELAY</td><td>2</td><td>seconds between actions</td></tr>
<tr><td>STUCK_THRESHOLD</td><td>3</td><td>steps before stuck recovery</td></tr>
<tr><td>VISION_MODE</td><td>fallback</td><td>off / fallback / always</td></tr>
<tr><td>MAX_ELEMENTS</td><td>40</td><td>ui elements sent to llm</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ─── examples ─── -->
<section id="examples">
<div class="wrap-narrow">
<div class="section-label" style="color:var(--purple)"><iconify-icon icon="ph:folder-open-duotone"></iconify-icon> examples</div>
<h2><iconify-icon icon="ph:file-code-duotone" width="24" height="24" style="color:var(--accent); vertical-align:-3px"></iconify-icon> 35 workflows + <iconify-icon icon="ph:play-duotone" width="24" height="24" style="color:var(--lime); vertical-align:-3px"></iconify-icon> 5 flows</h2>
<p class="section-desc" style="margin-bottom: 24px;">ready to use. workflows are ai-powered (json), flows are deterministic (yaml).</p>
<details>
<summary>
<iconify-icon class="cat-icon" icon="ph:chat-circle-dots-duotone" style="color:var(--green)"></iconify-icon>
messaging <span class="count">10 workflows</span>
<iconify-icon class="chevron" icon="ph:caret-right-bold" width="14" height="14"></iconify-icon>
</summary>
<div class="details-body">
<ul class="example-links">
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/messaging/slack-standup.json">slack-standup</a> <span class="desc">- post daily standup</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/messaging/whatsapp-broadcast.json">whatsapp-broadcast</a> <span class="desc">- message multiple contacts</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/messaging/telegram-send-message.json">telegram-send-message</a> <span class="desc">- send telegram message</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/messaging/email-reply.json">email-reply</a> <span class="desc">- draft and send email</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/messaging/whatsapp-to-email.json">whatsapp-to-email</a> <span class="desc">- forward to email</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/messaging/slack-check-messages.json">slack-check-messages</a> <span class="desc">- read unread messages</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/messaging/email-digest.json">email-digest</a> <span class="desc">- summarise emails</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/messaging/telegram-channel-digest.json">telegram-channel-digest</a> <span class="desc">- digest a channel</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/messaging/whatsapp-reply.json">whatsapp-reply</a> <span class="desc">- reply to a message</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/messaging/send-whatsapp-vi.json">send-whatsapp-vi</a> <span class="desc">- send to specific contact</span></li>
</ul>
</div>
</details>
<details>
<summary>
<iconify-icon class="cat-icon" icon="ph:share-network-duotone" style="color:var(--purple)"></iconify-icon>
social <span class="count">4 workflows</span>
<iconify-icon class="chevron" icon="ph:caret-right-bold" width="14" height="14"></iconify-icon>
</summary>
<div class="details-body">
<ul class="example-links">
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/social/social-media-post.json">social-media-post</a> <span class="desc">- post across platforms</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/social/social-media-engage.json">social-media-engage</a> <span class="desc">- like/comment on posts</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/social/instagram-post-check.json">instagram-post-check</a> <span class="desc">- check recent posts</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/social/youtube-watch-later.json">youtube-watch-later</a> <span class="desc">- save videos</span></li>
</ul>
</div>
</details>
<details>
<summary>
<iconify-icon class="cat-icon" icon="ph:briefcase-duotone" style="color:var(--indigo)"></iconify-icon>
productivity <span class="count">8 workflows</span>
<iconify-icon class="chevron" icon="ph:caret-right-bold" width="14" height="14"></iconify-icon>
</summary>
<div class="details-body">
<ul class="example-links">
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/productivity/morning-briefing.json">morning-briefing</a> <span class="desc">- messages, calendar, weather</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/productivity/github-check-prs.json">github-check-prs</a> <span class="desc">- check pull requests</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/productivity/calendar-create-event.json">calendar-create-event</a> <span class="desc">- create event</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/productivity/notes-capture.json">notes-capture</a> <span class="desc">- capture a note</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/productivity/notification-cleanup.json">notification-cleanup</a> <span class="desc">- triage notifications</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/productivity/screenshot-share-slack.json">screenshot-share-slack</a> <span class="desc">- screenshot to slack</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/productivity/translate-and-reply.json">translate-and-reply</a> <span class="desc">- translate and reply</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/productivity/logistics-workflow.json">logistics-workflow</a> <span class="desc">- multi-app coordination</span></li>
</ul>
</div>
</details>
<details>
<summary>
<iconify-icon class="cat-icon" icon="ph:magnifying-glass-duotone" style="color:var(--cyan)"></iconify-icon>
research <span class="count">6 workflows</span>
<iconify-icon class="chevron" icon="ph:caret-right-bold" width="14" height="14"></iconify-icon>
</summary>
<div class="details-body">
<ul class="example-links">
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/research/weather-to-whatsapp.json">weather-to-whatsapp</a> <span class="desc">- weather via ai mode to whatsapp</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/research/multi-app-research.json">multi-app-research</a> <span class="desc">- research across apps</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/research/price-comparison.json">price-comparison</a> <span class="desc">- compare prices</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/research/news-roundup.json">news-roundup</a> <span class="desc">- collect news</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/research/google-search-report.json">google-search-report</a> <span class="desc">- search and save</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/research/check-flight-status.json">check-flight-status</a> <span class="desc">- flight status</span></li>
</ul>
</div>
</details>
<details>
<summary>
<iconify-icon class="cat-icon" icon="ph:heart-duotone" style="color:var(--pink)"></iconify-icon>
lifestyle <span class="count">8 workflows</span>
<iconify-icon class="chevron" icon="ph:caret-right-bold" width="14" height="14"></iconify-icon>
</summary>
<div class="details-body">
<ul class="example-links">
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/lifestyle/food-order.json">food-order</a> <span class="desc">- order food</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/lifestyle/uber-ride.json">uber-ride</a> <span class="desc">- book a ride</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/lifestyle/spotify-playlist.json">spotify-playlist</a> <span class="desc">- create/add playlist</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/lifestyle/maps-commute.json">maps-commute</a> <span class="desc">- check commute</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/lifestyle/fitness-log.json">fitness-log</a> <span class="desc">- log workout</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/lifestyle/expense-tracker.json">expense-tracker</a> <span class="desc">- log expense</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/lifestyle/wifi-password-share.json">wifi-password-share</a> <span class="desc">- share wifi</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/workflows/lifestyle/do-not-disturb.json">do-not-disturb</a> <span class="desc">- toggle dnd</span></li>
</ul>
</div>
</details>
<details>
<summary>
<iconify-icon class="cat-icon" icon="ph:play-duotone" style="color:var(--lime)"></iconify-icon>
flows <span class="count">5 deterministic</span>
<iconify-icon class="chevron" icon="ph:caret-right-bold" width="14" height="14"></iconify-icon>
</summary>
<div class="details-body">
<ul class="example-links">
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/flows/send-whatsapp.yaml">send-whatsapp</a> <span class="desc">- send a message</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/flows/google-search.yaml">google-search</a> <span class="desc">- run a search</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/flows/create-contact.yaml">create-contact</a> <span class="desc">- add a contact</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/flows/clear-notifications.yaml">clear-notifications</a> <span class="desc">- clear all</span></li>
<li><a href="https://github.com/unitedbyai/droidclaw/blob/main/examples/flows/toggle-wifi.yaml">toggle-wifi</a> <span class="desc">- toggle wifi</span></li>
</ul>
</div>
</details>
</div>
</section>
<!-- ─── source ─── -->
<div class="source-section">
<div class="wrap">
<div class="source-grid">
<div>
<div class="section-label" style="color:var(--cyan)"><iconify-icon icon="ph:code-duotone"></iconify-icon> source</div>
<h2>10 files in src/</h2>
</div>
<pre>kernel.ts main loop
actions.ts 22 actions + adb retry
skills.ts 6 multi-step skills
workflow.ts workflow orchestration
flow.ts yaml flow runner
llm-providers.ts 5 providers + system prompt
sanitizer.ts accessibility xml parser
config.ts env config
constants.ts keycodes, coordinates
logger.ts session logging</pre>
</div>
</div>
</div>
<!-- ─── footer ─── -->
<footer>
<div class="wrap">
<p>
<a href="https://github.com/unitedbyai/droidclaw"><iconify-icon icon="ph:github-logo-duotone" width="14" height="14" style="vertical-align:-2px"></iconify-icon> github</a>
&nbsp;&middot;&nbsp; mit license &nbsp;&middot;&nbsp; built by <a href="https://unitedby.ai">unitedby.ai</a>
</p>
</div>
</footer>
<script>
function copyCode(btn) {
const pre = btn.parentElement.querySelector('pre');
const text = pre.textContent.trim();
navigator.clipboard.writeText(text).then(() => {
const icon = btn.querySelector('iconify-icon');
icon.setAttribute('icon', 'ph:check-duotone');
btn.classList.add('copied');
setTimeout(() => {
icon.setAttribute('icon', 'ph:copy-duotone');
btn.classList.remove('copied');
}, 2000);
});
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink