vercel-labs

pingpad: table tennis in the browser, with your phone as the paddle --- title: pingpad: table tennis in the browser, with your phone as the paddle published: true description: How pingpad turns a phone into a paddle over WebRTC: swing recognition on the phone, guiding the player between two devices, and Playwright tests for both. tags: webrtc, gamedev, webdev, typescript cover_image: dev-to-uploads.s3.us-east-2.amazonaws.com Use a ratio of 100:42 for best results. published_at: 2026-11-03 12:45 +0000 --- pingpad is a table tennis game that runs in the browser. You open pingpad.app on a laptop, a tablet or a TV, scan the QR code with your phone, and the phone becomes your paddle. There's nothing to install and no account to create. You can play the computer, play a friend while the next players wait on the bench, or play alone and chase a record. Badges and records stay on your phone. {% embed youtube.com %} One of the people who tried it summed it up: "The Scan'n Play side of it works really well. No install, no questions, no pesky app store. I love it." This article is about how it's built: a phone and a screen talking peer to peer, a swing recognised on the phone rather than tracked, a lot of work spent on guiding the player between two devices, and the library it all sits on. It started with a counter In 2019 I wrote a WebRTC proof of concept: a counter shown on one screen and driven from a phone. You snapped a QR code and updated the counter in real time. The goal was to go a bit further than the usual WebRTC exercises. In 2022 it became webrtc-remote-control, an open source library for what any app runs into once a phone drives another screen: reconnections, page reloads, phones going to sleep, a remote that has to find its screen again. I had demos, the counter and an accelerometer moving a 3D object, and they worked. What I lacked was a game idea. At the end of September 2026 I started on pingpad with AI coding agents. The library already handled the most critical part, the link between the phone and the screen, so I could build the game on top of it. The React and Vue bindings each come with an llm.md guide, written so that a coding assistant knows how to use them. Five weeks later, pingpad has had over 200 pull requests merged. Phone and screen, peer to peer The phone and the screen talk over a WebRTC data channel. No game server sits between them. Two devices still need someone to introduce them. I ported the PeerJS signaling server to Cloudflare Workers, on Durable Objects. It introduces the phone and the screen, then carries nothing. I picked Workers because the alternatives fit badly. Vercel cuts a WebSocket function after 300 seconds and bills its memory as long as the socket is open, so a screen left open would have used up the monthly quota in about a week. Render's free tier goes to sleep after 15 minutes. Cloudflare doesn't bill a hibernated Durable Object socket, so a screen waiting for players costs nothing. STUN finds a direct path when one exists, even between a phone on 5G and a laptop on home Wi-Fi. Some networks make that impossible, such as a symmetric NAT or a corporate firewall. For those, Cloudflare's TURN relays the traffic, still DTLS-encrypted, so the relay can't read it. The screen shows whether each paddle connected over the local network, across the internet through STUN, or through the relay, something WebRTC usually hides. On the same Wi-Fi, the median latency from phone to screen is 3.5 ms. Recognise the swing, don't track the paddle A phone can't tell where it is in space. Its sensors give acceleration and orientation, not position, so you can't track a paddle the way a camera would. What you can do is recognise a swing. So the phone doesn't stream its sensors. It runs the swing detector itself, at full sensor rate, 60 times a second on iOS, and sends one compact, timestamped event when it sees a swing. The screen converts that timestamp with a clock offset it measures by pings, measured again regularly and from scratch when a paddle reconnects. Then the screen decides whether the swing hit the ball, by comparing the time of the swing with the time the ball reached the paddle. A network hiccup delays the message, but it doesn't change your shot. I don't have a ping-pong table at home, so I recorded myself hitting foam stress balls with the back of the phone. A recorder on the phone captured each take, sensors and microphone together, and I labelled it: forehands, backhands, serves. The detector's thresholds come from those recordings, never from tuning by hand. A bench replays every recording through the detector. The detector is a pure module with no DOM dependency, so the exact same function runs on the phone and in the bench. The microphone was there to hear the contact, and it showed that the acceleration peak doesn't mark it. Depending on how you swing, the peak can come before the ball touches the phone as well as after. That's why the screen decides the hit with a window around the ball's arrival, instead of trusting the peak. I tuned the detector on an iPhone. It's meant to work on any recent phone, and it has played fine on Android too. Guiding the player between two devices A good share of the pull requests went into guiding the player, because this isn't a game where you tap your screen. You hold your phone like a paddle while the game plays on another screen, and nobody has that reflex yet. At each step, the player has to be told what to do, on the device they're looking at. Some of the situations the game handles: - A visitor clicks Play on their phone, when the phone is meant to be the paddle. The game explains that this device would become the screen, and offers to send the link to a computer. - The QR code is scanned from Instagram's or Messenger's built-in browser, which won't give access to the motion sensors. The paddle says so, and how to open the page in the real browser. - iOS only grants the motion sensors after DeviceMotionEvent.requestPermission(), called from a user gesture, on HTTPS. The paddle's button is that gesture. - Calibration shows a phone on the screen turning as the player turns theirs, so they can see what the game sees. - Once the ball is served, the paddle tells the player to watch the screen. - A phone locks, goes to the background or reloads mid-match. The game pauses instead of giving the point away, and the phone finds the game again when it comes back. - A third phone joins. It goes on the bench, in the order phones came in, and the screen calls it out by number. A player can hand over their seat, and a player who leaves keeps it until someone on the bench takes it. - A new version is deployed during a game. The protocol is versioned, so a phone and a screen on different versions notice it and say what to do. Each of these has a message where the player is looking, phone or screen, and an end-to-end test that replays it. Commands work the same everywhere. Pausing, choosing the match length or turning the sound off goes through one function on the screen, whether it comes from a button, a key, or a paddle. The screen sends each paddle the commands it offers, so any player can control the game from the phone in their hand. That was the point for TVs: once the game is open, nobody has to pick up the remote and steer a cursor through the TV's browser. Testing a game that needs two devices pingpad has 178 end-to-end tests, and 87 of them cover these player situations. Playwright opens the screen in one browser context and each paddle in another, emulating a phone, and sends the sensor events itself. A local PeerJS server starts with the tests. Headless Chromium draws the 3D scene on the CPU. The screen and the paddles share that CPU, drawing the screen takes most of it, and the paddles fall behind. So in end-to-end runs, the screen doesn't draw, while its frame loop still advances the rally. The tests take less CPU and finish sooner. The same fixtures film the demo videos for pull requests and the videos on the landing page. One setup drives the tests and the videos, so when the interface changes, the videos are filmed again with the same scenarios. Those tests are what let me change the game without replaying every scenario by hand on two devices. Working with agents "A game in one prompt" makes for a good demo. pingpad wasn't one. What made agents useful on it was the setup around them: - the network layer was a library that already worked, documented for agents; - every change goes through a pull request, and every push runs format, lint, types, unit tests, build and end-to-end tests; - every pull request gets its own preview deployment, to try it on a real phone before it merges; - the dev server is reachable from a phone over HTTPS on the local network, thanks to portless, since iOS only gives motion sensors to a secure page; - a test that is written must fail when the condition it checks breaks; - an AGENTS.md file states the architecture and the rules, and the project records the decisions it lives with as ADRs; - every message between phone and screen is a schema, and the protocol is versioned, with each version frozen in a tested file. I kept the design decisions, the tests on a real phone, and the approval of every merge. I wrote about how I work with AI agents on LinkedIn, in French. What the game gave back to the library Playing for real, with phones that lock, go to the background and change networks, turned up bugs the library's demos never showed. I fixed each one in the library rather than working around it in the game: - On iOS, a remote stayed listed after navigating away, because Safari skips beforeunload when it puts a page in the back/forward cache. The library now listens to pagehide (0.5.1). - A first connection whose ICE negotiation stalled waited forever (0.5.2). - Messages that arrived before the first listener was attached were lost, which affected the React bindings (0.5.3). - A page reloaded quickly could find its id still held by the signaling server (0.6.0). The game's code is closed for now. webrtc-remote-control is open source under the MIT licence, with an llm.md guide for React and one for Vue: topheman/webrtc-remote-control. Seven years after that counter, the phone has its game: pingpad.app. I wrote this article with the help of an AI assistant, from my own notes and the project's history, and edited it myself.

