opencode-mobile/docs-site/features/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OpenCode Mobile Features — AI Coding Agent for Android</title>
<meta name="description" content="Full feature list for OpenCode Mobile: real-time AI coding sessions, multi-model support, Tailscale/VPN connectivity, streaming diff view, session history, and open-source privacy-first design." />
<meta name="keywords" content="opencode mobile features, opencode android features, AI coding agent android, mobile AI coding assistant, opencode android app capabilities, code with AI on phone" />
<meta name="theme-color" content="#3b82f6" />
<link rel="canonical" href="https://dzianisv.github.io/opencode-mobile/features/" />
<link rel="icon" type="image/png" href="../fdroid/repo/icons/icon.png" />

<meta property="og:type" content="article" />
<meta property="og:site_name" content="OpenCode Mobile" />
<meta property="og:title" content="OpenCode Mobile Features — AI Coding Agent for Android" />
<meta property="og:description" content="Everything OpenCode Mobile can do: real-time AI coding sessions on Android, multi-model support, Tailscale connectivity, streaming diffs, session history, and privacy-first open-source design." />
<meta property="og:url" content="https://dzianisv.github.io/opencode-mobile/features/" />
<meta property="og:image" content="https://dzianisv.github.io/opencode-mobile/og.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="OpenCode Mobile Features — AI Coding Agent for Android" />
<meta name="twitter:description" content="Real-time AI coding sessions, multi-model support, Tailscale connectivity, streaming diffs — OpenCode Mobile feature overview." />
<meta name="twitter:image" content="https://dzianisv.github.io/opencode-mobile/og.png" />

<!-- Breadcrumb -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "OpenCode Mobile", "item": "https://dzianisv.github.io/opencode-mobile/" },
    { "@type": "ListItem", "position": 2, "name": "Features", "item": "https://dzianisv.github.io/opencode-mobile/features/" }
  ]
}
</script>

<!-- SoftwareApplication -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "OpenCode Mobile",
  "operatingSystem": "Android",
  "applicationCategory": "DeveloperApplication",
  "description": "Open-source Android client for the OpenCode AI coding agent. Run AI-assisted coding sessions from your phone against a self-hosted opencode server.",
  "url": "https://dzianisv.github.io/opencode-mobile/",
  "downloadUrl": "https://dzianisv.github.io/opencode-mobile/download/",
  "softwareVersion": "0.4",
  "author": { "@type": "Organization", "name": "VIBE TECHNOLOGIES, LLC" },
  "license": "https://opensource.org/licenses/MIT",
  "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
  "featureList": [
    "Real-time AI coding sessions via Server-Sent Events",
    "Multi-model support: Claude, GPT, Gemini, Ollama, and any opencode-compatible model",
    "Tailscale and VPN connectivity for private server access",
    "Streaming diff and tool-use output as the agent works",
    "Full session history with scroll and search",
    "Multiple saved server connections",
    "Password-protected server authentication",
    "Privacy-first: no cloud relay, no telemetry by default",
    "Open source under MIT license"
  ]
}
</script>

<style>
:root{--bg:#0b0f17;--bg-soft:#121826;--card:#161d2e;--border:#243049;--text:#e6ebf5;--muted:#9aa6be;--accent:#3b82f6;--accent-2:#2563eb;--green:#22c55e;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}
section{padding:36px 0;border-top:1px solid var(--border)}
section:first-of-type{border-top:none}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
h1{font-size:2.1rem}
h2{font-size:1.4rem;margin-top:.2em}
h3{font-size:1.1rem;margin-top:1.4em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--bg-soft);border:1px solid var(--border);border-radius:6px;padding:2px 6px;font-size:.9em}
.crumbs{font-size:.9rem;color:var(--muted);padding-top:24px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.hero{padding:48px 0 24px}
.hero h1{font-size:2.4rem;max-width:700px}
.hero p{color:var(--muted);max-width:620px;font-size:1.1rem;margin-top:.5em}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-block;padding:11px 24px;border-radius:8px;font-weight:600;font-size:1rem}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2);text-decoration:none}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--accent);text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 24px}
.card-icon{font-size:1.5rem;margin-bottom:8px}
.card h3{font-size:1rem;margin:0 0 6px}
.card p{color:var(--muted);font-size:.92rem;margin:0;line-height:1.5}
.badge{display:inline-block;background:rgba(59,130,246,.15);color:var(--accent);border:1px solid rgba(59,130,246,.3);border-radius:20px;font-size:.78rem;padding:2px 10px;margin-bottom:8px}
.check-list{list-style:none;padding:0;margin:0}
.check-list li{padding:6px 0;color:var(--muted);font-size:.95rem;display:flex;gap:10px;align-items:flex-start}
.check-list li::before{content:"✓";color:var(--green);font-weight:700;flex-shrink:0;margin-top:1px}
.use-case{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin-bottom:14px}
.use-case h3{font-size:1rem;margin:0 0 6px;color:var(--text)}
.use-case p{color:var(--muted);font-size:.92rem;margin:0;line-height:1.5}
.muted{color:var(--muted);font-size:.9rem}
footer{padding:32px 0;border-top:1px solid var(--border);margin-top:8px}
footer .wrap p{color:var(--muted);font-size:.9rem;margin:8px 0}
footer a{color:var(--muted);margin-right:16px}
footer a:hover{color:var(--accent)}
@media(max-width:600px){.hero h1{font-size:1.7rem}.grid{grid-template-columns:1fr}}
</style>
</head>
<body>

