agent-console/index.html at main · Qusic/agent-console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Agent Console — Steer AI coding agents from iPhone and iPad</title>
  <meta name="description" content="A SwiftUI client for AI coding agents, natively built for iPhone and iPad. Chat, terminals, and code review, on hosts you run yourself.">
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="canonical" href="https://qusic.github.io/agent-console/">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Agent Console">
  <meta property="og:title" content="Agent Console — Steer AI coding agents from iPhone and iPad">
  <meta property="og:description" content="A SwiftUI client for AI coding agents, natively built for iPhone and iPad. Chat, terminals, and code review, on hosts you run yourself.">
  <meta property="og:url" content="https://qusic.github.io/agent-console/">
  <meta property="og:image" content="https://qusic.github.io/agent-console/og.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Agent Console — Steer AI coding agents from iPhone and iPad">
  <meta name="twitter:card" content="summary_large_image">
  <script>
    const t = e => document.documentElement.dataset.theme = e.matches ? "dim" : "winter";
    const m = matchMedia("(prefers-color-scheme: dark)");
    t(m); m.addEventListener("change", t);
  </script>
  <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
  <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
  <header class="navbar bg-base-100 border-b border-base-200">
    <div class="flex-1">
      <span class="btn btn-ghost text-xl font-bold">Agent Console</span>
    </div>
    <a href="https://apps.apple.com/app/id6786123190" class="btn btn-primary">Download</a>
  </header>

  <main>
    <section class="hero bg-base-200 py-20">
      <div class="hero-content flex-col lg:flex-row gap-12 lg:gap-16 max-w-6xl">
        <div class="max-w-xl text-center lg:text-left">
          <h1 class="text-4xl sm:text-5xl font-bold">Steer AI coding agents from iPhone and iPad</h1>
          <p class="py-6 text-lg opacity-80">Chat with them, open terminals, and review diffs — all on hosts you run yourself. Your machines, your code, your control.</p>
          <a href="https://apps.apple.com/app/id6786123190" class="btn btn-primary btn-lg">Download on the App Store</a>
        </div>
        <img src="shots/chat-phone.webp" width="660" height="1434"
             alt="Agent Console on iPhone: an agent searching and editing files, pausing to ask permission to run a command"
             class="w-56 sm:w-64 lg:w-72 shrink-0 rounded-4xl border-8 border-neutral shadow-2xl"
             fetchpriority="high">
      </div>
    </section>

    <div class="max-w-3xl mx-auto px-4 pt-16 text-center">
      <p class="text-lg opacity-80">A SwiftUI client for AI coding agents, natively built for iPhone and iPad. Point it at an agent host on your Mac, a PC, or a cloud VM, and steer coding agents from anywhere.</p>
    </div>

    <section class="max-w-5xl mx-auto px-4 py-16">
      <h2 class="text-3xl font-bold text-center mb-14">Features</h2>

      <div class="space-y-24">
        <div>
          <div class="max-w-2xl mx-auto text-center">
            <h3 class="text-2xl font-bold mb-3">Chat</h3>
            <p class="text-lg opacity-80">Hand an agent a task and watch it think, edit files, and run commands in real time.</p>
          </div>
          <img src="shots/chat-ipad.webp" width="1400" height="1868"
               alt="Agent Console on iPad: sessions and terminals in the sidebar, next to an agent editing files and asking to run a command"
               class="mt-10 mx-auto w-full max-w-3xl rounded-2xl border-8 border-neutral shadow-2xl"
               loading="lazy">
        </div>

        <div class="grid gap-10 lg:grid-cols-2 items-center">
          <div class="text-center lg:text-left">
            <h3 class="text-2xl font-bold mb-3">Questions</h3>
            <p class="text-lg opacity-80">When an agent needs a decision, answer with native controls instead of typing.</p>
          </div>
          <img src="shots/ask-phone.webp" width="660" height="1434"
               alt="An agent asking a structured question, answered with radio buttons and checkboxes"
               class="w-56 sm:w-64 mx-auto rounded-4xl border-8 border-neutral shadow-xl"
               loading="lazy">
        </div>

        <div class="grid gap-10 lg:grid-cols-2 items-center">
          <div class="text-center lg:text-left lg:order-last">
            <h3 class="text-2xl font-bold mb-3">Terminals</h3>
            <p class="text-lg opacity-80">Open a live shell on the host and type straight into it.</p>
          </div>
          <img src="shots/terminal-phone.webp" width="660" height="1434"
               alt="A live shell on the host running a Swift test suite, then committing the result"
               class="w-56 sm:w-64 mx-auto rounded-4xl border-8 border-neutral shadow-xl"
               loading="lazy">
        </div>

        <div class="grid gap-10 lg:grid-cols-2 items-center">
          <div class="text-center lg:text-left">
            <h3 class="text-2xl font-bold mb-3">Code review</h3>
            <p class="text-lg opacity-80">See exactly what an agent changed, with syntax-highlighted diffs.</p>
          </div>
          <img src="shots/diff-phone.webp" width="660" height="1434"
               alt="A syntax-highlighted diff of Checkout.swift showing added and removed lines"
               class="w-56 sm:w-64 mx-auto rounded-4xl border-8 border-neutral shadow-xl"
               loading="lazy">
        </div>

        <div class="grid gap-10 lg:grid-cols-2 items-center">
          <div class="text-center lg:text-left lg:order-last">
            <h3 class="text-2xl font-bold mb-3">Files and editing</h3>
            <p class="text-lg opacity-80">Browse the workspace and make quick manual edits yourself.</p>
          </div>
          <img src="shots/editor-phone.webp" width="660" height="1434"
               alt="Cart.swift open in the built-in editor with syntax highlighting"
               class="w-56 sm:w-64 mx-auto rounded-4xl border-8 border-neutral shadow-xl"
               loading="lazy">
        </div>

        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          <div class="card bg-base-100 border border-base-200">
            <div class="card-body">
              <h3 class="card-title">Multiple hosts</h3>
              <p>Keep several on hand and switch between them in a tap.</p>
            </div>
          </div>
          <div class="card bg-base-100 border border-base-200">
            <div class="card-body">
              <h3 class="card-title">Flexible connection</h3>
              <p>Connect directly over WebSocket, or reach a private host through a secure cloud tunnel.</p>
            </div>
          </div>
          <div class="card bg-base-100 border border-base-200">
            <div class="card-body">
              <h3 class="card-title">Private by design</h3>
              <p>No backend of ours in the middle; your data stays entirely under your control.</p>
            </div>
          </div>
          <div class="card bg-base-100 border border-base-200">
            <div class="card-body">
              <h3 class="card-title">Native app</h3>
              <p>Pure SwiftUI, fast and fluid, with the look and feel of iOS.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="max-w-4xl mx-auto px-4 py-16">
      <h2 class="text-3xl font-bold text-center mb-4">Bring your own host</h2>
      <p class="text-center opacity-80 mb-10">Agent Console speaks the <a class="link link-primary" href="https://microsoft.github.io/agent-host-protocol/">Agent Host Protocol</a>, so it works with any host that implements it.</p>
      <div class="grid gap-6 sm:grid-cols-2">
        <div class="card bg-base-100 border border-base-200">
          <div class="card-body">
            <h3 class="card-title">Agent hosts</h3>
            <p><strong>Visual Studio Code</strong> — its built-in agent host runs the Copilot and Claude coding agents.</p>
          </div>
        </div>
        <div class="card bg-base-100 border border-base-200">
          <div class="card-body">
            <h3 class="card-title">Cloud tunnels</h3>
            <p><strong>Microsoft Dev Tunnels</strong> — built into VS Code, with a GitHub sign-in.</p>
          </div>
        </div>
      </div>
      <p class="text-center opacity-70 mt-8 text-sm">Hitting a snag with a host, or want another tunnel service? <a class="link" href="https://github.com/Qusic/agent-console/discussions">Let us know</a> — we're keen to add more.</p>
    </section>

    <div class="bg-base-200 py-16">
      <div class="max-w-2xl mx-auto px-4 text-center">
        <p class="text-lg opacity-80">Agent Console is just the client — a window into agents running on machines you control, not a managed cloud service. You bring your own host, tools, and models.</p>
      </div>
    </div>
  </main>

  <footer class="footer footer-center bg-base-100 text-base-content p-10 border-t border-base-200">
    <aside>
      <p class="text-lg font-bold">Agent Console</p>
    </aside>
    <nav class="grid grid-flow-col gap-6">
      <a class="link link-hover" href="https://github.com/Qusic/agent-console/discussions">Feedback</a>
      <a class="link link-hover" href="privacy.html">Privacy</a>
    </nav>
  </footer>
</body>
</html>