Trending repository of the day 📈 agent-desktop by @vercel Computer use CLI for AI agents Last 24h: 3,792 ⭐ Total: 11,571 ⭐️ vercel-labs/agent-desktop

エージェントブラウザって何？ ego lite・Claude・agent-browserを比べてみた こんにちは！ 私はAIスタートアップでカスタマーサクセスとして働いています。 最近、「エージェントブラウザ」という言葉をよく見かけるようになりました。会社では同僚のエンジニアの方にego liteを勧められ、提供しているサービスの検証をしたい時などに使用しています。爆速で検証が終わるのでとても便利でした。 lite.ego.app ただ、普段Claudeのデスクトップアプリを使用しているのですが、そこでClaude in Chromeが使えたり、Claudeアプリの中のもブラウザがあったので、同僚の方が結構な勢いでego liteを進める理由がわかりませんでした。 そこで調べてみることにしました。 1. エージェントブラウザって何？ AIエージェントが操作するためのブラウザだそうです。 ego liteや、Claudeアプリの中のブラウザがここに入ります。 Claude in Chromeはエージェントブラウザそのものではなく、ふだんのChromeをAIで操作できる拡張機能です。 AIが操作するためのブラウザとは ふつうのブラウザは、人が目で見てマウスで操作する前提ですが、エージェントブラウザには、AIが使いやすいように次のような工夫がされているそうです。 ページを文字の一覧にする：入力欄やボタンを抜き出して、AIが読める形で渡す 番号で操作できる：「e3 に入力」のように指示でき、座標やセレクタが要らない 外から命令できる：Claude Codeなどのエージェントが操作の指示を送れる 人の作業と分ける：AI用の作業場所を別に用意して、人のタブを動かさない 人が見張れる：操作中の画面を見たり、途中で止めたりできる なお、どこに何を入力するかを判断するのは、ブラウザではなくAIエージェント側です。 2. 4つのエージェントブラウザ等を比べてみた ツール 正体 操作するAI 動かすブラウザ ログイン状態 人の作業との関係 ego lite ブラウザ本体 外部のエージェント （Claude Code、Codexなど） ego lite内の別の作業場所（Space） Chromeから引き継げる 自分のタブとは分かれて並行 Claude in Chrome Chromeの拡張機能 Claude ふだんのChrome そのまま使える 同じChromeを使う Claudeアプリ内のブラウザ Claudeアプリの機能 Claude アプリ専用のブラウザ アプリ側で別に持つ アプリの中で見ながら代われる agent-browser コマンドで動く部品 外部のエージェント 別に立ち上がるブラウザ 基本は別 裏で動く Claude in Chrome：ふだんのChromeを、Claudeが操作する ふだんのChromeを使うので、ログイン済みのサービスもそのまま操作できます。 Claudeアプリ内のブラウザ：アプリの中の専用ブラウザ Claudeデスクトップアプリの地球儀アイコンから開くブラウザです。ふだんのChromeとは別のブラウザで、ログイン状態もアプリ側で別に持ちます。 Claudeが操作している画面を横で見られて、途中で自分が代わることもできます。人が頼む点ではClaude in Chromeと同じで、ふだんのブラウザと切り離して動く点ではagent-browserに近い、中間の位置づけです。 agent-browser：AIエージェントが使う部品 人が直接使うものではなく、Claude Codeなどのエージェントが作業の途中で呼び出す部品です。たとえばClaude Codeにアプリを作らせて、そのアプリが画面上で正しく動くかを確かめる、といった使い方をします。 ふだんのブラウザとは切り離して、基本は画面を出さずに裏で動きます。そのぶん、ログインが必要なサービスは、agent-browser側で改めてログインしてから操作します。 ego lite：ふだんのブラウザの中で、エージェントと並行作業 ego liteは、citrolabsという開発元が作っているブラウザです。Google Chromeと同じ仕組みを土台にしているので、見た目や使い心地はChromeに近いです。無料で使えて、中身（プログラム）も公開されています。今のところMac専用で、Windowsでは使えません。 ふだんのブラウザとして使いながら、Claude CodeやCodexなどの外部エージェントにも操作させられます。エージェントは「Space」という分かれた作業場所で動くので、自分が開いているタブには触りません。Chromeのログイン状態やCookie、拡張機能も引き継げるので、エージェントのために再ログインする必要がありません。複数のSpaceで、別々の作業を同時に進めることもできます。 つまりego liteは、「ログイン済みの環境は使いたい、でも自分のタブは邪魔されたくない」という悩みに向けたツールです。agent-browserは別ブラウザなのでログインし直しが必要で、Claude in Chromeは自分と同じChromeを使います。ego liteは、その間を埋める位置づけだとわかりました。 3. 結局、どう使い分ければいいの？ 違いがわかったところで、自分の仕事に当てはめて使い分けを考えてみました。 こんなとき 向いているもの 理由 ログイン済みの管理画面で、目の前の作業を手伝ってほしい Claude in Chrome ふだんのChromeをそのまま使える ふだんのChromeとは分けて、ログインが必要な作業も任せたい Claudeアプリ内のブラウザ 一度ログインすれば状態が残り、ふだんのChromeとぶつからない 開発中の画面が動くか、エージェント自身に確かめさせたい agent-browser エージェントがコマンドで呼び出せる ログインが必要な自社サービスの検証を、何パターンも並行して進めたい ego lite ログインを引き継いだまま、Spaceごとに並行で動かせる Claude in Chrome：ふだんの作業の延長で頼みたいとき たとえば、ログイン済みの管理画面からお客様の利用状況を集めてまとめてもらう、といった使い方です。自分が見ている前で1つずつ進めてもらう作業に向いています。 ただし、自分と同じChromeを使うので、Claudeが操作している間はそのChromeで別の作業をしにくくなります。 Claudeアプリ内のブラウザ：ふだんのChromeと分けて頼みたいとき たとえば、お客様の会社のWebサイトを調べて整理してもらったり、ログインが必要な管理画面で作業してもらったりする使い方です。ふだんのChromeとは別なので、自分の作業を邪魔されません。 ログイン状態はアプリ側で持つので、最初に一度アプリのブラウザでログインしておけば、次からはそのまま作業を頼めます。 agent-browser：エンジニアが開発の中で使うとき Claude Codeに画面を作らせて、そのままエージェント自身に動作確認までさせる、といった使い方です。人がチャットで頼む道具ではないので、CSの私が直接使う場面は少なそうです。 ego lite：ログインが必要な検証を、まとめて任せたいとき たとえば、自社サービスのテスト環境で「新規登録の流れ」「設定変更の流れ」「エラー時の表示」を、それぞれ別のSpaceでエージェントに同時に確かめてもらう、といった使い方です。Chromeのログイン状態を引き継げるので、エージェントのために毎回ログインする必要もありません。その間、自分は自分のタブで別の作業を続けられます。 ここで、同僚がego liteを勧めてくれた理由がわかった気がしました。私の使い方は、ログインが必要なサービスの検証です。この使い方だと、ログインを引き継げることと、複数の検証を並行して進められることが、そのまま「爆速で終わる」につながっていたのだと思います。 ! ego liteやClaude in Chromeのように、ログイン済みの環境をAIに操作させる場合は、誤操作したときの影響も大きくなります。本番環境ではなくテスト環境で使う、操作を任せるサイトを絞るなど、任せる範囲には注意が必要です！！ 4. agent-browserを例に、AIがブラウザを動かす流れを見てみる ところでエージェントブラウザは、どこにどのボタンがあるというのをどのように判断しているのでしょうか。 中の動きが一番わかりやすかったのが、agent-browserです。 結論からいうと、AIは画面を人間のように目で見ているわけではないそうです。agent-browserはHTMLをもとに画面の部品の一覧表を作り、そこに番号を振って、AIとの共通の認識を揃えているみたいな感じらしいです。AIは番号で「どこを操作するか」を伝え、agent-browserはその番号の部品を操作します。画面が変わったら一覧表を作り直し、番号も振り直します。 たとえばお問い合わせフォームにメールアドレスを入れて送信するとき、AIは裏でこんな命令を順番に送っています。 agent-browser open example.com agent-browser snapshot -i agent-browser fill @e3 "test@example.com" agent-browser click @e5 よくわからないのですが！！！！！やっていることは4つだけということです。 ページを開く（open） ページの部品の一覧表をもらう（snapshot） 一覧表を読んで、メールアドレス欄に入力する（fill） 送信ボタンを押す（click） 2で受け取る一覧表は、イメージとしてはこんな形です。入力欄やボタンに、e2 e3 のような番号が振られています。 - 入力欄「会社名」 → e2 - 入力欄「メールアドレス」 → e3 - ボタン「送信」 → e5 AIはこの一覧表を読んで、「メールアドレス欄は e3 だな」「送信ボタンは e5 だな」と判断します。あとは「e3 にこれを入力して」「e5 を押して」と番号で指示するだけです。 レストランにたとえると、agent-browserは番号付きのメニューを渡してくれる店員さんで、AIはメニューを読んで「3番ください」と注文するお客さんです。何を選ぶかを決めるのはお客さん（AI）で、店員さん（agent-browser）は注文どおりに動きます。 つまり、agent-browser自体が「ここはメールアドレス欄だ」と判断しているわけではありません。 agent-browserの役割：ページを一覧表にしてAIに渡すことと、AIが選んだ操作を実行すること AIエージェントの役割：一覧表を読んで、どこに何を入れるかを判断すること この役割分担は、ego liteやClaude in Chromeでも変わりません。 ５.終わりに エージェントブラウザのことがわかったので、業務に活用していこうと思います！！ 主に検証での使用が多いのですが、活用方法を広げていければと思います。 それとブラウザではなくパソコンをちょくで触れると最近流行りのagent-desktopも使ってみたいです！ 参考 citrolabs/ego-lite vercel-labs/agent-browser lilting.ch