<main>
<section class="hero">
  <div class="wrap">
    <nav class="crumbs"><a href="../">OpenCode Mobile</a> › Features</nav>
    <h1>Everything OpenCode Mobile can do</h1>
    <p>A full-featured Android client for the OpenCode AI coding agent — real-time sessions, multi-model support, private server connectivity, and no cloud intermediary.</p>
    <div class="cta-row">
      <a href="../download/" class="btn btn-primary">Download APK</a>
      <a href="../guide/" class="btn btn-ghost">Setup guide</a>
    </div>
  </div>
</section>

<section>
  <div class="wrap">
    <h2>Core capabilities</h2>
    <p style="color:var(--muted);margin-bottom:24px">What the app delivers end-to-end, from connection to completed coding task.</p>
    <div class="grid">

      <div class="card">
        <div class="card-icon">⚡</div>
        <h3>Real-time streaming sessions</h3>
        <p>Streams the agent's tool calls, file edits, and reasoning tokens via Server-Sent Events as they happen — no waiting for a complete response before you see output.</p>
      </div>

      <div class="card">
        <div class="card-icon">🤖</div>
        <h3>Any model opencode supports</h3>
        <p>Inherits your server's model configuration: Claude 3.5/4, GPT-4o, Gemini 1.5/2, Ollama local models, and any provider opencode can reach. Switch models server-side; the app follows.</p>
      </div>

      <div class="card">
        <div class="card-icon">🔒</div>
        <h3>Tailscale &amp; VPN connectivity</h3>
        <p>Point the app at any private IP or Tailscale MagicDNS hostname. No port-forwarding or public exposure required — your codebase stays on your machine.</p>
      </div>

      <div class="card">
        <div class="card-icon">📂</div>
        <h3>Tool-use &amp; diff output</h3>
        <p>Renders the agent's tool calls inline — file reads, writes, shell commands — so you see exactly what it did to your code, not just a prose summary.</p>
      </div>

      <div class="card">
        <div class="card-icon">🕑</div>
        <h3>Full session history</h3>
        <p>Every conversation is stored locally. Scroll back through past sessions, resume interrupted work, or review what the agent changed in a previous run.</p>
      </div>

      <div class="card">
        <div class="card-icon">🔗</div>
        <h3>Multiple saved servers</h3>
        <p>Save and switch between multiple server profiles — home lab, work VPN, cloud VM. Each connection stores its own URL and credentials independently.</p>
      </div>

      <div class="card">
        <div class="card-icon">🛡️</div>
        <h3>Password-protected auth</h3>
        <p>Connects to password-protected <code>opencode serve</code> instances. Credentials are stored in the device keychain, not in plain text.</p>
      </div>

      <div class="card">
        <div class="card-icon">🔍</div>
        <h3>Built-in diagnostics</h3>
        <p>Tap "Share diagnostic" to generate a structured connectivity report (DNS, port, health-check, TLS) for faster debugging — without exposing code or message content.</p>
      </div>

      <div class="card">
        <div class="card-icon">🌐</div>
        <h3>Open source &amp; no telemetry</h3>
        <p>MIT-licensed, auditable source on GitHub. Crash reporting (Sentry) is opt-in and off by default. No analytics, no account, no cloud relay.</p>
      </div>

    </div>
  </div>
