AIエージェントにアプリを操作させたいとき、多くの開発者はPlaywrightやブラウザ自動化ツールに頼る。だが実際のUIをスクレイピングする方法には限界がある。Tesseronはその問題を正面から解決するTypeScript SDKだ。
この記事でわかること:
- Tesseronが何を解決するのか
- MCP経由でAIがライブアプリを操作する仕組み
- インストール方法とコードサンプル
- 対応フレームワークとクライアント
- ライセンスと今後のロードマップ
https://github.com/BrainBlend-AI/tesseron
Playwrightなしでアプリを操作できる
従来のAIエージェントによるUI操作は、ブラウザのDOMをスクレイピングし、要素を特定してクリックや入力を模倣する。この方法はUIの変更に弱く、実際のアプリ状態を正確に把握できない。
Tesseronのアプローチは異なる。アプリ側に「アクション」を宣言し、AIエージェントはそのアクションをMCPツールとして呼び出す。ハンドラーはアプリの実際の状態に直接アクセスして実行されるため、DOM操作は一切不要だ。
MCPで繋ぐ仕組み
Tesseronのアーキテクチャは3つのピースで成り立つ。
アプリ（ブラウザタブ、Electron/Tauriデスクトップアプリ、Node.jsデーモン）が@tesseron/webまたは@tesseron/serverを通じてWebSocketでMCPゲートウェイ（@tesseron/mcp）に接続する。MCPゲートウェイはClaude CodeやCursorなどのMCPクライアントと標準のstdio経由で通信する。ユーザーがプロンプトを送ると、エージェントはアプリが宣言したアクションをMCPツールとして呼び出す仕組みだ。
v1.0はWebSocketを使ったJSON-RPC 2.0ベースの独自プロトコルを採用しており、プロトコル自体はCC BY 4.0でオープンに公開されている。
主な機能
型付きアクション宣言
ZodまたはStandard Schemaに対応した任意のバリデーターでアクションの入力スキーマを定義する。型のミスマッチはエージェントが呼び出す前に検出される。
フレームワーク非依存
@tesseron/web（ブラウザ）、@tesseron/server（Node.js）、@tesseron/react（Reactフック）と用途別にパッケージが分かれており、既存のスタックにそのまま組み込める。
ファーストクラスのMCP機能
アクションコンテキスト（ctx）は4つの追加機能を提供する。ctx.confirmでyes/no確認、ctx.elicitでスキーマ検証済みの追加入力収集、ctx.sampleでエージェント側のLLM呼び出し、ctx.progressでリアルタイムの進捗通知だ。
クリックで接続
APIキーもOAuth設定も不要。アプリが生成した6文字のクレームコードをエージェントに渡すだけで接続が完了する。
インストールと使い方
Claude Codeを使っている場合は以下のコマンド2行でセットアップできる。
/plugin marketplace add BrainBlend-AI/tesseron
/plugin install tesseron@tesseron
これでMCPゲートウェイが自動起動し、MCPサーバーとして登録される。あとはアプリ側にSDKを追加してアクションを宣言するだけだ。
ブラウザアプリへの組み込み例を示す。
import { tesseron } from '@tesseron/web';
import { z } from 'zod';
tesseron.app({ id: 'todo_app', name: 'Todo App' });
tesseron
.action('addTodo')
.input(z.object({ text: z.string().min(1) }))
.handler(({ text }) => {
state.todos.push({ id: newId(), text, done: false });
render();
return { ok: true };
});
await tesseron.connect();
addTodoアクションはMCPツールとして公開され、Claude Codeから「タスクを追加して」と指示するだけで呼び出される。
Claude Code以外のクライアント（Claude Desktop、Cursor、VS Code Copilot、Codexなど）でも動作する。ただしctx.elicit（MCP 2025-06仕様）はClaudeデスクトップアプリとClaude.aiでは未対応で、Claude Codeは2.1.76以降で対応している。
対応クライアントと注意点
MCPツール呼び出しはすべてのMCPクライアントで動作する。一方、ctx.sample（サーバーからLLMを呼び出す機能）はVS Code CopilotやGoose、fast-agentなど一部クライアントのみ対応しており、Claude Code・Claude Desktopでは現在使えない。機能が未対応のクライアントから呼び出された場合、TesseronはSamplingNotAvailableErrorなどの型付きエラーを返すため、ハンドラー側で明示的に分岐処理できる。
パッケージ構成
npmには5つのパッケージが公開されており、すべてv1.0.1でリリースされている。
| パッケージ | 用途 |
|---|---|
@tesseron/core |
プロトコル型定義・アクションビルダー |
@tesseron/web |
ブラウザ向けSDK |
@tesseron/server |
Node.js向けSDK |
@tesseron/react |
Reactフックアダプター |
@tesseron/mcp |
MCPゲートウェイサーバー（CLIとして動作） |
ライセンス
参照実装はBusiness Source License 1.1（BUSL-1.1）。アプリへの組み込みや社内利用は無償でできる。ただし、Tesseronをホスティングサービスやマネージドサービスとして第三者に提供することは禁止されている。各リリースは公開から4年後にApache-2.0へ自動的に移行する。
プロトコル仕様自体はCC BY 4.0で公開されており、任意の言語での互換実装が奨励されている。
ロードマップと現状
v1.0はApril 2026にリリースされた。今後のロードマップにはSvelte/Vueアダプター、ブラウザ内デバッグUI（devtools）、Streamable HTTPトランスポート、Python SDK、TauriむけのRustバインディングが挙げられている。
Playwright不要でAIがアプリの実際の状態を操作できる点は、ブラウザ自動化の定番手法に対する明確な代替となりうる。Claude CodeプラグインとしてMCPに完全統合されており、すでにMCP対応エージェントを使っている開発者はすぐに試せる。