概要
https://zenn.dev/slowhand/articles/bb203aba83e385
詳細内容
## tldraw × AIエージェント：Agent starter kitを触りながら仕組みを追う
https://zenn.dev/slowhand/articles/bb203aba83e385
tldrawの「Agent starter kit」の仕組みを詳細に解説し、AIエージェントがキャンバスとどのように対話し、図形を操作するのかを実証する。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:4/5 | Depth:4/5 | Unique:3/5 | Practical:4/5 | Anti-Hype:4/5
**Main Journal**: 100/100 | **Annex Potential**: 99/100 | **Overall**: 76/100
**Topics**: [[tldraw, AIエージェント, Webアプリケーション開発, LLM, Cloudflare Workers]]
この記事は、tldrawに新たに追加された「Agent starter kit」の仕組みを、実際の動作確認とコードレビューを通して詳細に解説しています。このキットは、AIエージェントがtldrawキャンバス上の図形を読み取り、作成、更新、削除といった操作を可能にするもので、手書きスケッチから動くWebサイトを生成する「Make Real」のコンセプトを拡張するものです。
著者は、スターターキットのセットアップ手順から始め、提供されるテンプレートプロジェクトがCloudflare WorkersとReactで構成されていることを示しています。エージェントの能力として、図形操作、フリーハンド描画、ToDoリスト管理、キャンバス表示領域の移動などが挙げられ、これらが「tldrawのキャンバス状態 → プロンプト化 → LLMのJSONレスポンス → Editor操作」という一連のパイプラインで実現されることを図解しています。
具体的な実装面では、サーバー側の`AgentDurableObject`がServer-Sent Events（SSE）を利用してクライアントとストリーミング通信を行い、`AgentService`内でLLMへのプロンプト構築とアクションのストリーム処理が行われることが説明されています。`AgentPrompt`はキャンバスの視覚情報、選択された図形、チャット履歴、ToDoリストなどの多岐にわたる情報をLLMに伝えるためのデータ構造であり、`PromptPartUtil`がこれらの情報からLLMに送るメッセージとシステムプロンプトを生成します。特にシステムプロンプトには、エージェントが利用できる図形の種類、イベントスキーマ、行動ルールなどが詳細に記述され、LLMがJSONスキーマに準拠した構造化データを生成するための厳密な指示が含まれています。
LLMからのJSONレスポンスはクライアント側で`AgentActionUtil`を通じてパースされ、`TldrawAgent`が保持する`Editor`インスタンスを介してキャンバスに実際の操作として適用されます。`AgentActionUtil`には図形の作成、移動、サイズ変更、整列、テキストラベルの変更など、多岐にわたるアクションが定義されており、エージェントがキャンバスを細かく制御できる仕組みが確立されています。
著者は、このパイプラインが各機能ごとにきれいに分割されており、独自のAIアクションやプロンプトパーツを追加することで容易に拡張できる点を「面白い」と評価しています。ウェブアプリケーションエンジニアにとって、このスターターキットは、tldrawを基盤としたAIを活用した描画アシスタントやビジュアルAIアプリケーションを構築するための具体的な足がかりとなり、AIエージェントとUIキャンバスのインタラクション設計において実践的な示唆を与える重要なリソースとなるでしょう。