</section>

<section>
  <div class="wrap">
    <h2>What people use it for</h2>
    <div class="use-case">
      <h3>Code review on the go</h3>
      <p>Ask the agent to summarize a diff, explain a function, or flag potential bugs — from your phone while away from your desk. The session history means you can pick up where you left off.</p>
    </div>
    <div class="use-case">
      <h3>Quick fixes &amp; patches</h3>
      <p>Describe the bug in plain language; let the agent locate, patch, and explain the change in your actual codebase. You see every file write as it happens.</p>
    </div>
    <div class="use-case">
      <h3>Scaffolding new features</h3>
      <p>Ask the agent to stub out a new module, write tests, or extend an existing pattern — then commit from your laptop when you're back. Start the thinking on the bus, land the code at your desk.</p>
    </div>
    <div class="use-case">
      <h3>Private local-model sessions</h3>
      <p>Point opencode at Ollama running locally and your mobile session never touches a third-party server. The app connects directly over your tailnet — fully air-gapped from the internet if you want.</p>
    </div>
    <div class="use-case">
      <h3>Documentation &amp; explanation</h3>
      <p>Ask the agent to explain an unfamiliar codebase, write a README section, or generate API docs — useful when you're reading code without an IDE open.</p>
    </div>
  </div>
</section>

<section>
  <div class="wrap">
    <h2>Compared to using Claude.ai or ChatGPT from mobile browser</h2>
    <p style="color:var(--muted);margin-bottom:20px">OpenCode Mobile is a coding-agent client, not a chat UI. The key differences:</p>
    <ul class="check-list">
      <li><strong>Agent has direct access to your codebase</strong> — reads and writes actual files; no copy-pasting snippets.</li>
      <li><strong>Runs against your server</strong> — your model config, your API keys, your cost — not a metered consumer tier.</li>
      <li><strong>Streaming tool-use output</strong> — see file edits and shell commands as they run, not a finished summary.</li>
      <li><strong>Session persistence</strong> — full history stored locally; conversations don't disappear on browser refresh.</li>
      <li><strong>No cloud relay</strong> — traffic goes phone → Tailscale → your machine; no intermediary sees your code.</li>
      <li><strong>Self-hosted model support</strong> — use Ollama, LM Studio, or any local model opencode supports.</li>
    </ul>
  </div>
</section>

<section>
  <div class="wrap">
    <h2>System requirements</h2>
    <ul class="check-list">
      <li>Android 7.0 (API 24) or later</li>
      <li><a href="https://github.com/sst/opencode">opencode</a> running on a reachable server (<code>opencode serve</code>)</li>
      <li>Network path from phone to server (LAN, Tailscale VPN, or any tunnel)</li>
      <li>~15 MB storage for the app; session history grows with use</li>
    </ul>
    <p style="margin-top:16px"><a href="../guide/">Full setup walkthrough →</a></p>
  </div>
</section>

<section>
  <div class="wrap">
    <h2>Get the app</h2>
    <p style="color:var(--muted)">Free, open-source, no account required.</p>
    <div class="cta-row" style="margin-top:16px">
      <a href="../download/" class="btn btn-primary">Download &amp; install</a>
      <a href="https://github.com/dzianisv/opencode-mobile" class="btn btn-ghost">View source on GitHub</a>
    </div>
    <p style="margin-top:20px;color:var(--muted);font-size:.9rem">
      See also: <a href="../guide/">setup guide</a> · <a href="../troubleshooting/">troubleshooting</a> · <a href="../">overview</a>
    </p>
  </div>
</section>
</main>

<footer>
  <div class="wrap">
    <p>
      <a href="../">Home</a>
      <a href="../download/">Download</a>
      <a href="../guide/">Setup guide</a>
      <a href="features/">Features</a>
      <a href="https://github.com/dzianisv/opencode-mobile">GitHub</a>
      <a href="../privacy/">Privacy policy</a>
    </p>
    <p class="muted">Free and open-source. Built by VIBE TECHNOLOGIES, LLC.</p>
  </div>
</footer>

</body>
</html>