skills#278 (by someone else) quite ridiculous—just skim its first two comments, absurd amounts of unnecessary detail and a preposterous solution, all very obviously slop. All that needed to be said was “cloning repositories can take arbitrarily long, so putting a 60 second timeout is obviously wrong”. The rest is worse than posturing. Rather like the issue, this article is written in a tedious style which sure looks sloppy, and I disagree with parts of its conclusions. > The thing is, timeouts need to exist. Infinite waits are bad. Hanging processes are bad. I’m not arguing against timeouts. Since the author won’t, I will. The skills case shouldn’t have a timeout at all: it’s the wrong place and the wrong thing. You rather want to check if it’s still working, and Git has that handled. The problematic case is if it can get stalled waiting for authentication, and I’m not convinced that can happen in a way that needs to be catered for. If it’s interactive, the user will observe the authentication prompt and so the timeout cutting them off is wrong, and if it’s not interactive then it should fail immediately. I’m inclined to presume it’s slop-style cargo-culting (in which area Chesterton’s fence is an increasingly unreliable rubric). As for the Docker Gordon case, well, for a human tool I’d just say there shouldn’t be any timeout, it’s obviously dumb, the human will observe if things aren’t working as expected and interrupt it. For AI nonsense, well, this sounds to me like the wrong way to apply a timeout. I would rather expect it to throw an LLM at it and its logs or something to apply judgement like the human would, to see if it seems like it’s not working or stuck and interrupt it. A hard timeout is obviously idiotic, but a timeout at all feels from the wrong era of computing for such a thing.

