Peitho Studio —— 触れるHTMLスライドを作ろう！

2026-11-04Markdown

YAPC::Tokyo 2026に向けてスライド準備している人もいると思うので、スライドツールのアナウンスです。 mizzyさんのスライドツールPeitho をエンジンとした Peitho Studio というアプリを作りました。

こちらが紹介スライド。HTMLスライドを使って「デモ用意したいな〜」「多言語対応したいな〜」という気持ちになってもらえたら嬉しいです！

以下は雑談。作りについて。

  • Tauri v2 のデスクトップアプリ
  • Peithoの描画エンジン peitho-core を、サブプロセスではなくアプリの中に直接組み込んでいる
  • フロントエンドは BarefootJS のCSRと UnoCSS
  • エディタは CodeMirror で、Vimモードもある
  • そして、レビューツールの crit を同梱している

一番面白かったのは、critの使い方だと思う。

critをアプリとAI Agentとの橋渡しに使う

AI Agentにスライドを直してもらう仕組みを考えた時、最初に浮かんだのは、アプリにAPIキーを入力してもらいAPIを叩いてもらうことだった。けれど、ユーザーからすると手間だし、安全性も気になるところでやめた。 APIキーを管理せず、ユーザーが既に使っている Claude Code や CodexなどのCoding Agentに頼む方法はないか悩んだ。

ここで crit を使った。critは、Agentが書いたファイルに人がコメントし、Agentが直して返信する、という往復を回すためのツールで、tomasz-tomczyk さんが作っている。

具体的な流れはこうなっている。

  1. Agentが crit --no-open deck.md を実行する。このコマンドは、人がレビューを終えるまで返ってこない。つまりAgentはコメントを待っている
  2. Studio はプレビュー上で指したスライドの要素へのコメントを、critのローカルのHTTP APIに登録し、ラウンドの完了を送る
  3. Agentの crit が返り、コメントと「直したら crit comment --reply-to で返信し、次のラウンドを待て」という指示が渡る
  4. Agentがデッキを直して返信し、また待つ。Studio はcritのイベントを受け取り、返信を表示する

Studio は Agent を起動しないし、APIキーも持たない。最初に「このプロンプトをAgentに貼ってください」と案内するだけで、あとは Agent がユーザーからの指示を待ってくれる。 UIは Studio、往復の仕組みは crit、という分担にできた。

この仕組みは、スライドツールだけでなく、ローカルアプリとCoding Agentを繋ぐのに使える一般解なので、面白い。

はい。

良かったら使ってみてください！

#peitho#peitho-studio#ai-agent

← Back to Diary