any vibe coded desktop app can now add computer use as a feature. repo: vercel-labs/agent-desktop x.com

How to make link to SaaS Launch Video system A screenshot can show what you built. A screen recording can show how it works. But making a short, polished launch video usually means opening another set of tools—and spending time editing instead of sharing. /brag is an open-source agent skill designed to help with that last step. Point an agent at a project, and it can inspect the code, plan a short video, and prepare the output for sharing. Watch the examples and see the project What is /brag? /brag reads a project’s source code to understand what the product does, what it looks like, and which details are worth showing. It then creates a video plan and hands a focused composition brief to Hyperframes, which handles the composition and rendering workflow. The output includes the rendered video, a poster image, and a share caption—along with the plan and composition files. From project code to video The classic /brag workflow has four steps: 1. Inspect the project. Read relevant files to identify the product, audience, visual identity, and user flow. 2. Plan the story. Choose a creative angle, write a hook, and lay out the video scene by scene. 3. Build the composition. Give Hyperframes the brief, including the visual direction and storyboard. 4. Validate and deliver. Check the composition, render the video, select a poster frame, and write share copy. The story usually follows a simple shape: Hook → product reveal → highlights → close !Image description That shape is a guide, not a rigid template. The video is meant to show the actual product—not just string together generic marketing claims. A typical output folder looks like this: brag-output/ brag-plan.md composition-brief.md brag.mp4 brag.jpg share-copy.txt composition/ The plan and brief document the creative direction, while the video, poster, and caption are the pieces ready to share. What makes a good brag video? The project’s instructions set a few useful creative constraints: - Keep it short: usually 15–25 seconds. - Make the hook count: the opening seconds should give people a reason to keep watching. - Show the product: include real UI, copy, or other recognizable project details. - Keep text readable: use motion and cuts to create pace, not text that disappears before it can be read. - Stay specific: avoid claims and phrases that could describe any product. - Make it shareable: choose a strong poster frame and write a caption that works outside the video. The workflow also includes a validation step before rendering. In the classic path, Hyperframes’ check helps catch issues such as text overflow and contrast problems. Two workflows: /brag and /brag-slim The repository includes two approaches: - /brag uses Hyperframes to build and render the composition. - /brag-slim is a lean, single-file workflow. The agent builds the video with tools already available on the machine, without Hyperframes or bundled assets. On Claude Opus 5.5, /brag switches to /brag-slim by default. Use /brag --full to request the classic Hyperframes workflow instead. Try it Install the skill with the skills CLI: npx skills add latent-spaces/brag --skill brag MASHRAF AIMAN CTO and Co-founder Ennovat Studio

Vercel's agent-desktop Lets Coding Agents Click Native Apps Without Moving Your Mouse - Book: AI Agents Pocket Guide - Also by me: Thinking in Go (2-book series) — Complete Guide to Go Programming + Hexagonal Architecture in Go - My project: Hermes IDE | GitHub — an IDE for developers who ship with Claude Code and other AI coding tools - Me: xgabriel.com | GitHub --- Your coding agent can now open Finder, read every button in the window as JSON, and click one by its ID, while your own pointer stays exactly where you left it. That is the pitch of agent-desktop, which Vercel Labs released as version 1.0.2 on October 30. The README calls it "Computer use for AI agents: read and operate desktop apps through the OS accessibility tree." It is a Rust CLI plus a C library, Apache-2.0, and it runs on macOS, Windows and Linux. It contains no model. It is pitched as computer use for any coding agent, and the agent drives it by running shell commands. What shipped, and when The builder's launch post went up on X at 23:48 UTC on October 30, according to CellCog. Vercel's Chris Tate then described it as "agent-browser, for your whole computer," a nod to Vercel's agent-browser, which does the same thing for web pages. Vercel CEO Guillermo Rauch shared it with "An agent on every desktop." The project is older than the launch: it started in February and later moved under the Vercel Labs organization, per ShiftDelete. Windows 10 1809+ support arrived in v0.10.0 on October 18, and v1.0.2 on October 30 added a docs site and made AGENTS.md the single instructions file for agents. MarkTechPost and AlexTech covered it the next day. The repo had about 6,900 stars on November 2, per its GitHub page. The docs list the floors: macOS 13 or later (Intel or Apple Silicon) through the AX API, Windows 10 1809 or later through UI Automation, and Ubuntu 24.04 or later through AT-SPI, on x64 and ARM64. How the loop works The tool does one step per call. Each command prints one JSON envelope and exits. The observe, act, verify loop lives in your agent. Adapted from the README: # setup npm install -g agent-desktop agent-desktop status agent-desktop skills get desktop # look: interactive elements, each with a ref agent-desktop snapshot --app Finder -i # act on a ref from that snapshot agent-desktop click @s8f3k2p9:e8 # look again to check it worked agent-desktop snapshot --app Finder -i The ref values above are the README's examples. Yours come from your own snapshot. Refs are tied to the snapshot that produced them: v0.10.0 removed bare refs like @e8, and the README says they now fail with INVALID_ARGS. If the UI changed, the call returns STALE_REF and the agent should snapshot again. If several windows match, AMBIGUOUS_TARGET lists candidate window IDs to pass with --window-id. Every error carries a disposition, and the README says to retry only when error.disposition.retry is safe. Put that rule in your agent's AGENTS.md or system prompt. Calls are headless by default. Per the README, ref actions go through the accessibility API "without moving the pointer or taking focus." A global --headed flag allows physical mouse and keyboard input when an app needs it. With several agents at once, each subagent gets its own colored overlay cursor, ShiftDelete reports, and actions that need the one physical pointer take turns. !An editorial illustration of a branching tree of interface nodes rising out of a desktop window, a small robot hand tapping one glowing orange node while a real mouse pointer rests untouched to the side The agent reads the app's accessibility tree and acts on one node by ref. Your pointer isn't part of it. The token numbers are the builder's own The project's headline argument against screenshot-based computer use is cost. Every figure for that so far comes from the project itself. The builder's posts report 273 tokens per look at Apple Maps when you snapshot one region, against 3,811 for the whole window, and a simulated 52-step task dropping from 198k tokens to 31k, as summarised by CellCog. AlexTech puts the skeleton mode's saving at 78% to 96% against full-tree dumps in Slack, VS Code and Notion, and calls these "self-reported figures not verified by third parties." CellCog also points out that there is no shared yardstick for these numbers yet. The technique behind the saving is in the README. You map a dense app shallowly first, then drill into the part you care about: agent-desktop snapshot --skeleton --app Slack -i --compact agent-desktop snapshot --root @s8f3k2p9:e3 -i --compact I haven't run agent-desktop myself, so I can only relay these numbers. If you try it, count tokens on your own app. Slack and Notion are not your internal Electron tool. What it can't see The docs are blunt about the limits. It reads accessibility trees and does not match pixels, so a UI that publishes no accessibility tree is invisible to it. How well it works depends on how well each app's interface is built. It also does not automate web pages. For those, use agent-browser. For web content inside a Chromium or Electron app, agent-desktop opens a DevTools port that agent-browser can connect to. The CLI has 60 command names, the same on every platform. Four of them (key-down, key-up, mouse-down, mouse-up) fail closed everywhere. And a successful action does not prove the UI changed, which is why the docs recommend a follow-up read such as wait --element ... --predicate value. !An editorial illustration of a magnifying glass over a desktop window split in two: the left half shows a neat tree of nodes, the right half is a blank black panel with no structure for the lens to find No accessibility tree, no view. Pixel-only UIs stay out of reach. Before you hand it to an agent A few things in the docs are worth settling before the first run. Who gets the permission. On macOS the Accessibility permission goes to the app that runs agent-desktop. If your agent runs in a terminal, that terminal is the app asking, so decide on purpose which one gets it. agent-desktop permissions --guide walks you through it, and the README also requires TMPDIR to be owned by you with mode 0700. On Windows no grant is needed for apps at your terminal's integrity level. What ends up in transcripts. The README warns that "Snapshots, clipboard reads, screenshots, command output and debug artifacts can contain private desktop content." The FAQ goes further: "redaction does not make a screenshot safe to publish." Your agent's transcript now holds whatever was on screen, so treat it like a log with secrets in it. What leaves the machine. The FAQ says the native CLI "does not require a remote model service." The optional JEV helper is different: it sends goals and screen descriptions to the model provider you configure. What git won't show you. A click in Finder leaves no diff. Keep desktop actions on a short leash: name the app, name the task, and use --headed only when headless fails. I build Hermes IDE, so weigh this with that in mind. Hermes runs each agent in a real terminal, so an agent there can call agent-desktop like any other CLI. But Hermes, by its README, "observes what agents report on purpose and what git shows." Its Review Desk can show you every file an agent changed, turn by turn. It cannot show you what the agent clicked in another app. Would you give it your desktop? A cheap first test: point your agent at one app, let it run snapshot only, and read what comes back before it gets to click anything. Which native app would you trust an agent to drive first, and which one would you never hand over? Tell me in the comments. --- If this was useful agent-desktop is a tool, and the interesting design work sits in the loop around it: when to look again, when a retry is safe, when to stop and ask. That loop is what the AI Agents Pocket Guide is about, from tool calling to guardrails for agents that act on their own. If you run more than one coding agent, Hermes IDE is free, source-available and on macOS, Windows and Linux, and the code is on GitHub. 

Agent DX 〜 AI時代にフレームワークHonoは必要か AIがユーザーになりました。我々は人間向けの開発者ではなく、AI向けの開発者体験を考えなくてはいけません。 我々は人間です。雰囲気で「フレームワークは必要ない」「フレームワークは必要」と言っても、AIの意見ではありません。人間の意見です。説得力がありません。我々人間はAIのことをもっと知らなくてはいけません。 そこで、Honoでは「Agent DX」というプロジェクトを立ち上げて、AI向けの開発者体験をちゃんと測りました。以下3つのカンファレンスでAgent DXについて話しました。 AI時代のWebフレームワークはどこへ行く？ - フロントエンドカンファレンス福岡 2026 Hono in this era - Hono Conference 2026 Hono: Web application primitives for the AI era - Cloudflare Connect 2026 今回はそれらを記事化してみます。 Agent DXとは AIエージェントがHonoを使うときの開発者体験 = DXを測って改善するプロジェクトです。リポジトリは以下です。 honojs/agent-dx また、結果を以下のページで公開しています。 agent-dx.hono.dev AI Evalsで測る 測り方には「AI Evals」という手法を使います。AI Evalsは固有名詞ではなく、一般的な名称でNext.jsやAngularといったフレームワークも取り入れています。 Next.js：Next.js Agent Evals 実際の Next.js のタスクをエージェントに解かせて採点している。AGENTS.md の効果も公開している Angular：web-codegen-scorer 生成したコードのビルド成功、実行時エラー、アクセシビリティなどを評価する Vercel：@vercel/agent-eval 評価の基盤。ドキュメントや MCP の有無、モデルの違いを比べられる どのようにやるかというと、エージェントにタスクを解かせて採点します。 エージェントにプロンプトを与える エージェントがサンドボックスでコードを書く 書かれたコードをテスト、もしくは静的解析する（採点する） 成功率・トークン・時間を記録して比べる ポイントは採点です。中身は普通のテストと型チェック、静的解析で、LLMには判定させません。テストはエージェントからは見えないところに置いておきます。 ちなみに、AI Evalsの環境として、Astroチームが作っているAIエージェント向けフレームワークのFlueを使っています。 実験は3つやりました。 Adoption → AIはHonoを使うのか？ Value → Honoは必要か？ Practical → AI向けにHonoを使いやすくするには？ 一つずつ見ていきます。 実験 1. Adoption 〜 AIはHonoを使うのか？ AIがコードを書く時、フレームワーク、とりわけHonoを使うのか？というのをAI Evalsで測ってみました。 まっさらなディレクトリでエージェントにアプリを作らせます。どのフレームワークを使うか指示は出しません。そして、書いたコードを静的解析して、どのフレームワークを使ったかを見ます。 プロンプトは以下のようなものです。 Create a Cloudflare Workers application in TypeScript. It should respond to GET /health with the JSON {"ok":true}. ランタイムを複数用意しました。Cloudflare Workers、Bun、Node.js、Denoの4つです。シナリオは、GET /health だけの最小アプリから、バリデーション付きのTODO APIまで用意しました。モデルはClaude Haiku 4.5とClaude Opus 5を使います。 まずはHaiku 4.5の結果です。 ヒントなしだと、フレームワークを使いません。素のハンドラを書きます。 次に 「フレームワークを使って」と明示的に言うと、ランタイムごとの定番を選びます。Cloudflare WorkersはHono、BunはElysia、Node.jsはExpress、DenoはOakとなります。 次にOpus 5の結果です。 ヒントなしだと、やはりフレームワークを使いません。「フレームワークを使って」と言うと、Node.jsでもHonoを選びます。 分かったことは以下となります。 ヒントなしだと、AIは素のハンドラを書く 賢いモデルほどHonoを選ぶ 面白いですね！ package.json に hono があると さらに別の計測もしました。package.json を置いて、dependencies に hono を入れておきます。 package.json { "dependencies": { "hono": "^4" } } すると、AIはNode.jsでもHonoを使いました！ Cloudflare Workers → 5/5 Hono Node.js → 5/5 Hono つまり、AIは自分からはフレームワークを使わないですが、ヒントがあればHonoを選ぶことが分かります。 実験 2. Value 〜 Honoは必要か？ AIにとってフレームワークは必要か？とりわけHonoは必要なのか？をAI Evalsで測ってみました。 同じタスクを二通りでやらせます。 素の fetch ハンドラで書く Honoで書く タスクは2つ用意しました。 shop API → 商品・カート・チェックアウト。状態を持つ複雑なAPI notes API → ログイン・Bearer認証・CORS・JSONエラー。認証まわり 結果はこちらです。Haiku 4.5で各10回です。 成功率が上がる → shop API で2/10 → 4/10 コードが30〜40%減る トークンが15〜30%減る AIが書いても、フレームワークの恩恵はあることが分かります。正確になる、書く量が減る、少ないトークンで書ける。つまり、AIにもライブラリは要るのです！ 以上、Adoption、Valueの結果は、測るまでは分からなかった・確信を持てなかったことなので、測ることは大事です！ 実験 3. Practical 〜 AI向けにHonoを使いやすくするには？ ここまでで、きっかけがあればAIはHonoを使うこと、そしてHonoを使う効果があることが分かりました。では、AIにとって、さらにHonoを使いやすくするにはどうすればいいか？最後の実験です。 エージェントにタスクを与えて、結果を見ます。そしてHonoの側を変えて、また試します。これをくり返しました。 中でも印象的だったのが、「開発サーバー」についてです。 エージェントが開発サーバーを立ち上げる Honoには、プロジェクトのテンプレートを作る create-hono があります。そのCloudflare Workersのテンプレートをそのまま使い、エンドポイントを追加してもらいました。AGENTS.mdは入れていません。 結果です。Haiku 4.5、Sonnet 5、Opus 5で各5回です。 15/15 が wrangler dev を起動 サーバーを立ち上げたまま、bashごとハングするケースもあった 例えばSonnet 5は成功率20%。5本中4本が600秒ハング 原因は package.json にある dev スクリプトでした。つまり、エージェントは、開発の最中、このdevコマンドを実行し自らハングしてしまっていたのです。 package.json { "scripts": { "dev": "wrangler dev", "deploy": "wrangler deploy --minify" } } Hono CLI これを解決しようと開発してるのがHono CLIです。 honojs/cli Hono CLIは、Honoのアプリを作るのを助けるAIエージェント向けのCLIです。いくつかコマンドがあります。 hono request ではサーバーを立ち上げずに、JavaScriptのRequest/Responseレイヤーで、Honoのアプリにリクエストを送ることができます。 オプションはcurlライクなものです。 GET / hono request / POST /users hono request -X POST -d '{"name":"Momo"}' /users また、複数のリクエストを一度に送って、pass / failを判定する hono batch もあります。 CLIとSkillsを入れると 同じタスクで、Hono CLIとSkillsを使わせました。 15/15、100%開発サーバーを立てない 初手で hono batch 全モデルで成功率100%、約30秒 Sonnet 5の結果です。 Opusに「カウンターをつくって」→「パスワードつけて」と頼んだ例もあります。1回ずつです。 CLIなし → 13ターン・70秒。他の開発サーバーまで止めた CLIあり → 8ターン・39秒。サーバーは立てない どちらも正しく動く つまり、Hono CLIを使うと、次のようになります。 サーバーを立てない → ハングしない、他のサーバーを止めない サーバーを待たない → 速いこともある Hono CLIがツール（hono requestなど）を提供しているので、エージェントが一から作成する必要がない Hono CLIのおかげで、Honoを良くすることができます！ ちなみに、Hono CLI（現在1.0のRC版が出てます）とSkillsは以下で試せます。 npm i -D @hono/cli@next npx skills add honojs/skills 詳しくは以下のページを参考にしてください。 hono.dev 人間向けのDXとAI向けのDX AIが開発サーバーを立てたのには、きっかけがありました。package.jsonの scriptsにあるdevコマンドです。 よく考えると、dev コマンドは人間にとってのDXなのだと思います。打ちやすくて、みんなが知っているショートカット。そして、人間は開発サーバーを立ち上げブラウザでlocalhost:8787等にアクセスし結果を確認します。 一方で、AIに開発サーバーは必要ないかもしれません。リクエストを投げて、レスポンスを確かめられれば十分です。 今回の開発サーバーの件を振り返ると、人間にとってのDXを向上させるものが、AIにとっては裏目に出たと言えます。 つまり、人間向けのDXとAI向けのDXがあるのです！ まとめ Agent DXで分かったことをまとめます。 Adoption → きっかけがあればHonoを使う。package.json にあれば100% Value → AIが書いても、Honoの恩恵はある Practical → package.jsonにあるdevスクリプトでエージェントがハングする。Hono CLIとSkillsで防げる AI時代にフレームワークHonoは必要か？その答えは⋯ AI時代でもHonoはあった方がいい！そして、AI Evalsを使ってAI向けのDXは改善していくことができるのです！

vercel labs agent-desktop is a cheat code for desktop app prototyping 🤯 your coding agent builds the app, then actually opens it and clicks through it. reads the accessibility tree, no screenshots build → run → test → fix loop for native apps, mac/win/linux 🦀

Vercel Labs' open-source agent-desktop gives AI agents computer use on macOS, Windows and Linux 🖥️ It reads apps' real UI through OS accessibility trees instead of guessing from pixels. #AI #AIAgents #OpenSource vercel-labs/agent-desktop